spoko-design-system 0.4.5 → 0.4.7

package/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1738837064987
+		"lastUpdateCheck": 1739874307323
 	}
 }

package/.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

package/icon.config.ts

@@ -106,7 +106,8 @@ export const iconConfig: IconConfig = {
       "tag",
       "tags",
       "x",
-      "graph-up"
+      "graph-up",
+      "folder"
     ],
 
     bx: [

package/index.ts

@@ -8,6 +8,7 @@ export { default as FuckRussia } from './src/components/FuckRussia.vue';
 export { default as FlagPL } from './src/components/flags/FlagPL.vue';
 export { default as Badges } from './src/components/Badges.vue';
 export { default as SlimBanner } from './src/components/SlimBanner.vue';
+
 export { default as Jumbotron } from './src/components/Jumbotron.astro';
 export { default as Button } from './src/components/Button.vue';
 export { default as Breadcrumbs } from './src/components/Breadcrumbs.vue';
@@ -28,6 +29,7 @@ export { default as ProductNumber } from './src/components/Product/ProductNumber
 export { default as ProductLink } from './src/components/Product/ProductLink.vue';
 // export { default as ProductCarousel } from './src/components/Product/ProductCarousel.astro';
 export { default as LanguageSuggestion } from './src/components/LanguageSuggestion.astro';
+export { default as Input } from './src/components/Input.astro';
 
 export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
 export { default as CategorySidebarToggler } from './src/components/Category/CategorySidebarToggler.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -46,7 +46,7 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/ts-plugin": "^1.10.4",
     "@astrojs/vue": "^5.0.6",
-    "@docsearch/css": "^3.8.3",
+    "@docsearch/css": "^3.9.0",
     "@iconify-json/ant-design": "^1.2.5",
     "@iconify-json/bi": "^1.2.2",
     "@iconify-json/bx": "^1.2.2",
@@ -94,7 +94,7 @@
     "i18next-browser-languagedetector": "^8.0.3",
     "i18next-fs-backend": "^2.6.0",
     "i18next-http-backend": "^3.0.2",
-    "i18next-vue": "^5.1.0",
+    "i18next-vue": "^5.2.0",
     "swiper": "^11.2.4",
     "unocss": "^66.0.0",
     "vue": "^3.5.13"
@@ -107,7 +107,7 @@
     "@vue/compiler-sfc": "^3.5.13",
     "astro": "^5.3.0",
     "unocss": "^0.65.0",
-    "vite": "^6.1.0"
+    "vite": "^6.1.1"
   },
   "packageManager": "pnpm@9.15.3",
   "pnpm": {

package/src/components/Input.astro

@@ -0,0 +1,58 @@
+---
+// Input.astro
+interface Props {
+  id: string;
+  label: string;
+  variant?: 'filled' | 'standard';
+  type?: string;
+  value?: string;
+  required?: boolean;
+}
+
+const {
+  id,
+  label,
+  variant = 'standard',
+  type = 'text',
+  value = '',
+  required = false
+} = Astro.props;
+
+// Common classes for both variants
+const baseInputClasses = "block w-full text-sm text-blue-medium border-0 border-b-2 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-defaultduration-300 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";
+
+// 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`,
+    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`,
+    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];
+---
+
+<div class={classes.wrapper}>
+  <input
+    type={type}
+    id={id}
+    value={value}
+    required={required}
+    class={classes.input}
+    placeholder=" "
+  />
+  <label
+    for={id}
+    class={classes.label}
+  >
+    {label}
+  </label>
+</div>

package/src/pages/components/buttons.mdx

@@ -200,7 +200,7 @@ Rounded edges
 
 Text buttons are used for actions that do not require a primary or secondary button.
 
-<div class="component-preview">
+<div class="component-preview flex-wrap">
     <Button primary-outline title="Title">Text button</Button>
     <Button primary-outline rounded title="Title">Text button</Button>
 
@@ -209,6 +209,8 @@ Text buttons are used for actions that do not require a primary or secondary but
 
     <Button tertiary-outline title="Title">Text button</Button>
     <Button tertiary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
 </div>
 
 ```js
@@ -220,6 +222,8 @@ Text buttons are used for actions that do not require a primary or secondary but
 
     <Button tertiary-outline title="Title">Text button</Button>
     <Button tertiary-outline rounded title="Title">Text button</Button>
+
+    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
 ```
 
 ### Outline button - custom hover

package/src/pages/components/input.mdx

@@ -3,8 +3,9 @@ title: Input
 layout: ../../layouts/MainLayout.astro
 ---
 import MainInput from '../../components/MainInput.vue'
+import Input from '../../components/Input.astro';
 
-# Input text
+# Basic Input text
 
 <div class="component-preview">
     <MainInput label="Name"></MainInput>
@@ -14,33 +15,34 @@ import MainInput from '../../components/MainInput.vue'
 <MainInput type="text" value="Hello world!"></MainInput>
 ```
 
-
-
+# Floating Label Input
 <div class="component-preview">
-
-<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
-    <div class="relative">
-        <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 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" placeholder=" " />
-        <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+    <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"
+        />
+        <Input
+        id="email-standard" 
+            label="Floating standard"
+            variant="standard"
+        />
     </div>
-
-    <div class="relative z-0">
-        <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 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" placeholder=" " />
-        <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
-    </div>
-</div>
-
 </div>
-
-
+    
 ```js
-<div class="relative">
-    <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 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" placeholder=" " />
-    <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
-</div>
-
-<div class="relative z-0">
-    <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 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" placeholder=" " />
-    <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
-</div>
+// Filled variant
+<Input
+  id="name-filled"
+  label="Floating filled"
+  variant="filled"
+/>
+
+// Standard variant
+<Input
+  id="email-standard" 
+  label="Floating standard"
+  variant="standard"
+/>
 ```