diff --git a/docs/components/content/ComponentPreview.vue b/docs/components/content/ComponentPreview.vue
index 7e570db..4022247 100644
--- a/docs/components/content/ComponentPreview.vue
+++ b/docs/components/content/ComponentPreview.vue
@@ -1,20 +1,9 @@
-
+
+
+
-
+
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 6a853f6..9f28fbc 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -1,4 +1,5 @@
export * from './button'
export * from './message'
+export * from './input'
export * from './utils'
diff --git a/src/runtime/types/input.d.ts b/src/runtime/types/input.d.ts
new file mode 100644
index 0000000..2b94764
--- /dev/null
+++ b/src/runtime/types/input.d.ts
@@ -0,0 +1,24 @@
+import type { AppConfig } from 'nuxt/schema'
+import type { InputHTMLAttributes } from 'vue'
+import type { input } from '../ui.config'
+import type { ExtractDeepKey } from './utils'
+import type colors from '#ray-colors'
+
+export type InputSize =
+ | keyof typeof input.size
+ | ExtractDeepKey
+export type InputColor =
+ | ExtractDeepKey
+ | (typeof colors)[number]
+export type InputVariant =
+ | keyof typeof input.variant
+ | ExtractDeepKey
+export type InputType = Extract<
+ 'text' | 'password' | 'number' | 'url' | 'email' | 'search' | 'file' | 'hidden',
+ InputHTMLAttributes['type']
+>
+export type InputModelModifiers = {
+ number?: boolean
+ trim?: boolean
+ lazy?: boolean
+}
diff --git a/src/runtime/ui.config/elements/button.ts b/src/runtime/ui.config/elements/button.ts
index 2b00b33..20fd392 100644
--- a/src/runtime/ui.config/elements/button.ts
+++ b/src/runtime/ui.config/elements/button.ts
@@ -1,3 +1,5 @@
+import { standard } from '..'
+
export default {
base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 flex-shrink-0 transition',
rounded: 'rounded-lg',
@@ -5,28 +7,13 @@ export default {
block: 'w-full flex justify-center items-center',
inline: 'inline-flex items-center',
size: {
- '2xs': 'text-xs',
- 'xs': 'text-xs',
- 'sm': 'text-sm',
- 'md': 'text-sm',
- 'lg': 'text-sm',
- 'xl': 'text-base',
+ ...standard.size,
},
padding: {
- '2xs': 'px-2 py-1',
- 'xs': 'px-2.5 py-1.5',
- 'sm': 'px-2.5 py-1.5',
- 'md': 'px-3 py-2',
- 'lg': 'px-3.5 py-2.5',
- 'xl': 'px-3.5 py-2.5',
+ ...standard.padding,
},
square: {
- '2xs': 'p-1',
- 'xs': 'p-1.5',
- 'sm': 'p-1.5',
- 'md': 'p-2',
- 'lg': 'p-2.5',
- 'xl': 'p-2.5',
+ ...standard.square,
},
icon: {
base: 'flex-shrink-0',
diff --git a/src/runtime/ui.config/forms/input.ts b/src/runtime/ui.config/forms/input.ts
new file mode 100644
index 0000000..fac209e
--- /dev/null
+++ b/src/runtime/ui.config/forms/input.ts
@@ -0,0 +1,23 @@
+import { standard } from '..'
+
+export default {
+ wrapper: 'relative',
+ base: 'relative w-full block focus:outline-none disabled:cursor-not-allowed disabled:opacity-70 transition',
+ placeholder: 'placeholder:text-gray-400 dark:placeholder:text-gray-500',
+ rounded: 'rounded-md',
+ size: {
+ ...standard.size,
+ },
+ padding: {
+ ...standard.padding,
+ },
+ variant: {
+ outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
+ plain: 'bg-transparent',
+ },
+ default: {
+ size: 'sm',
+ color: 'primary',
+ variant: 'outline',
+ },
+}
diff --git a/src/runtime/ui.config/index.ts b/src/runtime/ui.config/index.ts
index 3dd4b23..12f22a7 100644
--- a/src/runtime/ui.config/index.ts
+++ b/src/runtime/ui.config/index.ts
@@ -1,6 +1,12 @@
+// universal
+export { default as standard } from './standard'
+
// elements
export { default as button } from './elements/button'
+// forms
+export { default as input } from './forms/input'
+
// overlays
export { default as message } from './overlays/message'
export { default as messages } from './overlays/messages'
diff --git a/src/runtime/ui.config/standard.ts b/src/runtime/ui.config/standard.ts
new file mode 100644
index 0000000..27e2bf9
--- /dev/null
+++ b/src/runtime/ui.config/standard.ts
@@ -0,0 +1,34 @@
+export default {
+ size: {
+ '2xs': 'text-xs',
+ 'xs': 'text-xs',
+ 'sm': 'text-sm',
+ 'md': 'text-sm',
+ 'lg': 'text-sm',
+ 'xl': 'text-base',
+ },
+ gap: {
+ '2xs': 'gap-x-1',
+ 'xs': 'gap-x-1.5',
+ 'sm': 'gap-x-1.5',
+ 'md': 'gap-x-2',
+ 'lg': 'gap-x-2.5',
+ 'xl': 'gap-x-2.5',
+ },
+ padding: {
+ '2xs': 'px-2 py-1',
+ 'xs': 'px-2.5 py-1.5',
+ 'sm': 'px-2.5 py-1.5',
+ 'md': 'px-3 py-2',
+ 'lg': 'px-3.5 py-2.5',
+ 'xl': 'px-3.5 py-2.5',
+ },
+ square: {
+ '2xs': 'p-1',
+ 'xs': 'p-1.5',
+ 'sm': 'p-1.5',
+ 'md': 'p-2',
+ 'lg': 'p-2.5',
+ 'xl': 'p-2.5',
+ },
+} as const
diff --git a/src/runtime/utils/colors.ts b/src/runtime/utils/colors.ts
index 942a878..8ceb802 100644
--- a/src/runtime/utils/colors.ts
+++ b/src/runtime/utils/colors.ts
@@ -161,6 +161,24 @@ const safelistForComponent: Record<
variants: ['dark'],
},
],
+ input: colorsToRegex => [
+ {
+ pattern: RegExp(`^text-(${colorsToRegex})-400$`),
+ variants: ['placeholder'],
+ },
+ {
+ pattern: RegExp(`^text-(${colorsToRegex})-500$`),
+ variants: ['dark:placeholder'],
+ },
+ {
+ pattern: RegExp(`^ring-(${colorsToRegex})-400$`),
+ variants: ['dark:focus'],
+ },
+ {
+ pattern: RegExp(`^ring-(${colorsToRegex})-500$`),
+ variants: ['focus'],
+ },
+ ],
}
export const generateSafelist = (colors: string[], globalColors: string[]) => {