pxd 0.0.64 → 0.1.3

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

@@ -1,10 +1,12 @@
-import type { ComponentSize, ComponentVariant } from '../../types/shared'
+import type { ComponentSize, ComponentVariant } from '../../types/shared/props'
 
 export interface SliderProps {
   min?: number
   max?: number
-  step?: number
+  step?: number | number[]
   range?: boolean
+  stops?: boolean
+  marks?: Record<number, string>
   disabled?: boolean
   size?: ComponentSize
   variant?: ComponentVariant | 'secondary'

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

@@ -4,8 +4,9 @@ declare const __VLS_export: import("vue").DefineComponent<SnippetProps, {}, {},
 }, string, import("vue").PublicProps, Readonly<SnippetProps> & Readonly<{
     onCopy?: ((args_0: string) => any) | undefined;
 }>, {
-    variant: import("../../types/shared").ComponentVariantWithDefault;
-    prompt: boolean | string;
+    variant: "secondary" | "inverted" | import("../../types/shared/props.js").ComponentVariantWithDefault | "ghost";
+    prompt: string | boolean;
+    copyBtn: "hidden" | "always" | "hover";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/snippet/index.vue

@@ -1,91 +1,104 @@
 <script setup>
-import CheckIcon from "@gdsicon/vue/check";
-import CopyIcon from "@gdsicon/vue/copy";
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useCopyClick } from "../../composables/use-copy-click";
-import { BASIC_MIN_HEIGHTS } from "../../constants/size";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getCssUnitValue, isTruthyProp, toArray } from "../../utils/format";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { BASIC_MIN_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isTruthyProp, toArray } from "../../utils/format.js";
+import PCopyButton from "../copy-button/index.vue";
 defineOptions({
-  name: "PSnippet",
-  inheritAttrs: false
+	name: "PSnippet",
+	inheritAttrs: false
 });
 const props = defineProps({
-  text: { type: [String, Array], required: true },
-  width: { type: [String, Number], required: false },
-  size: { type: String, required: false },
-  prompt: { type: [Boolean, String], required: false, default: "$ " },
-  variant: { type: String, required: false, default: "default" }
+	text: {
+		type: [
+			String,
+			Array,
+			null
+		],
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	prompt: {
+		type: [Boolean, String],
+		required: false,
+		default: "$ "
+	},
+	copyBtn: {
+		type: String,
+		required: false,
+		default: "always"
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	}
 });
 const emits = defineEmits(["copy"]);
-const snippetVariant = tv({
-  base: "pxd-snippet pl-3 pr-1.5 gap-4 relative flex items-center rounded-lg border tabular-nums motion-safe:transition-appearance",
-  variants: {
-    size: {
-      sm: `${BASIC_MIN_HEIGHTS.sm} py-2 text-sm`,
-      md: `${BASIC_MIN_HEIGHTS.md} py-2.5 text-sm`,
-      lg: `${BASIC_MIN_HEIGHTS.lg} 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 computedTextList = computed(() => toArray(props.text));
+const copyText = computed(() => computedTextList.value.join("\n"));
 const configProvider = useConfigProvider();
-const { isCopied, copyText } = useCopyClick();
-const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
-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);
-  emits("copy", text);
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-snippet ps-3 pe-1 gap-4 group/snippet relative flex items-center rounded-lg border tabular-nums",
+	variants: {
+		size: {
+			sm: `${BASIC_MIN_HEIGHTS.sm} py-2 pe-0.75 text-sm`,
+			md: `${BASIC_MIN_HEIGHTS.md} py-2.5 pe-1 text-sm`,
+			lg: `${BASIC_MIN_HEIGHTS.lg} py-3 pe-2 text-base`
+		},
+		variant: {
+			default: "border-gray-alpha-300 bg-background-100 text-gray-1000",
+			inverted: "border-transparent bg-gray-1000 text-gray-100",
+			primary: "border-gray-alpha-300 bg-primary text-primary-foreground",
+			success: "border-blue-400 bg-blue-200 text-blue-900",
+			error: "border-red-400 bg-red-200 text-red-900",
+			warning: "border-amber-400 bg-amber-200 text-amber-900",
+			secondary: "border-gray-alpha-300 bg-gray-200 text-gray-1000",
+			ghost: "border-transparent text-gray-1000"
+		},
+		prompt: { true: "pxd-snippet--prompt" }
+	}
+}, { selection: () => ({
+	size: props.size || configProvider.size,
+	variant: props.variant,
+	prompt: isTruthyProp(props.prompt)
+}) });
+function onCopy(text) {
+	emits("copy", text);
 }
 </script>
 
 <template>
-  <div :class="computedClasses" :style="{ width: getCssUnitValue(props.width) }" v-bind="$attrs">
-    <div class="pxd-snippet--container flex-1">
+  <div data-snippet :class="classes" :data-variant="variant" v-bind="attrs">
+    <div class="pxd-snippet--container min-w-0 flex-1">
       <pre
-        v-for="(t, i) of computedTextArray"
+        v-for="(t, i) of computedTextList"
         :key="i"
-        class="m-0 p-0"
+        class="m-0 p-0 leading-tight break-words whitespace-pre-wrap"
         :data-prompt="prompt"
         :class="{ 'before:content-[attr(data-prompt)] before:select-none': prompt }"
-        >{{ t }}</pre
-      >
+        >{{ t }}</pre>
     </div>
 
-    <div class="min-w-5 relative shrink-0">
-      <button
-        class="right-0 p-1.5 absolute top-1/2 -translate-y-1/2 cursor-pointer appearance-none rounded-sm self-focus-ring outline-none select-none hover:bg-background-hover hover:shadow-border-base active:bg-background-active motion-safe:transition-appearance"
-        :class="{ copied: isCopied }"
-        @click="onCopyButtonClick"
-      >
-        <Transition name="pxd-transition--fade-scale" mode="out-in">
-          <Component :is="renderIcon" class="text-sm pointer-events-none" />
-        </Transition>
-      </button>
+    <div
+      v-if="copyBtn !== 'hidden'"
+      class="min-w-5 ms-2 max-sm:opacity-100 relative shrink-0 focus-within:opacity-100 motion-safe:transition-opacity"
+      :class="{
+  'opacity-0 group-hover/snippet:opacity-100': copyBtn === 'hover'
+}"
+    >
+      <PCopyButton
+        size="sm"
+        icon
+        variant="ghost"
+        :text="copyText"
+        class="right-0 p-1.5 absolute top-1/2 -translate-y-1/2 text-inherit"
+        @copy="onCopy"
+      />
     </div>
   </div>
 </template>

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

@@ -1,11 +1,11 @@
-import type { ComponentSize, ComponentVariantWithDefault } from '../../types/shared'
+import type { ComponentSize, ComponentVariantWithDefault } from '../../types/shared/props'
 
 export interface SnippetProps {
-  text: string | string[]
-  width?: string | number
+  text?: string | string[] | null
   size?: ComponentSize
   prompt?: boolean | string
-  variant?: ComponentVariantWithDefault
+  copyBtn?: 'always' | 'hover' | 'hidden'
+  variant?: ComponentVariantWithDefault | 'inverted' | 'ghost' | 'secondary'
 }
 
 export interface SnippetEmits {

package/dist/components/spinner/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 defineOptions({
-  name: "PSpinner",
-  inheritAttrs: false
+	name: "PSpinner",
+	inheritAttrs: false
 });
 const ITEMS_COUNT = 12;
 const ROTATE_STEP = 360 / ITEMS_COUNT;
@@ -9,14 +9,15 @@ const OPACITY_STEP = 1 / ITEMS_COUNT;
 </script>
 
 <template>
-  <div
+  <span
+    data-spinner
     aria-hidden="true"
     aria-label="Loading"
-    class="pxd-spinner leading-0 transform-origin-center motion-safe:animate-spin pointer-events-none relative inline-block size-em overflow-hidden text-gray-700 content-visibility-auto intrinsic-size-auto"
+    class="pxd-spinner leading-0 transform-origin-center motion-safe:animate-spin pointer-events-none relative inline-block size-em shrink-0 overflow-hidden content-visibility-auto intrinsic-size-auto"
     v-bind="$attrs"
   >
-    <div class="pxd-spinner-container top-0 left-0 absolute size-full">
-      <div
+    <span class="pxd-spinner-container top-0 left-0 absolute size-full">
+      <span
         v-for="i of ITEMS_COUNT"
         :key="i"
         class="pxd-spinner-item absolute rounded-sm bg-current"
@@ -29,6 +30,10 @@ const OPACITY_STEP = 1 / ITEMS_COUNT;
   transform: `rotate(${i * ROTATE_STEP}deg) translate(146%)`
 }"
       />
-    </div>
-  </div>
+    </span>
+  </span>
 </template>
+
+<style>
+@layer components{[data-spinner]{color:var(--color-foreground-secondary)}}
+</style>

package/dist/components/spinner-dots/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { SpinnerDotsProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<SpinnerDotsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpinnerDotsProps> & Readonly<{}>, {
+    variant: "dots0" | "dots2" | "dots1" | "dots3" | "dots4" | "dots5" | "dots6" | "dots7" | "dots8" | "dots9";
+    interval: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/spinner-dots/index.vue

@@ -0,0 +1,232 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({
+	name: "PSpinnerDots",
+	inheritAttrs: false
+});
+const props = defineProps({
+	variant: {
+		type: null,
+		required: false,
+		default: "dots0"
+	},
+	interval: {
+		type: Number,
+		required: false,
+		default: 100
+	},
+	data: {
+		type: Array,
+		required: false
+	}
+});
+const spinnerPresets = {
+	dots0: [
+		"⣾",
+		"⣽",
+		"⣻",
+		"⢿",
+		"⡿",
+		"⣟",
+		"⣯",
+		"⣷"
+	],
+	dots1: [
+		"⠋",
+		"⠙",
+		"⠚",
+		"⠞",
+		"⠖",
+		"⠦",
+		"⠴",
+		"⠲",
+		"⠳",
+		"⠓"
+	],
+	dots2: [
+		"⠋",
+		"⠙",
+		"⠚",
+		"⠒",
+		"⠂",
+		"⠂",
+		"⠒",
+		"⠲",
+		"⠴",
+		"⠦",
+		"⠖",
+		"⠒",
+		"⠐",
+		"⠐",
+		"⠒",
+		"⠓",
+		"⠋"
+	],
+	dots3: [
+		"⢹",
+		"⢺",
+		"⢼",
+		"⣸",
+		"⣇",
+		"⡧",
+		"⡗",
+		"⡏"
+	],
+	dots4: [
+		"⢄",
+		"⢂",
+		"⢁",
+		"⡁",
+		"⡈",
+		"⡐",
+		"⡠"
+	],
+	dots5: [
+		"⣼",
+		"⣹",
+		"⢻",
+		"⠿",
+		"⡟",
+		"⣏",
+		"⣧",
+		"⣶"
+	],
+	dots6: [
+		".",
+		"..",
+		"..."
+	],
+	dots7: [
+		"⠁",
+		"⠉",
+		"⠙",
+		"⠚",
+		"⠒",
+		"⠂",
+		"⠂",
+		"⠒",
+		"⠲",
+		"⠴",
+		"⠤",
+		"⠄",
+		"⠄",
+		"⠤",
+		"⠴",
+		"⠲",
+		"⠒",
+		"⠂",
+		"⠂",
+		"⠒",
+		"⠚",
+		"⠙",
+		"⠉",
+		"⠁"
+	],
+	dots8: [
+		"⠁",
+		"⠂",
+		"⠄",
+		"⡀",
+		"⡈",
+		"⡐",
+		"⡠",
+		"⣀",
+		"⣁",
+		"⣂",
+		"⣄",
+		"⣌",
+		"⣔",
+		"⣤",
+		"⣥",
+		"⣦",
+		"⣮",
+		"⣶",
+		"⣷",
+		"⣿",
+		"⡿",
+		"⠿",
+		"⢟",
+		"⠟",
+		"⡛",
+		"⠛",
+		"⠫",
+		"⢋",
+		"⠋",
+		"⠍",
+		"⡉",
+		"⠉",
+		"⠑",
+		"⠡",
+		"⢁"
+	],
+	dots9: [
+		"⠁",
+		"⠁",
+		"⠉",
+		"⠙",
+		"⠚",
+		"⠒",
+		"⠂",
+		"⠂",
+		"⠒",
+		"⠲",
+		"⠴",
+		"⠤",
+		"⠄",
+		"⠄",
+		"⠤",
+		"⠠",
+		"⠠",
+		"⠤",
+		"⠦",
+		"⠖",
+		"⠒",
+		"⠐",
+		"⠐",
+		"⠒",
+		"⠓",
+		"⠋",
+		"⠉",
+		"⠈",
+		"⠈"
+	]
+};
+const spinners = computed(() => {
+	if (props.data?.length) {
+		return props.data;
+	}
+	return spinnerPresets[props.variant] || spinnerPresets.dots0;
+});
+const spinnerStyle = computed(() => {
+	const frames = spinners.value.length;
+	return {
+		"--spinner-dots-frames": frames,
+		"--spinner-dots-duration": `${frames * props.interval}ms`
+	};
+});
+</script>
+
+<template>
+  <span
+    data-spinner-dots
+    class="pxd-spinner-dots inline-block h-lh w-max max-w-full shrink-0 overflow-hidden align-baseline text-foreground-secondary"
+    :style="spinnerStyle"
+    aria-hidden="true"
+    aria-label="Loading"
+    v-bind="$attrs"
+  >
+    <span class="pxd-spinner-dots--track block backface-hidden motion-reduce:animate-none!">
+      <span
+        v-for="(char, index) in spinners"
+        :key="index"
+        class="pxd-spinner-dots--frame block h-lh overflow-hidden"
+      >
+        {{ char }}
+      </span>
+    </span>
+  </span>
+</template>
+
+<style>
+.pxd-spinner-dots--track{animation:pxd-animation-spinner-dots var(--spinner-dots-duration,1s) steps(var(--spinner-dots-frames,10)) infinite}@keyframes pxd-animation-spinner-dots{to{transform:translateY(-100%)}}
+</style>

package/dist/components/spinner-dots/types.d.ts

@@ -0,0 +1,9 @@
+type Range<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+  ? Acc[number]
+  : Range<N, [...Acc, Acc['length']]>
+
+export interface SpinnerDotsProps {
+  variant?: `dots${Range<10>}`
+  interval?: number
+  data?: string[]
+}

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

@@ -0,0 +1,31 @@
+import type { SplitButtonProps } from './types';
+declare var __VLS_13: {
+    data: import("../list/types.js").ListOption;
+}, __VLS_21: {}, __VLS_29: {
+    item: import("../list/types.js").ListOption;
+    index: number;
+    group: import("../list/types.js").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    icon?: (props: typeof __VLS_21) => any;
+} & {
+    item?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SplitButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: import("../list/types.js").ListModelValue) => any;
+    "update:modelValue": (args_0: import("../list/types.js").ListModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<SplitButtonProps> & Readonly<{
+    onChange?: ((args_0: import("../list/types.js").ListModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("../list/types.js").ListModelValue) => any) | undefined;
+}>, {}, {}, {}, {}, 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/split-button/index.vue

@@ -0,0 +1,93 @@
+<script setup>
+import ChevronDownIcon from "@gdsicon/vue/chevron-down";
+import { computed } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useSelectedListItem } from "../../composables/_internal/use-selected-list-item.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import PButton from "../button/index.vue";
+import PMenu from "../menu/index.vue";
+defineOptions({
+	name: "PSplitButton",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	variant: {
+		type: String,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	shape: {
+		type: String,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Array,
+			null
+		],
+		required: false
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false
+	}
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const modelValue = useModelValue(props, emits);
+const selectedItem = useSelectedListItem(() => props.options || [], modelValue);
+const configProvider = useConfigProvider();
+const computedSize = computed(() => props.size || configProvider.size);
+</script>
+
+<template>
+  <PMenu
+    data-split-button
+    v-model="modelValue"
+    data-group
+    position="bottom-end"
+    class="pxd-split-button items-center"
+    triggerSelector="[data-split-button-trigger]"
+    :options="options"
+    :data-variant="variant"
+    :close-on-press-escape="closeOnPressEscape"
+    v-bind="$attrs"
+  >
+    <PButton :disabled="disabled" :variant="variant" :shape="shape" :size="computedSize">
+      <slot :data="selectedItem" />
+    </PButton>
+
+    <PButton
+      data-split-button-trigger
+      :disabled="disabled"
+      :variant="variant"
+      :shape="shape"
+      :size="computedSize"
+      icon
+    >
+      <slot name="icon">
+        <ChevronDownIcon />
+      </slot>
+    </PButton>
+
+    <template v-if="$slots.item" #item="itemSlotProps">
+      <slot name="item" v-bind="itemSlotProps" />
+    </template>
+  </PMenu>
+</template>

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

@@ -0,0 +1,18 @@
+import type { ComponentShape, ComponentSizeWithXs } from '../../types/shared/props'
+import type { ListModelValue, ListOptions } from '../list/types'
+import { ButtonVariant } from '../button/types'
+
+export interface SplitButtonProps {
+  variant?: ButtonVariant
+  size?: ComponentSizeWithXs
+  shape?: ComponentShape
+  options?: ListOptions
+  disabled?: boolean
+  modelValue?: ListModelValue
+  closeOnPressEscape?: boolean
+}
+
+export interface SplitButtonEmits {
+  change: [ListModelValue]
+  'update:modelValue': [ListModelValue]
+}

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

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