pxd 0.0.64 → 0.1.3

package/dist/components/book/index.vue

@@ -1,53 +1,74 @@
 <script setup>
 import { computed } from "vue";
-import { getResponsiveValue } from "../../utils/get";
+import { getResponsiveValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PBook",
-  inheritAttrs: false
+	name: "PBook",
+	inheritAttrs: false
 });
 const props = defineProps({
-  color: { type: String, required: false },
-  title: { type: [String, Number, Array, null], required: false },
-  width: { type: [String, Number, Object], required: false },
-  variant: { type: String, required: false, default: "stripe" },
-  textured: { type: Boolean, required: false, default: false }
+	color: {
+		type: String,
+		required: false
+	},
+	title: {
+		type: null,
+		required: false
+	},
+	width: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "stripe"
+	},
+	textured: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
 const presetWidth = {
-  "--xs": "[--bw:var(--xs)]",
-  "--sm": "sm:[--bw:var(--sm)]",
-  "--md": "md:[--bw:var(--md)]",
-  "--lg": "lg:[--bw:var(--lg)]",
-  "--xl": "xl:[--bw:var(--xl)]"
+	"--xs": "[--bw:var(--xs)]",
+	"--sm": "sm:[--bw:var(--sm)]",
+	"--md": "md:[--bw:var(--md)]",
+	"--lg": "lg:[--bw:var(--lg)]",
+	"--xl": "xl:[--bw:var(--xl)]"
 };
 const formattedWidth = computed(() => {
-  const { width } = props;
-  return getResponsiveValue(
-    width,
-    (typeof width === "object" ? width.xs : width) ?? 196,
-    (acc, bp, value) => acc[bp] = acc[`--${bp}`] = value
-  );
+	const { width } = props;
+	return getResponsiveValue(width, (typeof width === "object" ? width.xs : width) ?? 196, (acc, bp, value) => acc[bp] = acc[`--${bp}`] = value);
 });
 const computedStyle = computed(() => {
-  const { color } = props;
-  return {
-    ...formattedWidth.value,
-    "--book-background-color": color
-  };
+	const { color } = props;
+	return {
+		...formattedWidth.value,
+		"--book-background-color": color
+	};
 });
 const computedClasses = computed(() => {
-  const classes = [
-    "pxd-book--container relative w-fit duration-300 transform-3d motion-safe:transition-transform"
-  ];
-  classes.push(
-    ...Object.keys(formattedWidth.value).map((bp) => presetWidth[bp])
-  );
-  return classes.join(" ");
+	const classes = Object.keys(formattedWidth.value).map((bp) => presetWidth[bp]);
+	return classes;
 });
 </script>
 
 <template>
-  <div class="pxd-book inline-flex w-fit" v-bind="$attrs">
-    <div :class="computedClasses" :style="computedStyle">
+  <div
+    data-book
+    class="pxd-book group/book inline-flex w-fit"
+    :data-variant="variant"
+    v-bind="$attrs"
+  >
+    <div
+      class="pxd-book--container relative w-fit transform-3d group-hover/book:will-change-transform motion-safe:transition-transform"
+      :class="computedClasses"
+      :style="computedStyle"
+    >
       <div
         class="pxd-book--content translate-z-0 absolute flex size-full min-w-full flex-col overflow-hidden bg-background-200"
       >
@@ -73,7 +94,7 @@ const computedClasses = computed(() => {
           <div aria-hidden="true" class="pxd-book--spine h-full opacity-20" />
 
           <div class="pxd-book--content-inner flex w-full flex-col">
-            <span class="pxd-book--title font-semibold pr-2 text-balance break-all">
+            <span class="pxd-book--title font-semibold pe-2 text-balance break-all">
               <slot name="title">
                 {{ title }}
               </slot>
@@ -124,132 +145,6 @@ const computedClasses = computed(() => {
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-book {
-  --book-default-width: 196;
-  --book-depth: 29cqw;
-  --book-border-radius: 6px 4px 4px 6px;
-  --hover-rotate: -20deg;
-  --hover-scale: 1.066;
-  --hover-translate-x: -8px;
-  --aspect-ratio: 49 / 60;
-  --bg-shadow:
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0) 12%,
-      rgba(255, 255, 255, 0.25) 29.25%,
-      rgba(255, 255, 255, 0) 50.5%,
-      rgba(255, 255, 255, 0) 75.25%,
-      rgba(255, 255, 255, 0.25) 91%,
-      rgba(255, 255, 255, 0)
-    ),
-    linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.03),
-      rgba(0, 0, 0, 0.1) 12%,
-      rgba(0, 0, 0, 0) 30%,
-      rgba(0, 0, 0, 0.02) 50%,
-      rgba(0, 0, 0, 0.2) 73.5%,
-      rgba(0, 0, 0, 0.5) 75.25%,
-      rgba(0, 0, 0, 0.15) 85.25%,
-      rgba(0, 0, 0, 0)
-    );
-
-  perspective: 900px;
-}
-
-.pxd-book--container {
-  aspect-ratio: var(--aspect-ratio);
-  transform: rotate(0deg);
-  width: calc(var(--bw) * 1px);
-  container-type: inline-size;
-}
-
-.pxd-book--content {
-  border-radius: var(--book-border-radius);
-  box-shadow:
-    0 1px 1px 0 rgba(0, 0, 0, 0.02),
-    0 4px 8px -4px rgba(0, 0, 0, 0.1),
-    0 16px 24px -8px rgba(0, 0, 0, 0.03);
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border: 1px solid var(--color-gray-alpha-200);
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    box-shadow: inset 0 1px 2px 0 var(--color-gray-alpha-200);
-    pointer-events: none;
-  }
-}
-
-.dark .pxd-book--content {
-  background:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.1),
-      rgba(255, 255, 255, 0) 50%,
-      rgba(255, 255, 255, 0)
-    ),
-    hsla(0, 0%, 12%, 1);
-  box-shadow:
-    0 1.8px 3.6px rgba(0, 0, 0, 0.05),
-    0 10.8px 21.6px rgba(0, 0, 0, 0.08),
-    inset 0 -0.9px 0 rgba(0, 0, 0, 0.1),
-    inset 0 1.8px 1.8px rgba(255, 255, 255, 0.1),
-    inset 3.6px 0 3.6px rgba(0, 0, 0, 0.1);
-}
-
-.pxd-book--content-inner {
-  gap: calc((24px / var(--book-default-width)) * var(--bw));
-  padding: 6.1%;
-  container-type: inline-size;
-}
-
-.pxd-book--cover-simple {
-  background-color: var(--book-background-color, var(--color-gray-200));
-}
-
-.pxd-book--textured {
-  background-image: url(https://assets.vercel.com/image/upload/v1720554484/front/design/book-texture.avif);
-  border-radius: var(--book-border-radius);
-  mix-blend-mode: hard-light;
-  background-repeat: no-repeat;
-  filter: brightness(1.1);
-}
-
-.pxd-book--spine {
-  width: 8.2%;
-  min-width: 8.2%;
-  background: var(--bg-shadow);
-}
-
-.pxd-book--title {
-  line-height: 1.25em;
-  font-size: 12cqw;
-  letter-spacing: -0.02em;
-}
-
-.pxd-book--pages {
-  top: 3px;
-  height: calc(100% - 2 * 3px);
-  width: calc(var(--book-depth) - 2px);
-  transform: translateX(calc(var(--bw) * 1px - var(--book-depth) / 2 - 3px)) rotateY(90deg)
-    translateX(calc(var(--book-depth) / 2));
-  background: linear-gradient(90deg, #eaeaea, transparent 70%), linear-gradient(#fff, #fafafa);
-}
-
-.pxd-book--back {
-  border-radius: var(--book-border-radius);
-  transform: translateZ(calc(-1 * var(--book-depth)));
-}
-
-.pxd-book:hover .pxd-book--container {
-  will-change: transform;
-  transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale))
-    translateX(var(--hover-translate-x));
-}
+<style>
+.pxd-book{--book-default-width:196;--book-depth:29cqw;--book-border-radius:6px 4px 4px 6px;--hover-rotate:-20deg;--hover-scale:1.066;--hover-translate-x:-8px;--aspect-ratio:49/60;--bg-shadow:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0) 12%,hsla(0,0%,100%,.25) 29.25%,hsla(0,0%,100%,0) 50.5%,hsla(0,0%,100%,0) 75.25%,hsla(0,0%,100%,.25) 91%,hsla(0,0%,100%,0)),linear-gradient(90deg,rgba(0,0,0,.03),rgba(0,0,0,.1) 12%,transparent 30%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.2) 73.5%,rgba(0,0,0,.5) 75.25%,rgba(0,0,0,.15) 85.25%,transparent);perspective:900px}.pxd-book--container{aspect-ratio:var(--aspect-ratio);container-type:inline-size;transform:rotate(0deg);width:calc(var(--bw)*1px)}.pxd-book--content{border-radius:var(--book-border-radius);box-shadow:0 1px 1px 0 rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.1),0 16px 24px -8px rgba(0,0,0,.03)}.pxd-book--content:after{border:1px solid var(--color-gray-alpha-200);border-radius:inherit;box-shadow:inset 0 1px 2px 0 var(--color-gray-alpha-200);content:"";height:100%;inset:0;pointer-events:none;position:absolute;width:100%}.dark .pxd-book--content{background:linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0) 50%,hsla(0,0%,100%,0)),#1f1f1f;box-shadow:0 1.8px 3.6px rgba(0,0,0,.05),0 10.8px 21.6px rgba(0,0,0,.08),inset 0 -.9px 0 rgba(0,0,0,.1),inset 0 1.8px 1.8px hsla(0,0%,100%,.1),inset 3.6px 0 3.6px rgba(0,0,0,.1)}.pxd-book--content-inner{container-type:inline-size;gap:calc((24px/var(--book-default-width))*var(--bw));padding:6.1%}.pxd-book--cover-simple{background-color:var(--book-background-color,var(--color-gray-200))}.pxd-book--textured{background-image:url(https://assets.vercel.com/image/upload/v1720554484/front/design/book-texture.avif);background-repeat:no-repeat;border-radius:var(--book-border-radius);filter:brightness(1.1);mix-blend-mode:hard-light}.pxd-book--spine{background:var(--bg-shadow);min-width:8.2%;width:8.2%}.pxd-book--title{font-size:12cqw;letter-spacing:-.02em;line-height:1.25em}.pxd-book--pages{background:linear-gradient(90deg,#eaeaea,transparent 70%),linear-gradient(#fff,#fafafa);height:calc(100% - 6px);top:3px;transform:translateX(calc(var(--bw)*1px - var(--book-depth)/2 - 3px)) rotateY(90deg) translateX(calc(var(--book-depth)/2));width:calc(var(--book-depth) - 2px)}.pxd-book--back{border-radius:var(--book-border-radius);transform:translateZ(calc(var(--book-depth)*-1))}.pxd-book:hover .pxd-book--container{transform:rotateY(var(--hover-rotate)) scale(var(--hover-scale)) translateX(var(--hover-translate-x))}
 </style>

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ResponsiveValue } from '../../types/shared'
+import type { ComponentLabel, ResponsiveValue } from '../../types/shared/props'
 
 export interface BookProps {
   color?: string

package/dist/components/border-beam/index.d.vue.ts

@@ -0,0 +1,18 @@
+import type { BorderBeamProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BorderBeamProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BorderBeamProps> & Readonly<{}>, {
+    variant: import("./types").BorderBeamVariant;
+    disabled: boolean;
+    strength: 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/border-beam/index.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from "vue";
+import { toArray } from "../../utils/format.js";
+defineOptions({
+	name: "PBorderBeam",
+	inheritAttrs: false
+});
+const props = defineProps({
+	variant: {
+		type: String,
+		required: false,
+		default: "glow"
+	},
+	color: {
+		type: [String, Array],
+		required: false
+	},
+	strength: {
+		type: Number,
+		required: false,
+		default: 1
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
+});
+// Number of color spots distributed around the border (matches the CSS gradients)
+const COLOR_SPOT_COUNT = 9;
+const computedStyle = computed(() => {
+	const style = { "--border-beam-strength": Math.max(0, Math.min(1, props.strength)) };
+	const colors = toArray(props.color);
+	if (colors.length > 0) {
+		for (let index = 0; index < COLOR_SPOT_COUNT; index++) {
+			const color = colors[index % colors.length];
+			style[`--border-beam-stroke-color-${index + 1}`] = color;
+			style[`--border-beam-glow-color-${index + 1}`] = `color-mix(in srgb, ${color}, transparent 60%)`;
+		}
+	}
+	return style;
+});
+</script>
+
+<template>
+  <div
+    data-border-beam
+    class="pxd-border-beam after:content-empty after:inset-0 before:content-empty before:inset-0 relative overflow-hidden before:pointer-events-none before:absolute before:z-1 before:rounded-inherit after:pointer-events-none after:absolute after:z-2 after:rounded-inherit motion-reduce:animate-none! motion-reduce:before:animate-none! motion-reduce:after:animate-none!"
+    :data-variant="variant"
+    :data-disabled="disabled"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <slot />
+    <div
+      aria-hidden="true"
+      class="pxd-border-beam--bloom inset-0 pointer-events-none absolute z-3 rounded-inherit p-px"
+    />
+  </div>
+</template>
+
+<style>
+@property --pxd-border-beam-angle{syntax:"<angle>";initial-value:0deg;inherits:true}@property --pxd-border-beam-x{syntax:"<number>";initial-value:.5;inherits:true}@property --pxd-border-beam-edge{syntax:"<number>";initial-value:1;inherits:true}.pxd-border-beam{--pxd-border-beam-mask-conic:conic-gradient(from var(--pxd-border-beam-angle),transparent 0%,transparent 30%,hsla(0,0%,100%,.1) 36%,hsla(0,0%,100%,.35) 44%,#fff 52%,#fff 80%,hsla(0,0%,100%,.35) 86%,hsla(0,0%,100%,.1) 92%,transparent 95%,transparent 100%);animation:pxd-animation-border-beam-spin 1.96s linear infinite}.pxd-border-beam:after{background:conic-gradient(from var(--pxd-border-beam-angle),transparent 0,transparent 54%,hsla(0,0%,100%,.1) 57%,hsla(0,0%,100%,.3) 60%,hsla(0,0%,100%,.6) 63%,hsla(0,0%,100%,.75) 66%,hsla(0,0%,100%,.6) 69%,hsla(0,0%,100%,.3) 72%,hsla(0,0%,100%,.1) 75%,transparent 78%,transparent 100%),radial-gradient(ellipse 70px 40px at 33% -7.4%,var(--border-beam-stroke-color-1,var(--color-pink-700)),transparent),radial-gradient(ellipse 60px 35px at 12% -5%,var(--border-beam-stroke-color-2,var(--color-blue-600)),transparent),radial-gradient(ellipse 40px 70px at 2.1% 68.3%,var(--border-beam-stroke-color-3,var(--color-green-600)),transparent),radial-gradient(ellipse 20px 35px at 2.1% 68.3%,var(--border-beam-stroke-color-4,var(--color-teal-700)),transparent),radial-gradient(ellipse 180px 32px at 74.4% 100%,var(--border-beam-stroke-color-5,var(--color-purple-600)),transparent),radial-gradient(ellipse 85px 26px at 55% 100%,var(--border-beam-stroke-color-6,var(--color-blue-600)),transparent),radial-gradient(ellipse 74px 32px at 93.9% 0,var(--border-beam-stroke-color-7,var(--color-amber-600)),transparent),radial-gradient(ellipse 26px 42px at 100% 27.1%,var(--border-beam-stroke-color-8,var(--color-pink-700)),transparent),radial-gradient(ellipse 52px 48px at 100% 27.1%,var(--border-beam-stroke-color-9,var(--color-purple-700)),transparent);-webkit-mask:var(--pxd-border-beam-mask-conic),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:var(--pxd-border-beam-mask-conic),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:source-in,xor,xor;mask-composite:intersect,exclude}.pxd-border-beam:after,.pxd-border-beam:before{animation:pxd-animation-border-beam-hue 12s ease-in-out infinite;opacity:var(--border-beam-strength)}.pxd-border-beam:before{background:radial-gradient(ellipse 63px 36px at 33% -7.4%,var(--border-beam-glow-color-1,hsla(var(--color-pink-700-value),40%)),transparent),radial-gradient(ellipse 54px 32px at 12% -5%,var(--border-beam-glow-color-2,hsla(var(--color-blue-700-value),40%)),transparent),radial-gradient(ellipse 36px 63px at 2.1% 68.3%,var(--border-beam-glow-color-3,hsla(var(--color-green-700-value),40%)),transparent),radial-gradient(ellipse 18px 32px at 2.1% 68.3%,var(--border-beam-glow-color-4,hsla(var(--color-teal-700-value),40%)),transparent),radial-gradient(ellipse 162px 29px at 74.4% 100%,var(--border-beam-glow-color-5,hsla(var(--color-purple-700-value),40%)),transparent),radial-gradient(ellipse 77px 23px at 55% 100%,var(--border-beam-glow-color-6,hsla(var(--color-blue-700-value),40%)),transparent),radial-gradient(ellipse 67px 29px at 93.9% 0,var(--border-beam-glow-color-7,hsla(var(--color-amber-700-value),40%)),transparent),radial-gradient(ellipse 23px 38px at 100% 27.1%,var(--border-beam-glow-color-8,hsla(var(--color-pink-700-value),40%)),transparent),radial-gradient(ellipse 47px 43px at 100% 27.1%,var(--border-beam-glow-color-9,hsla(var(--color-purple-700-value),40%)),transparent);box-shadow:inset 0 0 9px 1px hsla(0,0%,100%,.27);-webkit-mask-composite:source-in,source-over,xor;mask-composite:intersect,add;-webkit-mask-image:var(--pxd-border-beam-mask-conic),linear-gradient(#fff,transparent 28px,transparent calc(100% - 28px),#fff),linear-gradient(to right,#fff,transparent 28px,transparent calc(100% - 28px),#fff);mask-image:var(--pxd-border-beam-mask-conic),linear-gradient(#fff,transparent 28px,transparent calc(100% - 28px),#fff),linear-gradient(to right,#fff,transparent 28px,transparent calc(100% - 28px),#fff)}.pxd-border-beam--bloom{background:conic-gradient(from var(--pxd-border-beam-angle),transparent 0,transparent 58%,hsla(0,0%,100%,.03) 62%,hsla(0,0%,100%,.08) 65%,hsla(0,0%,100%,.2) 67%,hsla(0,0%,100%,.45) 69%,hsla(0,0%,100%,.85) 70%,hsla(0,0%,100%,.85) 70.5%,hsla(0,0%,100%,.45) 71.5%,hsla(0,0%,100%,.2) 73%,hsla(0,0%,100%,.08) 75%,hsla(0,0%,100%,.03) 78%,transparent 82%);filter:blur(10px) brightness(1.3) saturate(1.2);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--border-beam-strength)}.pxd-border-beam[data-variant=line] .pxd-border-beam--bloom,.pxd-border-beam[data-variant=line]:before{display:none}.pxd-border-beam[data-variant=line]:after{animation:none;background:conic-gradient(from var(--pxd-border-beam-angle),transparent 0,transparent 68%,var(--border-beam-stroke-color-1,var(--color-blue-600)) 74%,var(--border-beam-stroke-color-2,var(--color-purple-600)) 80%,var(--border-beam-stroke-color-3,var(--color-pink-700)) 86%,var(--border-beam-stroke-color-4,var(--color-amber-600)) 92%,transparent 97%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}.pxd-border-beam[data-variant=bottom]{animation:pxd-animation-border-beam-travel 2.4s linear infinite,pxd-animation-border-beam-edge 2.4s linear infinite}.pxd-border-beam[data-variant=bottom]:before{display:none}.pxd-border-beam[data-variant=bottom]:after{animation:none;background:radial-gradient(ellipse 32px 23px at calc(var(--pxd-border-beam-x)*100%) calc(100% + 2px),hsla(0,0%,100%,.38),transparent),radial-gradient(ellipse 36px 27px at calc(var(--pxd-border-beam-x)*100%) 100%,var(--border-beam-stroke-color-1,var(--color-pink-700)),transparent),radial-gradient(ellipse 30px 24px at calc(var(--pxd-border-beam-x)*100% + 39px) 100%,var(--border-beam-stroke-color-2,var(--color-blue-600)),transparent),radial-gradient(ellipse 33px 21px at calc(var(--pxd-border-beam-x)*100% - 36px) 100%,var(--border-beam-stroke-color-3,var(--color-green-600)),transparent),radial-gradient(ellipse 29px 26px at calc(var(--pxd-border-beam-x)*100% - 54px) 100%,var(--border-beam-stroke-color-4,var(--color-teal-700)),transparent),radial-gradient(ellipse 27px 23px at calc(var(--pxd-border-beam-x)*100% + 51px) 100%,var(--border-beam-stroke-color-5,var(--color-purple-600)),transparent),radial-gradient(ellipse 36px 18px at calc(var(--pxd-border-beam-x)*100% + 21px) 100%,var(--border-beam-stroke-color-6,var(--color-blue-600)),transparent),radial-gradient(ellipse 30px 17px at calc(var(--pxd-border-beam-x)*100% - 21px) 100%,var(--border-beam-stroke-color-7,var(--color-amber-600)),transparent),radial-gradient(ellipse 25px 21px at calc(var(--pxd-border-beam-x)*100% + 66px) 100%,var(--border-beam-stroke-color-8,var(--color-pink-700)),transparent),radial-gradient(ellipse 23px 23px at calc(var(--pxd-border-beam-x)*100% - 66px) 100%,var(--border-beam-stroke-color-9,var(--color-purple-700)),transparent);-webkit-mask:radial-gradient(ellipse 78px 45px at calc(var(--pxd-border-beam-x)*100%) 100%,#fff 0,hsla(0,0%,100%,.5) 45%,transparent 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:radial-gradient(ellipse 78px 45px at calc(var(--pxd-border-beam-x)*100%) 100%,#fff 0,hsla(0,0%,100%,.5) 45%,transparent 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:source-in,xor,xor;mask-composite:intersect,exclude;opacity:calc(var(--border-beam-strength)*var(--pxd-border-beam-edge));padding:1px}.pxd-border-beam[data-variant=bottom] .pxd-border-beam--bloom{background:radial-gradient(ellipse 42px 30px at calc(var(--pxd-border-beam-x)*100%) 100%,hsla(0,0%,100%,.3),transparent),radial-gradient(ellipse 36px 27px at calc(var(--pxd-border-beam-x)*100%) 100%,var(--border-beam-glow-color-1,hsla(var(--color-pink-700-value),40%)),transparent),radial-gradient(ellipse 30px 24px at calc(var(--pxd-border-beam-x)*100% + 39px) 100%,var(--border-beam-glow-color-2,hsla(var(--color-blue-700-value),40%)),transparent),radial-gradient(ellipse 33px 21px at calc(var(--pxd-border-beam-x)*100% - 36px) 100%,var(--border-beam-glow-color-3,hsla(var(--color-green-700-value),40%)),transparent),radial-gradient(ellipse 29px 26px at calc(var(--pxd-border-beam-x)*100% - 54px) 100%,var(--border-beam-glow-color-4,hsla(var(--color-teal-700-value),40%)),transparent),radial-gradient(ellipse 27px 23px at calc(var(--pxd-border-beam-x)*100% + 51px) 100%,var(--border-beam-glow-color-5,hsla(var(--color-purple-700-value),40%)),transparent),radial-gradient(ellipse 36px 18px at calc(var(--pxd-border-beam-x)*100% + 21px) 100%,var(--border-beam-glow-color-6,hsla(var(--color-blue-700-value),40%)),transparent),radial-gradient(ellipse 30px 17px at calc(var(--pxd-border-beam-x)*100% - 21px) 100%,var(--border-beam-glow-color-7,hsla(var(--color-amber-700-value),40%)),transparent),radial-gradient(ellipse 25px 21px at calc(var(--pxd-border-beam-x)*100% + 66px) 100%,var(--border-beam-glow-color-8,hsla(var(--color-pink-700-value),40%)),transparent),radial-gradient(ellipse 23px 23px at calc(var(--pxd-border-beam-x)*100% - 66px) 100%,var(--border-beam-glow-color-9,hsla(var(--color-purple-700-value),40%)),transparent);-webkit-mask:radial-gradient(ellipse 84px 82px at calc(var(--pxd-border-beam-x)*100%) 100%,#fff 0,hsla(0,0%,100%,.5) 35%,transparent 100%);mask:radial-gradient(ellipse 84px 82px at calc(var(--pxd-border-beam-x)*100%) 100%,#fff 0,hsla(0,0%,100%,.5) 35%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add;opacity:calc(var(--border-beam-strength)*var(--pxd-border-beam-edge))}.pxd-border-beam[data-disabled=true]{animation-play-state:paused}.pxd-border-beam[data-disabled=true] .pxd-border-beam--bloom,.pxd-border-beam[data-disabled=true]:after,.pxd-border-beam[data-disabled=true]:before{animation:pxd-animation-border-beam-fade-out .5s ease forwards}@keyframes pxd-animation-border-beam-spin{to{--pxd-border-beam-angle:360deg}}@keyframes pxd-animation-border-beam-hue{0%{filter:hue-rotate(-30deg) brightness(1.3) saturate(1.2)}50%{filter:hue-rotate(30deg) brightness(1.3) saturate(1.2)}to{filter:hue-rotate(-30deg) brightness(1.3) saturate(1.2)}}@keyframes pxd-animation-border-beam-travel{0%{--pxd-border-beam-x:0.06}to{--pxd-border-beam-x:0.94}}@keyframes pxd-animation-border-beam-edge{0%{--pxd-border-beam-edge:0}12.5%{--pxd-border-beam-edge:0}32.5%{--pxd-border-beam-edge:1}67.5%{--pxd-border-beam-edge:1}87.5%{--pxd-border-beam-edge:0}to{--pxd-border-beam-edge:0}}@keyframes pxd-animation-border-beam-fade-out{to{opacity:0}}
+</style>

package/dist/components/border-beam/types.d.ts

@@ -0,0 +1,8 @@
+export type BorderBeamVariant = 'glow' | 'line' | 'bottom'
+
+export interface BorderBeamProps {
+  variant?: BorderBeamVariant
+  color?: string | string[]
+  strength?: number
+  disabled?: boolean
+}

package/dist/components/{resizable-panel → breadcrumb}/index.d.vue.ts

@@ -1,11 +1,10 @@
-import type { ResizablePanelProps } from './types';
+import type { BreadcrumbProps } from './types';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ResizablePanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResizablePanelProps> & Readonly<{}>, {
-    size: number | null;
-    minSize: number;
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
+    separator: string;
 }, {}, {}, {}, 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/breadcrumb/index.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { provideBreadcrumbContext } from "../../contexts/breadcrumb.js";
+defineOptions({
+	name: "PBreadcrumb",
+	inheritAttrs: false
+});
+const props = defineProps({
+	separator: {
+		type: String,
+		required: false,
+		default: "/"
+	},
+	separatorIcon: {
+		type: null,
+		required: false
+	}
+});
+provideBreadcrumbContext(props);
+</script>
+
+<template>
+  <nav
+    data-breadcrumb
+    aria-label="breadcrumb"
+    class="pxd-breadcrumb w-full max-w-full"
+    v-bind="$attrs"
+  >
+    <ol class="gap-y-1 text-sm flex list-none flex-wrap items-center">
+      <slot />
+    </ol>
+  </nav>
+</template>

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

@@ -0,0 +1,6 @@
+import type { Component } from 'vue'
+
+export interface BreadcrumbProps {
+  separator?: string
+  separatorIcon?: string | Component
+}

package/dist/components/breadcrumb-item/index.d.vue.ts

@@ -0,0 +1,16 @@
+import type { BreadcrumbItemProps } from './types';
+declare var __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbItemProps> & 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/breadcrumb-item/index.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useBreadcrumbContext } from "../../contexts/breadcrumb.js";
+defineOptions({
+	name: "PBreadcrumbItem",
+	inheritAttrs: false
+});
+defineProps({
+	to: {
+		type: [String, Object],
+		required: false
+	},
+	replace: {
+		type: Boolean,
+		required: false
+	}
+});
+const breadcrumbContext = useBreadcrumbContext();
+</script>
+
+<template>
+  <li
+    data-breadcrumb-item
+    class="pxd-breadcrumb-item group/breadcrumb-item flex list-none items-center text-foreground-secondary last:text-foreground hover:text-foreground"
+    v-bind="$attrs"
+  >
+    <RouterLink
+      v-if="to"
+      :to="to"
+      :replace="replace"
+      class="rounded-sm text-inherit no-underline self-focus-ring outline-none hover:text-foreground motion-safe:transition-colors"
+    >
+      <slot />
+    </RouterLink>
+    <span v-else class="text-inherit">
+      <slot />
+    </span>
+
+    <span
+      class="pxd-breadcrumb-item--separator mx-2 inline-flex items-center text-foreground-secondary group-last/breadcrumb-item:hidden"
+      aria-hidden="true"
+    >
+      <Component
+        v-if="breadcrumbContext.separatorIcon"
+        :is="breadcrumbContext.separatorIcon"
+        class="size-3"
+      />
+      <template v-else>{{ breadcrumbContext.separator }}</template>
+    </span>
+  </li>
+</template>

package/dist/components/breadcrumb-item/types.d.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbItemProps {
+  to?: string | Record<string, unknown>
+  replace?: boolean
+}

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

@@ -1,7 +1,7 @@
 import type { BrowserProps } from './types';
-declare var __VLS_40: {};
+declare var __VLS_26: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_40) => any;
+    default?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<BrowserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BrowserProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/browser/index.vue

@@ -1,29 +1,25 @@
 <script setup>
 import ArrowLeftIcon from "@gdsicon/vue/arrow-left";
-import CheckIcon from "@gdsicon/vue/check";
-import CopyIcon from "@gdsicon/vue/copy";
 import LockClosedIcon from "@gdsicon/vue/lock-closed";
 import RefreshClockwiseIcon from "@gdsicon/vue/refresh-clockwise";
-import { computed } from "vue";
-import { useCopyClick } from "../../composables/use-copy-click";
-import PButton from "../button/index.vue";
+import PCopyButton from "../copy-button/index.vue";
 defineOptions({
-  name: "PBrowser",
-  inheritAttrs: false
+	name: "PBrowser",
+	inheritAttrs: false
 });
-defineProps({
-  address: { type: String, required: false }
-});
-const { isCopied, copyText } = useCopyClick();
-const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
+defineProps({ address: {
+	type: String,
+	required: false
+} });
 </script>
 
 <template>
   <div
-    class="pxd-browser overflow-hidden rounded-md bg-background-200 shadow-border-small"
+    data-browser
+    class="pxd-browser overflow-hidden rounded-md border bg-background-200"
     v-bind="$attrs"
   >
-    <div class="py-2.5 px-5 gap-4 md:gap-6 flex justify-between bg-background-100">
+    <div class="py-2.5 px-5 gap-4 md:gap-6 flex justify-between border-b bg-background-100">
       <div
         class="gap-4 min-w-0 md:first:max-w-35 md:last:max-w-35 max-md:first:flex-none flex flex-1 items-center justify-center first:justify-start last:justify-end"
       >
@@ -44,26 +40,15 @@ const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
         class="gap-4 min-w-0 md:first:max-w-35 md:last:max-w-35 max-md:first:flex-none flex flex-1 shrink-0 items-center justify-center first:justify-start last:justify-end"
       >
         <div
-          class="lg:max-w-xs pl-2.5 pr-1 py-1 flex w-full items-center justify-between rounded-full border border-gray-400 bg-background-200"
+          class="lg:max-w-xs ps-2.5 pe-1 py-1 flex w-full items-center justify-between rounded-full border border-gray-400 bg-background-200"
         >
           <LockClosedIcon class="text-sm text-foreground-secondary" />
 
-          <div class="pl-1.5 min-w-0 flex-1 truncate text-center text-13 text-gray-1000">
+          <div class="ps-1.5 min-w-0 flex-1 truncate text-center text-13 text-gray-1000">
             {{ address }}
           </div>
 
-          <PButton
-            variant="ghost"
-            size="xs"
-            shape="rounded"
-            class="size-6"
-            icon
-            @click="copyText(address)"
-          >
-            <Transition name="pxd-transition--fade-scale" mode="out-in">
-              <Component :is="renderIcon" class="text-sm text-foreground-secondary" />
-            </Transition>
-          </PButton>
+          <PCopyButton variant="ghost" size="xs" shape="rounded" :text="address" icon />
         </div>
       </div>
 

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

@@ -1,5 +1,5 @@
 import type { BubbleProps } from './types';
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {}, __VLS_17: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
     avatar?: (props: typeof __VLS_1) => any;
 } & {
@@ -7,10 +7,13 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_15) => any;
 } & {
-    footer?: (props: typeof __VLS_17) => any;
+    reactions?: (props: typeof __VLS_17) => any;
+} & {
+    footer?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<BubbleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BubbleProps> & Readonly<{}>, {
-    role: "user" | "assistant";
+    role: "user" | "system" | "assistant";
+    variant: "default" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;