pxd 0.0.52 → 0.0.53

package/dist/components/dash-line/index.vue

@@ -20,7 +20,11 @@ const computedStyle = computed(() => ({
 </script>
 
 <template>
-  <div class="pxd-dash-line relative max-w-full min-w-full" :data-position="position" :style="computedStyle" />
+  <div
+    class="pxd-dash-line relative max-w-full min-w-full"
+    :data-position="position"
+    :style="computedStyle"
+  />
 </template>
 
 <style lang="postcss">
@@ -30,36 +34,38 @@ const computedStyle = computed(() => ({
   --s: var(--dash-line-size, 1px);
   --c: var(--dash-line-color, var(--color-gray-600));
 
-  &[data-position*="top"]::before,
-  &[data-position*="bottom"]::after,
-  &[data-position*="left"]::before,
-  &[data-position*="right"]::after {
+  &[data-position*='top']::before,
+  &[data-position*='bottom']::after,
+  &[data-position*='left']::before,
+  &[data-position*='right']::after {
     content: '';
     position: absolute;
     pointer-events: none;
-    background-image: repeating-linear-gradient(to var(--p),
-        var(--c) 0 var(--d),
-        transparent var(--d) calc(var(--d) + var(--g)));
+    background-image: repeating-linear-gradient(
+      to var(--p),
+      var(--c) 0 var(--d),
+      transparent var(--d) calc(var(--d) + var(--g))
+    );
   }
 
-  &[data-position*="top"]::before {
+  &[data-position*='top']::before {
     top: 0;
   }
 
-  &[data-position*="bottom"]::after {
+  &[data-position*='bottom']::after {
     bottom: 0;
   }
 
-  &[data-position*="left"]::before {
+  &[data-position*='left']::before {
     left: 0;
   }
 
-  &[data-position*="right"]::after {
+  &[data-position*='right']::after {
     right: 0;
   }
 
-  &[data-position*="top"]::before,
-  &[data-position*="bottom"]::after {
+  &[data-position*='top']::before,
+  &[data-position*='bottom']::after {
     --p: right;
     left: 0;
     right: 0;
@@ -67,8 +73,8 @@ const computedStyle = computed(() => ({
     height: var(--s);
   }
 
-  &[data-position*="left"]::before,
-  &[data-position*="right"]::after {
+  &[data-position*='left']::before,
+  &[data-position*='right']::after {
     --p: bottom;
     top: 0;
     bottom: 0;

package/dist/components/description/index.vue

@@ -13,12 +13,14 @@ defineProps({
 
 <template>
   <dl class="pxd-description">
-    <dt class="pxd-description--title gap-1 text-sm mb-2 min-h-3.5 flex items-center leading-none text-nowrap text-foreground-secondary capitalize">
+    <dt
+      class="pxd-description--title gap-1 text-sm mb-2 min-h-3.5 flex items-center leading-none text-nowrap text-foreground-secondary capitalize"
+    >
       <slot name="title">
         {{ title }}
       </slot>
 
-      <PTooltip v-if="tooltip" :content="tooltip" enterable>
+      <PTooltip v-if="tooltip" :content="tooltip">
         <InformationIcon class="text-base scale-125" />
       </PTooltip>
     </dt>

package/dist/components/drawer/index.vue

@@ -64,14 +64,17 @@ function onOverlayClick(ev) {
   }
   closeOverlayIfNeed();
 }
-watch(() => isVisible.value, (visible) => {
-  emits("visible-change", visible);
-  if (visible) {
-    emits("show");
-    return;
+watch(
+  () => isVisible.value,
+  (visible) => {
+    emits("visible-change", visible);
+    if (visible) {
+      emits("show");
+      return;
+    }
+    emits("hide");
   }
-  emits("hide");
-});
+);
 </script>
 
 <template>
@@ -95,11 +98,16 @@ watch(() => isVisible.value, (visible) => {
         :data-position="ensurePosition"
       >
         <header
-          class="pxd-drawer--header px-6 pt-4 sm:pt-6 relative shrink-0 empty:py-3"
-          :class="{ 'pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100': headerStylize }"
+          class="pxd-drawer--header px-6 pt-4 sm:pt-6 empty:py-3 relative shrink-0"
+          :class="{
+  'pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100': headerStylize
+}"
         >
           <slot name="header">
-            <h3 v-if="$slots.title || title" class="text-lg sm:text-xl font-semibold tracking-tight m-0">
+            <h3
+              v-if="$slots.title || title"
+              class="text-lg sm:text-xl font-semibold tracking-tight m-0"
+            >
               <slot name="title">
                 {{ title }}
               </slot>
@@ -114,7 +122,7 @@ watch(() => isVisible.value, (visible) => {
         </header>
 
         <div
-          class="pxd-drawer--content px-6 py-4 sm:py-6 h-full flex-1 overflow-auto empty:py-3"
+          class="pxd-drawer--content px-6 py-4 sm:py-6 empty:py-3 h-full flex-1 overflow-auto"
           :class="contentClass"
         >
           <slot />

package/dist/components/empty-state/index.vue

@@ -12,7 +12,9 @@ defineProps({
   <div class="pxd-empty-state py-12 px-18 w-full rounded-lg border bg-background-100">
     <div class="max-w-sm space-y-6 mx-auto flex flex-col">
       <template v-if="$slots.icon">
-        <div class="pxd-empty-state--icon p-3.5 size-15 mx-auto flex items-center justify-center rounded-md border text-foreground-secondary">
+        <div
+          class="pxd-empty-state--icon p-3.5 size-15 mx-auto flex items-center justify-center rounded-md border text-foreground-secondary"
+        >
           <slot name="icon" />
         </div>
       </template>

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

@@ -0,0 +1,22 @@
+export declare const errorVariant: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "pxd-error flex text-red-900", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "pxd-error flex text-red-900", unknown, unknown, undefined>>;

package/dist/components/error/cn.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+export const errorVariant = tv({
+  base: "pxd-error flex text-red-900",
+  variants: {
+    size: {
+      xs: "text-xs [--mt:2px]",
+      sm: "text-13px [--mt:2px]",
+      md: "text-sm [--mt:2px]",
+      lg: "text-base [--mt:4px]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

package/dist/components/error/index.vue

@@ -4,7 +4,7 @@ import StopIcon from "@gdsicon/vue/stop";
 import { computed } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { isExternalLink } from "../../utils/format";
-import { getFallbackValue } from "../../utils/get";
+import { errorVariant } from "./cn";
 defineOptions({
   name: "PError"
 });
@@ -13,31 +13,30 @@ const props = defineProps({
   label: { type: [String, Number, Array, null], required: false },
   error: { type: Object, required: false }
 });
-const SIZES = {
-  xs: "text-xs [--mt:2px]",
-  sm: "text-13px [--mt:2px]",
-  md: "text-sm [--mt:2px]",
-  lg: "text-base [--mt:4px]"
-};
-const config = useConfigProvider();
-const computedClass = computed(() => {
-  const classes = ["pxd-error flex text-red-900", getFallbackValue(props.size, SIZES, config.size)];
-  return classes.join(" ");
+const configProvider = useConfigProvider();
+const computedClasses = computed(() => {
+  return errorVariant({ size: props.size || configProvider.size });
 });
 </script>
 
 <template>
-  <div :class="computedClass">
+  <div :class="computedClasses">
     <StopIcon class="size-4 mr-2 mt-(--mt) shrink-0" />
 
     <div class="flex-1 shrink-0">
-      <b v-if="label || error?.label" class="font-medium whitespace-nowrap">{{ label || error?.label }}:</b>
+      <b v-if="label || error?.label" class="font-medium whitespace-nowrap"
+        >{{ label || error?.label }}:</b
+      >
 
       <slot>
         {{ error?.message }}
 
         <span v-if="error?.action && error?.link">
-          <a :href="error.link" class="font-medium gap-1 inline-flex items-center text-red-900 underline" :target="isExternalLink(error.link) ? '_blank' : '_self'">
+          <a
+            :href="error.link"
+            class="font-medium gap-1 inline-flex items-center text-red-900 underline"
+            :target="isExternalLink(error.link) ? '_blank' : '_self'"
+          >
             {{ error.action }}
 
             <ExternalIcon v-if="isExternalLink(error.link)" class="text-sm" />

package/dist/components/fader/index.vue

@@ -49,16 +49,20 @@ const onContainerScroll = throttleByRaf(() => {
   };
 });
 useResizeObserver(() => formattedContainer.value, onContainerScroll);
-watch(() => formattedContainer.value, (container, oldDom) => {
-  if (oldDom) {
-    cachedOff(oldDom, "scroll", onContainerScroll);
-    return;
-  }
-  if (!container) {
-    return;
-  }
-  cachedOn(container, "scroll", onContainerScroll);
-}, { immediate: true });
+watch(
+  () => formattedContainer.value,
+  (container, oldDom) => {
+    if (oldDom) {
+      cachedOff(oldDom, "scroll", onContainerScroll);
+      return;
+    }
+    if (!container) {
+      return;
+    }
+    cachedOn(container, "scroll", onContainerScroll);
+  },
+  { immediate: true }
+);
 onBeforeUnmount(() => {
   cachedOff(formattedContainer.value, "scroll", onContainerScroll);
 });
@@ -70,8 +74,16 @@ onBeforeUnmount(() => {
     class="pxd-fader inset-0 pointer-events-none absolute size-full rounded-inherit"
     :style="computedStyle"
   >
-    <div v-if="['both', 'horizontal'].includes(direction)" class="pxd-fader--item horizontal inset-0 absolute rounded-inherit" :class="{ left: fader.left, right: fader.right }" />
-    <div v-if="['both', 'vertical'].includes(direction)" class="pxd-fader--item vertical inset-0 absolute rounded-inherit" :class="{ top: fader.top, bottom: fader.bottom }" />
+    <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="{ 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="{ top: fader.top, bottom: fader.bottom }"
+    />
   </div>
 </template>
 
@@ -81,8 +93,12 @@ onBeforeUnmount(() => {
   position: absolute;
   border-radius: inherit;
   background: linear-gradient(var(--dir), transparent, var(--fader-color, var(--color-gray-100)));
-  mask-image: linear-gradient(var(--dir-revert), var(--fader-color, var(--color-gray-100)) 50%, transparent);
-  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
+  mask-image: linear-gradient(
+    var(--dir-revert),
+    var(--fader-color, var(--color-gray-100)) 50%,
+    transparent
+  );
+  transition-property: opacity;
   opacity: 0;
 }
 

package/dist/components/gauge/index.vue

@@ -33,8 +33,8 @@ const defaultColors = {
   30: "var(--color-amber-800)",
   60: "var(--color-green-700)"
 };
-const config = useConfigProvider();
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, config.size));
+const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const progress = computed(() => {
   if (props.indeterminate) {
     return 0;
@@ -99,9 +99,9 @@ const progressColors = computed(() => {
 </script>
 
 <template>
-  <div class="pxd-gauge relative size-max" :style="`--s: ${computedSize}px`">
+  <div class="pxd-gauge relative size-max" :style="`--gauge-size: ${computedSize}px`">
     <svg
-      class="pxd-gauge--svg block size-(--s) -rotate-[85deg] overflow-visible"
+      class="pxd-gauge--svg block size-(--gauge-size) -rotate-85 overflow-visible"
       aria-hidden="true"
       fill="none"
       viewBox="0 0 100 100"
@@ -138,7 +138,7 @@ const progressColors = computed(() => {
     <div
       v-if="indeterminate"
       class="pxd-gauge--indeterminate inset-0 font-medium absolute flex items-center justify-center text-center text-foreground-secondary"
-      style="font-size: clamp(10px, calc(var(--s, 48px) * 0.38), 50px)"
+      style="font-size: clamp(10px, calc(var(--gauge-size, 48px) * 0.38), 50px)"
     >
       <ChartActivityIcon />
     </div>
@@ -146,7 +146,7 @@ const progressColors = computed(() => {
     <div
       v-else-if="showValue && size !== 'xs'"
       class="pxd-gauge--value inset-0 font-medium absolute flex items-center justify-center text-center"
-      style="font-size: calc(var(--s, 48px) * 0.28)"
+      style="font-size: calc(var(--gauge-size, 48px) * 0.28)"
     >
       {{ progress }}
     </div>

package/dist/components/grid/index.vue

@@ -31,7 +31,9 @@ const formattedRows = computed(() => {
     (typeof rows === "object" ? rows.xs : rows) ?? 0,
     (acc, bp, value) => {
       acc[`--${bp}-rows`] = `repeat(${value}, minmax(0, 1fr))`;
-      debug && (acc[`--${bp}-rows-count`] = value || 1);
+      if (debug) {
+        acc[`--${bp}-rows-count`] = value || 1;
+      }
     }
   );
 });
@@ -42,15 +44,22 @@ const formattedCols = computed(() => {
     (typeof columns === "object" ? columns.xs : columns) ?? 1,
     (acc, bp, value) => {
       acc[`--${bp}-cols`] = `repeat(${value}, minmax(0, 1fr))`;
-      debug && (acc[`--${bp}-cols-count`] = value);
+      if (debug) {
+        acc[`--${bp}-cols-count`] = value || 1;
+      }
     }
   );
 });
-const computedClass = computed(() => {
+const computedClasses = computed(() => {
   return [
-    props.debug ? "debug" : "",
-    ...Object.keys(formattedRows.value).map((bp) => presetGridRows[bp]),
-    ...Object.keys(formattedCols.value).map((bp) => presetGridCols[bp])
+    "pxd-grid relative grid max-w-full",
+    ...Object.keys(formattedRows.value).map(
+      (bp) => presetGridRows[bp]
+    ),
+    ...Object.keys(formattedCols.value).map(
+      (bp) => presetGridCols[bp]
+    ),
+    props.debug ? "debug" : ""
   ].join(" ");
 });
 const computedStyle = computed(() => {
@@ -62,12 +71,7 @@ const computedStyle = computed(() => {
 </script>
 
 <template>
-  <div
-    class="pxd-grid relative grid max-w-full"
-    :class="computedClass"
-    :style="computedStyle"
-    v-bind="$attrs"
-  >
+  <div :class="computedClasses" :style="computedStyle" v-bind="$attrs">
     <slot />
   </div>
 </template>

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

@@ -38,15 +38,15 @@ const formattedCol = computed(() => {
     (acc, bp, value) => acc[`--${bp}-col`] = value
   );
 });
-const computedClass = computed(() => {
-  const classes = [];
+const computedClasses = computed(() => {
+  const classes = ["pxd-grid-item overflow-hidden"];
   classes.push(
     ...Object.keys(formattedRow.value).map((bp) => presetGridRow[bp]),
     ...Object.keys(formattedCol.value).map((bp) => presetGridCol[bp])
   );
   return classes.join(" ");
 });
-const computedStyle = computed(() => {
+const gridItemStyle = computed(() => {
   return {
     ...formattedRow.value,
     ...formattedCol.value
@@ -55,7 +55,7 @@ const computedStyle = computed(() => {
 </script>
 
 <template>
-  <div class="pxd-grid-item overflow-hidden" :class="computedClass" :style="computedStyle" v-bind="$attrs">
+  <div :class="computedClasses" :style="gridItemStyle" v-bind="$attrs">
     <slot />
   </div>
 </template>

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

@@ -17,19 +17,22 @@ const props = defineProps({
   shape: { type: String, required: false },
   align: { type: String, required: false },
   icon: { type: Boolean, required: false },
-  block: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  fullWidth: { type: Boolean, required: false }
 });
 const emits = defineEmits(["confirm", "canceled", "finished", "pointerup", "pointerdown"]);
 const status = shallowRef("idle");
 const computedAttrs = computed(() => {
   const { scalable, durations, maskColor, cancelable, ...rest } = props;
   return {
-    class: ["pxd-hold-button relative motion-safe:transition-all", {
-      scalable,
-      effective: status.value !== "canceled"
-    }],
+    class: [
+      "pxd-hold-button relative motion-safe:transition-all",
+      {
+        scalable,
+        effective: status.value !== "canceled"
+      }
+    ],
     ...rest
   };
 });
@@ -136,7 +139,7 @@ onBeforeUnmount(() => {
     <template #suffix>
       <slot name="suffix" />
       <div
-        class="pxd-hold-button--overlay pointer-events-none absolute -inset-px rounded-inherit bg-(--hold-button-mask-color)"
+        class="pxd-hold-button--overlay pointer-events-none absolute -inset-px rounded-inherit bg-(--hold-button-mask-color) default-transition-timing-function!"
         :class="{ finished: status === 'confirmed' }"
         :style="computedStyle"
         @transitionend="onTransitionEnd"
@@ -148,7 +151,7 @@ onBeforeUnmount(() => {
 <style lang="postcss">
 .pxd-hold-button {
   &.scalable:not(.is-disabled):active {
-    transform: scale(.97);
+    transform: scale(0.97);
   }
 
   &:hover {
@@ -158,20 +161,23 @@ onBeforeUnmount(() => {
   }
 
   .pxd-hold-button--overlay {
-    --opacity: .45;
+    --opacity: 0.45;
     opacity: var(--opacity);
     clip-path: inset(0 100% 0 0);
-    transition: clip-path .1s var(--default-transition-timing-function), opacity 0s linear;
+    transition:
+      clip-path 0.1s,
+      opacity 0s;
 
     &.finished {
-      --opacity: .68;
+      --opacity: 0.68;
     }
   }
 
   &.effective:not(.is-disabled):active .pxd-hold-button--overlay {
     clip-path: inset(0px);
-    transition: clip-path var(--hold-button-durations), opacity var(--default-transition-duration);
-    transition-timing-function: var(--default-transition-timing-function);
+    transition:
+      clip-path var(--hold-button-durations),
+      opacity var(--default-transition-duration);
   }
 }
 </style>

package/dist/components/input/cn.d.ts

@@ -0,0 +1,73 @@
+export declare const inputVariant: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    readonly: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-input pxd-input--border group relative flex w-full max-w-full items-center overflow-hidden bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    readonly: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    readonly: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-input pxd-input--border group relative flex w-full max-w-full items-center overflow-hidden bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all", unknown, unknown, undefined>>;

package/dist/components/input/cn.js

@@ -0,0 +1,36 @@
+import { tv } from "tailwind-variants";
+export const inputVariant = tv({
+  base: "pxd-input pxd-input--border group relative flex w-full max-w-full items-center overflow-hidden bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all",
+  variants: {
+    size: {
+      xs: "h-6 text-xs rounded-sm",
+      sm: "h-7.5 text-sm rounded-md",
+      md: "h-9 text-sm rounded-md",
+      lg: "h-10 text-base rounded-lg"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    },
+    disabled: {
+      true: "is-disabled",
+      false: ""
+    },
+    readonly: {
+      true: "is-readonly",
+      false: ""
+    },
+    error: {
+      true: "is-error",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "left",
+    disabled: false,
+    readonly: false,
+    error: false
+  }
+});