pxd 0.0.55 → 0.0.60

package/dist/components/error/index.vue

@@ -2,16 +2,31 @@
 import ExternalIcon from "@gdsicon/vue/external";
 import StopIcon from "@gdsicon/vue/stop";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { isExternalLink } from "../../utils/format";
-import { errorVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
-  name: "PError"
+  name: "PError",
+  inheritAttrs: false
 });
 const props = defineProps({
-  size: { type: String, required: false, default: "md" },
+  size: { type: String, required: false },
   label: { type: [String, Number, Array, null], required: false },
-  error: { type: null, required: false }
+  error: { type: Object, required: false }
+});
+const errorVariant = tv({
+  base: "pxd-error flex text-red-900",
+  variants: {
+    size: {
+      xs: "text-xs [--mt:0.125rem]",
+      sm: "text-13px [--mt:0.125rem]",
+      md: "text-sm [--mt:0.125rem]",
+      lg: "text-base [--mt:0.25rem]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
 });
 const configProvider = useConfigProvider();
 const computedClasses = computed(() => {
@@ -20,7 +35,7 @@ const computedClasses = computed(() => {
 </script>
 
 <template>
-  <div :class="computedClasses">
+  <div :class="computedClasses" v-bind="$attrs">
     <StopIcon class="size-4 mr-2 mt-(--mt) shrink-0" />
 
     <div class="flex-1 shrink-0">

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

@@ -1,6 +1,12 @@
-import type { ErrorType } from '../../types/components/error'
 import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared'
 
+export interface ErrorType {
+  link?: string
+  label?: string
+  action?: string
+  message: string
+}
+
 export interface ErrorProps {
   size?: ComponentSizeWithXs
   label?: ComponentLabel

package/dist/components/fader/index.vue

@@ -6,12 +6,13 @@ import { getCssUnitValue } from "../../utils/format";
 import { unrefElement } from "../../utils/ref";
 import { throttleByRaf } from "../../utils/throttle";
 defineOptions({
-  name: "PFader"
+  name: "PFader",
+  inheritAttrs: false
 });
 const props = defineProps({
   size: { type: Number, required: false },
   color: { type: String, required: false },
-  container: { type: null, required: false },
+  container: { type: [String, Object], required: false },
   direction: { type: String, required: false, default: "both" }
 });
 const fader = shallowRef({
@@ -21,7 +22,7 @@ const fader = shallowRef({
   bottom: false
 });
 const DEFAULT_SIZE = 16;
-const DIFF_THRESHOLD = 1;
+const DIFF_THRESHOLD = 16;
 const computedStyle = computed(() => ({
   "--fader-color": props.color,
   "--fader-size": getCssUnitValue(props.size)
@@ -36,7 +37,7 @@ const formattedContainer = computed(() => {
 });
 const onContainerScroll = throttleByRaf(() => {
   const container = formattedContainer.value;
-  if (!container) {
+  if (!container || !container.isConnected) {
     return;
   }
   const { size = DEFAULT_SIZE } = props;
@@ -59,7 +60,7 @@ watch(
     if (!container) {
       return;
     }
-    cachedOn(container, "scroll", onContainerScroll);
+    cachedOn(container, "scroll", onContainerScroll, { passive: true });
   },
   { immediate: true }
 );
@@ -73,22 +74,24 @@ onBeforeUnmount(() => {
     aria-hidden="true"
     class="pxd-fader inset-0 pointer-events-none absolute size-full rounded-inherit"
     :style="computedStyle"
+    v-bind="$attrs"
   >
     <div
       v-if="['both', 'horizontal'].includes(direction)"
-      class="pxd-fader--item horizontal inset-0 absolute rounded-inherit before:default-transition-duration before:default-transition-timing-function"
+      class="pxd-fader--item horizontal inset-0 absolute rounded-inherit before:default-transition-duration before:default-transition-timing-function after:default-transition-duration after:default-transition-timing-function"
       :class="{ left: fader.left, right: fader.right }"
     />
     <div
       v-if="['both', 'vertical'].includes(direction)"
-      class="pxd-fader--item vertical inset-0 absolute rounded-inherit before:default-transition-duration before:default-transition-timing-function"
+      class="pxd-fader--item vertical inset-0 absolute rounded-inherit before:default-transition-duration before:default-transition-timing-function after:default-transition-duration after:default-transition-timing-function"
       :class="{ top: fader.top, bottom: fader.bottom }"
     />
   </div>
 </template>
 
 <style lang="postcss">
-.pxd-fader--item::before {
+.pxd-fader--item::before,
+.pxd-fader--item::after {
   content: '';
   position: absolute;
   border-radius: inherit;
@@ -103,12 +106,15 @@ onBeforeUnmount(() => {
 }
 
 .pxd-fader--item.left::before,
-.pxd-fader--item.top::before {
+.pxd-fader--item.top::before,
+.pxd-fader--item.right::after,
+.pxd-fader--item.bottom::after {
   opacity: 1;
 }
 
 .pxd-fader--item.horizontal {
-  &::before {
+  &::before,
+  &::after {
     top: 0;
     width: var(--fader-size, 16px);
     height: 100%;
@@ -119,10 +125,17 @@ onBeforeUnmount(() => {
     --dir: to left;
     --dir-revert: to right;
   }
+
+  &::after {
+    right: 0;
+    --dir: to right;
+    --dir-revert: to left;
+  }
 }
 
 .pxd-fader--item.vertical {
-  &::before {
+  &::before,
+  &::after {
     left: 0;
     width: 100%;
     height: var(--fader-size, 16px);
@@ -133,5 +146,11 @@ onBeforeUnmount(() => {
     --dir: to top;
     --dir-revert: to bottom;
   }
+
+  &::after {
+    bottom: 0;
+    --dir: to bottom;
+    --dir-revert: to top;
+  }
 }
 </style>

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

@@ -1,8 +1,8 @@
-import type { ComponentDirection } from '../../types/shared/props'
+import type { ComponentDirection } from '../../types/shared'
 
 export interface FaderProps {
   size?: number
   color?: string
-  container?: string | HTMLElement
+  container?: string | object
   direction?: ComponentDirection | 'both'
 }

package/dist/components/gauge/index.vue

@@ -1,10 +1,11 @@
 <script setup>
 import ChartActivityIcon from "@gdsicon/vue/chart-activity";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getColorByThreshold, getFallbackValue } from "../../utils/get";
 defineOptions({
   name: "PGauge",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -99,7 +100,11 @@ const progressColors = computed(() => {
 </script>
 
 <template>
-  <div class="pxd-gauge relative size-max" :style="`--gauge-size: ${computedSize}px`">
+  <div
+    class="pxd-gauge relative size-max"
+    :style="`--gauge-size: ${computedSize}px`"
+    v-bind="$attrs"
+  >
     <svg
       class="pxd-gauge--svg block size-(--gauge-size) -rotate-85 overflow-visible"
       aria-hidden="true"

package/dist/components/grid/index.vue

@@ -52,7 +52,6 @@ const formattedCols = computed(() => {
 });
 const computedClasses = computed(() => {
   return [
-    "pxd-grid relative grid max-w-full",
     ...Object.keys(formattedRows.value).map(
       (bp) => presetGridRows[bp]
     ),
@@ -71,11 +70,17 @@ const computedStyle = computed(() => {
 </script>
 
 <template>
-  <div :class="computedClasses" :style="computedStyle" v-bind="$attrs">
-    <slot />
+  <div class="pxd-grid relative w-full max-w-full" v-bind="$attrs">
+    <section
+      class="pxd-grid-section [container-type:inline-size] grid h-full max-h-inherit min-h-inherit w-full max-w-inherit min-w-inherit"
+      :class="computedClasses"
+      :style="computedStyle"
+    >
+      <slot />
+    </section>
   </div>
 </template>
 
 <style>
-.pxd-grid.debug{--grid-line-color:var(--color-amber-400);background-image:linear-gradient(to right,var(--grid-line-color) 0 1px,transparent 1px 100%),linear-gradient(to bottom,var(--grid-line-color) 0 1px,transparent 1px 100%),linear-gradient(to right,transparent calc(100% - 1px),var(--grid-line-color) 0),linear-gradient(to bottom,transparent calc(100% - 1px),var(--grid-line-color) 0);background-origin:padding-box;background-repeat:repeat,repeat,no-repeat,no-repeat;background-size:calc(100%/var(--cols-count)) 100%,100% calc(100%/var(--rows-count)),100% 100%,100% 100%}
+.pxd-grid-section.debug{--grid-line-color:var(--color-amber-400);background-image:linear-gradient(to right,var(--grid-line-color) 0 1px,transparent 1px 100%),linear-gradient(to bottom,var(--grid-line-color) 0 1px,transparent 1px 100%),linear-gradient(to right,transparent calc(100% - 1px),var(--grid-line-color) 0),linear-gradient(to bottom,transparent calc(100% - 1px),var(--grid-line-color) 0);background-origin:padding-box;background-repeat:repeat,repeat,no-repeat,no-repeat;background-size:calc(100%/var(--cols-count)) 100%,100% calc(100%/var(--rows-count)),100% 100%,100% 100%}
 </style>

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

@@ -5,8 +5,3 @@ export interface GridProps {
   rows?: ResponsiveValue<string | number>
   columns?: ResponsiveValue<string | number>
 }
-
-export interface GridItemProps {
-  row?: ResponsiveValue<string | number>
-  column?: ResponsiveValue<string | number>
-}

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

@@ -1,4 +1,4 @@
-import type { GridItemProps } from '../grid/types';
+import type { GridItemProps } from './types';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/components/grid-item/index.vue

@@ -2,7 +2,8 @@
 import { computed } from "vue";
 import { getResponsiveValue } from "../../utils/responsive";
 defineOptions({
-  name: "PGridItem"
+  name: "PGridItem",
+  inheritAttrs: false
 });
 const props = defineProps({
   row: { type: [String, Number, Object], required: false },
@@ -27,7 +28,9 @@ const formattedRow = computed(() => {
   return getResponsiveValue(
     row,
     (typeof row === "object" ? row.xs : row) ?? "auto",
-    (acc, bp, value) => acc[`--${bp}-row`] = value
+    (acc, bp, value) => {
+      acc[`--${bp}-row`] = value;
+    }
   );
 });
 const formattedCol = computed(() => {
@@ -35,16 +38,16 @@ const formattedCol = computed(() => {
   return getResponsiveValue(
     column,
     (typeof column === "object" ? column.xs : column) ?? "auto",
-    (acc, bp, value) => acc[`--${bp}-col`] = value
+    (acc, bp, value) => {
+      acc[`--${bp}-col`] = value;
+    }
   );
 });
 const computedClasses = computed(() => {
-  const classes = ["pxd-grid-item overflow-hidden"];
-  classes.push(
+  return [
     ...Object.keys(formattedRow.value).map((bp) => presetGridRow[bp]),
     ...Object.keys(formattedCol.value).map((bp) => presetGridCol[bp])
-  );
-  return classes.join(" ");
+  ].join(" ");
 });
 const gridItemStyle = computed(() => {
   return {
@@ -55,7 +58,12 @@ const gridItemStyle = computed(() => {
 </script>
 
 <template>
-  <div :class="computedClasses" :style="gridItemStyle" v-bind="$attrs">
+  <div
+    class="pxd-grid-item overflow-hidden"
+    :class="computedClasses"
+    :style="gridItemStyle"
+    v-bind="$attrs"
+  >
     <slot />
   </div>
 </template>

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

@@ -0,0 +1,6 @@
+import type { ResponsiveValue } from '../../types/shared'
+
+export interface GridItemProps {
+  row?: ResponsiveValue<string | number>
+  column?: ResponsiveValue<string | number>
+}

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

@@ -10,15 +10,15 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<HoldButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pointerdown: (args_0: PointerEvent) => any;
     pointerup: (args_0: PointerEvent) => any;
+    finished: (args_0: boolean) => any;
     confirm: () => any;
     canceled: () => any;
-    finished: (args_0: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<HoldButtonProps> & Readonly<{
     onPointerdown?: ((args_0: PointerEvent) => any) | undefined;
     onPointerup?: ((args_0: PointerEvent) => any) | undefined;
+    onFinished?: ((args_0: boolean) => any) | undefined;
     onConfirm?: (() => any) | undefined;
     onCanceled?: (() => any) | undefined;
-    onFinished?: ((args_0: boolean) => any) | undefined;
 }>, {
     durations: number | string;
     vibrate: boolean;

package/dist/components/hold-button/index.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { computed, onBeforeUnmount, shallowRef } from "vue";
+import { computed, onBeforeUnmount, shallowRef, useAttrs } from "vue";
 import { getStyle } from "../../utils/dom";
 import { off, once } from "../../utils/event";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PHoldButton"
+  name: "PHoldButton",
+  inheritAttrs: false
 });
 const props = defineProps({
   vibrate: { type: Boolean, required: false, default: true },
@@ -22,6 +23,7 @@ const props = defineProps({
   fullWidth: { type: Boolean, required: false }
 });
 const emits = defineEmits(["confirm", "canceled", "finished", "pointerup", "pointerdown"]);
+const attrs = useAttrs();
 const status = shallowRef("idle");
 const computedAttrs = computed(() => {
   const { scalable, durations, maskColor, cancelable, ...rest } = props;
@@ -33,7 +35,8 @@ const computedAttrs = computed(() => {
         effective: status.value !== "canceled"
       }
     ],
-    ...rest
+    ...rest,
+    ...attrs
   };
 });
 const computedStyle = computed(() => {
@@ -177,7 +180,7 @@ onBeforeUnmount(() => {
     clip-path: inset(0px);
     transition:
       clip-path var(--hold-button-durations),
-      opacity var(--default-transition-duration);
+      opacity 0.1s;
   }
 }
 </style>

package/dist/components/index.d.ts

@@ -7,12 +7,12 @@ export { default as Book } from './book/index.vue';
 export { default as Browser } from './browser/index.vue';
 export { default as Button } from './button/index.vue';
 export { default as Carousel } from './carousel/index.vue';
-export { default as CarouselGroup } from './carousel-group/index.vue';
+export { default as CarouselItem } from './carousel-item/index.vue';
 export { default as Checkbox } from './checkbox/index.vue';
 export { default as CheckboxGroup } from './checkbox-group/index.vue';
 export { default as Chip } from './chip/index.vue';
 export { default as Choicebox } from './choicebox/index.vue';
-export { default as ChoiceboxGroup } from './choicebox-group/index.vue';
+export { default as ChoiceboxItem } from './choicebox-item/index.vue';
 export { default as Collapse } from './collapse/index.vue';
 export { default as CollapseGroup } from './collapse-group/index.vue';
 export { default as CommandMenu } from './command-menu/index.vue';
@@ -22,6 +22,7 @@ export { default as Countdown } from './countdown/index.vue';
 export { default as DashLine } from './dash-line/index.vue';
 export { default as Description } from './description/index.vue';
 export { default as Drawer } from './drawer/index.vue';
+export { default as EllipsisText } from './ellipsis-text/index.vue';
 export { default as EmptyState } from './empty-state/index.vue';
 export { default as Error } from './error/index.vue';
 export { default as Fader } from './fader/index.vue';
@@ -53,6 +54,7 @@ export { default as PinInput } from './pin-input/index.vue';
 export { default as Placeholder } from './placeholder/index.vue';
 export { default as Popover } from './popover/index.vue';
 export { default as Progress } from './progress/index.vue';
+export { default as ProjectBanner } from './project-banner/index.vue';
 export { default as Radio } from './radio/index.vue';
 export { default as RadioGroup } from './radio-group/index.vue';
 export { default as Resizable } from './resizable/index.vue';
@@ -66,12 +68,14 @@ export { default as Spinner } from './spinner/index.vue';
 export { default as Stack } from './stack/index.vue';
 export { default as StatusDot } from './status-dot/index.vue';
 export { default as Switch } from './switch/index.vue';
-export { default as SwitchGroup } from './switch-group/index.vue';
+export { default as SwitchItem } from './switch-item/index.vue';
 export { default as Teleport } from './teleport/index.vue';
 export { default as Text } from './text/index.vue';
 export { default as Textarea } from './textarea/index.vue';
 export { default as ThemeSwitcher } from './theme-switcher/index.vue';
 export { default as TimePicker } from './time-picker/index.vue';
 export { default as Toggle } from './toggle/index.vue';
+export { default as ToggleButton } from './toggle-button/index.vue';
+export { default as ToggleButtonGroup } from './toggle-button-group/index.vue';
 export { default as Tooltip } from './tooltip/index.vue';
 export { default as VirtualList } from './virtual-list/index.vue';

package/dist/components/index.js

@@ -7,12 +7,12 @@ export { default as Book } from "./book/index.vue";
 export { default as Browser } from "./browser/index.vue";
 export { default as Button } from "./button/index.vue";
 export { default as Carousel } from "./carousel/index.vue";
-export { default as CarouselGroup } from "./carousel-group/index.vue";
+export { default as CarouselItem } from "./carousel-item/index.vue";
 export { default as Checkbox } from "./checkbox/index.vue";
 export { default as CheckboxGroup } from "./checkbox-group/index.vue";
 export { default as Chip } from "./chip/index.vue";
 export { default as Choicebox } from "./choicebox/index.vue";
-export { default as ChoiceboxGroup } from "./choicebox-group/index.vue";
+export { default as ChoiceboxItem } from "./choicebox-item/index.vue";
 export { default as Collapse } from "./collapse/index.vue";
 export { default as CollapseGroup } from "./collapse-group/index.vue";
 export { default as CommandMenu } from "./command-menu/index.vue";
@@ -22,6 +22,7 @@ export { default as Countdown } from "./countdown/index.vue";
 export { default as DashLine } from "./dash-line/index.vue";
 export { default as Description } from "./description/index.vue";
 export { default as Drawer } from "./drawer/index.vue";
+export { default as EllipsisText } from "./ellipsis-text/index.vue";
 export { default as EmptyState } from "./empty-state/index.vue";
 export { default as Error } from "./error/index.vue";
 export { default as Fader } from "./fader/index.vue";
@@ -53,6 +54,7 @@ export { default as PinInput } from "./pin-input/index.vue";
 export { default as Placeholder } from "./placeholder/index.vue";
 export { default as Popover } from "./popover/index.vue";
 export { default as Progress } from "./progress/index.vue";
+export { default as ProjectBanner } from "./project-banner/index.vue";
 export { default as Radio } from "./radio/index.vue";
 export { default as RadioGroup } from "./radio-group/index.vue";
 export { default as Resizable } from "./resizable/index.vue";
@@ -66,12 +68,14 @@ export { default as Spinner } from "./spinner/index.vue";
 export { default as Stack } from "./stack/index.vue";
 export { default as StatusDot } from "./status-dot/index.vue";
 export { default as Switch } from "./switch/index.vue";
-export { default as SwitchGroup } from "./switch-group/index.vue";
+export { default as SwitchItem } from "./switch-item/index.vue";
 export { default as Teleport } from "./teleport/index.vue";
 export { default as Text } from "./text/index.vue";
 export { default as Textarea } from "./textarea/index.vue";
 export { default as ThemeSwitcher } from "./theme-switcher/index.vue";
 export { default as TimePicker } from "./time-picker/index.vue";
 export { default as Toggle } from "./toggle/index.vue";
+export { default as ToggleButton } from "./toggle-button/index.vue";
+export { default as ToggleButtonGroup } from "./toggle-button-group/index.vue";
 export { default as Tooltip } from "./tooltip/index.vue";
 export { default as VirtualList } from "./virtual-list/index.vue";

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

@@ -17,29 +17,29 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     input: (args_0: string) => any;
     click: (args_0: MouseEvent) => any;
-    blur: (args_0: FocusEvent) => any;
     change: (args_0: string, args_1: Event) => any;
+    "update:modelValue": (args_0: string) => any;
+    keydown: (args_0: KeyboardEvent) => any;
+    blur: (args_0: FocusEvent) => any;
     compositionend: (args_0: CompositionEvent) => any;
     compositionstart: (args_0: CompositionEvent) => any;
     compositionupdate: (args_0: CompositionEvent) => any;
     focus: (args_0: FocusEvent) => any;
-    keydown: (args_0: KeyboardEvent) => any;
-    "update:modelValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
     onInput?: ((args_0: string) => any) | undefined;
     onClick?: ((args_0: MouseEvent) => any) | undefined;
-    onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onChange?: ((args_0: string, args_1: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onCompositionend?: ((args_0: CompositionEvent) => any) | undefined;
     onCompositionstart?: ((args_0: CompositionEvent) => any) | undefined;
     onCompositionupdate?: ((args_0: CompositionEvent) => any) | undefined;
     onFocus?: ((args_0: FocusEvent) => any) | undefined;
-    onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
     align: "left" | "center" | "right";
-    prefixStyle: boolean;
-    suffixStyle: boolean;
+    defaultPrefixStyle: boolean;
+    defaultSuffixStyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;