sv5ui 1.6.0 → 1.8.0

package/dist/Stepper/stepper.variants.js

@@ -0,0 +1,204 @@
+import { tv } from 'tailwind-variants';
+export const stepperVariants = tv({
+    slots: {
+        root: 'flex flex-col gap-4 w-full',
+        list: 'flex list-none p-0 m-0',
+        item: 'group relative flex flex-1',
+        trigger: [
+            'group/trigger relative z-10 flex w-full gap-3 text-start rounded-md',
+            'enabled:cursor-pointer select-none',
+            'focus-visible:outline-none',
+            'disabled:cursor-not-allowed disabled:opacity-60'
+        ],
+        container: 'flex shrink-0 items-center justify-center',
+        indicator: [
+            'relative z-10 inline-flex items-center justify-center shrink-0 rounded-full font-medium',
+            'bg-surface-container-highest text-on-surface-variant',
+            'transition-colors',
+            'group-focus-visible/trigger:ring-2 group-focus-visible/trigger:ring-offset-2 group-focus-visible/trigger:ring-offset-surface'
+        ],
+        separator: 'shrink-0 z-0 rounded-full bg-surface-container-highest transition-colors',
+        wrapper: 'flex flex-col min-w-0',
+        title: 'font-medium text-on-surface transition-colors',
+        description: 'text-on-surface-variant',
+        content: 'focus:outline-none'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                list: 'flex-row w-full',
+                item: 'flex-col items-center',
+                trigger: 'flex-col items-center',
+                container: 'w-full',
+                wrapper: 'items-center text-center pt-2',
+                separator: 'absolute h-0.5 left-1/2 right-[-50%] -translate-y-1/2'
+            },
+            vertical: {
+                list: 'flex-col',
+                item: 'flex-row',
+                trigger: 'flex-row items-stretch',
+                container: 'self-stretch flex-col',
+                wrapper: 'items-start',
+                separator: 'w-0.5 flex-1 my-1'
+            }
+        },
+        size: {
+            xs: {
+                indicator: 'size-6 text-[10px] *:size-3.5',
+                title: 'text-xs',
+                description: 'text-[11px]'
+            },
+            sm: {
+                indicator: 'size-7 text-xs *:size-4',
+                title: 'text-sm',
+                description: 'text-xs'
+            },
+            md: {
+                indicator: 'size-8 text-sm *:size-5',
+                title: 'text-sm',
+                description: 'text-sm'
+            },
+            lg: {
+                indicator: 'size-10 text-base *:size-5',
+                title: 'text-base',
+                description: 'text-sm'
+            },
+            xl: {
+                indicator: 'size-12 text-lg *:size-6',
+                title: 'text-base',
+                description: 'text-sm'
+            }
+        },
+        color: {
+            primary: { indicator: 'group-focus-visible/trigger:ring-primary' },
+            secondary: { indicator: 'group-focus-visible/trigger:ring-secondary' },
+            tertiary: { indicator: 'group-focus-visible/trigger:ring-tertiary' },
+            success: { indicator: 'group-focus-visible/trigger:ring-success' },
+            warning: { indicator: 'group-focus-visible/trigger:ring-warning' },
+            error: { indicator: 'group-focus-visible/trigger:ring-error' },
+            info: { indicator: 'group-focus-visible/trigger:ring-info' },
+            surface: { indicator: 'group-focus-visible/trigger:ring-outline' }
+        }
+    },
+    compoundVariants: [
+        // -------------------------------------------------------------------
+        // Color × state — indicator background, separator fill, active title
+        // -------------------------------------------------------------------
+        {
+            color: 'primary',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-primary group-data-[state=completed]:text-on-primary',
+                    'group-data-[state=active]:bg-primary group-data-[state=active]:text-on-primary'
+                ],
+                separator: 'group-data-[state=completed]:bg-primary',
+                title: 'group-data-[state=active]:text-primary'
+            }
+        },
+        {
+            color: 'secondary',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-secondary group-data-[state=completed]:text-on-secondary',
+                    'group-data-[state=active]:bg-secondary group-data-[state=active]:text-on-secondary'
+                ],
+                separator: 'group-data-[state=completed]:bg-secondary',
+                title: 'group-data-[state=active]:text-secondary'
+            }
+        },
+        {
+            color: 'tertiary',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-tertiary group-data-[state=completed]:text-on-tertiary',
+                    'group-data-[state=active]:bg-tertiary group-data-[state=active]:text-on-tertiary'
+                ],
+                separator: 'group-data-[state=completed]:bg-tertiary',
+                title: 'group-data-[state=active]:text-tertiary'
+            }
+        },
+        {
+            color: 'success',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-success group-data-[state=completed]:text-on-success',
+                    'group-data-[state=active]:bg-success group-data-[state=active]:text-on-success'
+                ],
+                separator: 'group-data-[state=completed]:bg-success',
+                title: 'group-data-[state=active]:text-success'
+            }
+        },
+        {
+            color: 'warning',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-warning group-data-[state=completed]:text-on-warning',
+                    'group-data-[state=active]:bg-warning group-data-[state=active]:text-on-warning'
+                ],
+                separator: 'group-data-[state=completed]:bg-warning',
+                title: 'group-data-[state=active]:text-warning'
+            }
+        },
+        {
+            color: 'error',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-error group-data-[state=completed]:text-on-error',
+                    'group-data-[state=active]:bg-error group-data-[state=active]:text-on-error'
+                ],
+                separator: 'group-data-[state=completed]:bg-error',
+                title: 'group-data-[state=active]:text-error'
+            }
+        },
+        {
+            color: 'info',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-info group-data-[state=completed]:text-on-info',
+                    'group-data-[state=active]:bg-info group-data-[state=active]:text-on-info'
+                ],
+                separator: 'group-data-[state=completed]:bg-info',
+                title: 'group-data-[state=active]:text-info'
+            }
+        },
+        {
+            color: 'surface',
+            class: {
+                indicator: [
+                    'group-data-[state=completed]:bg-inverse-surface group-data-[state=completed]:text-inverse-on-surface',
+                    'group-data-[state=active]:bg-inverse-surface group-data-[state=active]:text-inverse-on-surface'
+                ],
+                separator: 'group-data-[state=completed]:bg-inverse-surface',
+                title: 'group-data-[state=active]:text-on-surface'
+            }
+        },
+        // -------------------------------------------------------------------
+        // Horizontal × size — separator vertically centered on indicator,
+        // horizontal margins equal indicator radius so the line stops at each
+        // indicator's edge (never enters the indicator — important so faded
+        // disabled indicators don't reveal the line behind them).
+        // -------------------------------------------------------------------
+        { orientation: 'horizontal', size: 'xs', class: { separator: 'top-3 mx-3' } },
+        { orientation: 'horizontal', size: 'sm', class: { separator: 'top-3.5 mx-3.5' } },
+        { orientation: 'horizontal', size: 'md', class: { separator: 'top-4 mx-4' } },
+        { orientation: 'horizontal', size: 'lg', class: { separator: 'top-5 mx-5' } },
+        { orientation: 'horizontal', size: 'xl', class: { separator: 'top-6 mx-6' } },
+        // -------------------------------------------------------------------
+        // Vertical × size — wrapper bottom padding creates visible line height
+        // -------------------------------------------------------------------
+        { orientation: 'vertical', size: 'xs', class: { wrapper: 'pb-6' } },
+        { orientation: 'vertical', size: 'sm', class: { wrapper: 'pb-7' } },
+        { orientation: 'vertical', size: 'md', class: { wrapper: 'pb-8' } },
+        { orientation: 'vertical', size: 'lg', class: { wrapper: 'pb-10' } },
+        { orientation: 'vertical', size: 'xl', class: { wrapper: 'pb-12' } }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md',
+        color: 'primary'
+    }
+});
+export const stepperDefaults = {
+    defaultVariants: stepperVariants.defaultVariants,
+    slots: {}
+};

package/dist/index.d.ts

@@ -46,6 +46,9 @@ export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Table/index.js';
 export * from './Toast/index.js';
+export * from './Carousel/index.js';
+export * from './Banner/index.js';
+export * from './Stepper/index.js';
 export * from './hooks/index.js';
 export { defineConfig } from './config.js';
 export type { UIConfig } from './config.js';

package/dist/index.js

@@ -47,6 +47,9 @@ export * from './PinInput/index.js';
 export * from './ThemeModeButton/index.js';
 export * from './Table/index.js';
 export * from './Toast/index.js';
+export * from './Carousel/index.js';
+export * from './Banner/index.js';
+export * from './Stepper/index.js';
 // Composables
 export * from './hooks/index.js';
 // Configuration

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui",
-    "version": "1.6.0",
+    "version": "1.8.0",
     "description": "A modern Svelte 5 UI component library with Tailwind CSS",
     "author": "ndlabdev",
     "license": "MIT",
@@ -42,24 +42,101 @@
             "svelte": "./dist/index.js",
             "default": "./dist/index.js"
         },
+        "./editor": {
+            "types": "./dist/Editor/index.d.ts",
+            "svelte": "./dist/Editor/index.js",
+            "default": "./dist/Editor/index.js"
+        },
         "./theme.css": {
             "import": "./dist/theme.css",
             "default": "./dist/theme.css"
         }
     },
     "peerDependencies": {
+        "@tiptap/core": "^3.0.0",
+        "@tiptap/extension-bubble-menu": "^3.0.0",
+        "@tiptap/extension-character-count": "^3.0.0",
+        "@tiptap/extension-drag-handle": "^3.0.0",
+        "@tiptap/extension-image": "^3.0.0",
+        "@tiptap/extension-mention": "^3.0.0",
+        "@tiptap/extension-placeholder": "^3.0.0",
+        "@tiptap/extension-table": "^3.0.0",
+        "@tiptap/extension-table-cell": "^3.0.0",
+        "@tiptap/extension-table-header": "^3.0.0",
+        "@tiptap/extension-table-row": "^3.0.0",
+        "@tiptap/extension-text-align": "^3.0.0",
+        "@tiptap/extension-typography": "^3.0.0",
+        "@tiptap/extension-youtube": "^3.0.0",
+        "@tiptap/pm": "^3.0.0",
+        "@tiptap/starter-kit": "^3.0.0",
+        "@tiptap/suggestion": "^3.0.0",
         "joi": "^17.0.0 || ^18.0.0",
         "mode-watcher": "^1.0.0",
         "svelte": "^5.0.0",
         "tailwindcss": "^4.0.0",
+        "tiptap-markdown": "^0.9.0",
         "valibot": "^1.0.0",
         "yup": "^1.7.0",
         "zod": "^3.24.0 || ^4.0.0"
     },
     "peerDependenciesMeta": {
+        "@tiptap/core": {
+            "optional": true
+        },
+        "@tiptap/extension-bubble-menu": {
+            "optional": true
+        },
+        "@tiptap/extension-character-count": {
+            "optional": true
+        },
+        "@tiptap/extension-drag-handle": {
+            "optional": true
+        },
+        "@tiptap/extension-image": {
+            "optional": true
+        },
+        "@tiptap/extension-mention": {
+            "optional": true
+        },
+        "@tiptap/extension-placeholder": {
+            "optional": true
+        },
+        "@tiptap/extension-table": {
+            "optional": true
+        },
+        "@tiptap/extension-table-cell": {
+            "optional": true
+        },
+        "@tiptap/extension-table-header": {
+            "optional": true
+        },
+        "@tiptap/extension-table-row": {
+            "optional": true
+        },
+        "@tiptap/extension-text-align": {
+            "optional": true
+        },
+        "@tiptap/extension-typography": {
+            "optional": true
+        },
+        "@tiptap/extension-youtube": {
+            "optional": true
+        },
+        "@tiptap/pm": {
+            "optional": true
+        },
+        "@tiptap/starter-kit": {
+            "optional": true
+        },
+        "@tiptap/suggestion": {
+            "optional": true
+        },
         "joi": {
             "optional": true
         },
+        "tiptap-markdown": {
+            "optional": true
+        },
         "valibot": {
             "optional": true
         },
@@ -78,6 +155,23 @@
         "@sveltejs/package": "^2.5.7",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
         "@tailwindcss/vite": "^4.1.17",
+        "@tiptap/core": "^3.23.6",
+        "@tiptap/extension-bubble-menu": "^3.23.6",
+        "@tiptap/extension-character-count": "^3.23.6",
+        "@tiptap/extension-drag-handle": "^3.23.6",
+        "@tiptap/extension-image": "^3.23.6",
+        "@tiptap/extension-mention": "^3.23.6",
+        "@tiptap/extension-placeholder": "^3.23.6",
+        "@tiptap/extension-table": "^3.23.6",
+        "@tiptap/extension-table-cell": "^3.23.6",
+        "@tiptap/extension-table-header": "^3.23.6",
+        "@tiptap/extension-table-row": "^3.23.6",
+        "@tiptap/extension-text-align": "^3.23.6",
+        "@tiptap/extension-typography": "^3.23.6",
+        "@tiptap/extension-youtube": "^3.23.6",
+        "@tiptap/pm": "^3.23.6",
+        "@tiptap/starter-kit": "^3.23.6",
+        "@tiptap/suggestion": "^3.23.6",
         "@types/node": "^22",
         "@vitest/browser-playwright": "^4.0.15",
         "eslint": "^9.39.1",
@@ -93,6 +187,7 @@
         "svelte": "^5.45.6",
         "svelte-check": "^4.3.4",
         "tailwindcss": "^4.1.17",
+        "tiptap-markdown": "^0.9.0",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.48.1",
         "valibot": "^1.3.1",
@@ -118,10 +213,16 @@
         "accessible"
     ],
     "dependencies": {
+        "@floating-ui/dom": "^1.7.4",
         "@iconify/svelte": "^5.2.1",
         "@internationalized/date": "^3.11.0",
         "@standard-schema/spec": "^1.1.0",
         "bits-ui": "^2.15.4",
+        "embla-carousel": "^8.6.0",
+        "embla-carousel-autoplay": "^8.6.0",
+        "embla-carousel-class-names": "^8.6.0",
+        "embla-carousel-fade": "^8.6.0",
+        "embla-carousel-svelte": "^8.6.0",
         "svelte-sonner": "^1.1.0",
         "tailwind-merge": "^3.4.0",
         "tailwind-variants": "^3.2.2",