pxd 0.0.64 → 0.1.3

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
+}

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

@@ -4,9 +4,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
+    shape: import("../../types/shared/props.js").ComponentShape;
     height: string | number;
     loading: boolean;
-    shape: import("../../types/shared").ComponentShape;
     animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/skeleton/index.vue

@@ -1,68 +1,76 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { getCssUnitValue, increaseWithUnit } from "../../utils/format";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { getCssUnitValue, increaseWithUnit } from "../../utils/format.js";
 defineOptions({
-  name: "PSkeleton",
-  inheritAttrs: false
+	name: "PSkeleton",
+	inheritAttrs: false
 });
 const props = defineProps({
-  loading: { type: Boolean, required: false, default: true },
-  animated: { type: Boolean, required: false, default: true },
-  width: { type: [String, Number], required: false },
-  height: { type: [String, Number], required: false, default: 24 },
-  boxHeight: { type: [String, Number], required: false },
-  shape: { type: String, required: false, default: "default" }
-});
-const skeletonVariant = tv({
-  base: "pxd-skeleton relative block shrink-0 overflow-hidden",
-  variants: {
-    loading: {
-      true: "loading invisible content-visibility-auto intrinsic-size-auto",
-      false: ""
-    },
-    shape: {
-      default: "rounded-md",
-      square: "rounded-none",
-      rounded: "rounded-full"
-    },
-    animated: {
-      true: "animated after:default-animation-timing-function!",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    loading: true,
-    shape: "default",
-    animated: true
-  }
+	loading: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	animated: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	width: {
+		type: [String, Number],
+		required: false
+	},
+	height: {
+		type: [String, Number],
+		required: false,
+		default: 24
+	},
+	boxHeight: {
+		type: [String, Number],
+		required: false
+	},
+	shape: {
+		type: String,
+		required: false,
+		default: "default"
+	}
 });
 const computedStyle = computed(() => {
-  const { width, height, boxHeight } = props;
-  const styles = {
-    width: getCssUnitValue(width),
-    height: getCssUnitValue(height)
-  };
-  if (boxHeight) {
-    styles["margin-bottom"] = getCssUnitValue(increaseWithUnit(boxHeight, -Number(height)));
-  }
-  return styles;
-});
-const computedClasses = computed(() => {
-  return skeletonVariant({
-    shape: props.shape,
-    loading: props.loading,
-    animated: props.animated
-  });
+	const { width, height, boxHeight } = props;
+	const styles = {
+		width: getCssUnitValue(width),
+		height: getCssUnitValue(height)
+	};
+	if (boxHeight) {
+		styles["margin-bottom"] = getCssUnitValue(increaseWithUnit(boxHeight, -Number(height)));
+	}
+	return styles;
 });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-skeleton relative block shrink-0 overflow-hidden",
+	variants: {
+		loading: { true: "loading invisible content-visibility-auto intrinsic-size-auto" },
+		shape: {
+			default: "rounded-md",
+			square: "rounded-none",
+			rounded: "rounded-full"
+		},
+		animated: { true: "animated after:default-animation-timing-function!" }
+	}
+}, { selection: () => ({
+	shape: props.shape,
+	loading: props.loading,
+	animated: props.animated
+}) });
 </script>
 
 <template>
-  <div :class="computedClasses" :style="computedStyle" v-bind="$attrs">
+  <div data-skeleton :class="classes" :style="computedStyle" v-bind="attrs">
     <slot />
   </div>
 </template>
 
 <style>
-.pxd-skeleton.loading:after{background:linear-gradient(90deg,var(--color-gray-100),var(--color-gray-200),var(--color-gray-100)) 0 0 /50% 100%;content:"";inset:0 -200% 0 0;position:absolute;visibility:visible}.pxd-skeleton.animated:after{animation:skeleton-loading 1.5s infinite reverse}@keyframes skeleton-loading{to{transform:translate3d(-50%,0,0)}}
+.pxd-skeleton.loading:after{background:linear-gradient(90deg,var(--color-gray-100),var(--color-gray-200),var(--color-gray-100)) 0 0 /50% 100%;content:"";inset:0 -200% 0 0;position:absolute;visibility:visible}.pxd-skeleton.animated:after{animation:pxd-animation-skeleton-loading 1.5s infinite reverse}@keyframes pxd-animation-skeleton-loading{to{transform:translate3d(-50%,0,0)}}
 </style>

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

@@ -1,4 +1,4 @@
-import type { ComponentShape } from '../../types/shared'
+import type { ComponentShape } from '../../types/shared/props'
 
 export interface SkeletonProps {
   loading?: boolean

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

@@ -6,11 +6,11 @@ declare const __VLS_export: import("vue").DefineComponent<SliderProps, {}, {}, {
     onChange?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<number | number[] | null | undefined>) => any) | undefined;
 }>, {
+    variant: "secondary" | import("../../types/shared/props.js").ComponentVariant;
     modelValue: number | number[] | null;
     max: number;
-    variant: import("../../types/shared").ComponentVariant | "secondary";
+    step: number | number[];
     min: number;
-    step: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;