pxd 0.0.64 → 0.1.2

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

@@ -1,64 +1,69 @@
 <script setup>
 import { computed } from "vue";
-import { getResponsiveValue } from "../../utils/get";
+import { getResponsiveValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PGridItem",
-  inheritAttrs: false
+	name: "PGridItem",
+	inheritAttrs: false
 });
 const props = defineProps({
-  row: { type: [String, Number, Object], required: false },
-  column: { type: [String, Number, Object], required: false }
+	row: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	},
+	column: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	}
 });
 const presetGridRow = {
-  "--xs-row": "row-(--xs-row)",
-  "--sm-row": "sm:row-(--sm-row)",
-  "--md-row": "md:row-(--md-row)",
-  "--lg-row": "lg:row-(--lg-row)",
-  "--xl-row": "xl:row-(--xl-row)"
+	"--xs-row": "row-(--xs-row)",
+	"--sm-row": "sm:row-(--sm-row)",
+	"--md-row": "md:row-(--md-row)",
+	"--lg-row": "lg:row-(--lg-row)",
+	"--xl-row": "xl:row-(--xl-row)"
 };
 const presetGridCol = {
-  "--xs-col": "col-(--xs-col)",
-  "--sm-col": "sm:col-(--sm-col)",
-  "--md-col": "md:col-(--md-col)",
-  "--lg-col": "lg:col-(--lg-col)",
-  "--xl-col": "xl:col-(--xl-col)"
+	"--xs-col": "col-(--xs-col)",
+	"--sm-col": "sm:col-(--sm-col)",
+	"--md-col": "md:col-(--md-col)",
+	"--lg-col": "lg:col-(--lg-col)",
+	"--xl-col": "xl:col-(--xl-col)"
 };
 const formattedRow = computed(() => {
-  const { row } = props;
-  return getResponsiveValue(
-    row,
-    (typeof row === "object" ? row.xs : row) ?? "auto",
-    (acc, bp, value) => {
-      acc[`--${bp}-row`] = value;
-    }
-  );
+	const { row } = props;
+	return getResponsiveValue(row, (typeof row === "object" ? row.xs : row) ?? "auto", (acc, bp, value) => {
+		acc[`--${bp}-row`] = value;
+	});
 });
 const formattedCol = computed(() => {
-  const { column } = props;
-  return getResponsiveValue(
-    column,
-    (typeof column === "object" ? column.xs : column) ?? "auto",
-    (acc, bp, value) => {
-      acc[`--${bp}-col`] = value;
-    }
-  );
+	const { column } = props;
+	return getResponsiveValue(column, (typeof column === "object" ? column.xs : column) ?? "auto", (acc, bp, value) => {
+		acc[`--${bp}-col`] = value;
+	});
 });
 const computedClasses = computed(() => {
-  return [
-    ...Object.keys(formattedRow.value).map((bp) => presetGridRow[bp]),
-    ...Object.keys(formattedCol.value).map((bp) => presetGridCol[bp])
-  ].join(" ");
+	const classes = [...Object.keys(formattedRow.value).map((bp) => presetGridRow[bp]), ...Object.keys(formattedCol.value).map((bp) => presetGridCol[bp])];
+	return classes;
 });
 const gridItemStyle = computed(() => {
-  return {
-    ...formattedRow.value,
-    ...formattedCol.value
-  };
+	return {
+		...formattedRow.value,
+		...formattedCol.value
+	};
 });
 </script>
 
 <template>
   <div
+    data-grid-item
     class="pxd-grid-item overflow-hidden"
     :class="computedClasses"
     :style="gridItemStyle"

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

@@ -1,123 +1,147 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef, useAttrs } from "vue";
-import { getStyle } from "../../utils/dom";
-import { off, once } from "../../utils/event";
+import { getStyle } from "../../utils/dom.js";
+import { off, once } from "../../utils/event.js";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PHoldButton",
-  inheritAttrs: false
+	name: "PHoldButton",
+	inheritAttrs: false
 });
 const props = defineProps({
-  vibrate: { type: Boolean, required: false, default: true },
-  disabled: { type: Boolean, required: false },
-  scalable: { type: Boolean, required: false, default: true },
-  durations: { type: [Number, String], required: false },
-  cancelable: { type: Boolean, required: false },
-  progressColor: { type: String, required: false }
+	vibrate: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	scalable: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	durations: {
+		type: [Number, String],
+		required: false
+	},
+	cancelable: {
+		type: Boolean,
+		required: false
+	},
+	progressColor: {
+		type: String,
+		required: false
+	}
 });
-const emits = defineEmits(["cancel", "confirm", "release", "pointerup", "pointerdown"]);
+const emits = defineEmits([
+	"cancel",
+	"confirm",
+	"release",
+	"pointerup",
+	"pointerdown"
+]);
 const attrs = useAttrs();
 const status = shallowRef("idle");
 const computedAttrs = computed(() => {
-  return {
-    class: [
-      "pxd-hold-button relative motion-safe:transition-appearance",
-      {
-        scalable: props.scalable,
-        effective: status.value !== "canceled"
-      }
-    ],
-    ...attrs
-  };
+	return {
+		class: ["pxd-hold-button relative motion-safe:transition-appearance", {
+			scalable: props.scalable,
+			effective: status.value !== "canceled"
+		}],
+		...attrs
+	};
 });
 const computedStyle = computed(() => {
-  const { durations, progressColor } = props;
-  let _durations = Number(durations);
-  if (Number.isNaN(_durations) || _durations < 0) {
-    _durations = 2e3;
-  }
-  return {
-    "--hold-button-durations": `${_durations}ms`,
-    "--hold-button-progress-color": progressColor
-  };
+	const { durations, progressColor } = props;
+	let _durations = Number(durations);
+	if (Number.isNaN(_durations) || _durations < 0) {
+		_durations = 2e3;
+	}
+	return {
+		"--hold-button-durations": `${_durations}ms`,
+		"--hold-button-progress-color": progressColor
+	};
 });
 function onTriggerVibrate() {
-  if (!props.vibrate) {
-    return;
-  }
-  if (typeof window.navigator.vibrate !== "function") {
-    return;
-  }
-  window.navigator.vibrate(100);
+	if (!props.vibrate) {
+		return;
+	}
+	if (typeof window.navigator.vibrate !== "function") {
+		return;
+	}
+	window.navigator.vibrate(100);
 }
 function onPointerEnter(e) {
-  if (props.disabled) {
-    return;
-  }
-  if (!checkIsHolding(e)) {
-    status.value = "idle";
-    return;
-  }
-  if (status.value === "canceled") {
-    status.value = "loading";
-  }
+	if (props.disabled) {
+		return;
+	}
+	if (!checkIsHolding(e)) {
+		status.value = "idle";
+		return;
+	}
+	if (status.value === "canceled") {
+		status.value = "loading";
+	}
 }
 function onPointerLeave(e) {
-  if (props.disabled || !checkIsHolding(e) || !props.cancelable) {
-    return;
-  }
-  if (status.value === "loading" || status.value === "confirmed") {
-    status.value = "canceled";
-    emits("cancel");
-  }
+	if (props.disabled || !checkIsHolding(e) || !props.cancelable) {
+		return;
+	}
+	if (status.value === "loading" || status.value === "confirmed") {
+		status.value = "canceled";
+		emits("cancel");
+	}
 }
 function onPointerDown(event) {
-  if (props.disabled) {
-    return;
-  }
-  status.value = "loading";
-  emits("pointerdown", event);
-  once(document, "pointerup", onPointerUp);
-  once(document, "pointercancel", onPointerUp);
+	if (props.disabled) {
+		return;
+	}
+	status.value = "loading";
+	emits("pointerdown", event);
+	once(document, "pointerup", onPointerUp);
+	once(document, "pointercancel", onPointerUp);
 }
 function onPointerUp(event) {
-  if (props.disabled) {
-    return;
-  }
-  const isConfirmed = status.value === "confirmed";
-  status.value = "idle";
-  emits("release", isConfirmed);
-  emits("pointerup", event);
-  onTriggerVibrate();
-  cleanPointerReleaseEvents();
+	if (props.disabled) {
+		return;
+	}
+	const isConfirmed = status.value === "confirmed";
+	status.value = "idle";
+	emits("release", isConfirmed);
+	emits("pointerup", event);
+	onTriggerVibrate();
+	cleanPointerReleaseEvents();
 }
 function onTransitionEnd({ target, propertyName }) {
-  if (status.value !== "loading") {
-    return;
-  }
-  const stylesValue = getStyle(target).getPropertyValue(propertyName);
-  const isConfirmed = stylesValue === "inset(0px)";
-  if (isConfirmed) {
-    emits("confirm");
-    status.value = "confirmed";
-    return;
-  }
-  status.value = "loading";
+	if (status.value !== "loading") {
+		return;
+	}
+	const stylesValue = getStyle(target).getPropertyValue(propertyName);
+	const isConfirmed = stylesValue === "inset(0px)";
+	if (isConfirmed) {
+		emits("confirm");
+		status.value = "confirmed";
+		return;
+	}
+	status.value = "loading";
 }
 function cleanPointerReleaseEvents() {
-  off(document, "pointerup", onPointerUp);
-  off(document, "pointercancel", onPointerUp);
+	off(document, "pointerup", onPointerUp);
+	off(document, "pointercancel", onPointerUp);
 }
 function checkIsHolding(e) {
-  return e.buttons === 1;
+	return e.buttons === 1;
 }
 onBeforeUnmount(() => {
-  cleanPointerReleaseEvents();
+	cleanPointerReleaseEvents();
 });
 </script>
 
 <template>
   <PButton
+    data-hold-button
     v-bind="computedAttrs"
     @pointerdown="onPointerDown"
     @pointerenter="onPointerEnter"
@@ -141,34 +165,6 @@ onBeforeUnmount(() => {
   </PButton>
 </template>
 
-<style lang="postcss">
-.pxd-hold-button {
-  &.scalable:not(.is-disabled):active {
-    transform: scale(0.97);
-  }
-
-  &:hover .pxd-hold-button--overlay {
-    will-change: clip-path;
-  }
-
-  .pxd-hold-button--overlay {
-    --opacity: 0.45;
-    opacity: var(--opacity);
-    clip-path: inset(0 100% 0 0);
-    transition:
-      clip-path 0.1s,
-      opacity 0s;
-
-    &.confirmed {
-      --opacity: 0.68;
-    }
-  }
-
-  &.effective:not(.is-disabled):active .pxd-hold-button--overlay {
-    clip-path: inset(0px);
-    transition:
-      clip-path var(--hold-button-durations),
-      opacity 0.1s;
-  }
-}
+<style>
+.pxd-hold-button.scalable:not(.is-disabled):active{transform:scale(.97)}.pxd-hold-button:hover .pxd-hold-button--overlay{will-change:clip-path}.pxd-hold-button .pxd-hold-button--overlay{--opacity:0.45;clip-path:inset(0 100% 0 0);opacity:var(--opacity);transition:clip-path .1s,opacity 0s}.pxd-hold-button .pxd-hold-button--overlay.confirmed{--opacity:0.68}.pxd-hold-button.effective:not(.is-disabled):active .pxd-hold-button--overlay{clip-path:inset(0);transition:clip-path var(--hold-button-durations),opacity .1s}
 </style>

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

@@ -0,0 +1,16 @@
+import type { HueTextProps } from './types';
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    suffix?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HueTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HueTextProps> & Readonly<{}>, {}, {}, {}, {}, 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/hue-text/index.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({
+	name: "PHueText",
+	inheritAttrs: false
+});
+const props = defineProps({
+	text: {
+		type: String,
+		required: false
+	},
+	tinted: {
+		type: Boolean,
+		required: false
+	}
+});
+const hue = computed(() => {
+	let hash = 0;
+	const name = props.text ?? "";
+	for (let i = 0; i < name.length; i++) {
+		hash = name.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	return (hash % 360 + 360) % 360;
+});
+const hueStyle = computed(() => ({ "--pxd-hue-h": hue.value }));
+</script>
+
+<template>
+  <span
+    data-hue-text
+    class="pxd-hue-text gap-1 inline-flex max-w-full items-center"
+    :style="hueStyle"
+    :data-tinted="tinted"
+    v-bind="$attrs"
+  >
+    <span v-if="$slots.prefix" class="inline-flex items-center">
+      <slot name="prefix" />
+    </span>
+    {{ text }}
+    <span v-if="$slots.suffix" class="inline-flex items-center">
+      <slot name="suffix" />
+    </span>
+  </span>
+</template>
+
+<style>
+.pxd-hue-text{--pxd-hue-l:40%;color:hsl(var(--pxd-hue-h) 45% var(--pxd-hue-l))}.dark .pxd-hue-text{--pxd-hue-l:72%}.pxd-hue-text[data-tinted=true]{background-color:color-mix(in srgb,currentColor 12%,transparent)}
+</style>

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

@@ -0,0 +1,4 @@
+export interface HueTextProps {
+  text?: string
+  tinted?: boolean
+}

package/dist/components/index.d.ts

@@ -1,17 +1,24 @@
 export { default as ActiveGraph } from './active-graph/index.vue';
+export { default as ApprovalCard } from './approval-card/index.vue';
 export { default as Avatar } from './avatar/index.vue';
 export { default as AvatarGroup } from './avatar-group/index.vue';
 export { default as Backtop } from './backtop/index.vue';
 export { default as Badge } from './badge/index.vue';
 export { default as Book } from './book/index.vue';
+export { default as BorderBeam } from './border-beam/index.vue';
+export { default as Breadcrumb } from './breadcrumb/index.vue';
+export { default as BreadcrumbItem } from './breadcrumb-item/index.vue';
 export { default as Browser } from './browser/index.vue';
 export { default as Bubble } from './bubble/index.vue';
+export { default as BubbleGroup } from './bubble-group/index.vue';
 export { default as Button } from './button/index.vue';
 export { default as ButtonGroup } from './button-group/index.vue';
+export { default as Calendar } from './calendar/index.vue';
+export { default as Card } from './card/index.vue';
 export { default as Carousel } from './carousel/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 Checkerboard } from './checkerboard/index.vue';
 export { default as Chip } from './chip/index.vue';
 export { default as Choicebox } from './choicebox/index.vue';
 export { default as ChoiceboxItem } from './choicebox-item/index.vue';
@@ -19,30 +26,38 @@ export { default as Collapse } from './collapse/index.vue';
 export { default as CollapseGroup } from './collapse-group/index.vue';
 export { default as ColorSelector } from './color-selector/index.vue';
 export { default as CommandMenu } from './command-menu/index.vue';
-export { default as CommandMenuGroup } from './command-menu-group/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
+export { default as CopyButton } from './copy-button/index.vue';
 export { default as Countdown } from './countdown/index.vue';
 export { default as DashLine } from './dash-line/index.vue';
+export { default as DatePicker } from './date-picker/index.vue';
 export { default as Description } from './description/index.vue';
 export { default as Drawer } from './drawer/index.vue';
+export { default as EffortSlider } from './effort-slider/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';
+export { default as FeedbackBar } from './feedback-bar/index.vue';
 export { default as Gauge } from './gauge/index.vue';
 export { default as Grid } from './grid/index.vue';
 export { default as GridItem } from './grid-item/index.vue';
 export { default as HoldButton } from './hold-button/index.vue';
+export { default as HueText } from './hue-text/index.vue';
 export { default as Input } from './input/index.vue';
 export { default as IntersectionObserver } from './intersection-observer/index.vue';
 export { default as Kbd } from './kbd/index.vue';
 export { default as Label } from './label/index.vue';
 export { default as LinkButton } from './link-button/index.vue';
 export { default as List } from './list/index.vue';
+export { default as ListGroup } from './list-group/index.vue';
 export { default as ListItem } from './list-item/index.vue';
 export { default as LoadingBar } from './loading-bar/index.vue';
 export { default as LoadingDots } from './loading-dots/index.vue';
+export { default as MarchingAnts } from './marching-ants/index.vue';
+export { default as Marquee } from './marquee/index.vue';
 export { default as Material } from './material/index.vue';
+export { default as Mention } from './mention/index.vue';
 export { default as Menu } from './menu/index.vue';
 export { default as Message } from './message/index.vue';
 export { default as MessageItem } from './message-item/index.vue';
@@ -52,37 +67,57 @@ export { default as NoiseBackground } from './noise-background/index.vue';
 export { default as Note } from './note/index.vue';
 export { default as NumberInput } from './number-input/index.vue';
 export { default as Overlay } from './overlay/index.vue';
+export { default as PageNumber } from './page-number/index.vue';
 export { default as Pagination } from './pagination/index.vue';
 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 Questionnaire } from './questionnaire/index.vue';
+export { default as RadialBurst } from './radial-burst/index.vue';
 export { default as Radio } from './radio/index.vue';
 export { default as RadioGroup } from './radio-group/index.vue';
+export { default as Rating } from './rating/index.vue';
+export { default as Reasoning } from './reasoning/index.vue';
 export { default as Resizable } from './resizable/index.vue';
-export { default as ResizableHandle } from './resizable-handle/index.vue';
-export { default as ResizablePanel } from './resizable-panel/index.vue';
+export { default as Reveal } from './reveal/index.vue';
+export { default as RollingNumber } from './rolling-number/index.vue';
 export { default as ScalableText } from './scalable-text/index.vue';
+export { default as ScrollProgress } from './scroll-progress/index.vue';
+export { default as ScrollText } from './scroll-text/index.vue';
 export { default as Scrollable } from './scrollable/index.vue';
+export { default as SearchInput } from './search-input/index.vue';
+export { default as Select } from './select/index.vue';
 export { default as Separator } from './separator/index.vue';
+export { default as ShimmerText } from './shimmer-text/index.vue';
 export { default as Skeleton } from './skeleton/index.vue';
 export { default as Slider } from './slider/index.vue';
 export { default as Snippet } from './snippet/index.vue';
 export { default as Spinner } from './spinner/index.vue';
+export { default as SpinnerDots } from './spinner-dots/index.vue';
+export { default as SplitButton } from './split-button/index.vue';
 export { default as Stack } from './stack/index.vue';
 export { default as StatusDot } from './status-dot/index.vue';
+export { default as Steps } from './steps/index.vue';
+export { default as StickToBottom } from './stick-to-bottom/index.vue';
+export { default as SwipeCell } from './swipe-cell/index.vue';
 export { default as Switch } from './switch/index.vue';
 export { default as SwitchItem } from './switch-item/index.vue';
 export { default as Tabs } from './tabs/index.vue';
-export { default as TabsItem } from './tabs-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 Timeline } from './timeline/index.vue';
+export { default as TimelineItem } from './timeline-item/index.vue';
+export { default as Toc } from './toc/index.vue';
+export { default as TodoList } from './todo-list/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 ToolCall } from './tool-call/index.vue';
 export { default as Tooltip } from './tooltip/index.vue';
+export { default as Tree } from './tree/index.vue';
 export { default as VirtualList } from './virtual-list/index.vue';