pxd 0.0.64 → 0.1.2

package/dist/components/note/index.vue

@@ -3,116 +3,126 @@ import CheckCircleIcon from "@gdsicon/vue/check-circle";
 import InformationIcon from "@gdsicon/vue/information";
 import StopIcon from "@gdsicon/vue/stop";
 import WarningIcon from "@gdsicon/vue/warning";
-import { tv } from "tailwind-variants";
 import { computed, h } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { isTruthyProp } from "../../utils/format";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isTruthyProp } from "../../utils/format.js";
 defineOptions({
-  name: "PNote",
-  inheritAttrs: false
+	name: "PNote",
+	inheritAttrs: false
 });
 const props = defineProps({
-  variant: { type: String, required: false, default: "default" },
-  size: { type: String, required: false },
-  fill: { type: Boolean, required: false },
-  label: { type: [Boolean, String, Number, Array, null], required: false, default: true }
-});
-const noteVariant = tv({
-  base: "pxd-note gap-2 sm:items-center max-sm:flex-col flex max-w-full rounded-md border",
-  variants: {
-    size: {
-      sm: "px-2 py-1.5 text-xs",
-      md: "px-3 py-2 text-sm",
-      lg: "px-4 py-2.5 text-base"
-    },
-    variant: {
-      success: {
-        base: "border-blue-500 text-blue-900",
-        fill: "border-blue-100 bg-blue-200 text-blue-900"
-      },
-      error: {
-        base: "border-red-500 text-red-900",
-        fill: "border-red-100 bg-red-200 text-red-900"
-      },
-      warning: {
-        base: "border-amber-500 text-amber-900",
-        fill: "border-amber-100 bg-amber-200 text-amber-900"
-      },
-      default: {
-        base: "text-gray-900",
-        fill: "border-gray-100 bg-gray-200 text-gray-900"
-      },
-      primary: {
-        base: "border-gray-alpha-400 text-primary",
-        fill: "border-gray-100 bg-primary text-gray-100"
-      },
-      violet: {
-        base: "text-violet-900 border-violet-400",
-        fill: "text-violet-900 bg-violet-200 border-violet-100"
-      },
-      cyan: {
-        base: "border-teal-400 text-teal-900",
-        fill: "border-teal-100 bg-teal-200 text-teal-900"
-      }
-    },
-    fill: {
-      true: {},
-      false: {}
-    }
-  },
-  compoundVariants: [
-    { variant: "success", fill: true, class: "border-blue-100 bg-blue-200 text-blue-900" },
-    { variant: "success", fill: false, class: "border-blue-500 text-blue-900" },
-    { variant: "error", fill: true, class: "border-red-100 bg-red-200 text-red-900" },
-    { variant: "error", fill: false, class: "border-red-500 text-red-900" },
-    { variant: "warning", fill: true, class: "border-amber-100 bg-amber-200 text-amber-900" },
-    { variant: "warning", fill: false, class: "border-amber-500 text-amber-900" },
-    { variant: "default", fill: true, class: "border-gray-100 bg-gray-200 text-gray-900" },
-    { variant: "default", fill: false, class: "text-gray-900" },
-    { variant: "primary", fill: true, class: "border-gray-100 bg-primary text-gray-100" },
-    { variant: "primary", fill: false, class: "border-gray-alpha-400 text-primary" },
-    { variant: "violet", fill: true, class: "text-violet-900 bg-violet-200 border-violet-100" },
-    { variant: "violet", fill: false, class: "text-violet-900 border-violet-400" },
-    { variant: "cyan", fill: true, class: "border-teal-100 bg-teal-200 text-teal-900" },
-    { variant: "cyan", fill: false, class: "border-teal-400 text-teal-900" }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "default",
-    fill: false
-  }
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	fill: {
+		type: Boolean,
+		required: false
+	},
+	label: {
+		type: [
+			Boolean,
+			String,
+			Number,
+			null
+		],
+		required: false,
+		skipCheck: true,
+		default: true
+	}
 });
 const configProvider = useConfigProvider();
 const VARIANTS_ICON = {
-  success: CheckCircleIcon,
-  error: StopIcon,
-  warning: WarningIcon,
-  default: InformationIcon,
-  primary: InformationIcon,
-  violet: InformationIcon,
-  cyan: InformationIcon
+	success: CheckCircleIcon,
+	error: StopIcon,
+	warning: WarningIcon,
+	default: InformationIcon,
+	primary: InformationIcon,
+	violet: InformationIcon,
+	cyan: InformationIcon
 };
 const computedLabel = computed(() => {
-  const { label } = props;
-  if (isTruthyProp(label)) {
-    return VARIANTS_ICON[props.variant] || InformationIcon;
-  }
-  if (typeof label === "string" && label) {
-    return h("span", null, label);
-  }
-  return false;
-});
-const computedClasses = computed(() => {
-  return noteVariant({
-    fill: props.fill,
-    size: props.size || configProvider.size,
-    variant: props.variant
-  });
+	const { label } = props;
+	if (isTruthyProp(label)) {
+		return VARIANTS_ICON[props.variant] || InformationIcon;
+	}
+	if (typeof label === "string" && label) {
+		return h("span", null, label);
+	}
+	return false;
 });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-note gap-2 sm:items-center max-sm:flex-col flex max-w-full rounded-md border",
+	variants: {
+		size: {
+			sm: "px-2 py-1.5 text-xs",
+			md: "px-3 py-2 text-sm",
+			lg: "px-4 py-2.5 text-base"
+		},
+		variant: {
+			success: "border-blue-500 text-blue-900",
+			error: "border-red-500 text-red-900",
+			warning: "border-amber-500 text-amber-900",
+			default: "text-gray-1000",
+			primary: "border-gray-alpha-400 text-primary",
+			violet: "text-violet-900 border-violet-300",
+			cyan: "border-teal-500 text-teal-900",
+			ghost: "border-transparent"
+		},
+		fill: {}
+	},
+	compoundVariants: [
+		{
+			variant: "success",
+			fill: true,
+			class: "border-blue-400 bg-blue-200"
+		},
+		{
+			variant: "error",
+			fill: true,
+			class: "border-red-400 bg-red-200"
+		},
+		{
+			variant: "warning",
+			fill: true,
+			class: "border-amber-400 bg-amber-200"
+		},
+		{
+			variant: "default",
+			fill: true,
+			class: "border-gray-400 bg-gray-200"
+		},
+		{
+			variant: "primary",
+			fill: true,
+			class: "border-gray-100 bg-primary text-primary-foreground"
+		},
+		{
+			variant: "violet",
+			fill: true,
+			class: "border-violet-300 bg-violet-200"
+		},
+		{
+			variant: "cyan",
+			fill: true,
+			class: "border-teal-400 bg-teal-200"
+		}
+	]
+}, { selection: () => ({
+	fill: props.fill,
+	size: props.size || configProvider.size,
+	variant: props.variant
+}) });
 </script>
 
 <template>
-  <div :class="computedClasses" v-bind="$attrs">
+  <div data-note :class="classes" :data-variant="variant" v-bind="attrs">
     <div class="gap-3 flex flex-1 shrink-0">
       <slot v-if="computedLabel" name="label">
         <Component :is="computedLabel" class="size-4 font-medium h-lh shrink-0" />
@@ -123,7 +133,7 @@ const computedClasses = computed(() => {
       </span>
     </div>
 
-    <div v-if="$slots.action" class="pxd-note--action max-sm:pl-7 shrink-0">
+    <div v-if="$slots.action" class="pxd-note--action max-sm:ps-7 shrink-0">
       <slot name="action" />
     </div>
   </div>

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

@@ -8,6 +8,7 @@ export type NoteVariant =
   | 'primary'
   | 'violet'
   | 'cyan'
+  | 'ghost'
 
 export interface NoteProps {
   variant?: NoteVariant

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

@@ -12,20 +12,18 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: number | null | undefined, args_1: Event) => any;
     "update:modelValue": (args_0: number | null | undefined) => any;
-    input: (args_0: number | null | undefined) => any;
     blur: (args_0: FocusEvent) => any;
     focus: (args_0: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<NumberInputProps> & Readonly<{
     onChange?: ((args_0: number | null | undefined, args_1: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: number | null | undefined) => any) | undefined;
-    onInput?: ((args_0: number | null | undefined) => any) | undefined;
     onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onFocus?: ((args_0: FocusEvent) => any) | undefined;
 }>, {
     max: number;
+    step: number;
     min: number;
     clearValue: number | null;
-    step: number;
     controls: boolean;
     thousandsSeparator: string;
     scientific: boolean;