pxd 0.0.55 → 0.0.61

package/dist/components/textarea/index.vue

@@ -1,12 +1,13 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
 import { getUniqueId } from "../../utils/uid";
-import { textareaVariant } from "./cn";
 defineOptions({
   name: "PTextarea",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -19,7 +20,6 @@ const props = defineProps({
   error: { type: [Boolean, String], required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   minlength: { type: [Number, String], required: false },
   maxlength: { type: [Number, String], required: false },
@@ -27,6 +27,35 @@ const props = defineProps({
   placeholder: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue", "change", "focus", "blur"]);
+const textareaVariant = tv({
+  base: "",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base"
+    },
+    disabled: {
+      true: "is-disabled",
+      false: ""
+    },
+    readonly: {
+      true: "is-readonly",
+      false: ""
+    },
+    error: {
+      true: "is-error",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    disabled: false,
+    readonly: false,
+    error: false
+  }
+});
 const uniqueId = getUniqueId();
 const modelValue = useModelValue(props, emits);
 const configProvider = useConfigProvider();
@@ -54,6 +83,7 @@ function onInputChange(event) {
     :for="uniqueId"
     class="pxd-textarea pxd-input--border flex size-full min-h-inherit max-w-full items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-all"
     :class="computedClasses"
+    v-bind="$attrs"
   >
     <textarea
       :id="uniqueId"
@@ -66,7 +96,6 @@ function onInputChange(event) {
       :cols="cols"
       :readonly="readonly"
       :disabled="disabled"
-      :required="required"
       :autofocus="autofocus"
       :minlength="minlength"
       :maxlength="maxlength"

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

@@ -7,7 +7,6 @@ export interface TextareaProps {
   error?: boolean | string
   readonly?: boolean
   disabled?: boolean
-  required?: boolean
   autofocus?: boolean
   minlength?: number | string
   maxlength?: number | string

package/dist/components/time-picker/index.d.vue.ts

@@ -1,5 +1,4 @@
 import type { TimePickerProps } from './types';
-import CalendarIcon from '@gdsicon/vue/calendar';
 declare const __VLS_export: import("vue").DefineComponent<TimePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent) => any;
     change: (args_0: boolean) => any;
@@ -12,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<TimePickerProps, {}, {
     format: string;
     modelValue: Date | string | number | null;
     closeOnPressEscape: boolean;
-    presets: CalendarIcon[];
+    presets: import("./types").DateTimePreset[];
     prefixIcon: boolean;
     showSeconds: boolean;
     valueFormat: string;

package/dist/components/time-picker/index.vue

@@ -1,8 +1,8 @@
 <script setup>
 import CalendarIcon from "@gdsicon/vue/calendar";
 import { computed, shallowRef, watch } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { usePopoverResponsive } from "../../composables/use-popover-responsive";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { dayjs } from "../../utils/date";
 import { clampValue } from "../../utils/format";
 import PButton from "../button/index.vue";
@@ -201,7 +201,7 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
       :clearable="clearable"
       :model-value="modelValue"
       :placeholder="placeholder"
-      :prefix-style="false"
+      :default-prefix-style="false"
       :data-focusing="popoverVisible"
       :select-on-focus="!isXs"
       v-bind="$attrs"
@@ -225,7 +225,7 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
       </div>
 
       <div
-        class="sm:text-sm max-sm:text-15px flex max-w-full transform-gpu items-stretch tabular-nums outline-none select-none"
+        class="sm:text-sm max-sm:text-base flex max-w-full transform-gpu items-stretch tabular-nums outline-none select-none"
         @click.stop="onTimeListClick"
       >
         <div class="p-2 gap-1 relative mx-auto flex items-center">
@@ -233,7 +233,7 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
             <ul
               ref="timeHoursRef"
               data-type="hour"
-              class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]"
+              class="w-8 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
               <li v-for="(_, i) of 24" :key="i" class="h-8 leading-8 cursor-pointer">
@@ -245,7 +245,7 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
             <ul
               ref="timeMinutesRef"
               data-type="minute"
-              class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]"
+              class="w-8 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
               <li v-for="(_, i) of 60" :key="i" class="h-8 leading-8 cursor-pointer">
@@ -257,7 +257,7 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
             <ul
               ref="timeSecondsRef"
               data-type="second"
-              class="w-8 h-40 px-0 m-0 py-16 scrollbar-hidden list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none [-webkit-overflow-scrolling:auto]"
+              class="w-8 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
               <li v-for="(_, i) of 60" :key="i" class="h-8 leading-8 cursor-pointer">
@@ -269,7 +269,7 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
 
         <div
           v-if="presets?.length"
-          class="max-sm:w-36 sm:w-25 p-2 gap-1 scrollbar-hidden flex flex-wrap content-start self-stretch overflow-auto border-l outline-none"
+          class="max-sm:w-36 sm:w-25 p-2 gap-1 scrollbar-none flex flex-wrap content-start self-stretch overflow-auto border-l outline-none"
           @click="onPresetClick"
         >
           <button
@@ -286,6 +286,40 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
   </PPopover>
 </template>
 
-<style>
-.pxd-time-picker--list:after,.pxd-time-picker--list:before{background:linear-gradient(var(--time-picker-list-gradient-direction),var(--color-background-100) 15%,transparent);content:"";height:50%;pointer-events:none;position:absolute;width:100%}.pxd-time-picker--list:before{--time-picker-list-gradient-direction:to bottom;top:0}.pxd-time-picker--list:after{--time-picker-list-gradient-direction:to top;bottom:0}
+<style lang="postcss">
+.pxd-time-picker--list {
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: -2px;
+    right: -2px;
+    height: 64px;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::before {
+    border-bottom: 1px solid hsl(var(--color-gray-300-value));
+    top: 0;
+  }
+
+  &::after {
+    border-top: 1px solid hsl(var(--color-gray-300-value));
+    bottom: 0;
+  }
+
+  & > ul {
+    -webkit-overflow-scrolling: auto;
+    /* py-16(64px) / h-40(160px) = 40% */
+    mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 60%, transparent 100%);
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 50%,
+      black 60%,
+      transparent 100%
+    );
+  }
+}
 </style>

package/dist/components/time-picker/types.d.ts

@@ -1,5 +1,4 @@
-import type { DateTimePreset } from '../../types/components/time-picker'
-import type { ComponentSize } from '../../types/shared/props'
+import type { ComponentSize } from '../../types/shared'
 
 export interface DateTimePreset<T = Date> {
   label: string

package/dist/components/toggle/index.vue

@@ -1,12 +1,13 @@
 <script setup>
 import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getFallbackValue } from "../../utils/get";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PToggle",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -35,6 +36,7 @@ const uniqueId = getUniqueId();
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
 const isChecked = computed(() => modelValue.value === props.activeValue);
+const isDisabled = computed(() => props.disabled || props.loading);
 const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 async function onCheckboxChange(e) {
   if (props.loading) {
@@ -61,13 +63,14 @@ async function onCheckboxChange(e) {
     :for="uniqueId"
     class="pxd-toggle group/toggle inline-flex cursor-pointer touch-manipulation items-center select-none"
     :aria-label="modelValue ? activeLabel : inactiveLabel"
+    v-bind="$attrs"
   >
     <input
       :id="uniqueId"
       type="checkbox"
-      :disabled="disabled || loading"
+      :disabled="isDisabled"
       :checked="isChecked"
-      class="pxd-toggle--input peer smallest"
+      class="pxd-toggle--input peer visually-hidden"
       @change.prevent="onCheckboxChange"
     />
 
@@ -78,7 +81,7 @@ async function onCheckboxChange(e) {
     >
 
     <div
-      class="pxd-toggle--handle rounded-full border border-input bg-(--toggle-inactive-color) p-px peer-focus-ring [--tx:0] peer-checked:bg-(--toggle-active-color) peer-checked:[--tx:100%] peer-disabled:cursor-not-allowed motion-safe:transition-all"
+      class="pxd-toggle--handle rounded-full border border-input bg-(--toggle-inactive-color) p-px peer-focus-ring [--tx:0] peer-checked:bg-(--toggle-active-color) peer-checked:[--tx:100%] peer-disabled:cursor-not-allowed peer-checked:peer-disabled:bg-gray-500 motion-safe:transition-all"
       :class="computedSize"
       :style="{
   '--toggle-active-color': activeColor,
@@ -86,9 +89,11 @@ async function onCheckboxChange(e) {
 }"
     >
       <div
-        class="pxd-toggle--handle-icon text-xs shadow-sm relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full bg-background-100 text-foreground-secondary motion-safe:transition-transform"
+        :data-checked="isChecked"
+        :data-disabled="isDisabled"
+        class="pxd-toggle--handle-icon text-xs shadow-sm bg-white relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full text-foreground-secondary motion-safe:transition-all dark:data-[checked=true]:bg-background-100 dark:data-[disabled=true]:bg-gray-900 dark:data-[disabled=true]:text-gray-500"
       >
-        <div class="inset-0 absolute flex items-center justify-center">
+        <div class="inset-0 pointer-events-none absolute flex items-center justify-center">
           <Transition name="pxd-transition--fade" mode="out-in">
             <LoaderCircleIcon v-if="loading" class="motion-safe:animate-spin" />
             <slot v-else-if="modelValue" name="checked" />
@@ -105,7 +110,3 @@ async function onCheckboxChange(e) {
     >
   </label>
 </template>
-
-<style>
-.pxd-toggle--input:checked:disabled+.pxd-toggle--handle{background-color:var(--color-gray-300)}
-</style>

package/dist/components/toggle-button/index.d.vue.ts

@@ -0,0 +1,22 @@
+import type { ToggleButtonProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ToggleButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleButtonProps> & Readonly<{
+    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
+}>, {
+    value: import("../../types/shared").ComponentValue;
+}, {}, {}, {}, 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/toggle-button/index.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { tv } from "tailwind-variants";
+import { computed } from "vue";
+import { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
+import { useToggleButtonGroupContext } from "../../contexts/toggle-button";
+import { toArray } from "../../utils/format";
+defineOptions({
+  name: "PToggleButton",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  variant: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  label: { type: [String, Number, Array, null], required: false },
+  size: { type: String, required: false },
+  value: { type: [String, Number, Boolean], required: false, default: true },
+  modelValue: { type: [String, Number, Boolean, Array], required: false }
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const toggleButtonVariant = tv({
+  base: "pxd-toggle-button gap-2 font-medium relative inline-flex shrink-0 appearance-none items-center justify-center border bg-background-100 outline-none group-data-[gap=0]/toggle-button-group:not-first:-ml-px group-data-[gap=0]/toggle-button-group:not-first:rounded-l-none group-data-[gap=0]/toggle-button-group:not-last:rounded-r-none group-data-[gap=0]/toggle-button-group:first:rounded-r-none data-[state=off]:enabled:hover:z-1 data-[state=on]:z-1 motion-safe:transition-colors [&_svg]:pointer-events-none",
+  variants: {
+    size: {
+      sm: "h-7.5 px-1.75 text-sm rounded-md",
+      md: "h-9 px-2.5 text-sm rounded-md",
+      lg: "h-10 px-2.75 text-base rounded-lg"
+    },
+    variant: {
+      ghost: "border-transparent",
+      outline: "border-input"
+    },
+    disabled: {
+      true: "cursor-not-allowed",
+      false: "hover:bg-background-hover data-[state=on]:bg-gray-300"
+    },
+    checked: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { checked: true, disabled: true, class: "bg-gray-200" },
+    { checked: false, disabled: true, class: "text-gray-400" },
+    { checked: false, disabled: false, class: "hover:text-gray-800" },
+    { variant: "outline", checked: false, disabled: true, class: "border-gray-400" },
+    { variant: "outline", checked: true, disabled: true, class: "border-gray-500 bg-gray-100" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "ghost",
+    checked: false,
+    disabled: false
+  }
+});
+const toggleButtonGroupContext = useToggleButtonGroupContext();
+const modelValue = useModelValue(
+  toggleButtonGroupContext?.props ?? props,
+  toggleButtonGroupContext?.emits ?? emits
+);
+const configProvider = useConfigProvider();
+const isDisabled = computed(() => props.disabled || toggleButtonGroupContext?.props.disabled);
+const isChecked = computed(() => {
+  if (toggleButtonGroupContext?.props.multiple) {
+    return toArray(modelValue.value).includes(props.value);
+  }
+  return modelValue.value === props.value;
+});
+const computedClasses = computed(() => {
+  return toggleButtonVariant({
+    size: props.size || toggleButtonGroupContext?.props.size || configProvider.size,
+    checked: isChecked.value,
+    variant: props.variant || toggleButtonGroupContext?.props.variant,
+    disabled: isDisabled.value
+  });
+});
+function onToggleClick() {
+  const newCheckedState = !isChecked.value;
+  if (toggleButtonGroupContext) {
+    if (toggleButtonGroupContext.props.multiple) {
+      const formattedValue = toArray(modelValue.value);
+      modelValue.value = newCheckedState ? [...formattedValue, props.value] : formattedValue.filter((v) => v !== props.value);
+    } else {
+      modelValue.value = props.value;
+    }
+    return;
+  }
+  modelValue.value = newCheckedState;
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-pressed="isChecked"
+    :data-state="isChecked ? 'on' : 'off'"
+    :disabled="isDisabled"
+    :class="computedClasses"
+    v-bind="$attrs"
+    @click="onToggleClick"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </button>
+</template>

package/dist/components/toggle-button/types.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentLabel, ComponentSize, ComponentValue } from '../../types/shared'
+import type { CheckboxProps } from '../checkbox/types'
+
+export interface ToggleButtonProps {
+  variant?: 'ghost' | 'outline'
+  disabled?: boolean
+  label?: ComponentLabel
+  size?: ComponentSize
+  value?: ComponentValue
+  modelValue?: ComponentValue | ComponentValue[]
+}
+
+export interface ToggleButtonEmits {
+  change: [NonNullable<CheckboxProps['modelValue']>]
+  'update:modelValue': [NonNullable<CheckboxProps['modelValue']>]
+}

package/dist/components/{choicebox-group → toggle-button-group}/index.d.vue.ts

@@ -1,18 +1,18 @@
-import type { ChoiceboxGroupProps } from '../choicebox/types';
+import type { ToggleButtonGroupProps } from './types';
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ChoiceboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<ToggleButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
-}, string, import("vue").PublicProps, Readonly<ChoiceboxGroupProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<ToggleButtonGroupProps> & Readonly<{
     onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
 }>, {
-    disabled: boolean;
     modelValue: import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[];
-    required: boolean;
+    gap: import("../../types/shared").ResponsiveValue<string | number>;
+    multiple: boolean;
 }, {}, {}, {}, 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/toggle-button-group/index.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { tv } from "tailwind-variants";
+import { computed } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider";
+import { provideToggleButtonGroupContext } from "../../contexts/toggle-button";
+import PStack from "../stack/index.vue";
+import PToggleButton from "../toggle-button/index.vue";
+defineOptions({
+  name: "PToggleButtonGroup",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  gap: { type: [String, Number, Object], required: false, default: 0 },
+  size: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false, default: true },
+  options: { type: Array, required: false },
+  variant: { type: String, required: false },
+  modelValue: { type: [String, Number, Boolean, Array], required: false, default: () => [] }
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const configProvider = useConfigProvider();
+const toggleButtonGroupVariant = tv({
+  base: "pxd-toggle-button-group group/toggle-button-group w-max overflow-hidden",
+  variants: {
+    size: {
+      sm: "rounded-md",
+      md: "rounded-md",
+      lg: "rounded-lg"
+    },
+    variant: {
+      outline: "",
+      ghost: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const computedSize = computed(() => props.size || configProvider.size);
+const computedClasses = computed(
+  () => toggleButtonGroupVariant({
+    size: computedSize.value,
+    variant: props.variant
+  })
+);
+provideToggleButtonGroupContext({ props, emits });
+</script>
+
+<template>
+  <PStack
+    role="group"
+    :class="computedClasses"
+    aria-label="Toggle Button Group"
+    align="center"
+    :gap="gap"
+    :data-gap="gap"
+    v-bind="$attrs"
+  >
+    <slot>
+      <PToggleButton v-for="option in options" :key="option.value" v-bind="option" />
+    </slot>
+  </PStack>
+</template>

package/dist/components/toggle-button-group/types.d.ts

@@ -0,0 +1,22 @@
+import type {
+  ComponentSize,
+  ComponentValue,
+  ComponentOption,
+  ResponsiveValue,
+} from '../../types/shared'
+import type { CheckboxProps } from '../checkbox/types'
+
+export interface ToggleButtonGroupProps {
+  gap?: ResponsiveValue<string | number>
+  size?: ComponentSize
+  disabled?: boolean
+  multiple?: boolean
+  options?: ComponentOption[]
+  variant?: 'ghost' | 'outline'
+  modelValue?: ComponentValue | ComponentValue[]
+}
+
+export interface ToggleButtonGroupEmits {
+  change: [NonNullable<CheckboxProps['modelValue']>]
+  'update:modelValue': [NonNullable<CheckboxProps['modelValue']>]
+}

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

@@ -8,6 +8,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
     variant: import("../../types/shared").ComponentVariant;
     position: import("../../types/shared").ComponentPosition;
+    showDelay: number;
+    hideDelay: number;
     showArrow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/tooltip/index.vue

@@ -13,6 +13,8 @@ const props = defineProps({
   variant: { type: String, required: false, default: "primary" },
   position: { type: null, required: false, default: "top" },
   disabled: { type: Boolean, required: false },
+  showDelay: { type: Number, required: false, default: 300 },
+  hideDelay: { type: Number, required: false, default: 100 },
   showArrow: { type: Boolean, required: false, default: true },
   desktopOnly: { type: Boolean, required: false },
   contentClass: { type: [String, Array, Object], required: false },
@@ -37,12 +39,12 @@ const VARIANTS = {
   }
 };
 const computedVariant = computed(() => getFallbackValue(props.variant, VARIANTS, "primary"));
-const computedDisabled = computed(() => {
+const isDisabled = computed(() => {
   return props.disabled || props.desktopOnly && isTouchDevice();
 });
 const computedClasses = computed(() => {
   return [
-    "px-2 py-2 rounded-md text-sm break-words whitespace-pre-line shadow-border-tooltip bg-(--popover-arrow-bg)",
+    "px-3 py-2 rounded-md text-sm break-words whitespace-pre-line bg-(--popover-arrow-bg)",
     computedVariant.value.text,
     props.contentClass
   ].join(" ");
@@ -51,10 +53,14 @@ const computedClasses = computed(() => {
 
 <template>
   <PPopover
+    role="tooltip"
     class="pxd-tooltip"
     :position="position"
-    :disabled="computedDisabled"
+    :disabled="isDisabled"
     :show-arrow="showArrow"
+    :show-delay="showDelay"
+    :hide-delay="hideDelay"
+    wrapper-class="max-sm:data-[position^=top]:px-1 max-sm:data-[position^=bottom]:px-1 max-sm:data-[position^=left]:pl-1 max-sm:data-[position^=right]:pr-1"
     :arrow-color="computedVariant.bg"
     :content-class="computedClasses"
     :content-style="contentStyle"

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

@@ -1,6 +1,5 @@
-import type { CSSProperties } from 'vue'
-
 import type { ComponentClass, ComponentPosition, ComponentVariant } from '../../types/shared'
+import type { CSSProperties } from 'vue'
 
 export interface TooltipProps {
   offset?: number
@@ -8,6 +7,8 @@ export interface TooltipProps {
   variant?: ComponentVariant
   position?: ComponentPosition
   disabled?: boolean
+  showDelay?: number
+  hideDelay?: number
   showArrow?: boolean
   desktopOnly?: boolean
   contentClass?: ComponentClass

package/dist/components/virtual-list/index.d.vue.ts

@@ -1,14 +1,35 @@
 import type { VirtualListProps } from './types';
 declare var __VLS_1: {
     item: any;
-};
+    virtualItem: import("../../composables/use-virtual-list").VirtualListItem;
+}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    item?: (props: typeof __VLS_1) => any;
+} & {
+    message?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<VirtualListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VirtualListProps> & Readonly<{}>, {
-    dataKey: string;
+declare const __VLS_base: import("vue").DefineComponent<VirtualListProps, {
+    totalSize: import("vue").ComputedRef<number>;
+    virtualItems: import("vue").ComputedRef<import("../../composables/use-virtual-list").VirtualListItem[]>;
+    getVirtualizer: () => import("@tanstack/virtual-core").Virtualizer<HTMLElement, HTMLElement>;
+    scrollToIndex: any;
+    scrollToOffset: any;
+    scrollBy: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    bottom: () => any;
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<VirtualListProps> & Readonly<{
+    onBottom?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+}>, {
+    bottomThreshold: number;
     listData: any[];
     itemSize: number;
+    errorText: string;
+    loadingText: string;
+    finishedText: string;
+    dataKey: string;
+    overScan: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;