feat(packages/ui-svelte): add input component

apps/sveltekit-example-app/src/routes/sign-up/+page.svelte

@@ -3,7 +3,7 @@
   import { zodClient } from 'sveltekit-superforms/adapters'
 
   import { schema } from '$lib'
-  import { Button } from '@packages/ui-svelte/atoms/button'
+  import { Button } from '@packages/ui-svelte'
 
   import type { PageData } from './$types.js'
 

packages/ui-svelte/package.json

@@ -4,7 +4,11 @@
   "description": "UI Component Library for Svelte and SvelteKit",
   "type": "module",
   "exports": {
-    "./atoms/*": "./src/components/atoms/*/index.ts",
+    ".": {
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
     "./styles/*": "./src/styles/*",
     "./tailwind.config.js": "./tailwind.config.js"
   },

packages/ui-svelte/src/components/atoms/input/index.ts

@@ -0,0 +1,29 @@
+import Root from './input.svelte'
+
+export type FormInputEvent<T extends Event = Event> = T & {
+  currentTarget: EventTarget & HTMLInputElement
+}
+
+export interface InputEvents {
+  blur: FormInputEvent<FocusEvent>
+  change: FormInputEvent<Event>
+  click: FormInputEvent<MouseEvent>
+  focus: FormInputEvent<FocusEvent>
+  focusin: FormInputEvent<FocusEvent>
+  focusout: FormInputEvent<FocusEvent>
+  keydown: FormInputEvent<KeyboardEvent>
+  keypress: FormInputEvent<KeyboardEvent>
+  keyup: FormInputEvent<KeyboardEvent>
+  mouseover: FormInputEvent<MouseEvent>
+  mouseenter: FormInputEvent<MouseEvent>
+  mouseleave: FormInputEvent<MouseEvent>
+  paste: FormInputEvent<ClipboardEvent>
+  input: FormInputEvent<InputEvent>
+  wheel: FormInputEvent<WheelEvent>
+}
+
+export {
+  Root,
+  //
+  Root as Input,
+}

packages/ui-svelte/src/components/atoms/input/input.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from '../../../utils/index.js'
+
+  import type { InputEvents } from './index.js'
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  type $$Props = HTMLInputAttributes
+  type $$Events = InputEvents
+
+  let className: $$Props['class'] = undefined
+  export let value: $$Props['value'] = undefined
+  export { className as class }
+
+  // Workaround for https://github.com/sveltejs/svelte/issues/9305
+  // Fixed in Svelte 5, but not backported to 4.x.
+  export let readonly: $$Props['readonly'] = undefined
+</script>
+
+<input
+  class={cn(
+    'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
+  bind:value
+  {readonly}
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:paste
+  on:input
+  on:wheel
+  {...$$restProps} />

packages/ui-svelte/src/index.ts

@@ -0,0 +1,44 @@
+/**
+ * src/components/atoms/accordion
+ */
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './components/atoms/accordion/index.js'
+
+/**
+ * src/components/atoms/button
+ */
+export {
+  Button,
+  type ButtonEvents,
+  type ButtonProps,
+  buttonVariants,
+} from './components/atoms/button/index.js'
+
+/**
+ * src/components/atoms/form
+ */
+export {
+  FormField,
+  FormControl,
+  FormDescription,
+  FormLabel,
+  FormFieldErrors,
+  FormFieldset,
+  FormLegend,
+  FormElementField,
+  FormButton,
+} from './components/atoms/form/index.js'
+
+/**
+ * src/components/atoms/input
+ */
+export { Input } from './components/atoms/input/index.js'
+
+/**
+ * src/components/atoms/label
+ */
+export { Label } from './components/atoms/label/index.js'