frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Slider/Slider.vue

@@ -53,6 +53,21 @@ const {
   disabled: () => props.disabled,
 })
 
+const isBidirectional = computed(() => props.min < 0 && props.max > 0)
+
+const bidirectionalRangeStyles = computed(() => {
+  const { min, max } = props
+  const range = max - min
+  const zeroPos = -min / range
+  const thumbPositions = sliderValue.value.map((v) => (v - min) / range)
+  const allPositions =
+    thumbPositions.length === 1 ? [zeroPos, thumbPositions[0]] : thumbPositions
+  return {
+    left: `${Math.min(...allPositions) * 100}%`,
+    right: `${(1 - Math.max(...allPositions)) * 100}%`,
+  }
+})
+
 const trackClasses = computed(() => {
   return [
     'relative grow rounded',
@@ -64,13 +79,20 @@ const trackClasses = computed(() => {
 const rangeClasses = computed(() => {
   return [
     'absolute h-full rounded',
-    props.disabled ? 'bg-surface-gray-4' : 'bg-surface-gray-7',
+    props.disabled ? 'bg-surface-gray-4' : 'bg-surface-gray-10',
+  ]
+})
+
+const rootClasses = computed(() => {
+  return [
+    'relative flex w-full select-none touch-none items-center',
+    props.size === 'md' ? 'h-5' : 'h-4',
   ]
 })
 
 const thumbClasses = computed(() => {
   return [
-    'rounded-full bg-surface-white shadow-md ring-gray-600/20 transition-shadow duration-200 ease-out hover:ring-[6px] focus:outline-none dark:bg-surface-gray-7 dark:ring-gray-100/20',
+    'rounded-full bg-surface-base shadow-md ring-gray-600/20 transition-shadow duration-200 ease-out hover:ring-[6px] focus:outline-none dark:bg-surface-gray-10 dark:ring-gray-100/20',
     props.size === 'md' ? 'size-5' : 'size-4',
     props.disabled
       ? 'cursor-not-allowed opacity-60 hover:ring-0'
@@ -85,10 +107,10 @@ const onValueCommit = (value: SliderValue) => {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      slots.label ||
-      showDescription.value ||
-      slots.description ||
-      hasError.value,
+    slots.label ||
+    showDescription.value ||
+    slots.description ||
+    hasError.value,
   )
 })
 </script>
@@ -101,7 +123,6 @@ const hasLabeling = computed(() => {
       :for-id="inputId"
       :label="props.label"
       :required="props.required"
-      class="text-p-sm font-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -110,7 +131,7 @@ const hasLabeling = computed(() => {
     <SliderRoot
       :id="inputId"
       v-model="sliderValue"
-      class="relative flex w-full select-none touch-none items-center"
+      :class="rootClasses"
       :max="props.max"
       :min="props.min"
       :step="props.step"
@@ -125,7 +146,14 @@ const hasLabeling = computed(() => {
       @value-commit="onValueCommit"
     >
       <SliderTrack :class="trackClasses">
-        <SliderRange :class="rangeClasses" />
+        <SliderRange v-if="!isBidirectional" :class="rangeClasses" />
+        <div
+          v-else
+          :class="rangeClasses"
+          :style="bidirectionalRangeStyles"
+          data-orientation="horizontal"
+          :data-disabled="props.disabled ? '' : undefined"
+        />
       </SliderTrack>
 
       <SliderThumb

package/src/components/Slider/stories/NegativeValues.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Slider } from 'frappe-ui'
+
+const value = ref([25])
+</script>
+
+<template>
+  <div class="w-full max-w-md">
+    <Slider v-model="value" :min="-50" :max="100" />
+  </div>
+</template>

package/src/components/Slider/types.ts

@@ -20,7 +20,7 @@ export interface SliderProps extends InputLabelingProps {
   /** Maximum allowed slider value. */
   max?: number
 
-  /** Minimum allowed slider value. */
+  /** Minimum allowed slider value. Negative values enable bidirectional fill from zero. */
   min?: number
 
   /** Visual size of the slider. */

package/src/components/Spinner/Spinner.api.md

@@ -0,0 +1,32 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const propsData = [
+  {
+    name: 'size',
+    description: 'Diameter — xs=12px, sm=14px, md=16px, lg=20px. Omit to size with classes (default 16px).',
+    required: false,
+    type: 'SpinnerSize'
+  },
+  {
+    name: 'theme',
+    description: 'Spinner color. Omit to inherit the text color.',
+    required: false,
+    type: 'SpinnerTheme'
+  },
+  {
+    name: 'track',
+    description: 'Show a faint track behind the arc',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="Spinner" :data="propsData"/> 
+

package/src/components/Spinner/Spinner.cy.ts

@@ -0,0 +1,87 @@
+import Spinner from './Spinner.vue'
+
+describe('Spinner', () => {
+  it('renders with role="status" and default aria-label', () => {
+    cy.mount(Spinner)
+
+    cy.get('[role="status"]')
+      .should('exist')
+      .and('have.attr', 'aria-label', 'Loading')
+  })
+
+  describe('sizes', () => {
+    const sizes = [
+      { size: 'xs', px: 12 },
+      { size: 'sm', px: 14 },
+      { size: 'md', px: 16 },
+      { size: 'lg', px: 20 },
+    ] as const
+
+    sizes.forEach(({ size, px }) => {
+      it(`size="${size}" sets ${px}px width and height`, () => {
+        cy.mount(Spinner, { props: { size } })
+
+        cy.get('[role="status"]').should(($el) => {
+          expect($el[0].style.width).to.equal(`${px}px`)
+          expect($el[0].style.height).to.equal(`${px}px`)
+        })
+      })
+    })
+
+    it('no size prop applies no inline width/height and defaults to 16px via svg attributes', () => {
+      cy.mount(Spinner)
+
+      cy.get('[role="status"]').should(($el) => {
+        expect($el[0].style.width).to.equal('')
+        expect($el[0].style.height).to.equal('')
+        expect(getComputedStyle($el[0]).width).to.equal('16px')
+        expect(getComputedStyle($el[0]).height).to.equal('16px')
+      })
+    })
+
+    it('without size prop, width/height classes win over the CSS default', () => {
+      cy.mount(Spinner, { attrs: { class: 'h-3 w-3' } })
+
+      cy.get('[role="status"]').should(($el) => {
+        expect(getComputedStyle($el[0]).width).to.equal('12px')
+        expect(getComputedStyle($el[0]).height).to.equal('12px')
+      })
+    })
+  })
+
+  describe('theme', () => {
+    it('theme="gray" applies text-ink-gray-8 class', () => {
+      cy.mount(Spinner, { props: { theme: 'gray' } })
+
+      cy.get('[role="status"]').should('have.class', 'text-ink-gray-8')
+    })
+
+    it('theme="red" applies text-ink-red-8 class', () => {
+      cy.mount(Spinner, { props: { theme: 'red' } })
+
+      cy.get('[role="status"]').should('have.class', 'text-ink-red-8')
+    })
+
+    it('no theme prop applies no color class (inherits currentColor)', () => {
+      cy.mount(Spinner)
+
+      cy.get('[role="status"]')
+        .should('not.have.class', 'text-ink-gray-8')
+        .and('not.have.class', 'text-ink-red-8')
+    })
+  })
+
+  describe('track', () => {
+    it('track=false (default) does not apply track class', () => {
+      cy.mount(Spinner)
+
+      cy.get('[role="status"]').should('not.have.class', 'fui-spinner--track')
+    })
+
+    it('track=true applies fui-spinner--track class', () => {
+      cy.mount(Spinner, { props: { track: true } })
+
+      cy.get('[role="status"]').should('have.class', 'fui-spinner--track')
+    })
+  })
+})

package/src/components/Spinner/Spinner.md

@@ -0,0 +1,21 @@
+# Spinner
+
+Communicates an ongoing, indeterminate loading state.
+
+## Sizes
+
+<ComponentPreview name="Spinner-Sizes" />
+
+## Themes
+
+<ComponentPreview name="Spinner-Themes" />
+
+## Track
+
+<ComponentPreview name="Spinner-Track" />
+
+## In context
+
+<ComponentPreview name="Spinner-InContext" />
+
+<!-- @include: ./Spinner.api.md -->

package/src/components/Spinner/Spinner.vue

@@ -0,0 +1,168 @@
+<template>
+  <svg
+    class="fui-spinner inline-block shrink-0"
+    width="16"
+    height="16"
+    role="status"
+    aria-label="Loading"
+    :class="[colorClass, { 'fui-spinner--track': track }]"
+    :style="rootStyle"
+  ></svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { SpinnerProps, SpinnerSize } from './types'
+
+const props = withDefaults(defineProps<SpinnerProps>(), {
+  track: false,
+})
+
+// px diameter, ring thickness and inner padding per size, matching the
+// Figma sizes (the ring is inset from the box edge by `inset`, 7.5% of
+// the diameter)
+const sizeMap: Record<
+  SpinnerSize,
+  { px: number; thickness: number; inset: number }
+> = {
+  xs: { px: 12, thickness: 1.5, inset: 0.9 },
+  sm: { px: 14, thickness: 2, inset: 1.05 },
+  md: { px: 16, thickness: 2, inset: 1.2 },
+  lg: { px: 20, thickness: 2, inset: 1.5 },
+}
+
+const colorClass = computed(() => {
+  // No `theme` → inherit the current text color (customizable with a
+  // text-* class on the spinner or a parent).
+  if (props.theme == null) return null
+  return { gray: 'text-ink-gray-8', red: 'text-ink-red-8' }[props.theme]
+})
+
+const rootStyle = computed(() => {
+  // Fixed sizing applies only when `size` is a valid SpinnerSize. Otherwise
+  // the spinner is sized by CSS — a width/height class or an inline style —
+  // falling back to the 16px width/height attributes on the svg, which any
+  // CSS wins over. Ring thickness and inset stay proportional via the
+  // % defaults.
+  const size = props.size != null ? sizeMap[props.size] : undefined
+  if (!size) return undefined
+  return {
+    width: `${size.px}px`,
+    height: `${size.px}px`,
+    '--fui-spinner-thickness': `${size.thickness}px`,
+    '--fui-spinner-mask-thickness': `${size.thickness}px`,
+    '--fui-spinner-inset': `${size.inset}px`,
+  }
+})
+</script>
+
+<style scoped>
+/* Registered so the angle interpolates in animation. The animation spins
+   the GRADIENT angle, not the element: rotating the element rasterizes
+   the circle once and any sub-device-pixel offset in that raster orbits
+   visibly (wobble at 16px/18px on 2x displays). With a static element the
+   circle is re-painted antialiased around a fixed center every frame —
+   wobble is geometrically impossible. Baseline: Chrome 111+, Safari
+   16.4+, Firefox 128+ (same as Tailwind v4). */
+@property --fui-spinner-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+/* The root is an empty <svg> used purely as a paint surface: its
+   width/height attributes provide the 16px default size at the lowest
+   possible CSS priority (any class or inline style overrides them).
+
+   Everything is drawn into a centered square (`--fui-spinner-paint-size`)
+   slightly smaller than the box — per Figma the ring is inset from the
+   edge (1.2px at 16px). */
+.fui-spinner {
+  /* Two rulers, one thickness: a percentage resolves against the paint
+     radius in the mask gradient but against the paint box in the cap
+     gradient, so the mask value is 2× the cap value. Anchored to the md
+     spec: 16px box − 2×1.2px inset = 13.6px paint box; 2px ring =
+     14.7% of 13.6px = 29.4% of the 6.8px radius. A valid `size` prop
+     overrides all three with px values. */
+  --fui-spinner-thickness: 14.7%;
+  --fui-spinner-mask-thickness: 29.4%;
+  --fui-spinner-inset: 7.5%;
+  --fui-spinner-paint-size: calc(100% - 2 * var(--fui-spinner-inset));
+  --fui-spinner-track-color: transparent;
+  /* the spinning comet arc over an optional faint track —
+     layer 1: a round dot capping the solid head (rounded end); it orbits
+              the arc centerline radius (50% − t/2) at the animated angle
+     layer 2: a conic gradient fading from transparent (gap + tail) to
+              solid, rotated by the same animated angle
+     layer 3: a full circle, transparent unless `track` is set */
+  background-image:
+    radial-gradient(
+      calc(var(--fui-spinner-thickness) / 2)
+        calc(var(--fui-spinner-thickness) / 2) at
+        calc(
+          50% + (50% - var(--fui-spinner-thickness) / 2) *
+            sin(var(--fui-spinner-angle))
+        )
+        calc(
+          50% - (50% - var(--fui-spinner-thickness) / 2) *
+            cos(var(--fui-spinner-angle))
+        ),
+      currentColor 92%,
+      transparent
+    ),
+    conic-gradient(
+      from var(--fui-spinner-angle),
+      transparent 32%,
+      currentColor 92%,
+      currentColor 100%
+    ),
+    linear-gradient(
+      var(--fui-spinner-track-color),
+      var(--fui-spinner-track-color)
+    );
+  background-size: var(--fui-spinner-paint-size) var(--fui-spinner-paint-size);
+  background-position: center;
+  background-repeat: no-repeat;
+  /* clip everything painted above into a ring of the configured thickness.
+     The outer transparent stop bounds the ring circle (the corners of the
+     square mask image sit beyond `farthest-side` and would show otherwise);
+     the half-pixel fade is for antialiasing. */
+  -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--fui-spinner-mask-thickness)),
+      #000 calc(100% - var(--fui-spinner-mask-thickness)),
+      #000 calc(100% - 0.5px),
+      transparent 100%
+    )
+    center / var(--fui-spinner-paint-size) var(--fui-spinner-paint-size)
+    no-repeat;
+  mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--fui-spinner-mask-thickness)),
+      #000 calc(100% - var(--fui-spinner-mask-thickness)),
+      #000 calc(100% - 0.5px),
+      transparent 100%
+    )
+    center / var(--fui-spinner-paint-size) var(--fui-spinner-paint-size)
+    no-repeat;
+  /* spins the gradient angle — the element itself never moves */
+  animation: fui-spinner-rotate 0.7s linear infinite;
+}
+
+/* faint full-circle track behind the arc */
+.fui-spinner--track {
+  --fui-spinner-track-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+@keyframes fui-spinner-rotate {
+  to {
+    --fui-spinner-angle: 360deg;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fui-spinner {
+    animation-duration: 1.6s;
+  }
+}
+</style>

package/src/components/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner.vue'
+export type { SpinnerProps } from './types'

package/src/components/Spinner/stories/InContext.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <Button
+      theme="gray"
+      variant="solid"
+      icon="lucide-save"
+      :loading="true"
+      size="xs"
+    />
+    <Button
+      theme="gray"
+      variant="solid"
+      :loading="true"
+      loading-text="Discover"
+      size="xs"
+    />
+    <Button
+      theme="gray"
+      variant="solid"
+      :loading="true"
+      loading-text="Discover"
+    />
+    <Button
+      theme="red"
+      variant="subtle"
+      :loading="true"
+      loading-text="Deleting"
+      size="md"
+    />
+    <Button
+      theme="gray"
+      variant="ghost"
+      :loading="true"
+      loading-text="Loading"
+      size="md"
+    />
+    <Button
+      theme="gray"
+      variant="subtle"
+      :loading="true"
+      loading-text="Get app"
+      size="lg"
+    />
+  </div>
+</template>

package/src/components/Spinner/stories/Sizes.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Spinner } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex items-center gap-6">
+    <Spinner size="xs" />
+    <Spinner size="sm" />
+    <Spinner size="md" />
+    <Spinner size="lg" />
+  </div>
+</template>

package/src/components/Spinner/stories/Themes.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Spinner } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex items-center gap-6">
+    <Spinner theme="gray" size="lg" />
+    <Spinner theme="red" size="lg" />
+  </div>
+</template>

package/src/components/Spinner/stories/Track.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Spinner } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex items-center gap-6">
+    <Spinner size="lg" />
+    <Spinner size="lg" track />
+    <Spinner size="lg" theme="red" />
+    <Spinner size="lg" theme="red" track />
+  </div>
+</template>

package/src/components/Spinner/types.ts

@@ -0,0 +1,14 @@
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg'
+
+export type SpinnerTheme = 'gray' | 'red'
+
+export interface SpinnerProps {
+  /** Diameter — xs=12px, sm=14px, md=16px, lg=20px. Omit to size with classes (default 16px). */
+  size?: SpinnerSize
+
+  /** Spinner color. Omit to inherit the text color. */
+  theme?: SpinnerTheme
+
+  /** Show a faint track behind the arc */
+  track?: boolean
+}

package/src/components/Switch/Switch.md

@@ -2,6 +2,10 @@
 
 A toggle input for turning options on or off. Clearly indicates state changes and allows quick, intuitive control.
 
+## Playground
+
+<ClientOnly><SwitchBuilder /></ClientOnly>
+
 <ComponentPreview name="Switch-Default" layout="stacked" />
 
 ## Sizes

package/src/components/Switch/Switch.vue

@@ -42,10 +42,7 @@
         <SwitchThumb :class="switchCircleClasses" />
       </SwitchRoot>
     </div>
-    <div
-      v-if="showDescription || hasError || $slots.description"
-      class="mt-1"
-    >
+    <div v-if="showDescription || hasError || $slots.description" class="mt-1">
       <InputDescription
         v-if="showDescription || $slots.description"
         :id="descriptionId"
@@ -53,11 +50,7 @@
       >
         <slot v-if="$slots.description" name="description" />
       </InputDescription>
-      <InputError
-        v-if="hasError"
-        :id="errorMessageId"
-        :lines="errorLines"
-      />
+      <InputError v-if="hasError" :id="errorMessageId" :lines="errorLines" />
     </div>
   </div>
 </template>
@@ -128,10 +121,9 @@ const {
 const switchClasses = computed(() => {
   return [
     'relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-transparent transition-colors duration-100 ease-in-out items-center',
-    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-outline-gray-3',
     'disabled:cursor-not-allowed disabled:bg-surface-gray-3',
     model.value
-      ? 'bg-surface-gray-7 enabled:hover:bg-surface-gray-6 active:bg-surface-gray-5 group-hover:enabled:bg-surface-gray-6'
+      ? 'bg-surface-gray-10 enabled:hover:bg-surface-gray-9 active:bg-surface-gray-8 group-hover:enabled:bg-surface-gray-9'
       : 'bg-surface-gray-4 enabled:hover:bg-gray-400 active:bg-gray-500 group-hover:enabled:bg-gray-400',
     props.size === 'md' ? 'h-5 w-8 border-[3px]' : 'h-4 w-[26px] border-2',
   ]
@@ -139,7 +131,7 @@ const switchClasses = computed(() => {
 
 const switchCircleClasses = computed(() => {
   return [
-    'pointer-events-none inline-block transform rounded-full bg-surface-white shadow ring-0 transition duration-100 ease-in-out',
+    'pointer-events-none inline-block transform rounded-full bg-surface-base shadow ring-0 transition duration-100 ease-in-out',
     props.size === 'md' ? 'h-3.5 w-3.5' : 'h-3 w-3',
     props.size === 'md'
       ? model.value
@@ -154,14 +146,7 @@ const switchCircleClasses = computed(() => {
 const iconClasses = 'me-2 size-4 flex-shrink-0 text-ink-gray-6'
 
 const switchLabelClasses = computed(() => {
-  return [
-    'font-medium leading-normal',
-    props.disabled && !props.description
-      ? 'text-ink-gray-4'
-      : 'text-ink-gray-8',
-    props.size === 'md' ? 'text-lg' : 'text-base',
-    props.labelClasses,
-  ]
+  return 'leading-normal'
 })
 
 const switchGroupClasses = computed(() => {
@@ -170,9 +155,7 @@ const switchGroupClasses = computed(() => {
   if (!hasLabel && !hasDescription) return undefined
   const classes = ['flex justify-between']
   if (!hasDescription) {
-    classes.push(
-      'group items-center gap-x-3 py-1.5 cursor-pointer rounded focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-outline-gray-3',
-    )
+    classes.push('group items-center gap-x-3 py-1.5 cursor-pointer rounded')
 
     if (props.disabled) classes.push('cursor-not-allowed')
   } else {