add input state

apps/web/src/routes/+page.svelte

@@ -43,7 +43,24 @@
 <DayChip day="SA" />
 <GenedChip type="SC" />
 
-<h1>Testtsetst</h1>
+<div
+  class="flex flex-col space-x-0 space-y-10 w-auto h-auto p-10 my-5 border-b-2 border-t-2"
+>
+  <h1>ตัวอย่าง Input</h1>
+  <Input
+    placeholder="โปรดกรอกรหัสผ่าน"
+    label="รหัสผ่าน"
+    desc="กรุณากรอกรหัสผ่านให้ถูกต้อง"
+  />
+  <Input
+    placeholder="โปรดกรอกรหัสผ่าน"
+    label="รหัสผ่าน"
+    desc="กรุณากรอกรหัสผ่านให้ถูกต้อง"
+    state="error"
+  />
+  <Input placeholder="สำเร็จ" label="รหัสผ่าน" desc="สำเร็จ" state="success" />
+</div>
+<!-- <h1>Testtsetst</h1>
 <CourseCard
   recommended={true}
   class="mt-4"
@@ -69,6 +86,6 @@
       Yes. It adheres to the WAI-ARIA design pattern.
     </Accordion.Content>
   </Accordion.Item>
-</Accordion.Root>
+</Accordion.Root> -->
 
 <a href="/dbdemo">Click to go to DB Demo</a>

packages/ui/src/components/atom/input/index.ts

@@ -1,9 +1,27 @@
+import type { HTMLInputAttributes } from 'svelte/elements'
+import { tv, type VariantProps } from 'tailwind-variants'
+
 import Root from './input.svelte'
 
 export type FormInputEvent<T extends Event = Event> = T & {
   currentTarget: EventTarget & HTMLInputElement
 }
 
+const inputVariants = tv({
+  base: 'flex w-full h-10 rounded-button border-none px-4 text-button2 placeholder:text-on-surface hover:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-container-lowest disabled:border-none disabled:ring-0 disabled:placeholder:text-on-surface-disabled',
+  variants: {
+    state: {
+      default:
+        'bg-surface-container-lowest hover:ring-primary hover:ring-1 focus-visible:ring-1.5 focus-visible:ring-primary',
+      error: 'ring-error ring-1.5',
+      success: 'ring-success ring-1.5',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+})
+
 export type InputEvents = {
   blur: FormInputEvent<FocusEvent>
   change: FormInputEvent<Event>
@@ -23,8 +41,12 @@ export type InputEvents = {
   wheel: FormInputEvent<WheelEvent>
 }
 
-export {
-  //
-  Root as Input,
-  Root,
+type State = VariantProps<typeof inputVariants>['state']
+
+type Props = HTMLInputAttributes & {
+  state?: State
 }
+
+type Events = InputEvents
+
+export { Root as Input, inputVariants, type Events, type Props }

packages/ui/src/components/atom/input/input.stories.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf'
+
+  import { Input } from './index.js'
+
+  const { Story } = defineMeta<typeof Input>({
+    title: 'Atom/Input',
+    component: Input,
+    tags: ['autodocs'],
+    argTypes: {
+      placeholder: {
+        control: 'text',
+        defaultValue: 'Input',
+      },
+      state: {
+        control: {
+          type: 'select',
+        },
+        options: ['default', 'error', 'success'],
+        defaultValue: 'default',
+      },
+      class: {
+        control: false,
+      },
+    },
+  })
+</script>
+
+<!-- 👇 Each story then reuses that template -->
+
+<Story name="Default" args={{ state: 'default', placeholder: 'Input' }} />
+
+<Story name="Error" args={{ state: 'error', placeholder: 'Input' }} />
+
+<Story name="Success" args={{ state: 'success', placeholder: 'Input' }} />

packages/ui/src/components/atom/input/input.svelte

@@ -2,20 +2,19 @@
   import { createBubbler, passive } from 'svelte/legacy'
 
   const bubble = createBubbler()
-  import type { HTMLInputAttributes } from 'svelte/elements'
 
   import { cn } from '@repo/utils'
 
-  import type { InputEvents } from './index.js'
+  import { inputVariants, type Events, type Props } from './index.js'
 
-  type $$Props = HTMLInputAttributes
-  type $$Events = InputEvents
+  type $$Props = Props
+  type $$Events = Events
 
   // Workaround for https://github.com/sveltejs/svelte/issues/9305
-
-  interface Props {
+  interface InputProps {
     class?: $$Props['class']
     value?: $$Props['value']
+    state?: $$Props['state']
     // Fixed in Svelte 5, but not backported to 4.x.
     readonly?: $$Props['readonly']
     [key: string]: unknown
@@ -24,16 +23,14 @@
   let {
     class: className = undefined,
     value = $bindable(undefined),
+    state = 'default',
     readonly = undefined,
     ...rest
-  }: Props = $props()
+  }: InputProps = $props()
 </script>
 
 <input
-  class={cn(
-    'flex w-full h-10 rounded-button bg-surface-container-lowest px-4 text-button2 placeholder:text-on-surface hover:outline-none hover:ring-1 hover:ring-primary focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-primary disabled:cursor-not-allowed placeholder:disabled:text-on-surface-disabled disabled:hover:ring-0',
-    className,
-  )}
+  class={cn(inputVariants({ state, className }))}
   bind:value
   {readonly}
   onblur={bubble('blur')}