pxd 0.0.52 → 0.0.53

package/dist/components/resizable-panel/index.vue

@@ -36,20 +36,21 @@ onMounted(() => {
 onBeforeUnmount(() => {
   resizableContext?.unregisterPanel(uniqueId);
 });
-watch(() => [props.size, props.minSize], () => {
-  resizableContext?.registerPanel({
-    id: uniqueId,
-    size: props.size,
-    minSize: props.minSize
-  });
-}, { deep: true });
+watch(
+  () => [props.size, props.minSize],
+  () => {
+    resizableContext?.registerPanel({
+      id: uniqueId,
+      size: props.size,
+      minSize: props.minSize
+    });
+  },
+  { deep: true }
+);
 </script>
 
 <template>
-  <div
-    class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
-    :style="computedStyle"
-  >
+  <div class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden" :style="computedStyle">
     <slot />
   </div>
 </template>

package/dist/components/skeleton/cn.d.ts

@@ -0,0 +1,43 @@
+export declare const skeletonVariant: import("tailwind-variants").TVReturnType<{
+    loading: {
+        true: string;
+        false: string;
+    };
+    shape: {
+        default: string;
+        square: string;
+        rounded: string;
+    };
+    animated: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-skeleton relative block shrink-0 overflow-hidden", {
+    loading: {
+        true: string;
+        false: string;
+    };
+    shape: {
+        default: string;
+        square: string;
+        rounded: string;
+    };
+    animated: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    loading: {
+        true: string;
+        false: string;
+    };
+    shape: {
+        default: string;
+        square: string;
+        rounded: string;
+    };
+    animated: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-skeleton relative block shrink-0 overflow-hidden", unknown, unknown, undefined>>;

package/dist/components/skeleton/cn.js

@@ -0,0 +1,24 @@
+import { tv } from "tailwind-variants";
+export const skeletonVariant = tv({
+  base: "pxd-skeleton relative block shrink-0 overflow-hidden",
+  variants: {
+    loading: {
+      true: "loading invisible",
+      false: ""
+    },
+    shape: {
+      default: "rounded-md",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    },
+    animated: {
+      true: "animated after:default-animation-timing-function!",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    loading: true,
+    shape: "default",
+    animated: true
+  }
+});

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

@@ -1,19 +1,20 @@
+import type { ComponentShape } from '../../types/shared';
 interface Props {
     loading?: boolean;
     animated?: boolean;
     width?: string | number;
     height?: string | number;
     boxHeight?: string | number;
-    shape?: 'default' | 'squared' | 'rounded';
+    shape?: ComponentShape;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    height: string | number;
-    shape: "default" | "squared" | "rounded";
     loading: boolean;
+    height: string | number;
+    shape: ComponentShape;
     animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/skeleton/index.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { computed } from "vue";
 import { getCssUnitValue, increaseWithUnit } from "../../utils/format";
+import { skeletonVariant } from "./cn";
 defineOptions({
-  name: "PSkeleton"
+  name: "PSkeleton",
+  inheritAttrs: false
 });
 const props = defineProps({
   loading: { type: Boolean, required: false, default: true },
@@ -23,32 +25,21 @@ const computedStyle = computed(() => {
   }
   return styles;
 });
-const computedClass = computed(() => {
-  const { loading, shape, animated } = props;
-  const classes = ["pxd-skeleton relative block shrink-0 overflow-hidden"];
-  if (loading) {
-    classes.push("loading invisible");
-  }
-  if (shape === "rounded") {
-    classes.push("rounded-full");
-  } else if (shape === "squared") {
-    classes.push("rounded-none");
-  } else {
-    classes.push("rounded-md");
-  }
-  if (animated) {
-    classes.push("animated");
-  }
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return skeletonVariant({
+    shape: props.shape,
+    loading: props.loading,
+    animated: props.animated
+  });
 });
 </script>
 
 <template>
-  <div :class="computedClass" :style="computedStyle">
+  <div :class="computedClasses" :style="computedStyle" v-bind="$attrs">
     <slot />
   </div>
 </template>
 
 <style>
-.pxd-skeleton.loading:after{background:linear-gradient(90deg,var(--color-gray-100),var(--color-gray-200),var(--color-gray-100)) 0 0 /50% 100%;content:"";inset:0 -200% 0 0;position:absolute;visibility:visible}.pxd-skeleton.animated:after{animation:skeleton-loading 1.5s var(--default-transition-timing-function) infinite reverse}@keyframes skeleton-loading{to{transform:translate3d(-50%,0,0)}}
+.pxd-skeleton.loading:after{background:linear-gradient(90deg,var(--color-gray-100),var(--color-gray-200),var(--color-gray-100)) 0 0 /50% 100%;content:"";inset:0 -200% 0 0;position:absolute;visibility:visible}.pxd-skeleton.animated:after{animation:skeleton-loading 1.5s infinite reverse}@keyframes skeleton-loading{to{transform:translate3d(-50%,0,0)}}
 </style>

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

@@ -16,8 +16,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     onChange?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
 }>, {
-    variant: ComponentVariant | "secondary";
     max: number;
+    variant: ComponentVariant | "secondary";
     modelValue: number | [number, number] | null;
     min: number;
     step: number;

package/dist/components/slider/index.vue

@@ -46,11 +46,11 @@ const VARIANTS = {
 let isDragging = false;
 let lastClientX;
 let animationFrameId;
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 const sliderRef = shallowRef();
 const modelValue = useModelValue(props, emits);
 const activeThumb = shallowRef();
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, config.size));
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const valueArray = computed(() => {
   if (props.range) {
     return Array.isArray(modelValue.value) ? modelValue.value : [props.min, modelValue.value];
@@ -88,22 +88,21 @@ function updateValueFromPosition(clientX) {
   const rawValue = props.min + posPercentage * range;
   const newValue = Math.max(
     props.min,
-    Math.min(
-      props.max,
-      props.step > 0 ? Math.round(rawValue / props.step) * props.step : rawValue
-    )
+    Math.min(props.max, props.step > 0 ? Math.round(rawValue / props.step) * props.step : rawValue)
   );
   if (props.range) {
     const newValueArray = [...valueArray.value];
     if (activeThumb.value === "start") {
       newValueArray[0] = newValue;
       if (newValue > newValueArray[1]) {
+        ;
         [newValueArray[0], newValueArray[1]] = [newValueArray[1], newValueArray[0]];
         activeThumb.value = "end";
       }
     } else {
       newValueArray[1] = newValue;
       if (newValue < newValueArray[0]) {
+        ;
         [newValueArray[0], newValueArray[1]] = [newValueArray[1], newValueArray[0]];
         activeThumb.value = "start";
       }
@@ -207,22 +206,25 @@ onBeforeUnmount(() => {
     :class="[{ 'cursor-not-allowed': disabled }, computedSize.track]"
     @pointerdown.prevent="onWrapperPointerdown"
   >
-    <div
-      class="pxd-slider--track absolute h-full touch-none rounded-full"
-      :style="trackStyle"
-    />
+    <div class="pxd-slider--track absolute h-full touch-none rounded-full" :style="trackStyle" />
 
     <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]"
+      :class="[
+  { 'scale-130': activeThumb === 'start', 'pointer-events-none': disabled },
+  computedSize.thumb
+]"
       :style="{ left: `${startPercentage}%` }"
       @pointerdown.prevent.stop="startDragging($event, 'start')"
     />
 
     <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]"
+      :class="[
+  { 'scale-130': activeThumb === 'end', 'pointer-events-none': disabled },
+  computedSize.thumb
+]"
       :style="{ left: `${endPercentage}%` }"
       @pointerdown.prevent.stop="startDragging($event, 'end')"
     />

package/dist/components/snippet/cn.d.ts

@@ -0,0 +1,52 @@
+export declare const snippetVariant: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+    };
+    prompt: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-snippet pr-12 relative flex items-center rounded-lg border motion-safe:transition-all", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+    };
+    prompt: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+    };
+    prompt: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-snippet pr-12 relative flex items-center rounded-lg border motion-safe:transition-all", unknown, unknown, undefined>>;

package/dist/components/snippet/cn.js

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+export 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
+  }
+});

package/dist/components/snippet/index.vue

@@ -4,10 +4,11 @@ import CopyIcon from "@gdsicon/vue/copy";
 import { computed } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useCopyClick } from "../../composables/use-copy-click";
-import { getCssUnitValue, toArray } from "../../utils/format";
-import { getFallbackValue } from "../../utils/get";
+import { getCssUnitValue, isTruthyProp, toArray } from "../../utils/format";
+import { snippetVariant } from "./cn";
 defineOptions({
-  name: "PSnippet"
+  name: "PSnippet",
+  inheritAttrs: false
 });
 const props = defineProps({
   text: { type: [String, Array], required: true },
@@ -17,33 +18,17 @@ const props = defineProps({
   variant: { type: String, required: false, default: "default" }
 });
 const emits = defineEmits(["copy"]);
-const SIZES = {
-  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"
-};
-const VARIANTS = {
-  default: "border-gray-alpha-300 bg-background-100",
-  primary: "text-gray-100 border-gray-alpha-300 bg-primary",
-  success: "text-blue-900 border-gray-alpha-300 bg-blue-200",
-  error: "text-red-900 border-gray-alpha-300 bg-red-200",
-  warning: "text-amber-900 border-gray-alpha-300 bg-amber-200"
-};
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 const { isCopied, copyText } = useCopyClick();
 const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
-const computedClass = computed(() => {
-  const classes = [
-    "pxd-snippet pr-12 relative flex items-center rounded-lg border motion-safe:transition-all",
-    getFallbackValue(props.variant, VARIANTS),
-    getFallbackValue(props.size, SIZES, config.size)
-  ];
-  if (props.prompt) {
-    classes.push("pxd-snippet--prompt");
-  }
-  return classes.join(" ");
-});
 const computedTextArray = computed(() => toArray(props.text));
+const computedClasses = computed(() => {
+  return snippetVariant({
+    size: props.size || configProvider.size,
+    variant: props.variant,
+    prompt: isTruthyProp(props.prompt)
+  });
+});
 async function onCopyButtonClick() {
   const text = computedTextArray.value.join("\n");
   await copyText(text);
@@ -52,9 +37,16 @@ async function onCopyButtonClick() {
 </script>
 
 <template>
-  <div :class="computedClass" :style="{ width: getCssUnitValue(props.width) }">
+  <div :class="computedClasses" :style="{ width: getCssUnitValue(props.width) }" v-bind="$attrs">
     <div class="pxd-snippet--container">
-      <pre v-for="(t, i) of computedTextArray" :key="i" class="m-0 p-0" :data-prompt="prompt" :class="{ 'before:content-[attr(data-prompt)] before:select-none': prompt }">{{ t }}</pre>
+      <pre
+        v-for="(t, i) of computedTextArray"
+        :key="i"
+        class="m-0 p-0"
+        :data-prompt="prompt"
+        :class="{ 'before:content-[attr(data-prompt)] before:select-none': prompt }"
+        >{{ t }}</pre
+      >
     </div>
 
     <div

package/dist/components/spinner/index.vue

@@ -8,7 +8,9 @@ const OPACITY_STEP = 1 / ITEMS_COUNT;
 </script>
 
 <template>
-  <div class="pxd-spinner transform-origin-center pointer-events-none relative size-em overflow-hidden text-gray-700 motion-safe:animate-spin">
+  <div
+    class="pxd-spinner transform-origin-center motion-safe:animate-spin pointer-events-none relative size-em overflow-hidden text-gray-700"
+  >
     <div class="pxd-spinner-container top-0 left-0 absolute size-full">
       <div
         v-for="i of ITEMS_COUNT"

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

@@ -0,0 +1,70 @@
+export declare const stackVariant: import("tailwind-variants").TVReturnType<{
+    wrap: {
+        true: string;
+        false: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+        stretch: string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+        stretch: string;
+    };
+}, undefined, "pxd-stack flex max-w-full gap-(--xs) [--xs:1rem]", {
+    wrap: {
+        true: string;
+        false: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+        stretch: string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+        stretch: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    wrap: {
+        true: string;
+        false: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+        stretch: string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+        stretch: string;
+    };
+}, undefined, "pxd-stack flex max-w-full gap-(--xs) [--xs:1rem]", unknown, unknown, undefined>>;

package/dist/components/stack/cn.js

@@ -0,0 +1,33 @@
+import { tv } from "tailwind-variants";
+export 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"
+  }
+});

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

@@ -14,11 +14,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    as: ComponentAs;
     align: Align;
+    as: ComponentAs;
     wrap: boolean;
-    scale: number;
     justify: Align;
+    scale: number;
 }, {}, {}, {}, 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,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { getResponsiveValue } from "../../utils/responsive";
+import { stackVariant } from "./cn";
 defineOptions({
   name: "PStack",
   inheritAttrs: false
@@ -14,7 +15,7 @@ const props = defineProps({
   justify: { type: String, required: false, default: "start" },
   direction: { type: [String, Object], required: false }
 });
-const presetDirClasses = {
+const presetDir = {
   "--xs:vertical": "flex-col",
   "--xs:horizontal": "flex-row",
   "--sm:vertical": "sm:flex-col",
@@ -26,31 +27,13 @@ const presetDirClasses = {
   "--xl:vertical": "xl:flex-col",
   "--xl:horizontal": "xl:flex-row"
 };
-const presetGapClasses = {
+const presetGap = {
   "--xs": "gap-(--xs)",
   "--sm": "sm:gap-(--sm)",
   "--md": "md:gap-(--md)",
   "--lg": "lg:gap-(--lg)",
   "--xl": "xl:gap-(--xl)"
 };
-const presetAlignClasses = {
-  start: "items-start",
-  end: "items-end",
-  center: "items-center",
-  between: "items-between",
-  around: "items-around",
-  evenly: "items-evenly",
-  stretch: "items-stretch"
-};
-const presetJustifyClasses = {
-  start: "flex-start",
-  end: "flex-end",
-  center: "justify-center",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly",
-  stretch: "justify-stretch"
-};
 const formattedGap = computed(() => {
   const { gap, scale } = props;
   return getResponsiveValue(
@@ -65,20 +48,22 @@ const formattedDirection = computed(() => {
     props.direction,
     (typeof direction === "object" ? direction.xs : direction) ?? "horizontal",
     (acc, bp, value) => {
-      acc[bp] = presetDirClasses[`--${bp}:${value}`];
+      acc[bp] = presetDir[`--${bp}:${value}`];
     }
   );
 });
-const computedClass = computed(() => {
-  const classes = ["gap-(--xs) [--xs:16px]", presetAlignClasses[props.align], presetJustifyClasses[props.justify]];
-  if (props.wrap) {
-    classes.push("flex-wrap");
-  }
-  classes.push(
+const computedClasses = computed(() => {
+  const baseClass = stackVariant({
+    wrap: props.wrap,
+    align: props.align,
+    justify: props.justify
+  });
+  const classes = [
+    baseClass,
     ...Object.values(formattedDirection.value),
-    ...Object.keys(formattedGap.value).map((bp) => presetGapClasses[bp])
-  );
-  return classes.filter(Boolean).join(" ");
+    ...Object.keys(formattedGap.value).map((bp) => presetGap[bp])
+  ].filter(Boolean).join(" ");
+  return classes;
 });
 </script>
 
@@ -86,7 +71,7 @@ const computedClass = computed(() => {
   <Component
     :is="props.as"
     class="pxd-stack flex max-w-full"
-    :class="computedClass"
+    :class="computedClasses"
     v-bind="$attrs"
     :style="formattedGap"
   >

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

@@ -25,7 +25,11 @@ function getLabelText() {
 
 <template>
   <span class="pxd-state-dot inline-flex items-center">
-    <i aria-hidden="true" class="w-2.5 h-2.5 inline-block rounded-full" :class="stateClassNames[state]" />
+    <i
+      aria-hidden="true"
+      class="w-2.5 h-2.5 inline-block rounded-full"
+      :class="stateClassNames[state]"
+    />
 
     <span v-if="label" class="pl-2 pr-1 min-w-0 text-sm truncate after:content-[attr(aria-label)]">
       {{ getLabelText() }}

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

@@ -0,0 +1,16 @@
+export declare const switchVariant: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-switch--label px-3 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 motion-safe:transition-all", {
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-switch--label px-3 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 motion-safe:transition-all", unknown, unknown, undefined>>;