pxd 0.0.55 → 0.0.61

package/dist/components/error/index.vue

@@ -1,17 +1,32 @@
 <script setup>
 import ExternalIcon from "@gdsicon/vue/external";
 import StopIcon from "@gdsicon/vue/stop";
+import { tv } from "tailwind-variants";
 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";
 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

@@ -177,7 +177,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;

package/dist/components/input/index.vue

@@ -2,13 +2,13 @@
 import CrossIcon from "@gdsicon/vue/cross";
 import EyeIcon from "@gdsicon/vue/eye";
 import EyeOffIcon from "@gdsicon/vue/eye-off";
+import { tv } from "tailwind-variants";
 import { computed, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { NOOP } from "../../utils/event";
 import { isTruthyProp } from "../../utils/format";
 import { getUniqueId } from "../../utils/uid";
-import { inputVariant } from "./cn";
 defineOptions({
   name: "PInput",
   inheritAttrs: false,
@@ -18,7 +18,7 @@ defineOptions({
   }
 });
 const props = defineProps({
-  size: { type: null, required: false },
+  size: { type: String, required: false },
   error: { type: [Boolean, String], required: false },
   min: { type: [Number, String], required: false },
   max: { type: [Number, String], required: false },
@@ -26,23 +26,57 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   password: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
-  inputType: { type: null, required: false },
-  inputmode: { type: null, required: false },
+  inputType: { type: String, required: false },
+  inputmode: { type: String, required: false },
   minlength: { type: [Number, String], required: false },
   maxlength: { type: [Number, String], required: false },
   clearable: { type: Boolean, required: false },
-  clearValue: { type: null, required: false },
-  modelValue: { type: null, required: false },
+  clearValue: { type: [String, Number, null], required: false },
+  modelValue: { type: [String, Number, null], required: false },
   placeholder: { type: String, required: false },
-  prefixStyle: { type: Boolean, required: false, default: true },
-  suffixStyle: { type: Boolean, required: false, default: true },
-  prefixClass: { type: null, required: false },
-  suffixClass: { type: null, required: false },
-  selectOnFocus: { type: Boolean, required: false }
+  prefixClass: { type: [String, Array, Object], required: false },
+  suffixClass: { type: [String, Array, Object], required: false },
+  selectOnFocus: { type: Boolean, required: false },
+  defaultPrefixStyle: { type: Boolean, required: false, default: true },
+  defaultSuffixStyle: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["click", "input", "change", "focus", "blur", "keydown", "update:modelValue", "compositionstart", "compositionupdate", "compositionend"]);
+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
+  }
+});
 const uniqueId = getUniqueId();
 const inputRef = shallowRef();
 const configProvider = useConfigProvider();
@@ -150,7 +184,7 @@ defineExpose({
       v-if="$slots.prefix"
       class="pxd-input--prefix text-sm flex h-full items-center text-foreground-secondary"
       :class="[
-  { 'px-3 rounded-l-inherit border-r border-gray-300 bg-background-200': prefixStyle },
+  { 'px-3 rounded-l-inherit border-r border-gray-300 bg-background-200': defaultPrefixStyle },
   prefixClass
 ]"
       @pointerdown.prevent="NOOP"
@@ -161,7 +195,7 @@ defineExpose({
     <input
       :id="uniqueId"
       ref="inputRef"
-      class="px-3 py-0 file:font-medium size-full appearance-none rounded-inherit border-none bg-transparent [text-align:inherit] font-inherit outline-none select-auto file:border-0 file:bg-transparent placeholder:text-gray-600 placeholder:select-none read-only:cursor-default disabled:cursor-not-allowed disabled:text-gray-700 disabled:placeholder:text-gray-500"
+      class="px-3 py-0 file:font-medium size-full appearance-none rounded-none border-none bg-transparent [text-align:inherit] font-inherit outline-none select-auto file:border-0 file:bg-transparent placeholder:text-gray-600 placeholder:select-none read-only:cursor-default disabled:cursor-not-allowed disabled:text-gray-700 disabled:placeholder:text-gray-500"
       autocorrect="off"
       autocomplete="off"
       autocapitalize="off"
@@ -171,7 +205,6 @@ defineExpose({
       :value="modelValue"
       :readonly="readonly"
       :disabled="disabled"
-      :required="required"
       :inputmode="inputmode"
       :minlength="minlength"
       :maxlength="maxlength"
@@ -192,12 +225,12 @@ defineExpose({
       v-if="password || clearable"
       v-show="modelValue"
       :class="{ 'pr-2': password && clearable }"
-      class="pxd-input--icon top-0 right-0 gap-1 flex aspect-square h-full cursor-pointer items-center justify-center rounded-r-inherit text-foreground-secondary"
+      class="pxd-input--icon top-0 right-0 gap-1 flex aspect-square h-full items-center justify-center rounded-r-inherit text-foreground-secondary"
       @pointerdown.prevent="NOOP"
     >
       <button
         v-if="password"
-        class="p-1 appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
+        class="p-1 cursor-pointer appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
         @click.stop.prevent="toggleType"
       >
         <EyeOffIcon v-if="isPasswordVisible" class="size-3 pointer-events-none" />
@@ -205,7 +238,7 @@ defineExpose({
       </button>
       <button
         v-if="clearable"
-        class="p-1 appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
+        class="p-1 cursor-pointer appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
         @click.stop.prevent="clear"
       >
         <CrossIcon class="size-3 pointer-events-none" />
@@ -216,7 +249,7 @@ defineExpose({
       v-if="$slots.suffix"
       class="pxd-input--suffix text-sm flex h-full items-center text-foreground-secondary"
       :class="[
-  { 'px-3 rounded-r-inherit border-l border-gray-300 bg-background-200': suffixStyle },
+  { 'px-3 rounded-r-inherit border-l border-gray-300 bg-background-200': defaultSuffixStyle },
   suffixClass
 ]"
       @pointerdown.prevent="NOOP"
@@ -227,5 +260,5 @@ defineExpose({
 </template>
 
 <style>
-.pxd-input:has(.pxd-input--prefix) input{border-bottom-left-radius:0;border-top-left-radius:0}.pxd-input:has(.pxd-input--suffix) input{border-bottom-right-radius:0;border-top-right-radius:0}
+input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{--autofill-delay:calc(infinity*1s);-webkit-transition:background-color var(--autofill-delay) ease-in-out 0s,color var(--autofill-delay) ease-in-out 0s;transition:background-color var(--autofill-delay) ease-in-out 0s,color var(--autofill-delay) ease-in-out 0s}
 </style>