pxd 0.0.55 → 0.0.60

package/dist/components/slider/index.vue

@@ -1,11 +1,14 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { useModelValue } from "../../composables/use-model-value";
 import { cachedOff, cachedOn, once } from "../../utils/event";
 import { getFallbackValue } from "../../utils/get";
+import { NOOP } from "../../utils/event";
+import { throttleByRaf } from "../../utils/throttle";
 defineOptions({
   name: "PSlider",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -44,14 +47,14 @@ const VARIANTS = {
   error: "hsl(var(--color-red-700-value))"
 };
 let isDragging = false;
-let lastClientX;
-let animationFrameId;
+let sliderRect = null;
+let lastClientX = null;
 const configProvider = useConfigProvider();
 const sliderRef = shallowRef();
 const modelValue = useModelValue(props, emits);
 const activeThumb = shallowRef();
 const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
-const valueArray = computed(() => {
+const valueRange = computed(() => {
   if (props.range) {
     return Array.isArray(modelValue.value) ? modelValue.value : [props.min, modelValue.value];
   }
@@ -62,8 +65,8 @@ function getPercentage(value) {
   const range = max - min;
   return Math.max(0, Math.min(100, (value - min) / range * 100));
 }
-const startPercentage = computed(() => getPercentage(valueArray.value[0]));
-const endPercentage = computed(() => getPercentage(valueArray.value[1]));
+const startPercentage = computed(() => getPercentage(valueRange.value[0]));
+const endPercentage = computed(() => getPercentage(valueRange.value[1]));
 const trackStyle = computed(() => {
   const backgroundColor = props.disabled ? "var(--color-gray-alpha-400)" : getFallbackValue(props.variant, VARIANTS, "primary");
   if (props.range) {
@@ -82,7 +85,7 @@ function updateValueFromPosition(clientX) {
   if (!sliderRef.value || !activeThumb.value) {
     return;
   }
-  const rect = sliderRef.value.getBoundingClientRect();
+  const rect = sliderRect ?? sliderRef.value.getBoundingClientRect();
   const posPercentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
   const range = props.max - props.min;
   const rawValue = props.min + posPercentage * range;
@@ -91,7 +94,7 @@ function updateValueFromPosition(clientX) {
     Math.min(props.max, props.step > 0 ? Math.round(rawValue / props.step) * props.step : rawValue)
   );
   if (props.range) {
-    const newValueArray = [...valueArray.value];
+    const newValueArray = [...valueRange.value];
     if (activeThumb.value === "start") {
       newValueArray[0] = newValue;
       if (newValue > newValueArray[1]) {
@@ -107,28 +110,23 @@ function updateValueFromPosition(clientX) {
         activeThumb.value = "start";
       }
     }
-    if (valueArray.value[0] !== newValueArray[0] || valueArray.value[1] !== newValueArray[1]) {
+    if (valueRange.value[0] !== newValueArray[0] || valueRange.value[1] !== newValueArray[1]) {
       modelValue.value = newValueArray;
     }
   } else if (modelValue.value !== newValue) {
     modelValue.value = newValue;
   }
 }
-function scheduleUpdate() {
-  if (animationFrameId) {
-    return;
+const scheduleUpdate = throttleByRaf(() => {
+  if (lastClientX !== null) {
+    updateValueFromPosition(lastClientX);
   }
-  animationFrameId = requestAnimationFrame(() => {
-    animationFrameId = null;
-    if (lastClientX !== null) {
-      updateValueFromPosition(lastClientX);
-    }
-    if (isDragging) {
-      scheduleUpdate();
-    }
-  });
-}
+});
 function startDragging(ev, thumb) {
+  if (!sliderRef.value) {
+    return;
+  }
+  sliderRect = sliderRef.value.getBoundingClientRect();
   isDragging = true;
   activeThumb.value = thumb;
   lastClientX = ev.clientX;
@@ -148,11 +146,9 @@ function handleMove(ev) {
 function endDragging() {
   isDragging = false;
   lastClientX = null;
+  sliderRect = null;
   activeThumb.value = null;
-  if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
-  }
+  scheduleUpdate.cancel();
   cachedOff(document, "pointermove", handleMove);
   cachedOff(document, "pointercancel", endDragging);
 }
@@ -184,14 +180,43 @@ function initModelValue() {
   if (props.range && !Array.isArray(modelValue.value)) {
     modelValue.value = [props.min, modelValue.value];
   } else if (!props.range && Array.isArray(modelValue.value)) {
-    modelValue.value = modelValue.value[1];
+    modelValue.value = modelValue.value[1] ?? 0;
+  }
+}
+function onThumbKeydown(ev) {
+  if (props.disabled) {
+    return;
+  }
+  const { code } = ev;
+  const delta = code === "ArrowLeft" ? -props.step : code === "ArrowRight" ? props.step : 0;
+  if (!delta) {
+    return;
+  }
+  ev.preventDefault();
+  const target = ev.target;
+  const isStart = target.dataset.rangeStart === "true";
+  if (props.range) {
+    const [startVal, endVal] = valueRange.value;
+    const newRange = [startVal, endVal];
+    if (isStart) {
+      newRange[0] = Math.max(props.min, Math.min(endVal, startVal + delta));
+    } else {
+      newRange[1] = Math.max(startVal, Math.min(props.max, endVal + delta));
+    }
+    if (newRange[0] !== startVal || newRange[1] !== endVal) {
+      modelValue.value = newRange;
+    }
+  } else {
+    const current = modelValue.value;
+    const newValue = Math.max(props.min, Math.min(props.max, current + delta));
+    if (newValue !== current) {
+      modelValue.value = newValue;
+    }
   }
 }
 initModelValue();
 onBeforeUnmount(() => {
-  if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId);
-  }
+  scheduleUpdate.cancel();
   cachedOff(document, "pointermove", handleMove);
   cachedOff(document, "pointerup", endDragging);
   cachedOff(document, "pointercancel", endDragging);
@@ -200,9 +225,10 @@ onBeforeUnmount(() => {
 
 <template>
   <div
+    v-bind="$attrs"
     ref="sliderRef"
     :role="range ? 'group' : 'slider'"
-    class="pxd-slider group/slider relative flex touch-none items-center rounded-full bg-gray-200 select-none"
+    class="pxd-slider group/slider relative flex w-full max-w-full shrink-0 touch-none items-center rounded-full bg-gray-200 select-none"
     :class="[{ 'cursor-not-allowed': disabled }, computedSize.track]"
     @pointerdown.prevent="onWrapperPointerdown"
   >
@@ -210,27 +236,43 @@ onBeforeUnmount(() => {
 
     <div
       v-if="props.range"
-      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-1 active:scale-130 motion-safe:transition-transform"
-      :class="[
-  { 'scale-130': activeThumb === 'start', 'pointer-events-none': disabled },
-  computedSize.thumb
-]"
+      tabindex="0"
+      :data-dragging="isDragging && activeThumb === 'start'"
+      :data-range-start="true"
+      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 touch-none appearance-none bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-all pointer-fine:hover:[--slider-thumb-scale:1.3]"
+      :class="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${startPercentage}%` }"
+      @keydown="onThumbKeydown"
+      @contextmenu.prevent="NOOP"
       @pointerdown.prevent.stop="startDragging($event, 'start')"
-    />
+    >
+      <span
+        class="py-1 px-1.5 text-xs -top-8 shadow-sm pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+      >
+        {{ valueRange[0] }}
+      </span>
+    </div>
 
     <div
-      class="pxd-slider--thumb rounded-xs absolute -translate-x-1/2 touch-none bg-background-100 hover:scale-130 active:z-1 active:scale-130 motion-safe:transition-transform"
-      :class="[
-  { 'scale-130': activeThumb === 'end', 'pointer-events-none': disabled },
-  computedSize.thumb
-]"
+      tabindex="0"
+      :data-range-start="range ? false : true"
+      :data-dragging="isDragging && activeThumb === 'end'"
+      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 touch-none appearance-auto bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-all pointer-fine:hover:[--slider-thumb-scale:1.3]"
+      :class="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
       :style="{ left: `${endPercentage}%` }"
+      @keydown="onThumbKeydown"
+      @contextmenu.prevent="NOOP"
       @pointerdown.prevent.stop="startDragging($event, 'end')"
-    />
+    >
+      <span
+        class="py-1 px-1.5 text-xs -top-8 shadow-sm pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+      >
+        {{ valueRange[1] }}
+      </span>
+    </div>
   </div>
 </template>
 
 <style>
-.pxd-slider--thumb{box-shadow:0 0 0 1px var(--color-gray-alpha-500),0 1px 2px var(--color-gray-alpha-100)}.pxd-slider--thumb:after{content:"";height:200%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:200%}.pxd-slider:active .pxd-slider--thumb,.pxd-slider:active .pxd-slider--track{will-change:width,left}
+.pxd-slider--thumb[data-dragging=true]{--slider-thumb-scale:1.3}.pxd-slider--thumb:after,.pxd-slider--thumb:before{border-radius:inherit;content:"";left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) scale(var(--slider-thumb-scale,1))}.pxd-slider--thumb:before{background-color:#fff;box-shadow:0 0 0 1px var(--color-gray-alpha-500),0 1px 2px var(--color-gray-alpha-100);height:100%;width:100%}.dark .pxd-slider--thumb:before{box-shadow:0 0 0 1px #000,0 1px 2px #0000000a}.pxd-slider--thumb:after{height:200%;width:200%}.pxd-slider:active .pxd-slider--thumb,.pxd-slider:active .pxd-slider--track{will-change:width,left}
 </style>

package/dist/components/slider/types.d.ts

@@ -8,7 +8,7 @@ export interface SliderProps {
   disabled?: boolean
   size?: ComponentSize
   variant?: ComponentVariant | 'secondary'
-  modelValue?: number | [number, number] | null
+  modelValue?: number | number[] | null
 }
 
 export interface SliderEmits {

package/dist/components/snippet/index.vue

@@ -2,10 +2,10 @@
 import CheckIcon from "@gdsicon/vue/check";
 import CopyIcon from "@gdsicon/vue/copy";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { useCopyClick } from "../../composables/use-copy-click";
 import { getCssUnitValue, isTruthyProp, toArray } from "../../utils/format";
-import { snippetVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PSnippet",
   inheritAttrs: false
@@ -18,6 +18,32 @@ const props = defineProps({
   variant: { type: String, required: false, default: "default" }
 });
 const emits = defineEmits(["copy"]);
+const snippetVariant = tv({
+  base: "pxd-snippet pr-12 relative flex items-center rounded-lg border motion-safe:transition-all",
+  variants: {
+    size: {
+      sm: "min-h-7.5 pl-3.5 pr-1.5 py-2 text-sm",
+      md: "min-h-9 pl-3.5 pr-2.5 py-2.5 text-sm",
+      lg: "min-h-10 pl-3.5 pr-3.5 py-3 text-base"
+    },
+    variant: {
+      default: "border-gray-alpha-300 bg-background-100",
+      primary: "border-gray-alpha-300 bg-primary text-gray-100",
+      success: "border-gray-alpha-300 bg-blue-200 text-blue-900",
+      error: "border-gray-alpha-300 bg-red-200 text-red-900",
+      warning: "border-gray-alpha-300 bg-amber-200 text-amber-900"
+    },
+    prompt: {
+      true: "pxd-snippet--prompt",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    prompt: false
+  }
+});
 const configProvider = useConfigProvider();
 const { isCopied, copyText } = useCopyClick();
 const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);

package/dist/components/spinner/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 defineOptions({
-  name: "PSpinner"
+  name: "PSpinner",
+  inheritAttrs: false
 });
 const ITEMS_COUNT = 12;
 const ROTATE_STEP = 360 / ITEMS_COUNT;
@@ -9,7 +10,8 @@ const OPACITY_STEP = 1 / ITEMS_COUNT;
 
 <template>
   <div
-    class="pxd-spinner transform-origin-center motion-safe:animate-spin pointer-events-none relative size-em overflow-hidden text-gray-700"
+    class="pxd-spinner transform-origin-center motion-safe:animate-spin pointer-events-none relative size-em overflow-hidden text-gray-700 content-visibility-auto intrinsic-size-auto"
+    v-bind="$attrs"
   >
     <div class="pxd-spinner-container top-0 left-0 absolute size-full">
       <div

package/dist/components/stack/index.d.vue.ts

@@ -4,11 +4,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<StackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StackProps> & Readonly<{}>, {
-    align: import("./types").Align;
     as: import("../../types/shared").ComponentAs;
+    align: import("./types").Align;
     wrap: boolean;
-    justify: import("./types").Align;
     scale: number;
+    justify: import("./types").Align;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/stack/index.vue

@@ -1,20 +1,52 @@
 <script setup>
 import { computed } from "vue";
 import { getResponsiveValue } from "../../utils/responsive";
-import { stackVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PStack",
   inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "div" },
-  wrap: { type: Boolean, required: false, default: true },
+  as: { type: [String, Object], required: false, default: "div" },
   gap: { type: [String, Number, Object], required: false },
+  wrap: { type: Boolean, required: false, default: true },
   scale: { type: Number, required: false, default: 4 },
   align: { type: String, required: false, default: "start" },
   justify: { type: String, required: false, default: "start" },
   direction: { type: [String, Object], required: false }
 });
+const stackVariant = tv({
+  base: "pxd-stack flex max-w-full gap-(--xs) [--xs:1rem]",
+  variants: {
+    wrap: {
+      true: "flex-wrap",
+      false: ""
+    },
+    align: {
+      start: "items-start",
+      end: "items-end",
+      center: "items-center",
+      between: "items-between",
+      around: "items-around",
+      evenly: "items-evenly",
+      stretch: "items-stretch"
+    },
+    justify: {
+      start: "flex-start",
+      end: "flex-end",
+      center: "justify-center",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly",
+      stretch: "justify-stretch"
+    }
+  },
+  defaultVariants: {
+    wrap: true,
+    align: "start",
+    justify: "start"
+  }
+});
 const presetDir = {
   "--xs:vertical": "flex-col",
   "--xs:horizontal": "flex-row",

package/dist/components/stack/types.d.ts

@@ -4,8 +4,8 @@ type Align = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'str
 
 export interface StackProps {
   as?: ComponentAs
-  wrap?: boolean
   gap?: ResponsiveValue<string | number>
+  wrap?: boolean
   scale?: number
   align?: Align
   justify?: Align

package/dist/components/status-dot/index.vue

@@ -1,5 +1,9 @@
 <script setup>
 import { capitalize as capitalizeText } from "../../utils/format";
+defineOptions({
+  name: "PStatusDot",
+  inheritAttrs: false
+});
 const props = defineProps({
   label: { type: [Boolean, String, Number, Array, null], required: false, default: false },
   state: { type: String, required: false, default: "QUEUED" }
@@ -24,7 +28,7 @@ function getLabelText() {
 </script>
 
 <template>
-  <span class="pxd-state-dot inline-flex items-center">
+  <span class="pxd-state-dot inline-flex items-center" v-bind="$attrs">
     <i
       aria-hidden="true"
       class="w-2.5 h-2.5 inline-block rounded-full"

package/dist/components/switch/index.d.vue.ts

@@ -3,7 +3,16 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: NonNullable<string | number | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<string | number | undefined>) => any;
+}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
+    onChange?: ((args_0: NonNullable<string | number | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<string | number | undefined>) => any) | undefined;
+}>, {
+    options: import("../../types/shared").ComponentOption[];
+    modelValue: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/switch/index.vue

@@ -1,62 +1,53 @@
 <script setup>
 import { computed } from "vue";
-import { useUniqueId } from "../../composables/use-unique-id-context";
-import { useSwitchGroupContext, useSwitchGroupModelValue } from "../../contexts/switch";
+import { useConfigProvider } from "../../contexts/config-provider";
+import { useModelValue } from "../../composables/use-model-value";
+import { provideSwitchContext } from "../../contexts/switch";
+import { getFallbackValue } from "../../utils/get";
 import { getUniqueId } from "../../utils/uid";
-import { switchVariant } from "./cn";
+import PSwitchItem from "../switch-item/index.vue";
 defineOptions({
   name: "PSwitch",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
   }
 });
 const props = defineProps({
-  label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number], required: true },
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false }
+  fullWidth: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  options: { type: Array, required: false, default: () => [] },
+  modelValue: { type: [String, Number], required: false, default: "" }
 });
-const uniqueId = getUniqueId();
-const switchGroupName = useUniqueId("SwitchGroupName");
-const switchGroupContext = useSwitchGroupContext();
-const switchGroupModelValue = useSwitchGroupModelValue();
-const isChecked = computed(() => switchGroupModelValue.value === props.value);
-const computedDisabled = computed(() => props.disabled || switchGroupContext.disabled);
-const computedRequired = computed(() => props.required || switchGroupContext.required);
-const computedClasses = computed(() => {
-  return switchVariant({ disabled: computedDisabled.value });
-});
-function onSwitchFocusIn() {
-  if (computedDisabled.value) {
-    return;
-  }
-  switchGroupModelValue.value = props.value;
-}
+const emits = defineEmits(["change", "update:modelValue"]);
+const SIZES = {
+  sm: "h-7.5",
+  md: "h-9",
+  lg: "h-10"
+};
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits);
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
+provideSwitchContext({ props, emits, name: getUniqueId() });
 </script>
 
 <template>
-  <label
-    :aria-checked="isChecked"
-    class="pxd-switch flex-1 shrink-0 cursor-pointer"
-    :for="uniqueId"
+  <div
+    class="pxd-switch p-1 flex touch-manipulation rounded-lg border"
+    :class="[fullWidth ? 'w-full' : 'w-max', computedSize]"
+    v-bind="$attrs"
   >
-    <input
-      :id="uniqueId"
-      v-model="switchGroupModelValue"
-      type="radio"
-      :value="value"
-      class="peer smallest"
-      :checked="isChecked"
-      :name="switchGroupName"
-      :disabled="computedDisabled"
-      :required="computedRequired"
-    />
-
-    <div :class="computedClasses" @focusin="onSwitchFocusIn">
-      <slot>
-        {{ label }}
-      </slot>
-    </div>
-  </label>
+    <slot>
+      <PSwitchItem
+        v-for="option in options"
+        :key="option.value"
+        v-model="modelValue"
+        :label="option.label"
+        :value="option.value"
+        :disabled="option.disabled"
+      />
+    </slot>
+  </div>
 </template>

package/dist/components/switch/types.d.ts

@@ -1,22 +1,14 @@
-import type { ComponentLabel, ComponentOption, ComponentSize } from '../../types/shared'
+import type { ComponentOption, ComponentSize } from '../../types/shared'
 
 export interface SwitchProps {
-  label?: ComponentLabel
-  value: string | number
   disabled?: boolean
-  required?: boolean
-}
-
-export interface SwitchGroupProps {
-  disabled?: boolean
-  required?: boolean
   fullWidth?: boolean
   size?: ComponentSize
   options?: ComponentOption[]
   modelValue?: string | number
 }
 
-export interface SwitchGroupEmits {
-  change: [NonNullable<SwitchGroupProps['modelValue']>]
-  'update:modelValue': [NonNullable<SwitchGroupProps['modelValue']>]
+export interface SwitchEmits {
+  change: [NonNullable<SwitchProps['modelValue']>]
+  'update:modelValue': [NonNullable<SwitchProps['modelValue']>]
 }

package/dist/components/switch-item/index.d.vue.ts

@@ -0,0 +1,14 @@
+import type { SwitchItemProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SwitchItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/switch-item/index.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from "vue";
+import { useSwitchContext } from "../../contexts/switch";
+import { useModelValue } from "../../composables/use-model-value";
+import { getUniqueId } from "../../utils/uid";
+import { tv } from "tailwind-variants";
+defineOptions({
+  name: "PSwitchItem",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  label: { type: [String, Number, Array, null], required: false },
+  value: { type: [String, Number], required: true },
+  disabled: { type: Boolean, required: false }
+});
+const emits = defineEmits([]);
+const switchVariant = tv({
+  base: "pxd-switch-item--label px-2.5 text-sm font-medium flex size-full items-center justify-center truncate rounded-sm text-foreground-secondary peer-focus-ring select-none peer-checked:bg-gray-100 peer-disabled:cursor-not-allowed peer-disabled:text-gray-800 empty:hidden hover:text-foreground motion-safe:transition-all",
+  variants: {
+    disabled: {
+      true: "",
+      false: "peer-checked:text-foreground"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+const uniqueId = getUniqueId();
+const switchGroupContext = useSwitchContext();
+const switchGroupName = switchGroupContext?.name ?? getUniqueId();
+const modelValue = useModelValue(
+  switchGroupContext?.props ?? props,
+  switchGroupContext?.emits ?? emits
+);
+const isChecked = computed(() => modelValue.value === props.value);
+const isDisabled = computed(() => props.disabled || switchGroupContext?.props.disabled);
+const computedClasses = computed(() => {
+  return switchVariant({ disabled: isDisabled.value });
+});
+function onInputChange() {
+  if (isDisabled.value) {
+    return;
+  }
+  modelValue.value = props.value;
+}
+</script>
+
+<template>
+  <label
+    role="switch"
+    :aria-selected="isChecked"
+    :data-disabled="isDisabled"
+    class="pxd-switch-item flex-1 shrink-0 cursor-pointer"
+    :for="uniqueId"
+    v-bind="$attrs"
+  >
+    <input
+      :id="uniqueId"
+      type="radio"
+      :value="value"
+      class="peer visually-hidden"
+      :checked="isChecked"
+      :name="switchGroupName"
+      :disabled="isDisabled"
+      @change="onInputChange"
+    />
+
+    <div :class="computedClasses" @focusin="onInputChange">
+      <slot>
+        {{ label }}
+      </slot>
+    </div>
+  </label>
+</template>

package/dist/components/switch-item/types.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentLabel } from '../../types/shared'
+
+export interface SwitchItemProps {
+  label?: ComponentLabel
+  value: string | number
+  disabled?: boolean
+}
+
+export interface SwitchItemEmits {}