feat: add input component and examples

apps/www/src/content/docs/docs/components/input.mdx

@@ -0,0 +1,53 @@
+---
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+
+<ComponentPreview name="input-demo" />
+
+## Installation
+
+<Tabs>
+  <TabItem label="CLI">
+    ```bash frame="code"
+    npx shadcn-ng@latest add input
+    ```
+  </TabItem>
+
+  <TabItem label="Manual">
+    <Steps>
+        1. Copy and paste the following code into your project.
+            <ComponentSource name="input" />
+
+        2. Update the import paths to match your project setup.
+    </Steps>
+
+  </TabItem>
+</Tabs>
+
+## Usage
+
+```ts
+import { UbInputDirective } from "@/components/ui/input.directive";
+```
+
+```html
+<input type="text" ubInput />
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="input-demo" />
+
+### File
+
+<ComponentPreview name="input-file" />
+
+### Disabled
+
+<ComponentPreview name="input-disabled" />

apps/www/src/registry/default/example/input-demo.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbInputDirective } from "@/registry/default/ui/input.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbInputDirective],
+  template: ` <input ubInput type="text" placeholder="Email" /> `,
+})
+export class InputDemoComponent {}
+
+export default InputDemoComponent;

apps/www/src/registry/default/example/input-disabled.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbInputDirective } from "@/registry/default/ui/input.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbInputDirective],
+  template: ` <input disabled ubInput type="text" placeholder="Email" /> `,
+})
+export class InputDisabledDemoComponent {}
+
+export default InputDisabledDemoComponent;

apps/www/src/registry/default/example/input-file.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { UbInputDirective } from "@/registry/default/ui/input.directive";
+import { UbLabelDirective } from "@/registry/default/ui/label.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbInputDirective, UbLabelDirective],
+  template: `
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <label ubLabel htmlFor="picture">Picture</label>
+      <input ubInput id="picture" type="file" />
+    </div>
+  `,
+})
+export class InputFileDemoComponent {}
+
+export default InputFileDemoComponent;

apps/www/src/registry/new-york/example/input-demo.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbInputDirective } from "@/registry/new-york/ui/input.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbInputDirective],
+  template: ` <input ubInput type="text" placeholder="Email" /> `,
+})
+export class InputDemoComponent {}
+
+export default InputDemoComponent;

apps/www/src/registry/new-york/example/input-disabled.ts

@@ -0,0 +1,12 @@
+import { Component } from "@angular/core";
+
+import { UbInputDirective } from "@/registry/new-york/ui/input.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbInputDirective],
+  template: ` <input disabled ubInput type="text" placeholder="Email" /> `,
+})
+export class InputDisabledDemoComponent {}
+
+export default InputDisabledDemoComponent;

apps/www/src/registry/new-york/example/input-file.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { UbInputDirective } from "@/registry/new-york/ui/input.directive";
+import { UbLabelDirective } from "@/registry/new-york/ui/label.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbInputDirective, UbLabelDirective],
+  template: `
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <label ubLabel htmlFor="picture">Picture</label>
+      <input ubInput id="picture" type="file" />
+    </div>
+  `,
+})
+export class InputFileDemoComponent {}
+
+export default InputFileDemoComponent;