From e466a7afe8768b34b884bef05643657fc10cb4eb Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sun, 16 Mar 2025 17:31:18 +0800
Subject: [PATCH] feat(stage-ui): more component

---
 .../Form/Checkbox/Checkbox.story.vue          |  72 +++++++++
 .../src/components/Form/Input/Input.story.vue | 152 ++++++++++++++++++
 .../src/components/Form/Input/Input.vue       |   3 +
 3 files changed, 227 insertions(+)
 create mode 100644 packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
 create mode 100644 packages/stage-ui/src/components/Form/Input/Input.story.vue

diff --git a/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue b/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
new file mode 100644
index 000000000..d5f915c56
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Checkbox from './Checkbox.vue'
+
+const checkedValue = ref(true)
+const uncheckedValue = ref(false)
+const interactiveValue = ref(false)
+</script>
+
+<template>
+  <Story
+    title="Checkbox"
+    group="form"
+    :layout="{ type: 'grid', width: 600 }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant
+      id="checked"
+      title="Checked"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Checkbox v-model="checkedValue" />
+      </div>
+    </Variant>
+
+    <Variant
+      id="unchecked"
+      title="Unchecked"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Checkbox v-model="uncheckedValue" />
+      </div>
+    </Variant>
+
+    <Variant
+      id="interactive"
+      title="Interactive"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <div class="flex items-center gap-4">
+          <Checkbox v-model="interactiveValue" />
+          <div class="text-sm">
+            Current value: {{ interactiveValue ? 'On' : 'Off' }}
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant
+      id="sizes"
+      title="Different Contexts"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center gap-2">
+            <Checkbox v-model="checkedValue" />
+            <span class="text-sm">Default checkbox in a row</span>
+          </div>
+
+          <div class="flex items-center gap-2 bg-neutral-100 p-3 dark:bg-neutral-800">
+            <Checkbox v-model="checkedValue" />
+            <span class="text-sm">Checkbox in a different background</span>
+          </div>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Input/Input.story.vue b/packages/stage-ui/src/components/Form/Input/Input.story.vue
new file mode 100644
index 000000000..1095808a2
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Input/Input.story.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Input from './Input.vue'
+
+const textValue = ref('')
+const filledTextValue = ref('Sample text')
+const passwordValue = ref('secret-password')
+const emailValue = ref('user@example.com')
+const numberValue = ref('42')
+const urlValue = ref('https://example.com')
+</script>
+
+<template>
+  <Story
+    title="Input"
+    group="form"
+    :layout="{ type: 'grid', width: 600 }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant
+      id="text-empty"
+      title="Text Input (Empty)"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="textValue"
+          placeholder="Enter text..."
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="text-filled"
+      title="Text Input (Filled)"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="filledTextValue"
+          placeholder="Enter text..."
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="password"
+      title="Password Input"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="passwordValue"
+          type="password"
+          placeholder="Enter password..."
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="email"
+      title="Email Input"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="emailValue"
+          type="email"
+          placeholder="Enter email..."
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="number"
+      title="Number Input"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="numberValue"
+          type="number"
+          placeholder="Enter number..."
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="url"
+      title="URL Input"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="urlValue"
+          type="url"
+          placeholder="Enter URL..."
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="disabled"
+      title="Disabled Input"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="filledTextValue"
+          placeholder="This input is disabled"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="readonly"
+      title="Readonly Input"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="filledTextValue"
+          placeholder="This input is readonly"
+          readonly
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="with-classes"
+      title="With Custom Classes"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="textValue"
+          placeholder="Custom styled input"
+          class="border-primary-500 dark:border-primary-400"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="with-autofocus"
+      title="With Autofocus"
+    >
+      <div class="bg-white p-4 dark:bg-neutral-900">
+        <Input
+          v-model="textValue"
+          placeholder="This input has autofocus"
+          autofocus
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Input/Input.vue b/packages/stage-ui/src/components/Form/Input/Input.vue
index 0e8d11be6..142de76ac 100644
--- a/packages/stage-ui/src/components/Form/Input/Input.vue
+++ b/packages/stage-ui/src/components/Form/Input/Input.vue
@@ -12,7 +12,10 @@ const modelValue = defineModel<string>({ required: true })
     :type="props.type || 'text'"
     border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
     transition="all duration-250 ease-in-out"
+    text="disabled:neutral-400 dark:disabled:neutral-600"
+    cursor="disabled:not-allowed"
     w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
+    shadow="sm"
     bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
   >
 </template>