pxd 0.0.55 → 0.0.61

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

@@ -1,11 +1,11 @@
 <script setup>
 import CheckIcon from "@gdsicon/vue/check";
 import CopyIcon from "@gdsicon/vue/copy";
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useCopyClick } from "../../composables/use-copy-click";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getCssUnitValue, isTruthyProp, toArray } from "../../utils/format";
-import { snippetVariant } from "./cn";
 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 { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { getResponsiveValue } from "../../utils/responsive";
-import { stackVariant } from "./cn";
 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 { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
+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 { tv } from "tailwind-variants";
+import { computed } from "vue";
+import { useModelValue } from "../../composables/use-model-value";
+import { useSwitchContext } from "../../contexts/switch";
+import { getUniqueId } from "../../utils/uid";
+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 {}

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

@@ -6,7 +6,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TeleportProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TeleportProps> & Readonly<{}>, {
-    to: string | HTMLElement;
+    to: string | object;
 }, {}, {}, {}, 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/teleport/index.vue

@@ -6,7 +6,7 @@ defineOptions({
   inheritAttrs: false
 });
 const props = defineProps({
-  to: { type: null, required: false, default: "body" },
+  to: { type: [String, Object], required: false, default: "body" },
   disabled: { type: Boolean, required: false }
 });
 const inVue3 = isVue3();

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

@@ -1,5 +1,5 @@
 export interface TeleportProps {
-  to?: string | HTMLElement
+  to?: string | object
   disabled?: boolean
 }
 

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

@@ -4,9 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextProps> & Readonly<{}>, {
-    align: "left" | "center" | "right";
     as: import("../../types/shared").ComponentAs;
-    truncate: boolean | number | string;
+    align: "left" | "center" | "right";
 }, {}, {}, {}, 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/text/index.vue

@@ -1,19 +1,43 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { getCssUnitValue } from "../../utils/format";
 import { getResponsiveValue } from "../../utils/responsive";
-import { textVariant } from "./cn";
 defineOptions({
-  name: "PText"
+  name: "PText",
+  inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "p" },
+  as: { type: [String, Object], required: false, default: "p" },
+  text: { type: String, required: false },
   size: { type: [String, Number, Object], required: false },
   align: { type: String, required: false, default: "left" },
-  truncate: { type: [Boolean, Number, String], required: false, default: false },
   monospace: { type: Boolean, required: false },
   secondary: { type: Boolean, required: false }
 });
+const textVariant = tv({
+  base: "pxd-text m-0 shrink-0",
+  variants: {
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    },
+    monospace: {
+      true: "font-mono",
+      false: ""
+    },
+    secondary: {
+      true: "text-foreground-secondary",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    align: "left",
+    monospace: false,
+    secondary: false
+  }
+});
 const presetSize = {
   "--text-xs": "text-xs",
   "--text-sm": "sm:text-sm",
@@ -21,7 +45,7 @@ const presetSize = {
   "--text-lg": "lg:text-lg",
   "--text-xl": "xl:text-xl"
 };
-const formattedSize = computed(() => {
+const computedStyle = computed(() => {
   const { size } = props;
   return getResponsiveValue(
     size,
@@ -29,35 +53,25 @@ const formattedSize = computed(() => {
     (acc, bp, value) => acc[bp] = acc[`--text-${bp}`] = getCssUnitValue(value)
   );
 });
-const computedStyle = computed(() => {
-  const { truncate } = props;
-  const styles = {
-    ...formattedSize.value
-  };
-  if (truncate && typeof truncate !== "boolean") {
-    styles["--line-clamp"] = truncate;
-  }
-  return styles;
-});
 const computedClasses = computed(() => {
-  const { truncate, monospace, secondary } = props;
+  const { monospace, secondary } = props;
   const baseClass = textVariant({
     align: props.align,
     monospace,
-    secondary,
-    truncate: truncate === true,
-    lineClamp: typeof truncate === "number"
+    secondary
   });
   const classes = [
     baseClass,
-    ...Object.keys(formattedSize.value).map((bp) => presetSize[bp])
+    ...Object.keys(computedStyle.value).map((bp) => presetSize[bp])
   ].filter(Boolean).join(" ");
   return classes;
 });
 </script>
 
 <template>
-  <Component :is="as" :class="computedClasses" :style="computedStyle">
-    <slot />
+  <Component :is="as" :class="computedClasses" :title="text" :style="computedStyle" v-bind="$attrs">
+    <slot>
+      {{ text }}
+    </slot>
   </Component>
 </template>

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

@@ -2,9 +2,9 @@ import type { ComponentAs, ResponsiveValue } from '../../types/shared'
 
 export interface TextProps {
   as?: ComponentAs
+  text?: string
   size?: ResponsiveValue<string | number>
   align?: 'left' | 'center' | 'right'
-  truncate?: boolean | number | string
   monospace?: boolean
   secondary?: boolean
 }

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

@@ -1,14 +1,14 @@
 import type { TextareaProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    blur: (args_0: FocusEvent) => any;
     change: (args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any;
-    focus: (args_0: FocusEvent) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any;
+    blur: (args_0: FocusEvent) => any;
+    focus: (args_0: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
-    onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any) | undefined;
-    onFocus?: ((args_0: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any) | undefined;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
+    onFocus?: ((args_0: FocusEvent) => any) | undefined;
 }>, {
     modelValue: import("../../types/shared").ComponentLabel;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;