pxd 0.0.55 → 0.0.61

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

@@ -1,5 +1,4 @@
 <script setup>
-import { useModelValue } from "../../composables/use-model-value";
 import { provideCheckboxGroupContext } from "../../contexts/checkbox";
 import PCheckbox from "../checkbox/index.vue";
 import PStack from "../stack/index.vue";
@@ -13,40 +12,23 @@ defineOptions({
 });
 const props = defineProps({
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
-  modelValue: { type: Array, required: false, default: () => [] },
-  options: { type: Array, required: false, default: () => [] }
+  options: { type: Array, required: false, default: () => [] },
+  modelValue: { type: Array, required: true, default: () => [] }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const modelValue = useModelValue(props, emits);
-function isCheckedAll() {
-  const { options = [] } = props;
-  if (options.length === 0) {
-    return false;
-  }
-  return options.every((option) => modelValue.value.includes(option.value));
-}
-function isCheckedPartial() {
-  return modelValue.value.length > 0 && !isCheckedAll();
-}
-provideCheckboxGroupContext(props);
-defineExpose({
-  isCheckedAll,
-  isCheckedPartial
-});
+provideCheckboxGroupContext({ props, emits });
 </script>
 
 <template>
-  <PStack class="pxd-checkbox-group" role="group" aria-label="Checkbox Group" v-bind="$attrs">
+  <PStack
+    class="pxd-checkbox-group"
+    role="group"
+    aria-label="Checkbox Group"
+    aria-multiselectable="true"
+    v-bind="$attrs"
+  >
     <slot>
-      <PCheckbox
-        v-for="option in options"
-        :key="option.value"
-        v-model="modelValue"
-        :label="option.label"
-        :value="option.value"
-        :disabled="option.disabled"
-      />
+      <PCheckbox v-for="option in options" :key="option.value" v-bind="option" />
     </slot>
   </PStack>
 </template>

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

@@ -0,0 +1,12 @@
+import type { ComponentOption, ComponentValue } from '../../types/shared'
+
+export interface CheckboxGroupProps {
+  disabled?: boolean
+  options?: ComponentOption[]
+  modelValue: ComponentValue[]
+}
+
+export interface CheckboxGroupEmits {
+  change: [NonNullable<CheckboxGroupProps['modelValue']>]
+  'update:modelValue': [NonNullable<CheckboxGroupProps['modelValue']>]
+}

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

@@ -4,8 +4,8 @@ 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<{}>, {
-    size: number | string;
     label: import("../../types/shared").ComponentLabel;
+    size: number | string;
     variant: import("../../types/shared").ComponentVariant | "secondary";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/chip/index.vue

@@ -1,13 +1,42 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { getCssUnitValue, isTruthyProp } from "../../utils/format";
-import { chipVariant } from "./cn";
+defineOptions({
+  name: "PChip",
+  inheritAttrs: false
+});
 const props = defineProps({
   size: { type: [Number, String], required: false, default: 10 },
   inset: { type: Boolean, required: false },
   label: { type: [String, Number, Array, null], required: false, default: "" },
   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-all",
+  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,
@@ -18,7 +47,7 @@ const computedClasses = computed(() => {
 </script>
 
 <template>
-  <div class="pxd-chip relative inline-flex shrink-0">
+  <div class="pxd-chip relative inline-flex shrink-0" v-bind="$attrs">
     <slot />
 
     <span

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

@@ -1,11 +1,17 @@
 import type { ChoiceboxProps } from './types';
-declare var __VLS_8: {}, __VLS_10: {};
+declare var __VLS_10: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_8) => any;
-} & {
-    description?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ChoiceboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChoiceboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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;
+}, 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;
+}>, {
+    gap: import("../../types/shared").ResponsiveValue<number | string>;
+}, {}, {}, {}, 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/choicebox/index.vue

@@ -1,67 +1,49 @@
 <script setup>
 import { computed, markRaw } from "vue";
-import { useChoiceboxGroupContext, useChoiceboxGroupModelValue } from "../../contexts/choicebox";
-import PCheckbox from "../checkbox/index.vue";
-import PRadio from "../radio/index.vue";
+import { provideChoiceboxContext } from "../../contexts/choicebox";
+import PCheckboxGroup from "../checkbox-group/index.vue";
+import PChoiceboxItem from "../choicebox-item/index.vue";
+import PRadioGroup from "../radio-group/index.vue";
 defineOptions({
-  name: "PChoicebox"
+  name: "PChoicebox",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
 });
 const props = defineProps({
+  gap: { type: [Number, String, Object], required: false, default: 3 },
   label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number, Boolean], required: false },
+  multiple: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
-  description: { type: String, required: false }
-});
-const choiceboxModelValue = useChoiceboxGroupModelValue();
-const choiceboxGroupContext = useChoiceboxGroupContext();
-const renderComponent = computed(() => markRaw(choiceboxGroupContext.multiple ? PCheckbox : PRadio));
-const computedAttrs = computed(() => {
-  const { disabled, required, value } = props;
-  return {
-    value,
-    disabled,
-    required,
-    class: "pxd-choicebox justify-between border rounded-md flex-1 w-full p-3 flex-row-reverse hover:bg-background-hover hover:border-gray-500 motion-safe:transition-colors"
-  };
+  options: { type: Array, required: false },
+  modelValue: { type: [String, Number, Boolean, Array], required: false }
 });
+const emits = defineEmits(["change", "update:modelValue"]);
+const renderAs = computed(() => markRaw(props.multiple ? PCheckboxGroup : PRadioGroup));
+function onUpdateModelValue(value) {
+  emits("change", value);
+  emits("update:modelValue", value);
+}
+provideChoiceboxContext({ props, emits });
 </script>
 
 <template>
-  <Component :is="renderComponent" v-model="choiceboxModelValue" v-bind="computedAttrs">
-    <div class="gap-1 flex flex-col">
-      <span class="pxd-choicebox--label font-medium">
-        <slot name="label">
-          {{ label }}
-        </slot>
-      </span>
-      <span class="pxd-choicebox--description text-sm text-foreground-secondary">
-        <slot name="description">
-          {{ description }}
-        </slot>
-      </span>
-    </div>
+  <Component
+    :is="renderAs"
+    :gap="gap"
+    :options="options"
+    :disabled="disabled"
+    :model-value="modelValue"
+    :aria-multiselectable="multiple"
+    class="pxd-choicebox w-full"
+    :role="multiple ? 'group' : 'radiogroup'"
+    v-bind="$attrs"
+    @update:model-value="onUpdateModelValue"
+  >
+    <slot>
+      <PChoiceboxItem v-for="option in options" :key="option.value" v-bind="option" />
+    </slot>
   </Component>
 </template>
-
-<style lang="postcss">
-.pxd-choicebox[aria-checked='true'] {
-  border-color: var(--color-primary);
-  background-color: hsla(var(--primary), 0.08);
-
-  .pxd-choicebox--label,
-  .pxd-choicebox--description {
-    color: var(--color-primary);
-  }
-}
-
-.pxd-choicebox.is-disabled {
-  background-color: var(--color-background-100);
-  border-color: var(--color-border);
-
-  .pxd-choicebox--label,
-  .pxd-choicebox--description {
-    color: var(--color-gray-500);
-  }
-}
-</style>

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

@@ -1,27 +1,20 @@
-import type { ComponentLabel, ComponentOption, ComponentValue } from '../../types/shared'
-
-interface Option extends ComponentOption {
-  description?: string
-}
+import type {
+  ComponentLabel,
+  ComponentValue,
+  ComponentOption,
+  ResponsiveValue,
+} from '../../types/shared'
 
 export interface ChoiceboxProps {
-  label?: ComponentLabel
-  value?: ComponentValue
-  disabled?: boolean
-  required?: boolean
-  description?: string
-}
-
-export interface ChoiceboxGroupProps {
+  gap?: ResponsiveValue<number | string>
   label?: ComponentLabel
   multiple?: boolean
-  required?: boolean
   disabled?: boolean
-  options?: Option[]
+  options?: ComponentOption[]
   modelValue?: ComponentValue | ComponentValue[]
 }
 
-export interface ChoiceboxGroupEmits {
-  change: [NonNullable<ChoiceboxGroupProps['modelValue']>]
-  'update:modelValue': [NonNullable<ChoiceboxGroupProps['modelValue']>]
+export interface ChoiceboxEmits {
+  change: [NonNullable<ChoiceboxProps['modelValue']>]
+  'update:modelValue': [NonNullable<ChoiceboxProps['modelValue']>]
 }

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

@@ -0,0 +1,16 @@
+import type { ChoiceboxProps } from './types';
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_8) => any;
+} & {
+    description?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ChoiceboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChoiceboxProps> & 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/choicebox-item/index.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, markRaw } from "vue";
+import { useChoiceboxContext } from "../../contexts/choicebox";
+import PCheckbox from "../checkbox/index.vue";
+import PRadio from "../radio/index.vue";
+defineOptions({
+  name: "PChoiceboxItem",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+defineProps({
+  label: { type: [String, Number, Array, null], required: false },
+  value: { type: [String, Number, Boolean], required: false },
+  disabled: { type: Boolean, required: false },
+  description: { type: String, required: false }
+});
+const choiceboxGroupContext = useChoiceboxContext();
+const renderAs = computed(() => markRaw(choiceboxGroupContext?.props.multiple ? PCheckbox : PRadio));
+</script>
+
+<template>
+  <Component
+    :is="renderAs"
+    :value="value"
+    :disabled="disabled"
+    class="pxd-choicebox-item p-3 w-full flex-1 flex-row-reverse justify-between rounded-md border hover:border-gray-500 hover:bg-background-hover motion-safe:transition-colors"
+    v-bind="$attrs"
+  >
+    <div class="gap-1 flex flex-col">
+      <span class="pxd-choicebox--label font-medium">
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </span>
+      <span class="pxd-choicebox--description text-sm text-foreground-secondary">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </span>
+    </div>
+  </Component>
+</template>
+
+<style lang="postcss">
+.pxd-choicebox[aria-selected='true'] {
+  border-color: var(--color-primary);
+  background-color: hsla(var(--primary), 0.08);
+
+  .pxd-choicebox--label,
+  .pxd-choicebox--description {
+    color: var(--color-primary);
+  }
+}
+
+.pxd-choicebox[data-disabled='true'] {
+  background-color: var(--color-background-100);
+  border-color: var(--color-border);
+
+  .pxd-choicebox--label,
+  .pxd-choicebox--description {
+    color: var(--color-gray-500);
+  }
+}
+</style>

package/dist/components/choicebox-item/types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentLabel, ComponentOption, ComponentValue } from '../../types/shared'
+
+interface Option extends ComponentOption {
+  description?: string
+}
+
+export interface ChoiceboxProps {
+  label?: ComponentLabel
+  value?: ComponentValue
+  disabled?: boolean
+  description?: string
+}

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

@@ -5,10 +5,11 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_20) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CollapseProps> & Readonly<{}>, {
-    title: string;
-    expand: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<CollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (args_0: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CollapseProps> & Readonly<{
+    onToggle?: ((args_0: MouseEvent) => 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;

package/dist/components/collapse/index.vue

@@ -1,41 +1,26 @@
 <script setup>
 import ChevronDownIcon from "@gdsicon/vue/chevron-down";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import { useCollapseGroupContext } from "../../contexts/collapse";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
-  name: "PCollapse"
+  name: "PCollapse",
+  inheritAttrs: false
 });
+const uid = getUniqueId();
 const props = defineProps({
-  title: { type: String, required: false, default: "" },
-  expand: { type: Boolean, required: false, default: false }
+  title: { type: String, required: false },
+  expand: { type: Boolean, required: false }
 });
-const uid = getUniqueId();
-const localExpand = ref(props.expand);
-const collapseGroup = useCollapseGroupContext();
+const emits = defineEmits(["toggle"]);
+const localExpand = shallowRef(props.expand);
+const collapseGroupContext = useCollapseGroupContext();
 const isExpanded = computed(() => {
-  if (collapseGroup) {
-    return collapseGroup.isExpanded(uid);
+  if (collapseGroupContext) {
+    return collapseGroupContext.expandedIds.value.has(uid);
   }
   return localExpand.value;
 });
-if (!collapseGroup) {
-  watch(
-    () => props.expand,
-    (expand) => {
-      localExpand.value = expand;
-    },
-    { immediate: true }
-  );
-}
-function onTriggerClick() {
-  const newState = !isExpanded.value;
-  if (collapseGroup) {
-    collapseGroup.toggleItem(uid, newState);
-    return;
-  }
-  localExpand.value = newState;
-}
 function beforeEnter(el) {
   ;
   el.style.height = "0";
@@ -60,20 +45,52 @@ function leave(el) {
   ;
   el.style.height = "0";
 }
+function onToggleClick(ev) {
+  const newCheckedState = !isExpanded.value;
+  emits("toggle", ev);
+  if (collapseGroupContext) {
+    const ids = collapseGroupContext.expandedIds.value;
+    if (!collapseGroupContext.props.multiple) {
+      ids.clear();
+    }
+    if (newCheckedState) {
+      ids.add(uid);
+    } else {
+      ids.delete(uid);
+    }
+    return;
+  }
+  localExpand.value = newCheckedState;
+}
+watch(
+  () => props.expand,
+  (expand) => {
+    if (collapseGroupContext) {
+      if (expand) {
+        collapseGroupContext.expandedIds.value.add(uid);
+      } else {
+        collapseGroupContext.expandedIds.value.delete(uid);
+      }
+    } else {
+      localExpand.value = expand;
+    }
+  },
+  { immediate: true }
+);
 onMounted(() => {
-  if (props.expand && collapseGroup) {
-    collapseGroup.toggleItem(uid, true);
+  if (props.expand && collapseGroupContext) {
+    collapseGroupContext.expandedIds.value.add(uid);
   }
 });
 </script>
 
 <template>
-  <div class="pxd-collapse group/collapse border-b">
+  <div class="pxd-collapse group/collapse border-b" v-bind="$attrs">
     <h3 class="pxd-collapse--title">
       <button
         class="pxd-collapse--trigger pr-1 group/collapse flex w-full cursor-pointer touch-manipulation appearance-none items-center justify-between border-none bg-transparent font-inherit self-focus-ring outline-none"
         :data-state="isExpanded ? 'open' : 'closed'"
-        @click="onTriggerClick"
+        @click="onToggleClick"
       >
         <slot name="title">
           {{ title }}

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

@@ -1,11 +1,8 @@
-import type { ComponentSize } from '../../types/shared'
-
 export interface CollapseProps {
   title?: string
   expand?: boolean
 }
 
-export interface CollapseGroupProps {
-  multiple?: boolean
-  size?: ComponentSize
+export interface CollapseEmits {
+  toggle: [MouseEvent]
 }

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

@@ -1,11 +1,9 @@
-import type { CollapseGroupProps } from '../collapse/types';
+import type { CollapseGroupProps } from './types';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CollapseGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CollapseGroupProps> & Readonly<{}>, {
-    multiple: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<CollapseGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CollapseGroupProps> & 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;

package/dist/components/collapse-group/index.vue

@@ -1,13 +1,14 @@
 <script setup>
 import { computed, ref } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { provideCollapseGroupContext } from "../../contexts/collapse";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getFallbackValue } from "../../utils/get";
 defineOptions({
-  name: "PCollapseGroup"
+  name: "PCollapseGroup",
+  inheritAttrs: false
 });
 const props = defineProps({
-  multiple: { type: Boolean, required: false, default: false },
+  multiple: { type: Boolean, required: false },
   size: { type: String, required: false }
 });
 const SIZES = {
@@ -28,7 +29,7 @@ const SIZES = {
   }
 };
 const configProvider = useConfigProvider();
-const expandedItemIds = ref([]);
+const expandedIds = ref(/* @__PURE__ */ new Set());
 const computedStyle = computed(() => {
   const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, configProvider.size);
   return {
@@ -37,27 +38,14 @@ const computedStyle = computed(() => {
     "--collapse-font-weight": fontWeight
   };
 });
-function toggleItem(id, expanded) {
-  if (expanded) {
-    if (props.multiple) {
-      expandedItemIds.value.push(id);
-    } else {
-      expandedItemIds.value = [id];
-    }
-    return;
-  }
-  expandedItemIds.value = expandedItemIds.value.filter((item) => item !== id);
-}
-const isExpanded = (id) => expandedItemIds.value.includes(id);
 provideCollapseGroupContext({
-  multiple: computed(() => props.multiple),
-  isExpanded,
-  toggleItem
+  expandedIds,
+  props
 });
 </script>
 
 <template>
-  <div class="pxd-collapse-group w-full max-w-full border-t" :style="computedStyle">
+  <div class="pxd-collapse-group w-full max-w-full border-t" :style="computedStyle" v-bind="$attrs">
     <slot />
   </div>
 </template>

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

@@ -0,0 +1,6 @@
+import type { ComponentSize } from '../../types/shared'
+
+export interface CollapseGroupProps {
+  multiple?: boolean
+  size?: ComponentSize
+}