@nexxtmove/ui 1.1.6 → 1.1.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,12 +34,12 @@
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.4.8",
     "@nuxt/schema": "^4.4.4",
-    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-a11y": "^10.5.4",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.5.2",
-    "@storybook/addon-vitest": "^10.5.2",
-    "@storybook/builder-vite": "^10.5.2",
-    "@storybook/vue3-vite": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.4",
+    "@storybook/addon-vitest": "^10.5.4",
+    "@storybook/builder-vite": "^10.5.4",
+    "@storybook/vue3-vite": "^10.5.4",
     "@tailwindcss/vite": "^4.3.1",
     "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
@@ -53,7 +53,7 @@
     "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-storybook": "10.5.2",
+    "eslint-plugin-storybook": "10.5.4",
     "eslint-plugin-vue": "^10.9.2",
     "flag-icons": "^7.5.0",
     "globals": "^17.7.0",
@@ -63,7 +63,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.5.2",
+    "storybook": "^10.5.4",
     "typescript-eslint": "^8.62.0",
     "vite": "^8.1.0",
     "vite-plugin-dts": "^5.0.3",

package/src/components/ProgressBar/ProgressBar.vue

@@ -8,6 +8,7 @@ interface NexxtProgressBarProps {
   currentStep: number
   progressLabel?: string
   stepTitles?: string[]
+  maxInlineSteps?: number
 }
 
 defineOptions({
@@ -22,6 +23,7 @@ const {
   stepTitles,
   steps,
   currentStep,
+  maxInlineSteps = 7,
 } = defineProps<NexxtProgressBarProps>()
 
 const isPercentage = computed(() => variant === 'percentage')
@@ -45,6 +47,14 @@ const percentage = computed(() => {
 
 const hasTitles = computed(() => !isPercentage.value && Boolean(stepTitles?.length))
 
+// Reserve the current-step number at the width of the total, so a 9 -> 10
+// transition doesn't shift the "/x" that follows it.
+const stepDigits = computed(() => String(Math.max(steps, 0)).length)
+
+// When there are more titles than can comfortably fit side by side, fall back to
+// the compact treatment (current title + "x/y" counter) at every breakpoint.
+const isCompact = computed(() => hasTitles.value && (stepTitles?.length ?? 0) > maxInlineSteps)
+
 watchEffect(() => {
   if (stepTitles && stepTitles.length !== steps) {
     console.warn(
@@ -89,24 +99,37 @@ watchEffect(() => {
         </div>
         <div
           v-if="hasTitles"
-          class="flex items-center small-normal tabular-nums @md:hidden"
+          class="flex items-center gap-0.5 small-normal tabular-nums"
+          :class="isCompact ? '' : '@md:hidden'"
           aria-hidden="true"
         >
-          <AnimatedNumber :value="displayStep" />
-          <span>/{{ steps }}</span>
+          <span class="flex justify-end" :style="{ minWidth: `${stepDigits}ch` }">
+            <AnimatedNumber :value="displayStep" />
+          </span>
+          <span>/</span>
+          <span>{{ steps }}</span>
         </div>
       </div>
       <ol
         v-if="hasTitles"
-        class="flex justify-between @max-md:order-first @max-md:justify-center"
+        class="flex @max-md:order-first"
+        :class="isCompact ? 'order-first justify-center' : 'justify-between @max-md:justify-center'"
         aria-label="Progress steps"
       >
         <li
           v-for="(title, index) in stepTitles"
           :key="title"
-          class="rounded-xs transition-colors duration-500 focus-visible:outline-3 @max-md:hidden @max-md:body-normal @min-md:small-normal"
+          class="rounded-xs transition-colors duration-500 focus-visible:outline-3"
           :class="[
-            index === clampedStep ? 'text-sapphire-500 @max-md:inline' : '',
+            isCompact
+              ? index === clampedStep
+                ? 'body-normal'
+                : 'hidden'
+              : [
+                  '@max-md:body-normal @min-md:small-normal',
+                  index === clampedStep ? '@max-md:inline' : '@max-md:hidden',
+                ],
+            index === clampedStep ? 'text-sapphire-500' : '',
             index < clampedStep ? 'cursor-pointer duration-200! hover:text-sapphire-400' : '',
           ]"
           :aria-current="index === clampedStep ? 'step' : undefined"

package/src/components/Switch/Switch.vue

@@ -3,10 +3,12 @@ import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
 import Icon from '../Icon/Icon.vue'
 
 type SwitchColor = 'blue' | 'green'
+type SwitchSize = 'sm' | 'md' | 'lg'
 
 interface NexxtSwitchProps {
   labelPosition?: 'before' | 'after'
   color?: SwitchColor
+  size?: SwitchSize
   iconOn?: IconName
   iconOff?: IconName
 }
@@ -16,7 +18,13 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { labelPosition = 'after', color = 'blue', iconOn, iconOff } = defineProps<NexxtSwitchProps>()
+const {
+  labelPosition = 'after',
+  color = 'blue',
+  size = 'lg',
+  iconOn,
+  iconOff,
+} = defineProps<NexxtSwitchProps>()
 
 const model = defineModel<boolean>()
 
@@ -24,12 +32,36 @@ const checkedColorClasses: Record<SwitchColor, string> = {
   blue: 'border-cornflower-blue-500 bg-cornflower-blue-500',
   green: 'border-green-400 bg-green-400',
 }
+
+const trackClasses: Record<SwitchSize, string> = {
+  sm: 'h-5 w-9',
+  md: 'h-6 w-11',
+  lg: 'h-8 w-15',
+}
+
+const knobClasses: Record<SwitchSize, string> = {
+  sm: 'top-0.5 left-0.5 h-3.5 w-3.5',
+  md: 'top-0.5 left-0.5 h-4.5 w-4.5',
+  lg: 'top-0.75 left-0.75 h-6 w-6',
+}
+
+const knobTranslateClasses: Record<SwitchSize, string> = {
+  sm: 'translate-x-4',
+  md: 'translate-x-5',
+  lg: 'translate-x-7',
+}
+
+const iconSizeClasses: Record<SwitchSize, string> = {
+  sm: 'text-[8px]',
+  md: 'text-[10px]',
+  lg: 'text-xs',
+}
 </script>
 
 <template>
   <label class="inline-flex cursor-pointer items-center gap-2">
     <slot v-if="labelPosition === 'before'" />
-    <span class="relative inline-block h-8 w-15">
+    <span :class="['relative inline-block', trackClasses[size]]">
       <input v-bind="$attrs" type="checkbox" class="peer sr-only" v-model="model" />
       <span
         :class="[
@@ -39,18 +71,29 @@ const checkedColorClasses: Record<SwitchColor, string> = {
       >
         <span
           :class="[
-            'absolute top-0.75 left-0.75 h-6 w-6 rounded-full bg-white transition-transform duration-400',
-            model && 'translate-x-7',
+            'absolute rounded-full bg-white transition-transform duration-400',
+            knobClasses[size],
+            model && knobTranslateClasses[size],
           ]"
         />
         <span
           :class="[
-            'absolute top-0.75 left-0.75 flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform duration-300',
-            model && 'translate-x-7',
+            'absolute flex items-center justify-center rounded-full bg-white transition-transform duration-300',
+            knobClasses[size],
+            model && knobTranslateClasses[size],
           ]"
         >
-          <Icon v-if="model && iconOn" :name="iconOn" type="solid" class="text-xs text-gray-600" />
-          <Icon v-else-if="!model && iconOff" :name="iconOff" class="text-xs text-gray-600" />
+          <Icon
+            v-if="model && iconOn"
+            :name="iconOn"
+            type="solid"
+            :class="['text-gray-600', iconSizeClasses[size]]"
+          />
+          <Icon
+            v-else-if="!model && iconOff"
+            :name="iconOff"
+            :class="['text-gray-600', iconSizeClasses[size]]"
+          />
         </span>
       </span>
     </span>