init

2026-01-26 09:05:48 +08:00
commit f218a21377
20 changed files with 7774 additions and 0 deletions
--- a/ui/components/input.slint
+++ b/ui/components/input.slint
@@ -0,0 +1,74 @@
+// Input Component
+// Text input field with focus states and optional icons
+
+import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
+import { Animations } from "../utils/animations.slint";
+
+export component Input {
+    // Public properties
+    in-out property <string> value: "";
+    in property <string> placeholder: "";
+    in property <bool> disabled: false;
+    in property <bool> error: false;
+    
+    // Callbacks
+    callback edited(string);
+    callback accepted(string);
+    
+    // Internal state
+    private property <bool> focused: false;
+    
+    min-height: 40px;
+    
+    // Main container
+    Rectangle {
+        background: Theme.colors.background;
+        border-radius: SpacingSystem.radius.md;
+        border-width: 1px;
+        border-color: error ? Theme.colors.destructive : 
+                     focused ? Theme.colors.ring : 
+                     Theme.colors.input;
+        
+        // Smooth border color transition
+        animate border-color { 
+            duration: Animations.durations.fast; 
+            easing: Animations.ease-in-out; 
+        }
+        
+        HorizontalLayout {
+            padding: SpacingSystem.spacing.s2;
+            spacing: SpacingSystem.spacing.s2;
+            
+            // Text input field
+            input-field := TextInput {
+                text <=> value;
+                enabled: !disabled;
+                font-size: Typography.sizes.base;
+                color: Theme.colors.foreground;
+                selection-background-color: Theme.colors.primary;
+                selection-foreground-color: Theme.colors.primary-foreground;
+                
+                edited => {
+                    root.edited(self.text);
+                }
+                
+                accepted => {
+                    root.accepted(self.text);
+                }
+            }
+        }
+        
+        // Focus detection
+        FocusScope {
+            key-pressed(event) => {
+                focused = input-field.has-focus;
+                return accept;
+            }
+            
+            key-released(event) => {
+                focused = input-field.has-focus;
+                return accept;
+            }
+        }
+    }
+}