pxd 0.0.64 → 0.1.2

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

@@ -0,0 +1,152 @@
+import type { SearchInputProps } from './types';
+declare var __VLS_17: {}, __VLS_25: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_17) => any;
+} & {
+    suffix?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SearchInputProps, {
+    $: import("vue").ComponentInternalInstance;
+    $data: {};
+    $props: {
+        readonly size?: import("../../types/shared/props.js").ComponentSizeWithXs | undefined;
+        readonly error?: boolean | string | undefined;
+        readonly min?: number | string | undefined;
+        readonly max?: number | string | undefined;
+        readonly align?: "left" | "center" | "right" | undefined;
+        readonly readonly?: boolean | undefined;
+        readonly disabled?: boolean | undefined;
+        readonly password?: boolean | undefined;
+        readonly autofocus?: boolean | undefined;
+        readonly inputType?: string | undefined;
+        readonly inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        readonly minLength?: number | string | undefined;
+        readonly maxLength?: number | string | undefined;
+        readonly trimOverflow?: boolean | undefined;
+        readonly clearable?: boolean | undefined;
+        readonly clearValue?: any;
+        readonly modelValue?: any;
+        readonly placeholder?: string | undefined;
+        readonly prefixClass?: import("../../types/shared/props.js").ComponentClass | undefined;
+        readonly suffixClass?: import("../../types/shared/props.js").ComponentClass | undefined;
+        readonly selectOnFocus?: boolean | undefined;
+        readonly showWordLimit?: boolean | undefined;
+        readonly wordLimitPosition?: "inside" | "outside" | undefined;
+        readonly clearOnPressEscape?: boolean | undefined;
+        readonly defaultPrefixStyle?: boolean | undefined;
+        readonly defaultSuffixStyle?: boolean | undefined;
+        readonly onChange?: ((args_0: string, args_1: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+        readonly onClick?: ((args_0: MouseEvent) => any) | undefined;
+        readonly onBlur?: ((args_0: FocusEvent) => any) | undefined;
+        readonly onCompositionend?: ((args_0: CompositionEvent) => any) | undefined;
+        readonly onCompositionstart?: ((args_0: CompositionEvent) => any) | undefined;
+        readonly onCompositionupdate?: ((args_0: CompositionEvent) => any) | undefined;
+        readonly onFocus?: ((args_0: FocusEvent) => any) | undefined;
+        readonly onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    $attrs: import("vue").Attrs;
+    $refs: {
+        [x: string]: unknown;
+    };
+    $slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    $root: import("vue").ComponentPublicInstance | null;
+    $parent: import("vue").ComponentPublicInstance | null;
+    $host: Element | null;
+    $emit: ((event: "change", args_0: string, args_1: Event) => void) & ((event: "update:modelValue", args_0: string) => void) & ((event: "click", args_0: MouseEvent) => void) & ((event: "blur", args_0: FocusEvent) => void) & ((event: "compositionend", args_0: CompositionEvent) => void) & ((event: "compositionstart", args_0: CompositionEvent) => void) & ((event: "compositionupdate", args_0: CompositionEvent) => void) & ((event: "focus", args_0: FocusEvent) => void) & ((event: "keydown", args_0: KeyboardEvent) => void);
+    $el: any;
+    $options: import("vue").ComponentOptionsBase<Readonly<import("../input/types.js").InputProps> & Readonly<{
+        onChange?: ((args_0: string, args_1: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+        onClick?: ((args_0: MouseEvent) => 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;
+    }>, {
+        blur: () => void;
+        clear: (ev: Event) => void;
+        focus: () => void;
+        select: () => void;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (args_0: string, args_1: Event) => any;
+        "update:modelValue": (args_0: string) => any;
+        click: (args_0: MouseEvent) => 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;
+    }, string, {
+        align: "left" | "center" | "right";
+        trimOverflow: boolean;
+        wordLimitPosition: "inside" | "outside";
+        clearOnPressEscape: boolean;
+        defaultPrefixStyle: boolean;
+        defaultSuffixStyle: boolean;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+        beforeCreate?: (() => void) | (() => void)[];
+        created?: (() => void) | (() => void)[];
+        beforeMount?: (() => void) | (() => void)[];
+        mounted?: (() => void) | (() => void)[];
+        beforeUpdate?: (() => void) | (() => void)[];
+        updated?: (() => void) | (() => void)[];
+        activated?: (() => void) | (() => void)[];
+        deactivated?: (() => void) | (() => void)[];
+        beforeDestroy?: (() => void) | (() => void)[];
+        beforeUnmount?: (() => void) | (() => void)[];
+        destroyed?: (() => void) | (() => void)[];
+        unmounted?: (() => void) | (() => void)[];
+        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+    };
+    $forceUpdate: () => void;
+    $nextTick: typeof import("vue").nextTick;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+} & Readonly<{
+    align: "left" | "center" | "right";
+    trimOverflow: boolean;
+    wordLimitPosition: "inside" | "outside";
+    clearOnPressEscape: boolean;
+    defaultPrefixStyle: boolean;
+    defaultSuffixStyle: boolean;
+}> & Omit<Readonly<import("../input/types.js").InputProps> & Readonly<{
+    onChange?: ((args_0: string, args_1: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    onClick?: ((args_0: MouseEvent) => 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;
+}>, "select" | "clear" | "blur" | "focus" | ("align" | "trimOverflow" | "wordLimitPosition" | "clearOnPressEscape" | "defaultPrefixStyle" | "defaultSuffixStyle")> & {
+    blur: () => void;
+    clear: (ev: Event) => void;
+    focus: () => void;
+    select: () => void;
+} & {} & import("vue").ComponentCustomProperties & {} & {
+    $slots: {
+        prefix?: (props: {}) => any;
+    } & {
+        suffix?: (props: {}) => any;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<SearchInputProps> & Readonly<{
+    onSearch?: ((args_0: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/search-input/index.vue

@@ -0,0 +1,55 @@
+<script setup>
+import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
+import MagnifyingGlassIcon from "@gdsicon/vue/magnifying-glass";
+import { shallowRef } from "vue";
+import { useForwardRefExpose } from "../../composables/_internal/use-forward-ref-expose.js";
+import PInput from "../input/index.vue";
+defineOptions({
+	name: "PSearchInput",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({ loading: {
+	type: Boolean,
+	required: false
+} });
+const emits = defineEmits(["search"]);
+const inputRef = shallowRef();
+function onKeydown(event) {
+	if (event.key !== "Enter" || props.loading) {
+		return;
+	}
+	const value = event.target.value;
+	if (!value) {
+		return;
+	}
+	emits("search", value);
+}
+defineExpose(useForwardRefExpose(inputRef));
+</script>
+
+<template>
+  <PInput
+    data-search-input
+    ref="inputRef"
+    :default-prefix-style="false"
+    v-bind="$attrs"
+    @keydown="onKeydown"
+  >
+    <template #prefix>
+      <div class="pxd-search-input--prefix-icon ps-3">
+        <LoaderCircleIcon v-if="loading" class="size-4 motion-safe:animate-spin" />
+        <slot v-else name="prefix">
+          <MagnifyingGlassIcon class="size-4" />
+        </slot>
+      </div>
+    </template>
+
+    <template v-if="$slots.suffix" #suffix>
+      <slot name="suffix" />
+    </template>
+  </PInput>
+</template>

package/dist/components/search-input/types.d.ts

@@ -0,0 +1,7 @@
+export interface SearchInputProps {
+  loading?: boolean
+}
+
+export interface SearchInputEmits {
+  search: [string]
+}

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

@@ -0,0 +1,33 @@
+import type { SelectProps } from './types';
+declare var __VLS_16: {}, __VLS_18: {
+    label: string;
+}, __VLS_27: {
+    item: import("../list/types.js").ListOption;
+    index: number;
+    group: import("../list/types.js").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+} & {
+    item?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: import("../list/types.js").ListModelValue) => any;
+    "update:modelValue": (args_0: import("../list/types.js").ListModelValue) => any;
+}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
+    onChange?: ((args_0: import("../list/types.js").ListModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("../list/types.js").ListModelValue) => any) | undefined;
+}>, {
+    suffixIcon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/select/index.vue

@@ -0,0 +1,134 @@
+<script setup>
+import ChevronDownIcon from "@gdsicon/vue/chevron-down";
+import { computed } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useSelectedListItems } from "../../composables/_internal/use-selected-list-item.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import PButton from "../button/index.vue";
+import PMenu from "../menu/index.vue";
+defineOptions({
+	name: "PSelect",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	size: {
+		type: String,
+		required: false
+	},
+	shape: {
+		type: String,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false
+	},
+	virtual: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	multiple: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Array,
+			null
+		],
+		required: false
+	},
+	suffixIcon: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	placeholder: {
+		type: String,
+		required: false
+	},
+	labelFormat: {
+		type: Function,
+		required: false
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false
+	}
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const modelValue = useModelValue(props, emits);
+const selectedItems = useSelectedListItems(() => props.options || [], modelValue);
+const configProvider = useConfigProvider();
+const computedSize = computed(() => props.size || configProvider.size);
+const translatedLabel = computed(() => {
+	if (props.labelFormat) {
+		return props.labelFormat(selectedItems.value);
+	}
+	return selectedItems.value.map((item) => item.label).join(", ");
+});
+</script>
+
+<template>
+  <PMenu
+    data-select
+    v-model="modelValue"
+    class="pxd-select"
+    :options="options"
+    position="bottom"
+    :disabled="disabled"
+    :multiple="multiple"
+    :virtual="virtual"
+    v-bind="$attrs"
+    :close-on-press-escape="closeOnPressEscape"
+  >
+    <template #default="{ popoverVisible }">
+      <PButton
+        class="px-1.5 justify-between"
+        align="left"
+        full-width
+        :class="{ 'text-gray-600': !translatedLabel }"
+        :variant="variant"
+        :shape="shape"
+        :size="computedSize"
+        :disabled="disabled"
+      >
+        <template v-if="$slots.prefix" #prefix>
+          <slot name="prefix" />
+        </template>
+
+        <template v-if="translatedLabel">
+          <slot :label="translatedLabel">{{ translatedLabel }}</slot>
+        </template>
+        <template v-else>
+          {{ placeholder }}
+        </template>
+
+        <template v-if="suffixIcon" #suffix>
+          <ChevronDownIcon
+            class="text-sm me-1.5 text-foreground-secondary motion-safe:transition-transform"
+            :class="{ 'rotate-180': popoverVisible }"
+          />
+        </template>
+      </PButton>
+    </template>
+
+    <template v-if="$slots.item" #item="scope">
+      <slot name="item" v-bind="scope" />
+    </template>
+  </PMenu>
+</template>

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

@@ -0,0 +1,23 @@
+import type { ComponentSize, ComponentShape } from '../../types/shared'
+import type { ButtonVariant } from '../button/types'
+import type { ListModelValue, ListOption, ListOptions } from '../list/types'
+
+export interface SelectProps {
+  size?: ComponentSize
+  shape?: ComponentShape
+  variant?: ButtonVariant
+  options?: ListOptions
+  virtual?: boolean
+  disabled?: boolean
+  multiple?: boolean
+  modelValue?: ListModelValue
+  suffixIcon?: boolean
+  placeholder?: string
+  labelFormat?: (items: ListOptions) => string
+  closeOnPressEscape?: boolean
+}
+
+export interface SelectEmits {
+  change: [ListModelValue]
+  'update:modelValue': [ListModelValue]
+}

package/dist/components/separator/index.vue

@@ -1,18 +1,21 @@
 <script setup>
 defineOptions({
-  name: "PSeparator",
-  inheritAttrs: false
-});
-const props = defineProps({
-  direction: { type: String, required: false, default: "vertical" }
+	name: "PSeparator",
+	inheritAttrs: false
 });
+const props = defineProps({ direction: {
+	type: String,
+	required: false,
+	default: "vertical"
+} });
 </script>
 
 <template>
   <div
+    data-separator
     role="separator"
     :aria-orientation="direction"
-    class="pxd-separator aria-[orientation=vertical]:h-3 inline-block bg-gray-300 leading-inherit aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=vertical]:w-px"
+    class="pxd-separator aria-[orientation=vertical]:h-3 box-border inline-block shrink-0 border-0 border-gray-300 leading-inherit aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:border-t aria-[orientation=vertical]:border-l aria-[orientation=vertical]:border-gray-500"
     v-bind="$attrs"
   />
 </template>

package/dist/components/shimmer-text/index.d.vue.ts

@@ -0,0 +1,18 @@
+import type { ShimmerGradientStop, ShimmerTextProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ShimmerTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ShimmerTextProps> & Readonly<{}>, {
+    color: string | ShimmerGradientStop[];
+    disabled: boolean;
+    durations: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/shimmer-text/index.vue

@@ -0,0 +1,216 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({
+	name: "PShimmerText",
+	inheritAttrs: false
+});
+const props = defineProps({
+	text: {
+		type: String,
+		required: false
+	},
+	color: {
+		type: [String, Array],
+		required: false,
+		default: "var(--color-gray-100)"
+	},
+	variant: {
+		type: String,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	durations: {
+		type: Number,
+		required: false,
+		default: 1500
+	}
+});
+const shimmerPresets = {
+	sunrise: [
+		{
+			color: "#B6D3EF",
+			position: 0
+		},
+		{
+			color: "#CAD1D7",
+			position: .153
+		},
+		{
+			color: "#D7CFC8",
+			position: .252
+		},
+		{
+			color: "#E1CDB9",
+			position: .341
+		},
+		{
+			color: "#EAC6A5",
+			position: .424
+		},
+		{
+			color: "#EDB185",
+			position: .505
+		},
+		{
+			color: "#EF9B62",
+			position: .586
+		},
+		{
+			color: "#F18F60",
+			position: .669
+		},
+		{
+			color: "#F48D7A",
+			position: .758
+		},
+		{
+			color: "#F78A94",
+			position: .857
+		},
+		{
+			color: "#F888A0",
+			position: 1
+		}
+	],
+	bubble: [
+		{
+			color: "#F5EBD9",
+			position: 0
+		},
+		{
+			color: "#F2D4DB",
+			position: .31
+		},
+		{
+			color: "#EBBDDE",
+			position: .5
+		},
+		{
+			color: "#CCBAE3",
+			position: .65
+		},
+		{
+			color: "#8CBFF0",
+			position: .82
+		},
+		{
+			color: "#78B0FF",
+			position: 1
+		}
+	],
+	tonic: [
+		{
+			color: "#E3EDF0",
+			position: 0
+		},
+		{
+			color: "#E8EBB8",
+			position: .27
+		},
+		{
+			color: "#F0DEA3",
+			position: .43
+		},
+		{
+			color: "#E8B078",
+			position: .75
+		},
+		{
+			color: "#F29682",
+			position: 1
+		}
+	],
+	spring: [
+		{
+			color: "#F7D5C5",
+			position: .07
+		},
+		{
+			color: "#46A8C0",
+			position: .58
+		},
+		{
+			color: "#43AE7D",
+			position: 1
+		}
+	],
+	twilight: [
+		{
+			color: "#E3CCE6",
+			position: 0
+		},
+		{
+			color: "#4E8CD5",
+			position: .35
+		},
+		{
+			color: "#6068C2",
+			position: .64
+		},
+		{
+			color: "#38364E",
+			position: 1
+		}
+	]
+};
+const shimmerStyle = computed(() => {
+	let backgroundImage;
+	if (Array.isArray(props.color) && props.color.length > 0) {
+		backgroundImage = buildBandGradient(props.color);
+	} else if (props.variant && props.variant in shimmerPresets) {
+		backgroundImage = buildBandGradient(shimmerPresets[props.variant]);
+	} else {
+		backgroundImage = buildDefaultBandGradient(props.color);
+	}
+	return {
+		backgroundImage,
+		"--shimmer-total-duration": `${props.durations}ms`
+	};
+});
+function buildDefaultBandGradient(color = "var(--color-gray-100)") {
+	return buildBandGradient([{
+		color,
+		position: .5
+	}]);
+}
+function buildBandGradient(stops) {
+	const sorted = [...stops].sort((a, b) => a.position - b.position);
+	const first = sorted[0]?.color ?? "currentColor";
+	const last = sorted[sorted.length - 1]?.color ?? "currentColor";
+	const core = sorted.map((stop) => {
+		const factor = (stop.position - .5) * 2 * .55;
+		return `${stop.color} calc(50% + var(--shimmer-text-spread-mid) * ${factor.toFixed(4)})`;
+	}).join(", ");
+	return [
+		`linear-gradient(120deg`,
+		`currentColor calc(50% - var(--shimmer-text-spread))`,
+		`color-mix(in oklab, currentColor 20%, ${first}) calc(50% - var(--shimmer-text-spread-mid))`,
+		core,
+		`color-mix(in oklab, currentColor 20%, ${last}) calc(50% + var(--shimmer-text-spread-mid))`,
+		`currentColor calc(50% + var(--shimmer-text-spread)))`
+	].join(", ");
+}
+</script>
+
+<template>
+  <span
+    data-shimmer-text
+    class="pxd-shimmer-text inline-flex max-w-full bg-transparent bg-no-repeat motion-reduce:animate-none!"
+    :data-disabled="disabled"
+    :data-variant="variant"
+    :style="shimmerStyle"
+    v-bind="$attrs"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </span>
+</template>
+
+<style>
+.pxd-shimmer-text[data-disabled=false]{--shimmer-text-spread:1.5em;--shimmer-text-spread-mid:calc(var(--shimmer-text-spread)*0.68);-webkit-background-clip:text;background-clip:text;background-size:350% 100%;-webkit-text-fill-color:transparent;animation:pxd-animation-shimmer-sweep var(--shimmer-total-duration,2s) cubic-bezier(.3,0,.2,1) infinite}@keyframes pxd-animation-shimmer-sweep{0%{background-position:100%}to{animation-timing-function:step-start;background-position:0}}
+</style>

package/dist/components/shimmer-text/types.d.ts

@@ -0,0 +1,14 @@
+export type ShimmerTextVariant = 'sunrise' | 'bubble' | 'tonic' | 'spring' | 'twilight'
+
+export interface ShimmerGradientStop {
+  color: string
+  position: number
+}
+
+export interface ShimmerTextProps {
+  text?: string
+  color?: string | ShimmerGradientStop[]
+  variant?: ShimmerTextVariant
+  disabled?: boolean
+  durations?: number
+}