pxd 0.0.10 → 0.0.12

package/dist/components/avatar/index.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed, inject, ref } from "vue";
+defineOptions({
+  name: "PAvatar"
+});
+const props = defineProps({
+  src: { type: String, required: false },
+  size: { type: [Number, String], required: false },
+  loading: { type: Boolean, required: false }
+});
+defineEmits(["error"]);
+const isLoadFailed = ref(false);
+const groupSize = inject("groupSize", 32);
+const computedSize = computed(() => {
+  const _size = props.size || groupSize;
+  if (typeof _size === "number") {
+    return `${_size}px`;
+  }
+  return _size;
+});
+const computedLoading = computed(() => props.loading || isLoadFailed.value);
+</script>
+
+<template>
+  <div
+    class="pxd-avatar inline-flex items-center justify-center relative rounded-full border border-white select-none size-(--s)"
+    :style="{ '--s': computedSize }"
+  >
+    <slot>
+      <img
+        v-if="!computedLoading"
+        :src="src"
+        alt="avatar"
+        loading="lazy"
+        decoding="async"
+        aria-hidden="true"
+        fetchpriority="low"
+        crossorigin="anonymous"
+        class="relative block rounded-inherit overflow-hidden w-full h-full"
+        @error="$emit('error', $event)"
+      >
+    </slot>
+
+    <div
+      v-if="$slots.badge"
+      class="absolute -bottom-1 -left-1 z-10 w-1/2 h-1/2 flex items-center rounded-full border border-white bg-white overflow-hidden"
+    >
+      <slot name="badge" />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.pxd-avatar {
+  &::before,
+  &::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+
+  &::before {
+    background-image: linear-gradient(270deg, var(--gray-alpha-100), var(--gray-alpha-300), var(--gray-alpha-300), var(--gray-alpha-100));
+    background-size: 400% 100%;
+  }
+
+  &::after {
+    border: 1px solid var(--gray-alpha-400)
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .pxd-avatar::before {
+    animation: gradient 8s ease-in-out infinite;
+  }
+}
+</style>

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

@@ -0,0 +1,23 @@
+interface Props {
+    src?: string;
+    size?: number | string;
+    loading?: boolean;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    badge?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (args_0: Event) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onError?: (args_0: Event) => any;
+}>, {}, {}, {}, {}, 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/avatar-group/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed, provide } from "vue";
+import Avatar from "../avatar/index.vue";
+defineOptions({
+  name: "PAvatarGroup"
+});
+const props = defineProps({
+  max: { type: Number, required: false, default: 5 },
+  size: { type: [Number, String], required: false, default: 32 },
+  options: { type: Array, required: false, default: () => [] }
+});
+const slicedOptions = computed(() => props.options?.slice(0, props.max));
+provide("groupSize", props.size);
+</script>
+
+<template>
+  <div class="pxd-avatar-group flex flex-wrap items-center">
+    <Avatar
+      v-for="(option, index) in slicedOptions"
+      :key="index"
+      :size="size"
+      :src="option.src"
+      :loading="option.loading"
+      class="[&:nth-child(n+2)]:-ml-3"
+    />
+
+    <Avatar v-if="slicedOptions.length < options.length" class="text-xs bg-gray-1000 text-gray-100 -ml-3">
+      +{{ options.length - slicedOptions.length }}
+    </Avatar>
+  </div>
+</template>

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

@@ -0,0 +1,124 @@
+interface AvatarGroupOptions {
+    src?: string;
+    loading?: boolean;
+}
+interface Props {
+    max?: number;
+    size?: number | string;
+    options?: AvatarGroupOptions[];
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    max: number;
+    options: AvatarGroupOptions[];
+    size: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+declare global {
+    const __VLS_intrinsicElements: __VLS_IntrinsicElements;
+    const __VLS_directiveBindingRestFields: {
+        instance: null;
+        oldValue: null;
+        modifiers: any;
+        dir: any;
+    };
+    const __VLS_unref: typeof import('vue').unref;
+    const __VLS_placeholder: any;
+    type __VLS_NativeElements = __VLS_SpreadMerge<SVGElementTagNameMap, HTMLElementTagNameMap>;
+    type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+    type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+    type __VLS_GlobalComponents = import('vue').GlobalComponents;
+    type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
+    type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+    type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+    type __VLS_SpreadMerge<A, B> = Omit<A, keyof B> & B;
+    type __VLS_WithComponent<N0 extends string, LocalComponents, Self, N1 extends string, N2 extends string, N3 extends string> = N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N1];
+    } : N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N2];
+    } : N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N3];
+    } : Self extends object ? {
+        [K in N0]: Self;
+    } : N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N1];
+    } : N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N2];
+    } : N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N3];
+    } : {
+        [K in N0]: unknown;
+    };
+    type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: {
+            props?: infer P;
+        };
+    } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) => any ? P : {};
+    type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false;
+    type __VLS_NormalizeComponentEvent<Props, Events, onEvent extends keyof Props, Event extends keyof Events, CamelizedEvent extends keyof Events> = (__VLS_IsFunction<Props, onEvent> extends true ? Props : __VLS_IsFunction<Events, Event> extends true ? {
+        [K in onEvent]?: Events[Event];
+    } : __VLS_IsFunction<Events, CamelizedEvent> extends true ? {
+        [K in onEvent]?: Events[CamelizedEvent];
+    } : Props) & Record<string, unknown>;
+    type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
+    type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) : never;
+    type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never>;
+    type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F ? F extends (event: infer E, ...args: infer A) => any ? {
+        [K in E & string]: (...args: A) => void;
+    } : never : never;
+    type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<__VLS_UnionToIntersection<__VLS_ConstructorOverloads<T> & {
+        [K in keyof T]: T[K] extends any[] ? {
+            (...args: T[K]): void;
+        } : never;
+    }>>;
+    type __VLS_PrettifyGlobal<T> = {
+        [K in keyof T]: T[K];
+    } & {};
+    type __VLS_PickFunctionalComponentCtx<T, K> = NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: infer Ctx;
+    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
+    type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>;
+    function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [
+        item: T extends number ? number : T extends string ? string : T extends any[] ? T[number] : T extends Iterable<infer T1> ? T1 : any,
+        index: number
+    ][];
+    function __VLS_getVForSourceType<T>(source: T): [
+        item: T[keyof T],
+        key: keyof T,
+        index: number
+    ][];
+    function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
+    function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
+    function __VLS_asFunctionalDirective<T>(dir: T): T extends import('vue').ObjectDirective ? NonNullable<T['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']> : T extends (...args: any) => any ? T : (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+    function __VLS_makeOptional<T>(t: T): {
+        [K in keyof T]?: T[K];
+    };
+    function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends {
+        $props: infer Props;
+    } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
+        __ctx?: {
+            attrs?: any;
+            slots?: K extends {
+                $slots: infer Slots;
+            } ? Slots : any;
+            emit?: K extends {
+                $emit: infer Emit;
+            } ? Emit : any;
+            expose?(exposed: K): void;
+            props?: (K extends {
+                $props: infer Props;
+            } ? Props : any) & Record<string, unknown>;
+        };
+    } : T extends () => any ? (props: {}, ctx?: any) => ReturnType<T> : T extends (...args: any) => any ? T : (_: {} & Record<string, unknown>, ctx?: any) => {
+        __ctx?: {
+            attrs?: any;
+            expose?: any;
+            slots?: any;
+            emit?: any;
+            props?: {} & Record<string, unknown>;
+        };
+    };
+    function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+    function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T & Record<string, unknown>) => void;
+    function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>;
+    function __VLS_tryAsConstant<const T>(t: T): T;
+}

package/dist/components/badge/index.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { computed } from "vue";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
+defineOptions({
+  name: "PBadge"
+});
+const props = defineProps({
+  as: { type: null, required: false, default: "span" },
+  variant: { type: null, required: false, default: "gray" },
+  size: { type: null, required: false },
+  href: { type: String, required: false }
+});
+const config = useConfigProvider();
+const SIZES = {
+  sm: "px-1.5 h-5 text-xs",
+  md: "px-2.5 h-6 text-xs",
+  lg: "px-3 h-7.5 text-sm"
+};
+const VARIANTS = {
+  "pill": "bg-background shadow-[0_0_0_1px_var(--color-gray-300)]",
+  "gray": "bg-gray-600 text-white",
+  "blue": "bg-blue-700 text-gray-100 dark:text-gray-1000",
+  "purple": "bg-purple-700 text-gray-100 dark:text-gray-1000",
+  "amber": "bg-amber-700 text-gray-1000 dark:text-gray-100",
+  "red": "bg-red-700 text-gray-100 dark:text-gray-1000",
+  "pink": "bg-pink-700 text-gray-100 dark:text-gray-1000",
+  "green": "bg-green-700 text-gray-100 dark:text-gray-1000",
+  "teal": "bg-teal-700 text-gray-100 dark:text-gray-1000",
+  "gray-subtle": "bg-gray-200 text-gray-1000",
+  "blue-subtle": "bg-blue-200 text-blue-900",
+  "purple-subtle": "bg-purple-200 text-purple-900",
+  "amber-subtle": "bg-amber-200 text-amber-900",
+  "red-subtle": "bg-red-200 text-red-900",
+  "pink-subtle": "bg-pink-200 text-pink-900",
+  "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]"
+};
+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",
+    VARIANTS[props.variant],
+    SIZES[props.size || config.size]
+  )
+);
+const badgeAttrs = computed(() => {
+  if (props.as === "router-link" || props.as === "RouterLink") {
+    return {
+      to: props.href
+    };
+  } else if (props.as === "a") {
+    return {
+      href: props.href
+    };
+  }
+  return {};
+});
+</script>
+
+<template>
+  <component :is="as" :class="computedClass" v-bind="badgeAttrs">
+    <slot />
+  </component>
+</template>

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

@@ -0,0 +1,50 @@
+import type { ComponentAs } from '../../types/components';
+interface Props {
+    as?: ComponentAs;
+    variant?: keyof typeof VARIANTS;
+    size?: keyof typeof SIZES;
+    href?: string;
+}
+declare const SIZES: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+declare const VARIANTS: {
+    pill: string;
+    gray: string;
+    blue: string;
+    purple: string;
+    amber: string;
+    red: string;
+    pink: string;
+    green: string;
+    teal: string;
+    'gray-subtle': string;
+    'blue-subtle': string;
+    'purple-subtle': string;
+    'amber-subtle': string;
+    'red-subtle': string;
+    'pink-subtle': string;
+    'green-subtle': string;
+    'teal-subtle': string;
+    inverted: string;
+    vue: string;
+    trial: string;
+    turborepo: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: keyof typeof VARIANTS;
+    as: ComponentAs;
+}, {}, {}, {}, 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/button/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { twMerge } from "tailwind-merge";
-import { computed, useAttrs } from "vue";
+import { computed } from "vue";
 import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import Spinner from "../spinner/index.vue";
 defineOptions({
@@ -8,26 +8,25 @@ defineOptions({
 });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
-  variant: { type: null, required: false, default: "outline" },
-  size: { type: null, required: false },
+  variant: { type: String, required: false, default: "outline" },
+  size: { type: String, required: false },
   shape: { type: String, required: false },
   block: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
 const emits = defineEmits(["click"]);
-const attrs = useAttrs();
 const config = useConfigProvider();
 const SIZES = {
   xs: "px-1 rounded-md h-6 text-sm",
-  sm: "px-1.5 rounded-md h-7 text-sm",
-  md: "px-2.5 rounded-md h-8 text-sm",
-  lg: "px-3.5 rounded-lg h-9 text-base"
+  sm: "px-1.5 rounded-md h-7.5 text-sm",
+  md: "px-2.5 rounded-md h-9 text-sm",
+  lg: "px-3.5 rounded-lg h-10.5 text-base"
 };
 const VARIANTS = {
   outline: "bg-background text-foreground hover:bg-background-hover active:bg-background-active border-input",
   ghost: "bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 border-transparent",
-  primary: "bg-foreground text-background hover:bg-foreground/80 active:bg-foreground border-transparent",
+  primary: "bg-primary text-gray-100 hover:bg-primary/80 active:bg-primary border-transparent",
   error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 border-transparent",
   warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 border-transparent",
   success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-800 border-transparent"
@@ -36,11 +35,11 @@ const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:b
 const computedDisabled = computed(() => {
   return props.disabled || props.loading;
 });
-const computedClassNames = computed(() => {
-  const classNames = ["pxd-button cursor-pointer motion-safe:transition-colors items-center justify-center border"];
+const computedClasses = computed(() => {
+  const classNames = ["pxd-button cursor-pointer select-none items-center justify-center border outline-none self-focus-ring motion-safe:transition-colors"];
   classNames.push(VARIANTS[props.variant] || VARIANTS.outline);
   classNames.push(SIZES[props.size || config.size]);
-  classNames.push(props.block ? "flex " : "inline-flex");
+  classNames.push(props.block ? "flex w-full" : "inline-flex");
   if (computedDisabled.value) {
     classNames.push(DISABLED_CLASS_NAMES);
   }
@@ -49,7 +48,7 @@ const computedClassNames = computed(() => {
       props.shape === "square" ? "rounded-none" : "rounded-full"
     );
   }
-  return twMerge(classNames, attrs.class);
+  return twMerge(classNames);
 });
 function onButtonClick(event) {
   emits("click", event);
@@ -60,7 +59,7 @@ function onButtonClick(event) {
   <Component
     :is="as"
     role="button"
-    :class="computedClassNames"
+    :class="computedClasses"
     :disabled="computedDisabled"
     @click="onButtonClick"
   >

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

@@ -0,0 +1,24 @@
+import type { ButtonProps } from '../../types/components';
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    suffix?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (args_0: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
+    onClick?: (args_0: MouseEvent) => any;
+}>, {
+    variant: "outline" | "ghost" | "primary" | "error" | "warning" | "success";
+    as: import("../../types/components").ComponentAs;
+}, {}, {}, {}, 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/checkbox/index.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { CheckIcon, MinusIcon } from "gdsi/vue";
+import { twMerge } from "tailwind-merge";
+import { computed, inject } from "vue";
+import { useModelValue } from "../../composables/useModelValue";
+import { getRandomId } from "../../utils/random";
+defineOptions({
+  name: "PCheckbox",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  label: { type: [String, Number], required: false },
+  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 },
+  indeterminate: { type: Boolean, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const randomId = getRandomId();
+const modelValue = useModelValue(props, emits);
+const checkboxGroupProps = inject("checkboxGroupProps", {
+  disabled: false,
+  required: false
+});
+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 computedDisabled = computed(() => props.disabled || checkboxGroupProps.disabled);
+const computedRequired = computed(() => props.required || checkboxGroupProps.required);
+const computedInnerClasses = computed(() => {
+  const basic = [
+    "pxd-checkbox--inner size-4 flex-shrink-0 inline-flex items-center justify-center peer-focus-ring",
+    "rounded-sm border overflow-hidden transform-gpu motion-safe:transition-colors"
+  ];
+  if (isChecked.value) {
+    basic.push(
+      computedDisabled.value ? "bg-gray-600 border-gray-600" : "bg-gray-1000 border-gray-1000"
+    );
+  } else {
+    basic.push(
+      computedDisabled.value ? "bg-gray-100 border-gray-500" : "bg-background border-gray-alpha-400 group-hover:bg-gray-200"
+    );
+  }
+  return twMerge(basic);
+});
+function toggleChecked(isChecked2) {
+  if (Array.isArray(modelValue.value)) {
+    modelValue.value = isChecked2 ? [...modelValue.value, props.value] : modelValue.value.filter((v) => v !== props.value);
+    return;
+  }
+  modelValue.value = isChecked2;
+}
+function onInputChange(event) {
+  const isInputChecked = event.target.checked;
+  toggleChecked(isInputChecked);
+}
+</script>
+
+<template>
+  <label
+    class="pxd-checkbox inline-flex items-center group"
+    :class="{ 'is-disabled cursor-not-allowed text-gray-500': computedDisabled }"
+    :for="randomId"
+  >
+    <input
+      :id="randomId"
+      :value="value"
+      type="checkbox"
+      class="smallest peer"
+      :checked="isChecked"
+      :required="computedRequired"
+      :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">
+      <slot>
+        {{ label }}
+      </slot>
+    </span>
+  </label>
+</template>

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

@@ -0,0 +1,28 @@
+type ValueType = string | number | boolean;
+interface Props {
+    label?: string | number;
+    value?: ValueType;
+    disabled?: boolean;
+    required?: boolean;
+    modelValue?: ValueType | ValueType[];
+    indeterminate?: boolean;
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: ValueType | ValueType[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (args_0: ValueType | ValueType[]) => any;
+}>, {
+    value: ValueType;
+    modelValue: ValueType | ValueType[];
+}, {}, {}, {}, 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/checkbox-group/index.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { provide } from "vue";
+import { useModelValue } from "../../composables/useModelValue";
+import Checkbox from "../checkbox/index.vue";
+import Stack from "../stack/index.vue";
+defineOptions({
+  name: "PCheckboxGroup"
+});
+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: () => [] }
+});
+const emits = defineEmits(["update:modelValue"]);
+const modelValue = useModelValue(props, emits);
+provide("checkboxGroupProps", props);
+</script>
+
+<template>
+  <Stack class="pxd-checkbox-group">
+    <slot>
+      <Checkbox
+        v-for="option in options"
+        :key="option.value"
+        v-model="modelValue"
+        :label="option.label"
+        :value="option.value"
+        :disabled="option.disabled"
+      />
+    </slot>
+  </Stack>
+</template>