spoko-design-system 0.5.6 → 0.5.8

package/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -74,20 +74,20 @@
     "@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",
+    "@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.0",
+    "astro-pagefind": "^1.8.1",
     "astro-remote": "^0.3.3",
     "dotenv": "^16.4.7",
     "i18next": "^24.2.2",
@@ -96,13 +96,13 @@
     "i18next-http-backend": "^3.0.2",
     "i18next-vue": "^5.2.0",
     "swiper": "^11.2.4",
-    "unocss": "^66.0.0",
+    "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.0.0",
+    "@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",

package/src/components/Input.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+
+interface InputProps {
+  id?: string;
+  name?: string;
+  label: string;
+  variant?: 'filled' | 'standard';
+  type?: string; // HTMLInputElement['type'] | 'textarea'
+  modelValue?: string | number; // For v-model compatibility
+  required?: boolean;
+  rows?: number; // rows for textarea
+  placeholder?: string;
+  error?: string | boolean;
+  success?: string | boolean;
+  size?: 'sm' | 'md' | 'lg'; // Size prop
+  class?: string; // additional classes
+  [key: string]: any; // To allow additional props
+}
+
+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 is important 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
+const wrapperClass = computed(() => `input-wrapper-${props.variant}`);
+
+// Compute input classes going back to direct arbitrary selectors
+const inputClass = computed(() => {
+  // Base classes
+  const classes = ['input-base', `input-${props.variant}`];
+  
+  // Focus and placeholder behavior - using direct arbitrary selectors
+  classes.push('[&:focus~label]:text-blue-light');
+  classes.push('[&:focus~label]:dark:text-blue-lightest');
+  classes.push('[&:focus~label]:scale-75');
+  classes.push('[&:placeholder-shown~label]:scale-100');
+  classes.push('[&:placeholder-shown~label]:translate-y-0');
+  classes.push('[&:not(:placeholder-shown)~label]:scale-75');
+  
+  // Variant-specific behaviors
+  if (props.variant === 'standard') {
+    classes.push('[&:focus~label]:-translate-y-6');
+    classes.push('[&:focus~label]:start-0');
+    classes.push('[&:not(:placeholder-shown)~label]:-translate-y-6');
+  } else if (props.variant === 'filled') {
+    classes.push('[&:focus~label]:-translate-y-4');
+    classes.push('[&:not(:placeholder-shown)~label]:-translate-y-4');
+  }
+  
+  // Additional classes
+  if (props.size) classes.push(`input-${props.size}`);
+  if (props.type === 'textarea') classes.push('input-textarea');
+  if (props.error) classes.push('input-error');
+  else if (props.success) classes.push('input-success');
+  if (props.class) classes.push(props.class);
+  
+  return classes.join(' ');
+});
+
+// Compute label classes - important: add -translate-y for initial state explicitly
+const labelClass = computed(() => {
+  // Base classes
+  const classes = ['input-label-base', `input-label-${props.variant}`];
+  
+  // Explicitly add transform for initial state to ensure consistency
+  if (props.variant === 'standard') {
+    // Start in position and let focus/content move it
+    classes.push('translate-y-0');
+  } else if (props.variant === 'filled') {
+    // Start in position and let focus/content move it
+    classes.push('translate-y-0');
+  }
+  
+  // Additional classes
+  if (props.size) classes.push(`input-label-${props.size}`);
+  if (props.error) classes.push('input-label-error');
+  else if (props.success) classes.push('input-label-success');
+  
+  return classes.join(' ');
+});
+
+// Emit modelValue on input change
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+  emit('update:modelValue', target.value);
+  emit('input', event);
+};
+
+// Forward focus and blur events
+const handleFocus = (event: FocusEvent) => emit('focus', event);
+const handleBlur = (event: FocusEvent) => emit('blur', event);
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <!-- Textarea field -->
+    <textarea
+      v-if="type === 'textarea'"
+      :id="id"
+      :name="name || id"
+      :rows="rows"
+      :required="required"
+      :class="inputClass"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    ></textarea>
+    
+    <!-- Input field -->
+    <input
+      v-else
+      :type="type"
+      :id="id"
+      :name="name || id"
+      :required="required"
+      :class="inputClass"
+      :placeholder="placeholder"
+      :value="modelValue"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      v-bind="attrs"
+    />
+    
+    <!-- Label with guaranteed correct transform origin -->
+    <label
+      :for="id"
+      :class="labelClass"
+      style="transform-origin: top left;"
+    >
+      {{ label }}
+      <span v-if="required" class="text-red-500 ml-1">*</span>
+    </label>
+    
+    <!-- Error message -->
+    <div 
+      v-if="error && typeof error === 'string'" 
+      class="input-error-message"
+    >
+      {{ error }}
+    </div>
+    
+    <!-- Success message -->
+    <div 
+      v-if="success && typeof success === 'string'" 
+      class="input-success-message"
+    >
+      {{ success }}
+    </div>
+  </div>
+</template>

package/src/pages/components/input.mdx

@@ -3,7 +3,7 @@ title: Input
 layout: ../../layouts/MainLayout.astro
 ---
 import MainInput from '../../components/MainInput.vue'
-import Input from '../../components/Input.astro';
+import Input from '../../components/Input.vue';
 
 # Basic Input text
 
@@ -45,4 +45,41 @@ import Input from '../../components/Input.astro';
   label="Floating standard"
   variant="standard"
 />
+```
+
+
+# Floating Textarea
+<div class="component-preview">
+    <div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
+        <Input
+        id="name-filled"
+        label="Floating filled"
+        variant="filled"
+        type="textarea"
+        />
+        <Input
+        id="email-standard" 
+            label="Floating standard"
+            variant="standard"
+            type="textarea"
+        />
+    </div>
+</div>
+    
+```js
+// Filled variant
+<Input
+  id="name-filled"
+  label="Floating filled"
+  variant="filled"
+  type="textarea"
+/>
+
+// Standard variant
+<Input
+  id="email-standard" 
+  label="Floating standard"
+  variant="standard"
+  type="textarea"
+/>
 ```

package/uno-config/index.ts

@@ -33,8 +33,61 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       ...theme,
       ...(customConfig.theme || {})
     },
+    // safelist section with transform origin classes
     safelist: [
-      'md:grid-cols-product'
+      // Existing safelist items
+      'md:grid-cols-product',
+
+      // Base classes
+      'input-base',
+      'input-label-base',
+
+      // Variants
+      'input-standard',
+      'input-filled',
+      'input-label-standard',
+      'input-label-filled',
+      'input-wrapper-standard',
+      'input-wrapper-filled',
+
+      // Sizes
+      'input-sm',
+      'input-md',
+      'input-lg',
+      'input-label-sm',
+      'input-label-md',
+      'input-label-lg',
+
+      // Special types
+      'input-textarea',
+
+      // Status classes
+      'input-error',
+      'input-label-error',
+      'input-error-message',
+      'input-success',
+      'input-label-success',
+      'input-success-message',
+
+      // Essential transform classes
+      'origin-top-left',
+      'transform-gpu',
+      'translate-y-0',
+      '-translate-y-4',
+      '-translate-y-6',
+
+      // Critical arbitrary selectors (all needed ones)
+      '[&:focus~label]:text-blue-light',
+      '[&:focus~label]:dark:text-blue-lightest',
+      '[&:focus~label]:scale-75',
+      '[&:focus~label]:-translate-y-6',
+      '[&:focus~label]:-translate-y-4',
+      '[&: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-6',
+      '[&:not(:placeholder-shown)~label]:-translate-y-4',
     ],
     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,44 @@
+// shortcuts/inputs.ts
+
+export const inputShortcuts = [
+  // Base input styles
+  ['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 styles with optimized transform settings
+  ['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'],
+  
+  // We're going back to direct arbitrary selectors in the input component
+  // since the grouped selectors seem to be causing issues with the focus behavior
+  
+  // Variant styles for labels - position only, no transforms
+  ['input-label-standard', 'top-3 -z-10'],
+  ['input-label-filled', 'top-4 z-10 start-2.5'],
+  
+  // Container styles
+  ['input-wrapper-standard', 'relative z-0'],
+  ['input-wrapper-filled', 'relative'],
+  
+  // Input variant styles
+  ['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'],
+  
+  // Special input types
+  ['input-textarea', 'resize-none'],
+  
+  // Size variants
+  ['input-sm', 'text-sm'],
+  ['input-md', 'text-base'],
+  ['input-lg', 'text-lg py-3'],
+  ['input-label-sm', 'text-xs'],
+  ['input-label-md', 'text-sm'],
+  ['input-label-lg', 'text-base'],
+  
+  // Status styles - grouped logically
+  ['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];
-
-// Dla textarea modyfikujemy nieco style
-const textareaClasses = type === 'textarea' 
-  ? classes.input.replace('border-b-1', 'border-1') + ' 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>