pxd 0.0.64 → 0.1.3

package/dist/components/checkbox/index.vue

@@ -1,110 +1,126 @@
 <script setup>
 import CheckIcon from "@gdsicon/vue/check";
 import MinusIcon from "@gdsicon/vue/minus";
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useCheckboxGroupContext } from "../../contexts/checkbox";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useCheckboxGroupContext } from "../../contexts/checkbox.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PCheckbox",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PCheckbox",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number, Boolean], required: false, default: true },
-  shape: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Boolean, Array], required: false },
-  indeterminate: { type: Boolean, required: false }
+	label: {
+		type: null,
+		required: false
+	},
+	value: {
+		type: [
+			String,
+			Number,
+			Boolean
+		],
+		required: false,
+		default: true
+	},
+	shape: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Boolean,
+			Array
+		],
+		required: false
+	},
+	indeterminate: {
+		type: Boolean,
+		required: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const checkboxVariant = tv({
-  base: "pxd-checkbox--inner size-4 p-0.5 pointer-events-none inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden border peer-focus-ring motion-safe:transition-colors",
-  variants: {
-    checked: {
-      true: "text-gray-100",
-      false: ""
-    },
-    disabled: {
-      true: "",
-      false: ""
-    },
-    shape: {
-      default: "rounded-sm",
-      square: "rounded-none",
-      rounded: "rounded-full"
-    }
-  },
-  compoundVariants: [
-    {
-      checked: true,
-      disabled: false,
-      class: "border-primary bg-primary"
-    },
-    {
-      checked: true,
-      disabled: true,
-      class: "border-gray-500 bg-gray-500"
-    },
-    {
-      checked: false,
-      disabled: false,
-      class: "border-gray-alpha-400 bg-background-100 group-hover/checkbox:bg-gray-200"
-    },
-    {
-      checked: false,
-      disabled: true,
-      class: "border-gray-500 bg-gray-100"
-    }
-  ],
-  defaultVariants: {
-    shape: "default",
-    checked: false,
-    disabled: false
-  }
-});
 const uniqueId = getUniqueId();
 const checkboxGroupContext = useCheckboxGroupContext();
-const modelValue = useModelValue(
-  checkboxGroupContext?.props ?? props,
-  checkboxGroupContext?.emits ?? emits
-);
-const isChecked = computed(() => {
-  if (Array.isArray(modelValue.value)) {
-    return modelValue.value.includes(props.value);
-  }
-  if (typeof props.value === "boolean") {
-    return modelValue.value;
-  }
-  return modelValue.value === props.value;
+const isDisabled = computed(() => props.disabled || checkboxGroupContext?.props.disabled || false);
+const modelValue = useModelValue(checkboxGroupContext?.props ?? props, checkboxGroupContext?.emits ?? emits);
+const isSelected = computed(() => {
+	if (Array.isArray(modelValue.value)) {
+		return modelValue.value.includes(props.value);
+	}
+	if (typeof props.value === "boolean") {
+		return modelValue.value;
+	}
+	return modelValue.value === props.value;
 });
-const isDisabled = computed(() => props.disabled || checkboxGroupContext?.props.disabled);
-const computedClasses = computed(() => {
-  return checkboxVariant({
-    shape: props.shape,
-    checked: isChecked.value,
-    disabled: isDisabled.value
-  });
+const { classes } = useTailwindVariant({
+	base: "pxd-checkbox--inner size-4 p-0.5 pointer-events-none inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden border text-primary-foreground peer-focus-ring motion-safe:transition-colors",
+	variants: {
+		checked: {},
+		disabled: {},
+		shape: {
+			default: "rounded-sm",
+			square: "rounded-none",
+			rounded: "rounded-full"
+		}
+	},
+	compoundVariants: [
+		{
+			checked: true,
+			disabled: false,
+			class: "border-primary bg-primary"
+		},
+		{
+			checked: true,
+			disabled: true,
+			class: "border-gray-500 bg-gray-500"
+		},
+		{
+			checked: false,
+			disabled: false,
+			class: "border-gray-alpha-400 bg-background-100 group-hover/checkbox:bg-gray-200"
+		},
+		{
+			checked: false,
+			disabled: true,
+			class: "border-gray-500 bg-gray-100"
+		}
+	]
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({
+		shape: props.shape,
+		checked: isSelected.value,
+		disabled: isDisabled.value
+	})
 });
 function onInputChange(event) {
-  const isChecked2 = event.target.checked;
-  if (Array.isArray(modelValue.value)) {
-    modelValue.value = isChecked2 ? [...modelValue.value, props.value] : modelValue.value.filter((v) => v !== props.value);
-    return;
-  }
-  modelValue.value = isChecked2;
+	const checked = event.target.checked;
+	if (Array.isArray(modelValue.value)) {
+		modelValue.value = checked ? [...modelValue.value, props.value] : modelValue.value.filter((v) => v !== props.value);
+		return;
+	}
+	modelValue.value = checked;
 }
 </script>
 
 <template>
   <label
+    data-checkbox
     role="checkbox"
-    :aria-selected="isChecked"
+    :aria-selected="isSelected"
     :data-disabled="isDisabled"
     class="pxd-checkbox group/checkbox gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-gray-500"
     :for="uniqueId"
@@ -115,13 +131,14 @@ function onInputChange(event) {
       :value="value"
       type="checkbox"
       class="peer visually-hidden"
-      :checked="isChecked"
+      :checked="isSelected"
       :disabled="isDisabled"
+      :name="uniqueId"
       @change="onInputChange"
     />
 
-    <span aria-hidden="true" :class="computedClasses">
-      <CheckIcon v-if="isChecked" class="size-3" />
+    <span aria-hidden="true" :class="classes">
+      <CheckIcon v-if="isSelected" class="size-3" />
       <MinusIcon v-else-if="indeterminate" class="size-3" />
       <span v-else class="size-3" />
     </span>

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

@@ -1,15 +1,17 @@
-import type { ComponentLabel, ComponentValue, ComponentShape } from '../../types/shared'
+import type { ComponentLabel, ComponentValue, ComponentShape } from '../../types/shared/props'
+
+type CheckboxModelValue = ComponentValue | boolean
 
 export interface CheckboxProps {
   label?: ComponentLabel
-  value?: ComponentValue
+  value?: CheckboxModelValue
   shape?: ComponentShape
   disabled?: boolean
-  modelValue?: ComponentValue | ComponentValue[]
+  modelValue?: CheckboxModelValue | CheckboxModelValue[]
   indeterminate?: boolean
 }
 
 export interface CheckboxEmits {
-  change: [NonNullable<CheckboxProps['modelValue']>]
-  'update:modelValue': [NonNullable<CheckboxProps['modelValue']>]
+  change: [NonNullable<CheckboxModelValue>]
+  'update:modelValue': [NonNullable<CheckboxModelValue>]
 }

package/dist/components/checkbox-group/index.d.vue.ts

@@ -1,17 +1,17 @@
 import type { CheckboxGroupProps } 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<CheckboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: import("../../types/shared").ComponentValue[]) => any;
-    "update:modelValue": (args_0: import("../../types/shared").ComponentValue[]) => any;
+    change: (args_0: import("./types").CheckboxGroupModelValue[]) => any;
+    "update:modelValue": (args_0: import("./types").CheckboxGroupModelValue[]) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
-    onChange?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
+    onChange?: ((args_0: import("./types").CheckboxGroupModelValue[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("./types").CheckboxGroupModelValue[]) => any) | undefined;
 }>, {
-    modelValue: import("../../types/shared").ComponentValue[];
-    options: import("../../types/shared").ComponentOption[];
+    modelValue: import("./types").CheckboxGroupModelValue[];
+    options: import("../../types/shared/props.js").ComponentOption[];
 }, {}, {}, {}, 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/checkbox-group/index.vue

@@ -1,26 +1,41 @@
 <script setup>
-import { provideCheckboxGroupContext } from "../../contexts/checkbox";
+import { provideCheckboxGroupContext } from "../../contexts/checkbox.js";
 import PCheckbox from "../checkbox/index.vue";
 import PStack from "../stack/index.vue";
 defineOptions({
-  name: "PCheckboxGroup",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PCheckboxGroup",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  options: { type: Array, required: false, default: () => [] },
-  modelValue: { type: Array, required: true, default: () => [] }
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	modelValue: {
+		type: Array,
+		required: false,
+		default: () => []
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-provideCheckboxGroupContext({ props, emits });
+provideCheckboxGroupContext({
+	props,
+	emits
+});
 </script>
 
 <template>
   <PStack
+    data-checkbox-group
     class="pxd-checkbox-group"
     role="group"
     aria-label="Checkbox Group"

package/dist/components/checkbox-group/types.d.ts

@@ -1,9 +1,11 @@
-import type { ComponentOption, ComponentValue } from '../../types/shared'
+import type { ComponentOption, ComponentValue } from '../../types/shared/props'
+
+type CheckboxGroupModelValue = ComponentValue | boolean
 
 export interface CheckboxGroupProps {
   disabled?: boolean
   options?: ComponentOption[]
-  modelValue: ComponentValue[]
+  modelValue?: CheckboxGroupModelValue[]
 }
 
 export interface CheckboxGroupEmits {

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

@@ -0,0 +1,14 @@
+import type { CheckerboardProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CheckerboardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckerboardProps> & 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/checkerboard/index.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from "vue";
+import { getCssUnitValue } from "../../utils/format.js";
+defineOptions({
+	name: "PCheckerboard",
+	inheritAttrs: false
+});
+const props = defineProps({
+	size: {
+		type: [String, Number],
+		required: false
+	},
+	primaryColor: {
+		type: String,
+		required: false
+	},
+	backgroundColor: {
+		type: String,
+		required: false
+	}
+});
+const computedStyle = computed(() => ({
+	"--checkerboard-size": getCssUnitValue(props.size),
+	"--checkerboard-primary-color": props.primaryColor,
+	"--checkerboard-background-color": props.backgroundColor
+}));
+</script>
+
+<template>
+  <div data-checkerboard class="pxd-checkerboard bg-center" :style="computedStyle" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<style>
+.pxd-checkerboard{--checkerboard-size:20px;--checkerboard-primary-color:var(--color-gray-200);--checkerboard-background-color:var(--color-background-100);background-image:repeating-conic-gradient(var(--checkerboard-background-color) 0,var(--checkerboard-background-color) 25%,var(--checkerboard-primary-color) 25%,var(--checkerboard-primary-color) 50%);background-size:var(--checkerboard-size) var(--checkerboard-size)}
+</style>

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

@@ -0,0 +1,5 @@
+export interface CheckerboardProps {
+  size?: string | number
+  primaryColor?: string
+  backgroundColor?: string
+}

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

@@ -3,7 +3,9 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{}>, {
+    variant: "secondary" | import("../../types/shared/props.js").ComponentVariant;
+}, {}, {}, {}, 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/chip/index.vue

@@ -1,60 +1,63 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed } from "vue";
-import { getCssUnitValue, isTruthyProp } from "../../utils/format";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { getCssUnitValue } from "../../utils/format.js";
+import { isNil } from "../../utils/is.js";
 defineOptions({
-  name: "PChip",
-  inheritAttrs: false
+	name: "PChip",
+	inheritAttrs: false
 });
 const props = defineProps({
-  size: { type: [Number, String], required: false },
-  inset: { type: Boolean, required: false },
-  label: { type: [String, Number, Array, null], required: false },
-  variant: { type: String, required: false }
+	size: {
+		type: [Number, String],
+		required: false
+	},
+	inset: {
+		type: Boolean,
+		required: false
+	},
+	label: {
+		type: null,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "primary"
+	}
 });
-const chipVariant = tv({
-  base: "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-appearance",
-  variants: {
-    variant: {
-      primary: "bg-primary text-background-100",
-      error: "bg-red-700 text-background-100 dark:text-gray-1000",
-      warning: "bg-amber-700 text-gray-1000 dark:text-gray-100",
-      success: "bg-green-700 text-background-100 dark:text-gray-1000",
-      secondary: "bg-gray-700 text-background-100 dark:text-gray-1000"
-    },
-    inset: {
-      true: {},
-      false: "translate-x-1/2 -translate-y-1/3"
-    },
-    hasLabel: {
-      true: {},
-      false: "size-(--chip-size)"
-    }
-  },
-  defaultVariants: {
-    variant: "primary",
-    inset: false,
-    hasLabel: false
-  }
-});
-const computedClasses = computed(() => {
-  return chipVariant({
-    inset: props.inset,
-    variant: props.variant,
-    hasLabel: isTruthyProp(props.label)
-  });
+const { classes } = useTailwindVariant({
+	base: "pxd-chip--label text-xs top-0 right-0 absolute z-1 rounded-full border border-background-100 motion-safe:transition-colors",
+	variants: {
+		variant: {
+			primary: "bg-primary text-primary-foreground",
+			error: "bg-red-700 text-gray-100 dark:text-gray-1000",
+			warning: "bg-amber-700 text-gray-1000 dark:text-gray-100",
+			success: "bg-green-700 text-gray-100 dark:text-gray-1000",
+			secondary: "bg-gray-700 text-gray-100 dark:text-gray-1000"
+		},
+		inset: { false: "translate-x-1/2 -translate-y-1/3" },
+		hasLabel: { false: "size-(--chip-size)" }
+	}
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({
+		inset: props.inset,
+		variant: props.variant,
+		hasLabel: !isNil(props.label)
+	})
 });
 </script>
 
 <template>
-  <div class="pxd-chip relative inline-flex shrink-0" v-bind="$attrs">
+  <div
+    data-chip
+    class="pxd-chip relative inline-flex shrink-0"
+    :data-variant="variant"
+    v-bind="$attrs"
+  >
     <slot />
 
-    <span
-      :data-label="label"
-      :class="computedClasses"
-      :style="{ '--chip-size': getCssUnitValue(size) }"
-    />
+    <span :data-label="label" :class="classes" :style="{ '--chip-size': getCssUnitValue(size) }" />
   </div>
 </template>
 

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentVariant } from '../../types/shared'
+import type { ComponentLabel, ComponentVariant } from '../../types/shared/props'
 
 export interface ChipProps {
   size?: number | string

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

@@ -1,16 +1,16 @@
 import type { ChoiceboxProps } from './types';
-declare var __VLS_10: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ChoiceboxProps, {}, {}, {}, {}, 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;
+    change: (args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | import("../../types/shared/props.js").ComponentValue[] | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | import("../../types/shared/props.js").ComponentValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<ChoiceboxProps> & 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;
+    onChange?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | import("../../types/shared/props.js").ComponentValue[] | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentValue | import("../../types/shared/props.js").ComponentValue[] | undefined>) => any) | undefined;
 }>, {
-    gap: import("../../types/shared").ResponsiveValue<number | string>;
+    gap: import("../../types/shared/props.js").ResponsiveValue<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;