pxd 0.0.64 → 0.1.3

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

@@ -1,109 +1,148 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { BASIC_HEIGHTS } from "../../constants/size";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { useToggleButtonGroupContext } from "../../contexts/toggle-button";
-import { toArray } from "../../utils/format";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { useToggleButtonGroupContext } from "../../contexts/toggle-button.js";
+import { toArray } from "../../utils/format.js";
 defineOptions({
-  name: "PToggleButton",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PToggleButton",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  variant: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  label: { type: [String, Number, Array, null], required: false },
-  size: { type: String, required: false },
-  value: { type: [String, Number, Boolean], required: false, default: true },
-  modelValue: { type: [String, Number, Boolean, Array], required: false }
+	size: {
+		type: String,
+		required: false
+	},
+	label: {
+		type: null,
+		required: false
+	},
+	value: {
+		type: [
+			String,
+			Number,
+			Boolean
+		],
+		required: false,
+		default: true
+	},
+	variant: {
+		type: String,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Boolean,
+			Array
+		],
+		required: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const toggleButtonVariant = tv({
-  base: "pxd-toggle-button gap-2 font-medium relative inline-flex shrink-0 appearance-none items-center justify-center border bg-background-100 outline-none group-data-[gap=0]/toggle-button-group:not-first:-ml-px group-data-[gap=0]/toggle-button-group:not-first:rounded-l-none group-data-[gap=0]/toggle-button-group:not-last:rounded-r-none data-[state=off]:enabled:hover:z-1 data-[state=on]:z-1 motion-safe:transition-colors [&_svg]:pointer-events-none",
-  variants: {
-    size: {
-      xs: `${BASIC_HEIGHTS.xs} px-1.25 text-xs rounded-sm`,
-      sm: `${BASIC_HEIGHTS.sm} px-1.75 text-sm rounded-md`,
-      md: `${BASIC_HEIGHTS.md} px-2.5 text-sm rounded-md`,
-      lg: `${BASIC_HEIGHTS.lg} px-2.75 text-base rounded-lg`
-    },
-    variant: {
-      ghost: "border-transparent",
-      outline: ""
-    },
-    disabled: {
-      true: "cursor-not-allowed",
-      false: "hover:bg-background-hover data-[state=on]:bg-gray-300"
-    },
-    checked: {
-      true: "",
-      false: ""
-    }
-  },
-  compoundVariants: [
-    { checked: true, disabled: true, class: "bg-gray-200" },
-    { checked: false, disabled: true, class: "text-gray-400" },
-    { checked: false, disabled: false, class: "hover:text-gray-900" },
-    { variant: "outline", checked: false, disabled: true, class: "border-gray-400" },
-    { variant: "outline", checked: true, disabled: true, class: "border-gray-500 bg-gray-100" }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "ghost",
-    checked: false,
-    disabled: false
-  }
-});
 const toggleButtonGroupContext = useToggleButtonGroupContext();
-const modelValue = useModelValue(
-  toggleButtonGroupContext?.props ?? props,
-  toggleButtonGroupContext?.emits ?? emits
-);
-const configProvider = useConfigProvider();
-const isDisabled = computed(() => props.disabled || toggleButtonGroupContext?.props.disabled);
-const isChecked = computed(() => {
-  if (toggleButtonGroupContext?.props.multiple) {
-    return toArray(modelValue.value).includes(props.value);
-  }
-  return modelValue.value === props.value;
+const isDisabled = computed(() => props.disabled || toggleButtonGroupContext?.props.disabled || false);
+const computedVariant = computed(() => {
+	return props.variant || toggleButtonGroupContext?.props.variant || "default";
 });
-const computedClasses = computed(() => {
-  return toggleButtonVariant({
-    size: props.size || toggleButtonGroupContext?.props.size || configProvider.size,
-    checked: isChecked.value,
-    variant: props.variant || toggleButtonGroupContext?.props.variant,
-    disabled: isDisabled.value
-  });
+const modelValue = useModelValue(toggleButtonGroupContext?.props ?? props, toggleButtonGroupContext?.emits ?? emits);
+const isChecked = computed(() => {
+	if (toggleButtonGroupContext?.props.multiple) {
+		return toArray(modelValue.value).includes(props.value);
+	}
+	return modelValue.value === props.value;
 });
+const configProvider = useConfigProvider();
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-toggle-button gap-2 font-medium relative inline-flex shrink-0 appearance-none items-center justify-center border self-focus-ring outline-none group-data-[gap=0]/toggle-button-group:not-first:rounded-l-none group-data-[gap=0]/toggle-button-group:not-first:border-l-0 group-data-[gap=0]/toggle-button-group:not-last:rounded-r-none focus-visible:z-1 motion-safe:transition-colors",
+	variants: {
+		size: {
+			xs: `${BASIC_HEIGHTS.xs} px-1.25 text-xs rounded-sm`,
+			sm: `${BASIC_HEIGHTS.sm} px-1.75 text-sm rounded-md`,
+			md: `${BASIC_HEIGHTS.md} px-2.5 text-sm rounded-md`,
+			lg: `${BASIC_HEIGHTS.lg} px-2.75 text-base rounded-lg`
+		},
+		variant: {
+			default: "border-gray-400 bg-background-100",
+			ghost: "border-transparent bg-transparent"
+		},
+		disabled: {
+			true: "cursor-not-allowed",
+			false: "cursor-pointer"
+		},
+		checked: {}
+	},
+	compoundVariants: [
+		{
+			checked: true,
+			disabled: false,
+			class: "bg-gray-300"
+		},
+		{
+			checked: true,
+			disabled: true,
+			class: "bg-gray-200"
+		},
+		{
+			checked: false,
+			disabled: true,
+			class: "text-gray-400"
+		},
+		{
+			checked: false,
+			disabled: false,
+			class: "hover:bg-background-hover"
+		},
+		{
+			variant: "default",
+			checked: true,
+			disabled: true,
+			class: "bg-gray-100"
+		}
+	]
+}, { selection: () => ({
+	size: props.size || toggleButtonGroupContext?.props.size || configProvider.size,
+	checked: isChecked.value,
+	variant: computedVariant.value,
+	disabled: isDisabled.value
+}) });
 function onToggleClick() {
-  const newCheckedState = !isChecked.value;
-  if (toggleButtonGroupContext) {
-    if (toggleButtonGroupContext.props.multiple) {
-      const formattedValue = toArray(modelValue.value);
-      modelValue.value = newCheckedState ? [...formattedValue, props.value] : formattedValue.filter((v) => v !== props.value);
-    } else {
-      modelValue.value = props.value;
-    }
-    return;
-  }
-  modelValue.value = newCheckedState;
+	const newCheckedState = !isChecked.value;
+	if (toggleButtonGroupContext) {
+		if (toggleButtonGroupContext.props.multiple) {
+			const formattedValue = toArray(modelValue.value);
+			modelValue.value = newCheckedState ? [...formattedValue, props.value] : formattedValue.filter((v) => v !== props.value);
+		} else {
+			modelValue.value = props.value;
+		}
+		return;
+	}
+	modelValue.value = newCheckedState;
 }
 </script>
 
 <template>
   <button
+    data-toggle-button
     type="button"
     :aria-pressed="isChecked"
     :data-state="isChecked ? 'on' : 'off'"
+    :data-variant="computedVariant"
     :disabled="isDisabled"
-    :class="computedClasses"
-    v-bind="$attrs"
-    @click="onToggleClick"
+    :class="classes"
+    v-bind="attrs"
+    @click.stop="onToggleClick"
   >
     <slot>
       {{ label }}

package/dist/components/toggle-button/types.d.ts

@@ -1,13 +1,15 @@
-import type { ComponentLabel, ComponentSize, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentSize, ComponentValue } from '../../types/shared/props'
 import type { CheckboxProps } from '../checkbox/types'
 
+type ToggleButtonModelValue = ComponentValue | boolean
+
 export interface ToggleButtonProps {
-  variant?: 'ghost' | 'outline'
-  disabled?: boolean
-  label?: ComponentLabel
   size?: ComponentSize
-  value?: ComponentValue
-  modelValue?: ComponentValue | ComponentValue[]
+  label?: ComponentLabel
+  value?: ToggleButtonModelValue
+  variant?: 'default' | 'ghost'
+  disabled?: boolean
+  modelValue?: ToggleButtonModelValue | ToggleButtonModelValue[]
 }
 
 export interface ToggleButtonEmits {

package/dist/components/toggle-button-group/index.d.vue.ts

@@ -1,17 +1,18 @@
 import type { ToggleButtonGroupProps } from './types';
-declare var __VLS_8: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ToggleButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
+    change: (args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<ToggleButtonGroupProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any) | undefined;
 }>, {
-    modelValue: import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[];
-    gap: import("../../types/shared").ResponsiveValue<string | number>;
+    variant: "default" | "ghost";
+    modelValue: import("../../types/shared/props.js").ComponentValue | import("../../types/shared/props.js").ComponentValue[];
+    gap: import("../../types/shared/props.js").ResponsiveValue<string | number>;
     multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/toggle-button-group/index.vue

@@ -1,65 +1,85 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { provideToggleButtonGroupContext } from "../../contexts/toggle-button";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { provideToggleButtonGroupContext } from "../../contexts/toggle-button.js";
 import PStack from "../stack/index.vue";
 import PToggleButton from "../toggle-button/index.vue";
 defineOptions({
-  name: "PToggleButtonGroup",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PToggleButtonGroup",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  gap: { type: [String, Number, Object], required: false, default: 0 },
-  size: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  multiple: { type: Boolean, required: false, default: true },
-  options: { type: Array, required: false },
-  variant: { type: String, required: false },
-  modelValue: { type: [String, Number, Boolean, Array], required: false, default: () => [] }
+	gap: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false,
+		default: 0
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	multiple: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	options: {
+		type: Array,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Array
+		],
+		required: false,
+		default: () => []
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const configProvider = useConfigProvider();
-const toggleButtonGroupVariant = tv({
-  base: "pxd-toggle-button-group group/toggle-button-group w-max overflow-hidden",
-  variants: {
-    size: {
-      sm: "rounded-md",
-      md: "rounded-md",
-      lg: "rounded-lg"
-    },
-    variant: {
-      outline: "",
-      ghost: ""
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-toggle-button-group group/toggle-button-group w-max",
+	variants: { size: {
+		sm: "rounded-md",
+		md: "rounded-md",
+		lg: "rounded-lg"
+	} }
+}, { selection: () => ({ size: props.size || configProvider.size }) });
+provideToggleButtonGroupContext({
+	props,
+	emits
 });
-const computedSize = computed(() => props.size || configProvider.size);
-const computedClasses = computed(
-  () => toggleButtonGroupVariant({
-    size: computedSize.value,
-    variant: props.variant
-  })
-);
-provideToggleButtonGroupContext({ props, emits });
 </script>
 
 <template>
   <PStack
     role="group"
-    :class="computedClasses"
+    data-toggle-button-group
+    :class="classes"
     aria-label="Toggle Button Group"
     align="center"
     :gap="gap"
     :data-gap="gap"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
     <slot>
       <PToggleButton v-for="option in options" :key="option.value" v-bind="option" />

package/dist/components/toggle-button-group/types.d.ts

@@ -3,7 +3,7 @@ import type {
   ComponentValue,
   ComponentOption,
   ResponsiveValue,
-} from '../../types/shared'
+} from '../../types/shared/props'
 import type { CheckboxProps } from '../checkbox/types'
 
 export interface ToggleButtonGroupProps {
@@ -12,7 +12,7 @@ export interface ToggleButtonGroupProps {
   disabled?: boolean
   multiple?: boolean
   options?: ComponentOption[]
-  variant?: 'ghost' | 'outline'
+  variant?: 'default' | 'ghost'
   modelValue?: ComponentValue | ComponentValue[]
 }
 

package/dist/components/tool-call/index.d.vue.ts

@@ -0,0 +1,6 @@
+import type { ToolCallProps, ToolCallStatus } from './types';
+declare const __VLS_export: import("vue").DefineComponent<ToolCallProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolCallProps> & Readonly<{}>, {
+    status: ToolCallStatus;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/tool-call/index.vue

@@ -0,0 +1,209 @@
+<script setup>
+import CheckCircleFillIcon from "@gdsicon/vue/check-circle-fill";
+import ChevronDownIcon from "@gdsicon/vue/chevron-down";
+import ClockIcon from "@gdsicon/vue/clock";
+import CrossCircleFillIcon from "@gdsicon/vue/cross-circle-fill";
+import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
+import { computed, shallowRef } from "vue";
+import { useCollapseMotion } from "../../composables/_internal/use-collapse-motion.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import PBadge from "../badge/index.vue";
+defineOptions({
+	name: "PToolCall",
+	inheritAttrs: false
+});
+const props = defineProps({
+	name: {
+		type: String,
+		required: true
+	},
+	status: {
+		type: String,
+		required: false,
+		default: "pending"
+	},
+	input: {
+		type: null,
+		required: false
+	},
+	output: {
+		type: null,
+		required: false
+	}
+});
+const STATUS_META = {
+	pending: {
+		icon: ClockIcon,
+		iconClass: "text-foreground-secondary",
+		badge: "gray-subtle"
+	},
+	running: {
+		icon: LoaderCircleIcon,
+		iconClass: "text-blue-900 motion-safe:animate-spin",
+		badge: "blue-subtle"
+	},
+	completed: {
+		icon: CheckCircleFillIcon,
+		iconClass: "text-green-900",
+		badge: "green-subtle"
+	},
+	error: {
+		icon: CrossCircleFillIcon,
+		iconClass: "text-red-900",
+		badge: "red-subtle"
+	}
+};
+const isOpen = shallowRef(true);
+const contentRef = shallowRef();
+const statusMeta = computed(() => STATUS_META[props.status]);
+const inputText = computed(() => formatPayload(props.input));
+const outputText = computed(() => formatPayload(props.output));
+const inputTokens = computed(() => inputText.value ? tokenizeJson(inputText.value) : []);
+const outputTokens = computed(() => outputText.value ? tokenizeJson(outputText.value) : []);
+const configProvider = useConfigProvider();
+const statusLabel = computed(() => configProvider.locale.toolCall[props.status]);
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isOpen);
+function formatPayload(value) {
+	if (value === undefined) {
+		return "";
+	}
+	if (typeof value === "string") {
+		try {
+			return JSON.stringify(JSON.parse(value), null, 2);
+		} catch {
+			return value;
+		}
+	}
+	try {
+		return JSON.stringify(value, null, 2) ?? "";
+	} catch {
+		return String(value);
+	}
+}
+function tokenizeJson(source) {
+	const tokens = [];
+	const re = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false|null)\b|([^\s"]+)|(\s+)/g;
+	let match;
+	while (match = re.exec(source)) {
+		const [, stringLiteral, keySuffix, numberLiteral, literal, punct, whitespace] = match;
+		if (stringLiteral) {
+			tokens.push({
+				type: keySuffix ? "key" : "string",
+				value: keySuffix ? stringLiteral + keySuffix : stringLiteral
+			});
+			continue;
+		}
+		if (numberLiteral) {
+			tokens.push({
+				type: "number",
+				value: numberLiteral
+			});
+			continue;
+		}
+		if (literal) {
+			tokens.push({
+				type: "literal",
+				value: literal
+			});
+			continue;
+		}
+		tokens.push({
+			type: "text",
+			value: punct || whitespace || ""
+		});
+	}
+	return tokens;
+}
+function tokenClass(type) {
+	switch (type) {
+		case "key": return "text-blue-900";
+		case "string": return "text-foreground";
+		case "number": return "text-blue-700";
+		case "literal": return "text-teal-900";
+		default: return "text-foreground-secondary";
+	}
+}
+function onToggleClick() {
+	isOpen.value = !isOpen.value;
+}
+function onDetailsToggle(ev) {
+	const details = ev.currentTarget;
+	if (details.open && !isOpen.value) {
+		skipEnterMotion();
+		isOpen.value = true;
+	}
+}
+</script>
+
+<template>
+  <details
+    data-tool-call
+    class="pxd-tool-call w-full max-w-full rounded-xl border bg-background-100"
+    v-bind="$attrs"
+    :open="detailsOpen"
+    @toggle="onDetailsToggle"
+  >
+    <summary
+      class="pxd-tool-call--trigger gap-2 p-3 text-sm flex w-full cursor-pointer touch-manipulation list-none appearance-none items-center self-focus-ring outline-none select-none"
+      @click.prevent="onToggleClick"
+    >
+      <Component :is="statusMeta.icon" class="size-4 shrink-0" :class="statusMeta.iconClass" />
+
+      <span class="pxd-tool-call--name min-w-0 font-medium flex-1 truncate text-foreground">
+        {{ name }}
+      </span>
+
+      <PBadge
+        class="pxd-tool-call--status shrink-0"
+        size="sm"
+        shape="rounded"
+        :variant="statusMeta.badge"
+      >
+        {{ statusLabel }}
+      </PBadge>
+
+      <ChevronDownIcon
+        class="size-4 shrink-0 text-foreground-secondary motion-safe:transition-transform"
+        :class="{ '-rotate-180': isOpen }"
+      />
+    </summary>
+
+    <div
+      ref="contentRef"
+      class="pxd-tool-call--content overflow-hidden border-t"
+      :class="{ 'motion-safe:transition-[height]': isOpen || isLeaving }"
+    >
+      <div class="gap-4 p-3 flex flex-col">
+        <div v-if="inputText" class="pxd-tool-call--section gap-2 flex flex-col">
+          <div
+            class="pxd-tool-call--label text-xs font-medium tracking-wide text-foreground-secondary uppercase"
+          >
+            {{ configProvider.locale.toolCall.input }}
+          </div>
+          <pre
+            class="pxd-tool-call--code m-0 p-3 text-xs leading-relaxed max-w-full overflow-x-auto rounded-lg bg-gray-100 font-mono whitespace-pre"
+          ><span
+              v-for="(token, index) of inputTokens"
+              :key="`input-${index}`"
+              :class="tokenClass(token.type)"
+            >{{ token.value }}</span></pre>
+        </div>
+
+        <div v-if="outputText" class="pxd-tool-call--section gap-2 flex flex-col">
+          <div
+            class="pxd-tool-call--label text-xs font-medium tracking-wide text-foreground-secondary uppercase"
+          >
+            {{ configProvider.locale.toolCall.output }}
+          </div>
+          <pre
+            class="pxd-tool-call--code m-0 p-3 text-xs leading-relaxed max-w-full overflow-x-auto rounded-lg bg-gray-100 font-mono whitespace-pre"
+          ><span
+              v-for="(token, index) of outputTokens"
+              :key="`output-${index}`"
+              :class="tokenClass(token.type)"
+            >{{ token.value }}</span></pre>
+        </div>
+      </div>
+    </div>
+  </details>
+</template>

package/dist/components/tool-call/types.d.ts

@@ -0,0 +1,8 @@
+export type ToolCallStatus = 'pending' | 'running' | 'completed' | 'error'
+
+export interface ToolCallProps {
+  name: string
+  status?: ToolCallStatus
+  input?: unknown
+  output?: unknown
+}