spoko-design-system 0.5.7 → 0.5.9

package/package.json

@@ -1,124 +1,124 @@
-{
-  "name": "spoko-design-system",
-  "version": "0.5.7",
-  "private": false,
-  "main": "./index.ts",
-  "module": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": {
-      "import": "./index.ts",
-      "require": "./index.ts"
-    },
-    "./styles/*": "./src/styles/*",
-    "./icons": "./icon.config.ts",
-    "./icon-collections": "./icon.collections.ts",
-    "./uno-config": "./uno-config/index.ts"
-  },
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/polo-blue/sds"
-  },
-  "author": {
-    "name": "spokospace",
-    "email": "szymon@spoko.space",
-    "url": "https://spoko.space"
-  },
-  "homepage": "https://sds.spoko.space/",
-  "license": "MIT",
-  "keywords": [
-    "astro-starter",
-    "seo",
-    "astro",
-    "sds design system",
-    "spoko design system"
-  ],
-  "dependencies": {
-    "@algolia/client-search": "^5.20.3",
-    "@astrojs/mdx": "^4.0.8",
-    "@astrojs/node": "^9.1.1",
-    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/ts-plugin": "^1.10.4",
-    "@astrojs/vue": "^5.0.7",
-    "@docsearch/css": "^3.9.0",
-    "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/bi": "^1.2.2",
-    "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.7",
-    "@iconify-json/circle-flags": "^1.2.6",
-    "@iconify-json/ei": "^1.2.2",
-    "@iconify-json/el": "^1.2.1",
-    "@iconify-json/eos-icons": "^1.2.2",
-    "@iconify-json/et": "^1.2.1",
-    "@iconify-json/flowbite": "^1.2.4",
-    "@iconify-json/fluent": "^1.2.14",
-    "@iconify-json/fluent-emoji": "1.2.3",
-    "@iconify-json/ic": "^1.2.2",
-    "@iconify-json/icon-park-outline": "^1.2.2",
-    "@iconify-json/la": "^1.2.1",
-    "@iconify-json/material-symbols-light": "^1.2.14",
-    "@iconify-json/mdi": "^1.2.3",
-    "@iconify-json/noto-v1": "^1.2.1",
-    "@iconify-json/octicon": "^1.2.5",
-    "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.26",
-    "@iconify-json/system-uicons": "^1.2.2",
-    "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.310",
-    "@iconify/vue": "^4.3.0",
-    "@playform/compress": "^0.1.7",
-    "@playform/inline": "^0.1.1",
-    "@unocss/astro": "^66.0.0",
-    "@unocss/preset-attributify": "^66.0.0",
-    "@unocss/preset-typography": "^66.0.0",
-    "@unocss/preset-uno": "^66.0.0",
-    "@unocss/preset-web-fonts": "^66.0.0",
-    "@unocss/preset-wind": "^66.0.0",
-    "@unocss/reset": "^66.0.0",
-    "@vite-pwa/astro": "^0.5.0",
-    "@vueuse/core": "^12.7.0",
-    "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.5",
-    "astro-meta-tags": "^0.3.1",
-    "astro-navbar": "^2.3.9",
-    "astro-pagefind": "^1.8.1",
-    "astro-remote": "^0.3.3",
-    "dotenv": "^16.4.7",
-    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.4",
-    "i18next-fs-backend": "^2.6.0",
-    "i18next-http-backend": "^3.0.2",
-    "i18next-vue": "^5.2.0",
-    "swiper": "^11.2.4",
-    "unocss": "^66.0.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@types/gtag.js": "^0.0.20",
-    "@types/node": "^22.13.5",
-    "@unocss/transformer-variant-group": "^66.0.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/compiler-sfc": "^3.5.13",
-    "astro": "^5.3.1",
-    "unocss": "^0.65.0",
-    "vite": "^6.2.0"
-  },
-  "packageManager": "pnpm@9.15.3",
-  "pnpm": {
-    "default": "9.15.3",
-    "overrides": {
-      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
-      "sharp@<0.30.5": ">=0.30.5"
-    }
-  },
-  "engines": {
-    "node": ">=18.14.1",
-    "pnpm": ">=9.15.3"
-  }
-}
+{
+  "name": "spoko-design-system",
+  "version": "0.5.9",
+  "private": false,
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": "./index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./icons": "./icon.config.ts",
+    "./icon-collections": "./icon.collections.ts",
+    "./uno-config": "./uno-config/index.ts"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polo-blue/sds"
+  },
+  "author": {
+    "name": "spokospace",
+    "email": "szymon@spoko.space",
+    "url": "https://spoko.space"
+  },
+  "homepage": "https://sds.spoko.space/",
+  "license": "MIT",
+  "keywords": [
+    "astro-starter",
+    "seo",
+    "astro",
+    "sds design system",
+    "spoko design system"
+  ],
+  "dependencies": {
+    "@algolia/client-search": "^5.20.3",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/node": "^9.1.1",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@astrojs/vue": "^5.0.7",
+    "@docsearch/css": "^3.9.0",
+    "@iconify-json/ant-design": "^1.2.5",
+    "@iconify-json/bi": "^1.2.2",
+    "@iconify-json/bx": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.7",
+    "@iconify-json/circle-flags": "^1.2.6",
+    "@iconify-json/ei": "^1.2.2",
+    "@iconify-json/el": "^1.2.1",
+    "@iconify-json/eos-icons": "^1.2.2",
+    "@iconify-json/et": "^1.2.1",
+    "@iconify-json/flowbite": "^1.2.4",
+    "@iconify-json/fluent": "^1.2.14",
+    "@iconify-json/fluent-emoji": "1.2.3",
+    "@iconify-json/ic": "^1.2.2",
+    "@iconify-json/icon-park-outline": "^1.2.2",
+    "@iconify-json/la": "^1.2.1",
+    "@iconify-json/material-symbols-light": "^1.2.14",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/noto-v1": "^1.2.1",
+    "@iconify-json/octicon": "^1.2.5",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.26",
+    "@iconify-json/system-uicons": "^1.2.2",
+    "@iconify-json/uil": "^1.2.3",
+    "@iconify/json": "^2.2.310",
+    "@iconify/vue": "^4.3.0",
+    "@playform/compress": "^0.1.7",
+    "@playform/inline": "^0.1.1",
+    "@unocss/astro": "66.1.0-beta.2",
+    "@unocss/preset-attributify": "66.1.0-beta.2",
+    "@unocss/preset-typography": "66.1.0-beta.2",
+    "@unocss/preset-uno": "66.1.0-beta.2",
+    "@unocss/preset-web-fonts": "66.1.0-beta.2",
+    "@unocss/preset-wind": "66.1.0-beta.2",
+    "@unocss/reset": "66.1.0-beta.2",
+    "@vite-pwa/astro": "^0.5.0",
+    "@vueuse/core": "^12.7.0",
+    "astro-i18next": "1.0.0-beta.21",
+    "astro-icon": "^1.1.5",
+    "astro-meta-tags": "^0.3.1",
+    "astro-navbar": "^2.3.9",
+    "astro-pagefind": "^1.8.1",
+    "astro-remote": "^0.3.3",
+    "dotenv": "^16.4.7",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-fs-backend": "^2.6.0",
+    "i18next-http-backend": "^3.0.2",
+    "i18next-vue": "^5.2.0",
+    "swiper": "^11.2.4",
+    "unocss": "66.1.0-beta.2",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@types/gtag.js": "^0.0.20",
+    "@types/node": "^22.13.5",
+    "@unocss/transformer-variant-group": "66.1.0-beta.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/compiler-sfc": "^3.5.13",
+    "astro": "^5.3.1",
+    "unocss": "^0.65.0",
+    "vite": "^6.2.0"
+  },
+  "packageManager": "pnpm@9.15.3",
+  "pnpm": {
+    "default": "9.15.3",
+    "overrides": {
+      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
+      "sharp@<0.30.5": ">=0.30.5"
+    }
+  },
+  "engines": {
+    "node": ">=18.14.1",
+    "pnpm": ">=9.15.3"
+  }
+}

package/src/components/Input.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+
+interface InputProps {
+  id?: string;
+  name?: string;
+  label: string;
+  variant?: 'filled' | 'standard';
+  type?: string;
+  modelValue?: string | number;
+  required?: boolean;
+  rows?: number;
+  placeholder?: string;
+  error?: string | boolean;
+  success?: string | boolean;
+  size?: 'sm' | 'md' | 'lg';
+  class?: string;
+  [key: string]: any;
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  id: () => `input-${Math.random().toString(36).substring(2, 9)}`,
+  name: undefined,
+  variant: 'standard',
+  type: 'text',
+  modelValue: '',
+  required: false,
+  rows: 3,
+  placeholder: ' ', // space for "floating label"
+  error: false,
+  success: false,
+  size: 'md',
+  class: ''
+});
+
+const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur']);
+
+// Handle external attrs
+const attrs = useAttrs();
+
+// Compute wrapper class - uses existing shortcut
+const wrapperClass = computed(() => `input-wrapper-${props.variant}`);
+
+// Compute input classes - uses shortcuts
+const inputClass = computed(() => {
+  const classes = ['input-base', 'input-placeholder', `input-${props.variant}`];
+  
+  // Add size class
+  if (props.size) classes.push(`input-${props.size}`);
+  
+  // Add textarea class if needed
+  if (props.type === 'textarea') classes.push('input-textarea');
+  
+  // Add status classes
+  if (props.error) classes.push('input-error');
+  else if (props.success) classes.push('input-success');
+  
+  // Add custom classes
+  if (props.class) classes.push(props.class);
+  
+  return classes.join(' ');
+});
+
+// Compute label classes - using optimized shortcuts
+const labelClass = computed(() => {
+  const classes = [
+    // Base label style
+    'input-label-base', 
+    
+    // Position styling
+    `input-label-${props.variant}`, 
+    
+    // State styling - contains all transformations for the specific variant
+    `input-label-${props.variant}-state`
+  ];
+  
+  // Add size class
+  if (props.size) classes.push(`input-label-${props.size}`);
+  
+  // Add status classes
+  if (props.error) classes.push('input-label-error');
+  else if (props.success) classes.push('input-label-success');
+  
+  return classes.join(' ');
+});
+
+// Event handlers
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+  emit('update:modelValue', target.value);
+  emit('input', event);
+};
+
+const handleFocus = (event: FocusEvent) => emit('focus', event);
+const handleBlur = (event: FocusEvent) => emit('blur', event);
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <textarea
+      v-if="type === 'textarea'"
+      :id="id"
+      :name="name || id"
+      :rows="rows"
+      :required="required"
+      :class="inputClass + ' peer'"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    ></textarea>
+    
+    <input
+      v-else
+      :type="type"
+      :id="id"
+      :name="name || id"
+      :required="required"
+      :class="inputClass + ' peer'"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    />
+    
+    <label
+      :for="id"
+      :class="labelClass"
+      style="transform-origin: top left;"
+    >
+      {{ label }}
+      <span v-if="required" class="text-red-500 ml-1">*</span>
+    </label>
+    
+    <div 
+      v-if="error && typeof error === 'string'" 
+      class="input-error-message"
+    >
+      {{ error }}
+    </div>
+    
+    <div 
+      v-if="success && typeof success === 'string'" 
+      class="input-success-message"
+    >
+      {{ success }}
+    </div>
+  </div>
+</template>

package/src/pages/components/input.mdx

@@ -2,18 +2,7 @@
 title: Input
 layout: ../../layouts/MainLayout.astro
 ---
-import MainInput from '../../components/MainInput.vue'
-import Input from '../../components/Input.astro';
-
-# Basic Input text
-
-<div class="component-preview">
-    <MainInput label="Name"></MainInput>
-</div>
-
-```js
-<MainInput type="text" value="Hello world!"></MainInput>
-```
+import Input from '../../components/Input.vue';
 
 # Floating Label Input
 <div class="component-preview">
@@ -55,6 +44,7 @@ import Input from '../../components/Input.astro';
         id="name-filled"
         label="Floating filled"
         variant="filled"
+        
         type="textarea"
         />
         <Input
@@ -82,4 +72,297 @@ import Input from '../../components/Input.astro';
   variant="standard"
   type="textarea"
 />
-```
+```
+
+# Input with Error State
+The Input component supports error states to provide validation feedback to users. You can pass a string as the error prop to display a specific error message.
+
+<div class="component-preview">
+    <div class="bg-white grid items-end w-full gap-6 md:grid-cols-2 px-4 py-6">
+        <Input
+            id="error-filled"
+            label="With error"
+            variant="filled"
+            error="This field is required"
+        />
+        <Input
+            id="error-standard" 
+            label="With error"
+            variant="standard"
+            error="Please enter a valid email"
+        />
+    </div>
+</div>
+    
+```js
+// Error with filled variant
+<Input
+  id="error-filled"
+  label="With error"
+  variant="filled"
+  error="This field is required"
+/>
+
+// Error with standard variant
+<Input
+  id="error-standard" 
+  label="With error"
+  variant="standard"
+  error="Please enter a valid email"
+/>
+```
+
+You can also pass a boolean `true` to indicate an error state without a message:
+
+```js
+<Input
+  label="Username"
+  error={true}
+/>
+```
+
+# Input with Success State
+Similar to errors, you can indicate a successful validation state using the success prop:
+
+<div class="component-preview">
+    <div class="bg-white grid items-end w-full gap-6 md:grid-cols-2 px-4 py-6">
+        <Input
+            id="success-filled"
+            label="With success"
+            variant="filled"
+            success="Username is available"
+        />
+        <Input
+            id="success-standard" 
+            label="With success"
+            variant="standard"
+            success={true}
+        />
+    </div>
+</div>
+    
+```js
+// Success with message
+<Input
+  id="success-filled"
+  label="With success"
+  variant="filled"
+  success="Username is available"
+/>
+
+// Success without message
+<Input
+  id="success-standard" 
+  label="With success"
+  variant="standard"
+  success={true}
+/>
+```
+
+# Input Sizes
+The Input component supports different sizes: `sm`, `md` (default), and `lg`.
+
+<div class="component-preview">
+    <div class="bg-white grid items-end w-full gap-6 px-4 py-6">
+        <Input
+            id="small-input"
+            label="Small input"
+            variant="filled"
+            size="sm"
+        />
+        <Input
+            id="medium-input" 
+            label="Medium input (default)"
+            variant="filled"
+            size="md"
+        />
+        <Input
+            id="large-input" 
+            label="Large input"
+            variant="filled"
+            size="lg"
+        />
+    </div>
+</div>
+    
+```js
+// Small input
+<Input
+  id="small-input"
+  label="Small input"
+  variant="filled"
+  size="sm"
+/>
+
+// Medium input (default)
+<Input
+  id="medium-input" 
+  label="Medium input (default)"
+  variant="filled"
+  size="md"
+/>
+
+// Large input
+<Input
+  id="large-input" 
+  label="Large input"
+  variant="filled"
+  size="lg"
+/>
+```
+
+# Required Input
+You can mark an input as required, which will add a red asterisk to the label:
+
+<div class="component-preview">
+    <div class="bg-white grid items-end w-full gap-6 md:grid-cols-2 px-4 py-6">
+        <Input
+            id="required-filled"
+            label="Required field"
+            variant="filled"
+            required
+        />
+        <Input
+            id="required-standard" 
+            label="Required field"
+            variant="standard"
+            required
+        />
+    </div>
+</div>
+    
+```js
+<Input
+  id="required-filled"
+  label="Required field"
+  variant="filled"
+  required
+/>
+```
+
+# Input Types
+The Input component supports all standard HTML input types, plus a special `textarea` type:
+
+<div class="component-preview">
+    <div class="bg-white grid items-end w-full gap-6 md:grid-cols-2 px-4 py-6">
+        <Input
+            id="email-input"
+            label="Email"
+            type="email"
+            variant="filled"
+        />
+        <Input
+            id="password-input" 
+            label="Password"
+            type="password"
+            variant="standard"
+        />
+        <Input
+            id="number-input" 
+            label="Age"
+            type="number"
+            variant="filled"
+        />
+        <Input
+            id="date-input" 
+            label="Date"
+            type="date"
+            variant="standard"
+        />
+    </div>
+</div>
+    
+```js
+// Email input
+<Input
+  id="email-input"
+  label="Email"
+  type="email"
+  variant="filled"
+/>
+
+// Password input
+<Input
+  id="password-input" 
+  label="Password"
+  type="password"
+  variant="standard"
+/>
+
+// Number input
+<Input
+  id="number-input" 
+  label="Age"
+  type="number"
+  variant="filled"
+/>
+
+// Date input
+<Input
+  id="date-input" 
+  label="Date"
+  type="date"
+  variant="standard"
+/>
+```
+
+# Using with v-model
+The Input component fully supports Vue's v-model for two-way binding:
+
+```js
+<script setup>
+import { ref } from 'vue';
+import { Input } from 'spoko-design-system';
+
+const username = ref('');
+const email = ref('');
+</script>
+
+<template>
+  <Input
+    v-model="username"
+    label="Username"
+    variant="filled"
+  />
+  
+  <Input
+    v-model="email"
+    label="Email"
+    variant="standard"
+    type="email"
+  />
+  
+  <div>
+    Current values:
+    <p>Username: {{ username }}</p>
+    <p>Email: {{ email }}</p>
+  </div>
+</template>
+```
+
+# Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | Random ID | Unique identifier for the input |
+| `name` | `string` | Same as id | Name attribute for the input field |
+| `label` | `string` | Required | Label text for the input |
+| `variant` | `'standard' \| 'filled'` | `'standard'` | Visual style variant |
+| `type` | `string` | `'text'` | Input type (all HTML types + 'textarea') |
+| `modelValue` | `string \| number` | `''` | Value for v-model binding |
+| `required` | `boolean` | `false` | Whether the field is required |
+| `rows` | `number` | `3` | Number of rows (for textarea only) |
+| `placeholder` | `string` | `' '` | Placeholder text (space for floating label) |
+| `error` | `string \| boolean` | `false` | Error state or message |
+| `success` | `string \| boolean` | `false` | Success state or message |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the input |
+| `class` | `string` | `''` | Additional CSS classes |
+
+# Events
+
+| Event | Parameters | Description |
+|-------|------------|-------------|
+| `update:modelValue` | `(value: string \| number)` | Emitted when input value changes (for v-model) |
+| `input` | `(event: Event)` | Native input event |
+| `focus` | `(event: FocusEvent)` | Native focus event |
+| `blur` | `(event: FocusEvent)` | Native blur event |

package/uno-config/index.ts

@@ -14,6 +14,26 @@ import {
 import { shortcuts } from './theme/shortcuts';
 import { theme } from './theme';
 
+// List of peer selectors we want to preserve during build
+const peerSelectorClasses = [
+  // Focus state classes
+  'peer-focus:text-blue-light',
+  'peer-focus:dark:text-blue-lightest',
+  'peer-focus:scale-75',
+  'peer-focus:-translate-y-6',
+  'peer-focus:-translate-y-4',
+  'peer-focus:start-0',
+  
+  // Placeholder shown classes
+  'peer-placeholder-shown:scale-100',
+  'peer-placeholder-shown:translate-y-0',
+  
+  // Not placeholder shown classes
+  'peer-not-placeholder-shown:scale-75',
+  'peer-not-placeholder-shown:-translate-y-6',
+  'peer-not-placeholder-shown:-translate-y-4',
+];
+
 interface CustomConfig extends Partial<UserConfig> {
   shortcuts?: UserShortcuts;
   theme?: Partial<typeof theme>;
@@ -33,8 +53,159 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       ...theme,
       ...(customConfig.theme || {})
     },
+    // Enhanced variants to better handle peer selectors
+    variants: [
+      // Add specific peer variant support
+      (matcher) => {
+        if (!matcher.startsWith('peer-'))
+          return matcher;
+        
+        const peerVariant = matcher.slice(5);
+        const selectorMap = {
+          'focus:': (s) => `.peer:focus ~ ${s}`,
+          'hover:': (s) => `.peer:hover ~ ${s}`,
+          'placeholder-shown:': (s) => `.peer:placeholder-shown ~ ${s}`,
+          'not-placeholder-shown:': (s) => `.peer:not(:placeholder-shown) ~ ${s}`,
+        };
+        
+        // Check for nested variants like 'peer-focus:text-blue'
+        for (const [key, selectorFn] of Object.entries(selectorMap)) {
+          if (peerVariant.startsWith(key)) {
+            return {
+              matcher: peerVariant.slice(key.length),
+              selector: selectorFn,
+            };
+          }
+        }
+        
+        // Default peer handling
+        return {
+          matcher: peerVariant,
+          selector: (s) => `.peer:${peerVariant} ~ ${s}`,
+        };
+      },
+    ],
+    // Comprehensive safelist with all needed classes
     safelist: [
-      'md:grid-cols-product'
+      // Existing safelist items
+      'md:grid-cols-product',
+      
+      // Base peer class
+      'peer',
+      
+      // All input component classes from shortcuts
+      'input-base',
+      'input-label-base',
+      'input-placeholder',
+      'input-standard',
+      'input-filled',
+      'input-wrapper-standard',
+      'input-wrapper-filled',
+      'input-label-standard',
+      'input-label-filled',
+      
+      // Label state shortcuts
+      'input-label-focus-color',
+      'input-label-focus-scale',
+      'input-label-focus-translate-standard',
+      'input-label-focus-translate-filled',
+      'input-label-placeholder',
+      'input-label-filled-standard',
+      'input-label-filled-filled',
+      'input-label-standard-state',
+      'input-label-filled-state',
+      
+      // Input types
+      'input-textarea',
+      'resize-none',
+      
+      // Size variants
+      'input-sm',
+      'input-md',
+      'input-lg',
+      'input-label-sm',
+      'input-label-md',
+      'input-label-lg',
+      
+      // Status classes
+      'input-error',
+      'input-label-error',
+      'input-error-message',
+      'input-success',
+      'input-label-success',
+      'input-success-message',
+      
+      // Transform related classes
+      'origin-top-left',
+      'transform-gpu',
+      'translate-y-0',
+      '-translate-y-4',
+      '-translate-y-6',
+      'scale-75',
+      'scale-100',
+      
+      // Every possible arbitrary selector used
+      '[&:focus~label]:scale-75',
+      '[&:focus~label]:-translate-y-4',
+      '[&:focus~label]:-translate-y-6',
+      '[&:focus~label]:text-blue-light',
+      '[&:focus~label]:dark:text-blue-lightest',
+      '[&:focus~label]:start-0',
+      '[&:placeholder-shown~label]:scale-100',
+      '[&:placeholder-shown~label]:translate-y-0',
+      '[&:not(:placeholder-shown)~label]:scale-75',
+      '[&:not(:placeholder-shown)~label]:-translate-y-4',
+      '[&:not(:placeholder-shown)~label]:-translate-y-6',
+      
+      // Combinations of selectors
+      'peer:focus:text-blue-light',
+      'peer:focus:dark:text-blue-lightest',
+      'peer:focus:scale-75',
+      'peer:focus:-translate-y-4',
+      'peer:focus:-translate-y-6',
+      'peer:focus:start-0',
+      'peer-placeholder-shown:scale-100',
+      'peer-placeholder-shown:translate-y-0',
+      'peer-not-placeholder-shown:scale-75',
+      'peer-not-placeholder-shown:-translate-y-4',
+      'peer-not-placeholder-shown:-translate-y-6',
+      
+      // With !important for good measure
+      '[&:focus~label]:!scale-75',
+      '[&:focus~label]:!-translate-y-4',
+      '[&:focus~label]:!-translate-y-6',
+      '[&:not(:placeholder-shown)~label]:!scale-75',
+      '[&:not(:placeholder-shown)~label]:!-translate-y-4',
+      '[&:not(:placeholder-shown)~label]:!-translate-y-6',
+      
+      // Direct css vars that might be used
+      '--un-scale-x',
+      '--un-scale-y',
+      '--un-translate-y',
+      
+      // All peer selectors from the list
+      ...peerSelectorClasses,
+    ],
+    // Custom extractors to ensure peer classes are preserved
+    extractors: [
+      {
+        name: 'vue-astro',
+        extract({ code }) {
+          const result = new Set();
+          
+          // Extract all peer selectors in the code
+          const peerRegex = /peer-([a-zA-Z0-9-]+:[a-zA-Z0-9-]+)/g;
+          const peerMatches = code.match(peerRegex);
+          if (peerMatches) {
+            peerMatches.forEach(match => result.add(match));
+          }
+          
+          // Add all known peer selectors
+          peerSelectorClasses.forEach(cls => result.add(cls));
+          
+          return result;
+        },
+      },
     ],
     presets: [
       presetUno(),

package/uno-config/theme/shortcuts/index.ts

@@ -5,6 +5,7 @@ import { layoutShortcuts } from './layout';
 import { componentShortcuts } from './components';
 import { productShortcuts } from './product';
 import { jumbotronShortcuts } from './jumbotron';
+import { inputShortcuts } from './inputs'; 
 
 const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
   return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
@@ -16,4 +17,5 @@ export const shortcuts: UserShortcuts = {
   ...convertToShortcuts(componentShortcuts),
   ...convertToShortcuts(productShortcuts),
   ...convertToShortcuts(jumbotronShortcuts),
+  ...convertToShortcuts(inputShortcuts),
 };

package/uno-config/theme/shortcuts/inputs.ts

@@ -0,0 +1,64 @@
+// uno-config\theme\shortcuts\inputs.ts
+// Complete shortcuts for Input component with floating labels support
+
+export const inputShortcuts = [
+  // Base input - core class for the input without peer selectors
+  ['input-base', 'block w-full text-4.5 text-blue-medium border-0 border-b-1 border-neutral-light appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium'],
+  
+  // Base label - basic styles for the label without transformations and states
+  ['input-label-base', 'absolute text-sm text-slate-light dark:text-neutral-default origin-top-left transform-gpu transition-all duration-300 ease-in-out'],
+  
+  // Base placeholders
+  ['input-placeholder', 'placeholder:text-slate-light dark:placeholder:text-neutral-default placeholder:opacity-60'],
+  
+  // Variant-specific container classes
+  ['input-wrapper-standard', 'relative z-0'],
+  ['input-wrapper-filled', 'relative'],
+  
+  // Input variants - styling without peer selectors
+  ['input-standard', 'py-2.5 px-0 bg-transparent'],
+  ['input-filled', 'rounded-t-lg px-2.5 pb-2.5 pt-5 bg-gray-50 dark:bg-gray-700'],
+  
+  // LABELS - positioning without transforms
+  ['input-label-standard', 'top-3 -z-10'],
+  ['input-label-filled', 'top-4 z-10 start-2.5'],
+  
+  // Focus state transformations - explicitly defined
+  ['input-label-focus-color', 'peer-focus:text-blue-light peer-focus:dark:text-blue-lightest'],
+  ['input-label-focus-scale', 'peer-focus:scale-75'],
+  ['input-label-focus-translate-standard', 'peer-focus:-translate-y-6'],
+  ['input-label-focus-translate-filled', 'peer-focus:-translate-y-4'],
+  
+  // Placeholder state transformations
+  ['input-label-placeholder', 'peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0'],
+  
+  // Not-placeholder-shown state transformations
+  ['input-label-filled-standard', 'peer-not-placeholder-shown:scale-75 peer-not-placeholder-shown:-translate-y-6'],
+  ['input-label-filled-filled', 'peer-not-placeholder-shown:scale-75 peer-not-placeholder-shown:-translate-y-4'],
+  
+  // Standard input states - complete shortcuts for specific states
+  ['input-label-standard-state', 'input-label-focus-color input-label-focus-scale input-label-focus-translate-standard input-label-placeholder input-label-filled-standard'],
+  ['input-label-filled-state', 'input-label-focus-color input-label-focus-scale input-label-focus-translate-filled input-label-placeholder input-label-filled-filled'],
+  
+  // Input types
+  ['input-textarea', 'resize-none'],
+  
+  // Input sizes
+  ['input-sm', 'text-sm'],
+  ['input-md', 'text-base'],
+  ['input-lg', 'text-lg '],
+  
+  // Label sizes
+  ['input-label-sm', 'text-sm'],
+  ['input-label-md', 'text-sm'],
+  ['input-label-lg', 'text-sm'],
+  
+  // Status classes
+  ['input-error', 'border-red-500 focus:border-red-500 dark:border-red-400 dark:focus:border-red-400'],
+  ['input-label-error', 'text-red-500 dark:text-red-400'],
+  ['input-error-message', 'mt-1 text-xs text-red-500 dark:text-red-400'],
+  
+  ['input-success', 'border-green-500 focus:border-green-500 dark:border-green-400 dark:focus:border-green-400'],
+  ['input-label-success', 'text-green-500 dark:text-green-400'],
+  ['input-success-message', 'mt-1 text-xs text-green-500 dark:text-green-400'],
+];

package/src/components/Input.astro

@@ -1,86 +0,0 @@
----
-// Input.astro
-interface Props {
-  id: string;
-  name?: string; 
-  label: string;
-  variant?: 'filled' | 'standard';
-  type?: HTMLInputElement['type'] | 'textarea'; // support textarea
-  value?: string;
-  required?: boolean;
-  rows?: number; // rows for textarea
-  placeholder?: string; 
-  class?: string; // additional classes
-}
-
-const {
-  id,
-  name,
-  label,
-  variant = 'standard',
-  type = 'text',
-  value = '',
-  required = false,
-  rows = 3, 
-  placeholder = " ", //space for "floating label")
-  class: additionalClasses = "", 
-  ...restProps 
-} = Astro.props;
-
-// Common classes for both variants
-const baseInputClasses = "block w-full text-4.5 text-blue-medium border-0 border-b-1 border-neutral-light appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer";
-
-const baseLabelClasses = "absolute text-sm text-slate-medium dark:text-neutral-default transform scale-75 origin-[0] peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-focus:scale-75 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto transition-all duration-300 ease-in-out";
-
-// Variant specific classes
-const variantClasses = {
-  filled: {
-    wrapper: "relative",
-    input: `${baseInputClasses} rounded-t-lg px-2.5 pb-2.5 pt-5 bg-gray-50 dark:bg-gray-700 ${additionalClasses}`,
-    label: `${baseLabelClasses} -translate-y-4 top-4 z-10 start-2.5 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-4`
-  },
-  standard: {
-    wrapper: "relative z-0",
-    input: `${baseInputClasses} py-2.5 px-0 bg-transparent ${additionalClasses}`,
-    label: `${baseLabelClasses} -translate-y-6 top-3 -z-10 peer-focus:start-0 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-6`
-  }
-};
-
-const classes = variantClasses[variant];
-
-// Keep border-b-1 for textarea but add resize-none
-const textareaClasses = type === 'textarea' 
-  ? `${classes.input} resize-none` 
-  : classes.input;
----
-
-<div class={classes.wrapper}>
-  {type === 'textarea' ? (
-    <textarea
-      name={name}
-      id={id}
-      rows={rows}
-      required={required}
-      class={textareaClasses}
-      placeholder={placeholder}
-      {...restProps}
-    >{value}</textarea>
-  ) : (
-    <input
-      type={type}
-      name={name}
-      id={id}
-      value={value}
-      required={required}
-      class={classes.input}
-      placeholder={placeholder}
-      {...restProps}
-    />
-  )}
-  <label
-    for={id}
-    class={classes.label}
-  >
-    {label}
-  </label>
-</div>