pxd 0.0.17 → 0.0.18

package/dist/components/badge/index.vue

@@ -35,16 +35,17 @@ const VARIANTS = {
   "green-subtle": "bg-green-200 text-green-900",
   "teal-subtle": "bg-teal-200 text-teal-900",
   "inverted": "bg-gray-1000 text-gray-100",
-  "vue": "text-gray-100 dark:text-gray-1000 bg-linear-[315deg,#42d392_25%,#647eff]",
-  "trial": "text-gray-100 dark:text-gray-1000 bg-linear-[135deg,#0070f3,#f81ce5]",
-  "turborepo": "text-gray-100 dark:text-gray-1000 bg-linear-[135deg,#ff1e56,#0096ff]"
+  "vue": "text-gray-100 dark:text-gray-1000",
+  "trial": "text-gray-100 dark:text-gray-1000",
+  "turborepo": "text-gray-100 dark:text-gray-1000"
 };
 const computedSize = useComputedSize(props.size, SIZES);
 const computedClass = computed(
   () => twMerge(
-    "pxd-badge inline-flex items-center justify-center px-2.5 h-6 text-xs rounded-full font-sans gap-1 !no-underline motion-safe:transition-all",
+    "pxd-badge inline-flex items-center justify-center px-2.5 font-medium h-6 text-xs rounded-full font-sans gap-1 !no-underline motion-safe:transition-all",
     getFallbackVariant(props.variant, VARIANTS, "gray"),
-    computedSize.value
+    computedSize.value,
+    props.variant
   )
 );
 const badgeAttrs = computed(() => {
@@ -66,3 +67,21 @@ const badgeAttrs = computed(() => {
     <slot />
   </component>
 </template>
+
+<style>
+.pxd-badge.pill {
+  box-shadow: 0 0 0 1px var(--color-gray-300);
+}
+
+.pxd-badge.vue {
+  background: linear-gradient(315deg, #42d392 25%, #647eff);
+}
+
+.pxd-badge.trial {
+  background: linear-gradient(135deg, #0070f3, #f81ce5);
+}
+
+.pxd-badge.turborepo {
+  background: linear-gradient(135deg, #ff1e56, #0096ff);
+}
+</style>

package/dist/components/checkbox/index.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   value: { type: [String, Number, Boolean], required: false, default: true },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Boolean, Array], required: false, default: false },
+  modelValue: { type: [String, Number, Boolean, Array], required: false, default: () => [] },
   indeterminate: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
@@ -78,7 +78,8 @@ defineExpose({
 
 <template>
   <label
-    class="pxd-checkbox inline-flex items-center group/checkbox"
+    :aria-checked="isChecked"
+    class="pxd-checkbox inline-flex items-center group/checkbox gap-2"
     :class="{ 'is-disabled cursor-not-allowed text-gray-500': computedDisabled }"
     :for="uniqueId"
   >
@@ -92,13 +93,14 @@ defineExpose({
       :disabled="computedDisabled"
       @change="onInputChange"
     >
+
     <span aria-hidden="true" :class="computedInnerClasses">
       <CheckIcon v-if="isChecked" class="size-3 text-gray-100" />
       <MinusIcon v-else-if="indeterminate" class="size-3" />
       <span v-else class="size-3" />
     </span>
 
-    <span class="ml-2 text-sm empty:hidden">
+    <span class="flex-1 text-sm empty:hidden">
       <slot>
         {{ label }}
       </slot>

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

@@ -1,11 +1,10 @@
-import type { ComponentLabel } from '../../types/components';
-type ValueType = string | number | boolean;
+import type { ComponentLabel, ComponentValue } from '../../types/components';
 interface Props {
     label?: ComponentLabel;
-    value?: ValueType;
+    value?: ComponentValue;
     disabled?: boolean;
     required?: boolean;
-    modelValue?: ValueType | ValueType[];
+    modelValue?: ComponentValue | ComponentValue[];
     indeterminate?: boolean;
 }
 declare function getCheckedState(): "indeterminate" | "checked" | "unchecked";
@@ -16,12 +15,12 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<Props, {
     getCheckedState: typeof getCheckedState;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: NonNullable<ValueType | ValueType[]>) => any;
+    "update:modelValue": (args_0: NonNullable<ComponentValue | ComponentValue[]>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: NonNullable<ValueType | ValueType[]>) => any;
+    "onUpdate:modelValue"?: (args_0: NonNullable<ComponentValue | ComponentValue[]>) => any;
 }>, {
-    value: ValueType;
-    modelValue: ValueType | ValueType[];
+    value: ComponentValue;
+    modelValue: ComponentValue | ComponentValue[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -5,6 +5,7 @@ import PCheckbox from "../checkbox/index.vue";
 import PStack from "../stack/index.vue";
 defineOptions({
   name: "PCheckboxGroup",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -16,7 +17,7 @@ const props = defineProps({
   modelValue: { type: Array, required: false, default: () => [] },
   options: { type: Array, required: false, default: () => [] }
 });
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const modelValue = useModelValue(props, emits);
 function isCheckedAll() {
   return props.options.every((option) => modelValue.value.includes(option.value));

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

@@ -1,9 +1,9 @@
-import type { ComponentOptions } from '../../types';
+import type { ComponentOption, ComponentValue } from '../../types';
 interface Props {
     disabled?: boolean;
     required?: boolean;
-    modelValue?: (string | number)[];
-    options?: ComponentOptions[];
+    modelValue?: ComponentValue[];
+    options?: ComponentOption[];
 }
 declare function isCheckedAll(): boolean;
 declare function isCheckedPartial(): boolean;
@@ -15,12 +15,14 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
     isCheckedAll: typeof isCheckedAll;
     isCheckedPartial: typeof isCheckedPartial;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: (string | number)[]) => any;
+    change: (args_0: ComponentValue[]) => any;
+    "update:modelValue": (args_0: ComponentValue[]) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: (string | number)[]) => any;
+    onChange?: (args_0: ComponentValue[]) => any;
+    "onUpdate:modelValue"?: (args_0: ComponentValue[]) => any;
 }>, {
-    options: ComponentOptions[];
-    modelValue: (string | number)[];
+    options: ComponentOption[];
+    modelValue: ComponentValue[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/choicebox/index.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed, inject, markRaw } from "vue";
+import PCheckbox from "../checkbox/index.vue";
+import PRadio from "../radio/index.vue";
+defineOptions({
+  name: "PChoicebox"
+});
+const props = defineProps({
+  label: { type: [String, Number, Array, null], required: false },
+  value: { type: [String, Number, Boolean], required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  description: { type: String, required: false }
+});
+const modelValue = inject("choiceboxGroupModelValue");
+const choiceboxGroupProps = inject("choiceboxGroupProps", { multiple: false });
+const renderComponent = computed(() => markRaw(choiceboxGroupProps.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 p-3 flex-row-reverse hover:bg-background-hover hover:border-gray-500 motion-safe:transition-colors"
+  };
+});
+</script>
+
+<template>
+  <component :is="renderComponent" v-model="modelValue" v-bind="computedAttrs">
+    <div class="flex flex-col gap-1">
+      <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-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);
+  border-color: var(--color-border);
+
+  .pxd-choicebox--label,
+  .pxd-choicebox--description {
+    color: var(--color-gray-500);
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+import type { ComponentLabel, ComponentValue } from '../../types/components';
+interface Props {
+    label?: ComponentLabel;
+    value?: ComponentValue;
+    disabled?: boolean;
+    required?: boolean;
+    description?: string;
+}
+declare var __VLS_6: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_6) => any;
+} & {
+    description?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,69 @@
+<script setup>
+import { computed, markRaw, provide, useAttrs } from "vue";
+import { useModelValue } from "../../composables/useModelValue";
+import PCheckboxGroup from "../checkbox-group/index.vue";
+import PRadioGroup from "../radio-group/index.vue";
+defineOptions({
+  name: "PChoiceboxGroup",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  modelValue: { type: null, required: false, default: "" },
+  label: { type: String, required: false },
+  multiple: { type: Boolean, required: false },
+  required: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  options: { type: Array, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const attrs = useAttrs();
+const modelValue = useModelValue(props, emits);
+const renderComponent = computed(() => markRaw(props.multiple ? PCheckboxGroup : PRadioGroup));
+const computedAttrs = computed(() => {
+  const { disabled, label, multiple, required, options } = props;
+  const { class: classes, ...rest } = attrs;
+  return {
+    "role": multiple ? "group" : "radiogroup",
+    "aria-label": label,
+    "aria-required": required,
+    "aria-multiselectable": multiple,
+    "gap": attrs.gap || "3",
+    disabled,
+    required,
+    options,
+    label,
+    ...rest
+  };
+});
+provide("choiceboxGroupProps", props);
+provide("choiceboxGroupModelValue", modelValue);
+</script>
+
+<template>
+  <div class="pxd-choicebox-group w-full">
+    <div v-if="label || $slots.label" class="pxd-form--label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+
+    <component
+      :is="renderComponent"
+      v-model="modelValue"
+      v-bind="computedAttrs"
+    >
+      <slot>
+        <PChoicebox
+          v-for="option in options"
+          :key="option.value"
+          v-model="modelValue"
+          v-bind="option"
+        />
+      </slot>
+    </component>
+  </div>
+</template>

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

@@ -0,0 +1,36 @@
+import type { ComponentOption, ComponentValue } from '../../types/components';
+interface Option extends ComponentOption {
+    description?: string;
+}
+interface BaseProps {
+    label?: string;
+    multiple?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    options?: Option[];
+}
+interface Props extends BaseProps {
+    modelValue?: BaseProps['multiple'] extends true ? ComponentValue[] : ComponentValue;
+}
+declare var __VLS_1: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: NonNullable<ComponentValue>) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (args_0: NonNullable<ComponentValue>) => any;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    modelValue: BaseProps["multiple"] extends true ? ComponentValue[] : ComponentValue;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/collapse/index.vue

@@ -0,0 +1,111 @@
+<script setup>
+import ChevronDownIcon from "@gdsicon/vue/chevron-down";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { getUniqueId } from "../../utils/uid";
+defineOptions({
+  name: "PCollapse"
+});
+const props = defineProps({
+  title: { type: String, required: false, default: "" },
+  expand: { type: Boolean, required: false, default: false }
+});
+const uid = getUniqueId();
+const localExpand = ref(props.expand);
+const collapseGroup = inject("collapseGroup", null);
+const isExpanded = computed(() => {
+  if (collapseGroup) {
+    return collapseGroup.isExpanded(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";
+  el.style.overflow = "hidden";
+}
+function enter(el) {
+  void el.offsetHeight;
+  el.style.height = `${el.scrollHeight}px`;
+}
+function afterEnter(el) {
+  el.style.height = "";
+  el.style.overflow = "";
+}
+function beforeLeave(el) {
+  el.style.height = `${el.scrollHeight}px`;
+  el.style.overflow = "hidden";
+  void el.offsetHeight;
+}
+function leave(el) {
+  el.style.height = "0";
+}
+onMounted(() => {
+  if (props.expand && collapseGroup) {
+    collapseGroup.toggleItem(uid, true);
+  }
+});
+</script>
+
+<template>
+  <div class="pxd-collapse border-b">
+    <h3 class="pxd-collapse--title">
+      <button
+        class="pxd-collapse--trigger flex items-center justify-between w-full pr-1 appearance-none group/collapse cursor-pointer outline-none border-none bg-transparent self-focus-ring"
+        :data-state="isExpanded ? 'open' : 'closed'"
+        @click="onTriggerClick"
+      >
+        <slot name="title">
+          {{ title }}
+        </slot>
+
+        <ChevronDownIcon class="flex-shrink-0 size-4 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform motion-safe:duration-200" />
+      </button>
+    </h3>
+
+    <Transition
+      name="pxd-transition--collapse"
+      @before-enter="beforeEnter"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @leave="leave"
+    >
+      <div v-show="isExpanded" class="pxd-collapse--content">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+.pxd-collapse--trigger {
+  padding-block: var(--size, 24px);
+  font-size: var(--font-size, 24px);
+  font-weight: var(--font-weight, 600);
+}
+
+.pxd-collapse--content {
+  will-change: height;
+}
+
+.pxd-transition--collapse-enter-active,
+.pxd-transition--collapse-leave-active {
+  transition: height 0.2s cubic-bezier(0.33, 1, 0.68, 1);
+}
+</style>

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

@@ -0,0 +1,21 @@
+interface Props {
+    title?: string;
+    expand?: boolean;
+}
+declare var __VLS_1: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    expand: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, provide, ref } from "vue";
+import { useComputedSize } from "../../composables/useFallbackProps";
+defineOptions({
+  name: "PCollapseGroup"
+});
+const props = defineProps({
+  multiple: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false }
+});
+const SIZES = {
+  sm: {
+    padding: "12px",
+    fontSize: "16px",
+    fontWeight: "500"
+  },
+  md: {
+    padding: "24px",
+    fontSize: "24px",
+    fontWeight: "600"
+  },
+  lg: {
+    padding: "30px",
+    fontSize: "28px",
+    fontWeight: "600"
+  }
+};
+const expandedItems = ref([]);
+const computedSize = useComputedSize(props.size, SIZES);
+const computedStyle = computed(() => {
+  const { padding, fontSize, fontWeight } = computedSize.value;
+  return {
+    "--size": padding,
+    "--font-size": fontSize,
+    "--font-weight": fontWeight
+  };
+});
+function toggleItem(id, expanded) {
+  if (expanded) {
+    if (props.multiple) {
+      expandedItems.value.push(id);
+    } else {
+      expandedItems.value = [id];
+    }
+    return;
+  }
+  expandedItems.value = expandedItems.value.filter((item) => item !== id);
+}
+const isExpanded = (id) => expandedItems.value.includes(id);
+provide("collapseGroup", {
+  multiple: computed(() => props.multiple),
+  isExpanded,
+  toggleItem
+});
+</script>
+
+<template>
+  <div class="pxd-collapse-group w-full max-w-full border-t" :style="computedStyle">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+import type { ComponentSize } from '../../types/components';
+interface Props {
+    multiple?: boolean;
+    size?: ComponentSize;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/index.d.ts

@@ -6,6 +6,10 @@ export { default as Book } from './book/index.vue';
 export { default as Button } from './button/index.vue';
 export { default as Checkbox } from './checkbox/index.vue';
 export { default as CheckboxGroup } from './checkbox-group/index.vue';
+export { default as Choicebox } from './choicebox/index.vue';
+export { default as ChoiceboxGroup } from './choicebox-group/index.vue';
+export { default as Collapse } from './collapse/index.vue';
+export { default as CollapseGroup } from './collapse-group/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
 export { default as Description } from './description/index.vue';
 export { default as Error } from './error/index.vue';

package/dist/components/index.js

@@ -6,6 +6,10 @@ export { default as Book } from "./book/index.vue";
 export { default as Button } from "./button/index.vue";
 export { default as Checkbox } from "./checkbox/index.vue";
 export { default as CheckboxGroup } from "./checkbox-group/index.vue";
+export { default as Choicebox } from "./choicebox/index.vue";
+export { default as ChoiceboxGroup } from "./choicebox-group/index.vue";
+export { default as Collapse } from "./collapse/index.vue";
+export { default as CollapseGroup } from "./collapse-group/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
 export { default as Description } from "./description/index.vue";
 export { default as Error } from "./error/index.vue";

package/dist/components/input/index.vue

@@ -23,6 +23,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   password: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
   minlength: { type: [Number, String], required: false },
   maxlength: { type: [Number, String], required: false },
   modelValue: { type: [String, Number, Array, null], required: false, default: "" },
@@ -97,13 +98,13 @@ function clearInputValue() {
         :type="internalInputType"
         autocorrect="off"
         autocomplete="off"
-        inputmode="numeric"
         autocapitalize="off"
         :readonly="readonly"
         :disabled="disabled"
         :required="required"
         :minlength="minlength"
         :maxlength="maxlength"
+        :autofocus="autofocus"
         :placeholder="placeholder"
         @change="onInputChange"
         @focus="onInputFocus"

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

@@ -7,6 +7,7 @@ interface Props {
     disabled?: boolean;
     password?: boolean;
     required?: boolean;
+    autofocus?: boolean;
     minlength?: number | string;
     maxlength?: number | string;
     modelValue?: ComponentLabel;