pxd 0.0.7 → 0.0.9

package/README.md

@@ -1,6 +1,9 @@
 # PXD
 A universal UI component library for Vue2&3
 
+> [!WARNING]
+> The project is under active development and is not ready for production.
+
 ## Contribution
 
 ### Dev
@@ -9,8 +12,6 @@ A universal UI component library for Vue2&3
 pnpm install
 
 pnpm dev
-
-pnpm dev:docs
 ```
 
 ### Build

package/dist/components/button/index.vue

@@ -1,61 +1,69 @@
 <script setup>
+import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
 import { useConfigProvider } from "../../composables/useConfigProviderContext";
+import Spinner from "../spinner/index.vue";
 defineOptions({
   name: "PButton"
 });
 const props = defineProps({
+  as: { type: null, required: false, default: "button" },
   variant: { type: null, required: false, default: "outline" },
   size: { type: null, required: false },
-  disabled: { type: Boolean, required: false },
+  class: { type: [String, Object, Array], required: false },
+  shape: { type: String, required: false },
   block: { type: Boolean, required: false },
-  href: { type: String, required: false },
-  shape: { type: String, required: false }
+  loading: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
 });
 const config = useConfigProvider();
 const SIZES = {
-  xs: "px-1 rounded-md h-6 text-sm ",
-  sm: "px-1.5 rounded-md h-7 text-sm ",
-  md: "px-2.5 rounded-md h-8 text-sm ",
-  lg: "px-3.5 rounded-lg h-9 text-base "
+  xs: "px-1 rounded-md h-6 text-sm",
+  sm: "px-1.5 rounded-md h-7 text-sm",
+  md: "px-2.5 rounded-md h-8 text-sm",
+  lg: "px-3.5 rounded-lg h-9 text-base"
 };
 const VARIANTS = {
-  outline: "bg-background text-foreground hover:bg-background-hover active:bg-background-active border-input ",
-  ghost: "bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 border-transparent ",
-  primary: "bg-foreground text-background hover:bg-foreground/80 active:bg-foreground border-transparent ",
-  error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 border-transparent ",
-  warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 border-transparent ",
-  success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-800 border-transparent "
+  outline: "bg-background text-foreground hover:bg-background-hover active:bg-background-active border-input",
+  ghost: "bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 border-transparent",
+  primary: "bg-foreground text-background hover:bg-foreground/80 active:bg-foreground border-transparent",
+  error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 border-transparent",
+  warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 border-transparent",
+  success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-800 border-transparent"
 };
-const DISABLED_CLASS_NAMES = "disabled:bg-gray-100 !text-gray-700 border-none shadow-[0_0_0_1px_hsl(var(--gray-200-value))] !cursor-not-allowed ";
+const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:bg-gray-100 cursor-not-allowed text-gray-700 border-gray-300";
+const computedDisabled = computed(() => {
+  return props.disabled || props.loading;
+});
 const computedClassNames = computed(() => {
-  let classNames = "";
-  classNames += VARIANTS[props.variant] || VARIANTS.outline;
-  classNames += SIZES[props.size || config.size];
-  classNames += props.block ? "flex " : "inline-flex ";
-  if (props.disabled) {
-    classNames += DISABLED_CLASS_NAMES;
+  const classNames = ["pxd-button cursor-pointer motion-safe:transition-colors items-center justify-center border"];
+  classNames.push(VARIANTS[props.variant] || VARIANTS.outline);
+  classNames.push(SIZES[props.size || config.size]);
+  classNames.push(props.block ? "flex " : "inline-flex");
+  if (computedDisabled.value) {
+    classNames.push(DISABLED_CLASS_NAMES);
   }
-  if (props.shape === "square") {
-    classNames += "!rounded-none ";
-  } else if (props.shape === "rounded") {
-    classNames += "!rounded-full ";
+  if (props.shape) {
+    classNames.push(
+      props.shape === "square" ? "rounded-none" : "rounded-full"
+    );
   }
-  return classNames;
+  return twMerge(classNames, props.class);
 });
 </script>
 
 <template>
   <Component
-    :is="props.href ? 'router-link' : 'button'"
-    class="pxd-button cursor-pointer transition-colors items-center justify-center border"
+    :is="as"
+    role="button"
     :class="computedClassNames"
-    :disabled="disabled"
-    :to="href"
+    :disabled="computedDisabled"
   >
+    <Spinner v-if="loading" />
+
     <slot name="prefix" />
 
-    <span class="px-1 inline-flex truncate">
+    <span class="px-1.5 inline-flex truncate">
       <slot />
     </span>
 

package/dist/components/color-scheme/index.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { MoonIcon, SunIcon } from "gdsi/vue";
+import { customRef } from "vue";
+import Button from "../button/index.vue";
+const emits = defineEmits(["toggle"]);
+const colorTransitions = {
+  dark: "light",
+  light: "dark"
+};
+const colorMode = customRef((track, trigger) => {
+  const storageKey = "fe.system.color-mode";
+  const rootClassList = document.documentElement.classList;
+  let curMode = rootClassList.contains("dark") ? "dark" : "light";
+  return {
+    get() {
+      track();
+      return curMode;
+    },
+    set(newMode) {
+      if (newMode === curMode)
+        return;
+      rootClassList.remove(curMode);
+      rootClassList.add(newMode);
+      localStorage.setItem(storageKey, newMode);
+      curMode = newMode;
+      trigger();
+    }
+  };
+});
+function toggleColorMode() {
+  colorMode.value = colorTransitions[colorMode.value];
+  emits("toggle", colorMode.value);
+}
+</script>
+
+<template>
+  <Button aria-label="Toggle color mode" @click="toggleColorMode">
+    <Transition name="color-mode" mode="out-in">
+      <Component :is="colorMode === 'light' ? SunIcon : MoonIcon" class="size-[1em]" />
+    </Transition>
+  </Button>
+</template>
+
+<style>
+@media (prefers-reduced-motion: no-preference) {
+  .color-mode-enter-active,
+  .color-mode-leave-active {
+    transition: transform 0.15s ease-out;
+  }
+
+  .color-mode-enter-from {
+    transform: rotate(-45deg) scale(0.68);
+  }
+
+  .color-mode-leave-to {
+    transform: rotate(45deg) scale(0.68);
+  }
+}
+</style>

package/dist/components/config-provider/index.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { defaultConfig, provideConfigProvider } from "../../composables/useConfigProviderContext";
+import { provideConfigProvider } from "../../composables/useConfigProviderContext";
 defineOptions({
   name: "PConfigProvider"
 });
-const props = defineProps(/* @__PURE__ */ _mergeDefaults({
-  as: { type: null, required: false },
-  size: { type: String, required: false }
-}, { as: "div", ...defaultConfig }));
+const props = defineProps({
+  as: { type: null, required: false, default: "div" },
+  size: { type: String, required: false, default: "md" }
+});
 provideConfigProvider(props);
 </script>
 

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

@@ -1,36 +1,79 @@
 <script setup>
 import { shallowRef } from "vue";
 import Button from "../button/index.vue";
-defineProps({
+defineOptions({
+  name: "PHoldButton"
+});
+const props = defineProps({
   scale: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
   durations: { type: [Number, String], required: false, default: 2 },
-  maskColor: { type: String, required: false, default: "hsl(var(--red-600-value))" }
+  maskColor: { type: String, required: false, default: "hsl(var(--red-600-value))" },
+  cancelable: { type: Boolean, required: false }
 });
-const emits = defineEmits(["trigger", "confirm"]);
-let isPointerDown = true;
-const isConfirm = shallowRef(false);
-function onPointerDown() {
-  isPointerDown = true;
-  isConfirm.value = false;
+const emits = defineEmits(["confirm", "canceled", "finished"]);
+let isStarted = false;
+const status = shallowRef("idle");
+function onPointerEnter() {
+  if (props.disabled) {
+    return;
+  }
+  if (!isStarted) {
+    status.value = "idle";
+    return;
+  }
+  if (status.value === "canceled") {
+    status.value = "loading";
+  }
 }
-function onTransitionEnd(ev) {
-  const targetElement = ev.target;
-  const styleValue = getComputedStyle(targetElement).getPropertyValue(ev.propertyName);
-  if (isPointerDown && styleValue === "inset(0px)") {
-    emits("trigger");
-    isPointerDown = false;
-    isConfirm.value = true;
+function onPointerLeave() {
+  if (props.disabled || !isStarted || !props.cancelable) {
+    return;
   }
+  status.value = "canceled";
+  emits("canceled");
+}
+function onPointerDown() {
+  if (props.disabled) {
+    return;
+  }
+  isStarted = true;
+  status.value = "loading";
 }
 function onPointerUp() {
-  emits("confirm", isConfirm.value);
-  isPointerDown = false;
-  isConfirm.value = false;
+  if (props.disabled) {
+    return;
+  }
+  const isConfirmed = status.value === "confirmed";
+  isStarted = false;
+  status.value = "idle";
+  emits("finished", isConfirmed);
+}
+function onTransitionEnd({ target, propertyName }) {
+  if (status.value !== "loading") {
+    return;
+  }
+  const stylesValue = getComputedStyle(target).getPropertyValue(propertyName);
+  const isConfirmed = stylesValue === "inset(0px)";
+  if (isConfirmed) {
+    emits("confirm");
+    status.value = "confirmed";
+    return;
+  }
+  status.value = "loading";
 }
 </script>
 
 <template>
-  <Button class="pxd-hold-button relative !transition-all" :class="{ scale }" @pointerdown="onPointerDown" @pointerup="onPointerUp">
+  <Button
+    class="pxd-hold-button relative motion-safe:transition-all"
+    :class="{ scale, effective: status !== 'canceled' }"
+    :disabled="disabled"
+    @pointerdown="onPointerDown"
+    @pointerup="onPointerUp"
+    @pointerenter="onPointerEnter"
+    @pointerleave="onPointerLeave"
+  >
     <template #prefix>
       <slot name="prefix" />
     </template>
@@ -41,7 +84,7 @@ function onPointerUp() {
       <slot name="suffix" />
       <div
         class="pxd-hold-button--overlay absolute -inset-px bg-(--mc) rounded-[inherit] pointer-events-none"
-        :class="{ confirm: isConfirm }"
+        :class="{ finished: status === 'confirmed' }"
         :style="`--ds:${durations}s;--mc:${maskColor}`"
         @transitionend="onTransitionEnd"
       />
@@ -50,23 +93,23 @@ function onPointerUp() {
 </template>
 
 <style lang="postcss">
+.pxd-hold-button.scale:active {
+  transform: scale(.97);
+}
+
 .pxd-hold-button--overlay {
-  --opacity: .48;
+  --opacity: .45;
   opacity: var(--opacity);
   clip-path: inset(0 100% 0 0);
   transition: clip-path .1s ease-out, opacity 0s linear;
 
-  &.confirm {
-    --opacity: .72;
+  &.finished {
+    --opacity: .68;
   }
 }
 
-.pxd-hold-button.scale:active {
-  transform: scale(.97);
-}
-
-.pxd-hold-button:active .pxd-hold-button--overlay {
-  clip-path: inset(0);
+.pxd-hold-button.effective:not(.is-disabled):active .pxd-hold-button--overlay {
+  clip-path: inset(0px);
   transition: clip-path var(--ds) ease-out, opacity .2s ease-out;
 }
 </style>

package/dist/components/index.d.ts

@@ -1,3 +1,7 @@
 export { default as Button } from './button/index.vue';
+export { default as ColorScheme } from './color-scheme/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
 export { default as HoldButton } from './hold-button/index.vue';
+export { default as LinkButton } from './link-button/index.vue';
+export { default as MoreButton } from './more-button/index.vue';
+export { default as Spinner } from './spinner/index.vue';

package/dist/components/index.js

@@ -1,3 +1,7 @@
 export { default as Button } from "./button/index.vue";
+export { default as ColorScheme } from "./color-scheme/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
 export { default as HoldButton } from "./hold-button/index.vue";
+export { default as LinkButton } from "./link-button/index.vue";
+export { default as MoreButton } from "./more-button/index.vue";
+export { default as Spinner } from "./spinner/index.vue";

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

@@ -0,0 +1,56 @@
+<script setup>
+import { ExternalIcon } from "gdsi/vue";
+import Button from "../button/index.vue";
+defineOptions({
+  name: "PLinkButton"
+});
+const props = defineProps({
+  href: { type: String, required: true },
+  align: { type: String, required: false, default: "left" },
+  target: { type: String, required: false, default: "_self" },
+  externalIcon: { type: Boolean, required: false }
+});
+const alignClassName = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+function linkAttrs() {
+  if (!props.href) {
+    return null;
+  }
+  const firstChar = props.href.slice(0, 1);
+  if (["#", "/"].includes(firstChar)) {
+    return {
+      as: "router-link",
+      to: props.href
+    };
+  }
+  return {
+    as: "a",
+    href: props.href,
+    target: props.target
+  };
+}
+</script>
+
+<template>
+  <Button
+    v-bind="linkAttrs()"
+    role="link"
+    rel="noopener noreferrer"
+    class="pxd-link-button !no-underline"
+    :class="alignClassName[align]"
+  >
+    <template #prefix>
+      <slot name="prefix" />
+    </template>
+
+    <slot />
+
+    <template #suffix>
+      <slot name="suffix" />
+      <ExternalIcon v-if="externalIcon" class="opacity-50 scale-y-90" />
+    </template>
+  </Button>
+</template>

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

@@ -0,0 +1,53 @@
+<script setup>
+import { ChevronDownIcon } from "gdsi/vue";
+import { computed } from "vue";
+import Button from "../button/index.vue";
+defineOptions({
+  name: "PxdMoreButton",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  moreText: { type: String, required: false, default: "Show More" },
+  lessText: { type: String, required: false, default: "Show Less" },
+  modelValue: { type: Boolean, required: false, default: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const isExpanded = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  }
+});
+function onToggleExpand() {
+  isExpanded.value = !isExpanded.value;
+}
+</script>
+
+<template>
+  <div class="pxd-more-button flex justify-center items-center relative px-4">
+    <Button variant="outline" shape="rounded" v-bind="$attrs" class="z-10" @click="onToggleExpand">
+      {{ isExpanded ? lessText : moreText }}
+
+      <template #suffix>
+        <ChevronDownIcon class="-ml-0.5 motion-safe:transition-transform motion-safe:duration-200" :class="{ 'rotate-180': isExpanded }" />
+      </template>
+    </Button>
+  </div>
+</template>
+
+<style>
+.pxd-more-button::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  display: block;
+  width: 100%;
+  border-bottom: 1px solid var(--gray-alpha-300);
+}
+</style>

package/dist/components/spinner/index.vue

@@ -0,0 +1,18 @@
+<script setup>
+const ITEMS_COUNT = 12;
+const ROTATE_STEP = 360 / ITEMS_COUNT;
+const OPACITY_STEP = 1 / ITEMS_COUNT;
+</script>
+
+<template>
+  <div class="pxd-spinner relative text-gray-700 motion-safe:animate-spin overflow-hidden pointer-events-none size-[1em]">
+    <div class="absolute left-1/2 top-1/2 w-full h-full">
+      <div
+        v-for="i of ITEMS_COUNT"
+        :key="i"
+        class="pxd-spinner-item absolute rounded bg-current left-[-10%] top-[-3.9%] w-[24%] h-[8%]"
+        :style="{ opacity: i * OPACITY_STEP, transform: `rotate(${i * ROTATE_STEP}deg) translate(146%)` }"
+      />
+    </div>
+  </div>
+</template>

package/dist/composables/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useConfigProviderContext.js';
+export * from './useMediaQuery.js';

package/dist/composables/index.js

@@ -0,0 +1,2 @@
+export * from "./useConfigProviderContext.js";
+export * from "./useMediaQuery.js";

package/dist/composables/useConfigProviderContext.d.ts

@@ -3,6 +3,5 @@ export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface ConfigProviderProps {
     size?: ComponentSize;
 }
-export declare const defaultConfig: Required<ConfigProviderProps>;
 export declare function provideConfigProvider(configProvider: ConfigProviderProps): void;
 export declare function useConfigProvider(): Required<ConfigProviderProps>;

package/dist/composables/useConfigProviderContext.js

@@ -1,11 +1,11 @@
 import { inject, provide } from "vue";
 export const injectionKey = "configProvider";
-export const defaultConfig = {
-  size: "md"
-};
 export function provideConfigProvider(configProvider) {
   provide(injectionKey, configProvider);
 }
 export function useConfigProvider() {
+  const defaultConfig = {
+    size: "md"
+  };
   return inject(injectionKey, defaultConfig);
 }

package/dist/composables/useMediaQuery.d.ts

@@ -0,0 +1,13 @@
+export declare function useMediaQuery(query: string): import("vue").ShallowRef<boolean, boolean>;
+export declare const MEDIA_QUERY: {
+    MOTION_REDUCE: string;
+    MOTION_NO_PREFERENCE: string;
+    MOTION_NO_REDUCE: string;
+    COLOR_SCHEME_LIGHT: string;
+    COLOR_SCHEME_DARK: string;
+    COLOR_SCHEME_NO_PREFERENCE: string;
+    SCROLLBAR_WIDTH: string;
+    SCROLLBAR_WIDTH_NONE: string;
+    SCROLLBAR_HEIGHT: string;
+    SCROLLBAR_HEIGHT_NONE: string;
+};

package/dist/composables/useMediaQuery.js

@@ -0,0 +1,28 @@
+import { onUnmounted, shallowRef } from "vue";
+export function useMediaQuery(query) {
+  const matches = shallowRef(false);
+  if (typeof window !== "undefined" && window.matchMedia) {
+    matches.value = window.matchMedia(query).matches;
+    const mediaQuery = window.matchMedia(query);
+    const handler = (event) => {
+      matches.value = event.matches;
+    };
+    mediaQuery.addEventListener("change", handler, { passive: true });
+    onUnmounted(() => {
+      mediaQuery.removeEventListener("change", handler);
+    });
+  }
+  return matches;
+}
+export const MEDIA_QUERY = {
+  MOTION_REDUCE: "(prefers-reduced-motion: reduce)",
+  MOTION_NO_PREFERENCE: "(prefers-reduced-motion: no-preference)",
+  MOTION_NO_REDUCE: "(prefers-reduced-motion: no-reduce)",
+  COLOR_SCHEME_LIGHT: "(prefers-color-scheme: light)",
+  COLOR_SCHEME_DARK: "(prefers-color-scheme: dark)",
+  COLOR_SCHEME_NO_PREFERENCE: "(prefers-color-scheme: no-preference)",
+  SCROLLBAR_WIDTH: "(scrollbar-width: thin)",
+  SCROLLBAR_WIDTH_NONE: "(scrollbar-width: none)",
+  SCROLLBAR_HEIGHT: "(scrollbar-height: thin)",
+  SCROLLBAR_HEIGHT_NONE: "(scrollbar-height: none)"
+};

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 import type { App } from 'vue';
 export * from './components/index';
-export default function install(app: App): void;
+export default function install(app: App, prefix?: string): void;

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as components from "./components/index.js";
 export * from "./components/index.js";
-export default function install(app) {
+export default function install(app, prefix = "P") {
   Object.entries(components).forEach(([key, component]) => {
-    app.component(key, component);
+    app.component(`${prefix}${key}`, component);
   });
 }

package/dist/plugins/nuxt.js

@@ -1,6 +1,5 @@
 import { addComponent, defineNuxtModule } from "@nuxt/kit";
-import * as components from "../index.js";
-import { name } from "../../package.json";
+import * as components from "../components/index.js";
 export default defineNuxtModule({
   meta: {
     name: "pxd",
@@ -10,14 +9,14 @@ export default defineNuxtModule({
     }
   },
   defaults: {
-    prefix: ""
+    prefix: "P"
   },
   async setup(options) {
     for (const component in components) {
       addComponent({
         name: `${options.prefix}${component}`,
         export: component,
-        filePath: name
+        filePath: "pxd"
       });
     }
   }

package/dist/styles/tokens.css

@@ -0,0 +1,242 @@
+:root {
+  --radius: 0.5rem;
+
+  --background-100: #fff;
+  --background-200: #f8f8f8;
+
+  /* --accents-1: #fafafa;
+  --accents-2: #eaeaea;
+  --accents-3: #999;
+  --accents-4: #888;
+  --accents-5: #666;
+  --accents-6: #444;
+  --accents-7: #333;
+  --accents-8: #111; */
+
+  --gray-alpha-100: hsla(0, 0%, 0%, 0.05);
+  --gray-alpha-200: hsla(0, 0%, 0%, 0.08);
+  --gray-alpha-300: hsla(0, 0%, 0%, 0.12);
+  --gray-alpha-400: hsla(0, 0%, 0%, 0.17);
+  --gray-alpha-500: hsla(0, 0%, 0%, 0.21);
+  --gray-alpha-600: hsla(0, 0%, 0%, 0.34);
+  --gray-alpha-700: hsla(0, 0%, 0%, 0.44);
+  --gray-alpha-800: hsla(0, 0%, 0%, 0.51);
+  --gray-alpha-900: hsla(0, 0%, 0%, 0.61);
+  --gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
+
+  --gray-100-value: 0, 0%, 95%;
+  --gray-200-value: 0, 0%, 93%;
+  --gray-300-value: 0, 0%, 90%;
+  --gray-400-value: 0, 0%, 85%;
+  --gray-500-value: 0, 0%, 79%;
+  --gray-600-value: 0, 0%, 66%;
+  --gray-700-value: 0, 0%, 56%;
+  --gray-800-value: 0, 0%, 49%;
+  --gray-900-value: 0, 0%, 40%;
+  --gray-1000-value: 0, 0%, 9%;
+
+  --blue-100-value: 212, 100%, 97%;
+  --blue-200-value: 210, 100%, 96%;
+  --blue-300-value: 210, 100%, 94%;
+  --blue-400-value: 209, 100%, 90%;
+  --blue-500-value: 209, 100%, 80%;
+  --blue-600-value: 208, 100%, 66%;
+  --blue-700-value: 212, 100%, 48%;
+  --blue-800-value: 212, 100%, 41%;
+  --blue-900-value: 211, 100%, 42%;
+  --blue-1000-value: 211, 100%, 15%;
+
+  --red-100-value: 0, 100%, 97%;
+  --red-200-value: 0, 100%, 96%;
+  --red-300-value: 0, 100%, 95%;
+  --red-400-value: 0, 90%, 92%;
+  --red-500-value: 0, 82%, 85%;
+  --red-600-value: 359, 90%, 71%;
+  --red-700-value: 358, 75%, 59%;
+  --red-800-value: 358, 70%, 52%;
+  --red-900-value: 358, 66%, 48%;
+  --red-1000-value: 355, 49%, 15%;
+
+  --amber-100-value: 39, 100%, 95%;
+  --amber-200-value: 44, 100%, 92%;
+  --amber-300-value: 43, 96%, 90%;
+  --amber-400-value: 42, 100%, 78%;
+  --amber-500-value: 38, 100%, 71%;
+  --amber-600-value: 36, 90%, 62%;
+  --amber-700-value: 39, 100%, 57%;
+  --amber-800-value: 35, 100%, 52%;
+  --amber-900-value: 30, 100%, 32%;
+  --amber-1000-value: 20, 79%, 17%;
+
+  --green-100-value: 120, 60%, 96%;
+  --green-200-value: 120, 60%, 95%;
+  --green-300-value: 120, 60%, 91%;
+  --green-400-value: 122, 60%, 86%;
+  --green-500-value: 124, 60%, 75%;
+  --green-600-value: 125, 60%, 64%;
+  --green-700-value: 131, 41%, 46%;
+  --green-800-value: 132, 43%, 39%;
+  --green-900-value: 133, 50%, 32%;
+  --green-1000-value: 128, 29%, 15%;
+
+  --teal-100-value: 169, 70%, 96%;
+  --teal-200-value: 167, 70%, 94%;
+  --teal-300-value: 168, 70%, 90%;
+  --teal-400-value: 170, 70%, 85%;
+  --teal-500-value: 170, 70%, 72%;
+  --teal-600-value: 170, 70%, 57%;
+  --teal-700-value: 173, 80%, 36%;
+  --teal-800-value: 173, 83%, 30%;
+  --teal-900-value: 174, 91%, 25%;
+  --teal-1000-value: 171, 80%, 13%;
+
+  --purple-100-value: 276, 100%, 97%;
+  --purple-200-value: 277, 87%, 97%;
+  --purple-300-value: 274, 78%, 95%;
+  --purple-400-value: 276, 71%, 92%;
+  --purple-500-value: 274, 70%, 82%;
+  --purple-600-value: 273, 72%, 73%;
+  --purple-700-value: 272, 51%, 54%;
+  --purple-800-value: 272, 47%, 45%;
+  --purple-900-value: 274, 71%, 43%;
+  --purple-1000-value: 276, 100%, 15%;
+
+  --pink-100-value: 330, 100%, 96%;
+  --pink-200-value: 340, 90%, 96%;
+  --pink-300-value: 340, 82%, 94%;
+  --pink-400-value: 341, 76%, 91%;
+  --pink-500-value: 340, 75%, 84%;
+  --pink-600-value: 341, 75%, 73%;
+  --pink-700-value: 336, 80%, 58%;
+  --pink-800-value: 336, 74%, 51%;
+  --pink-900-value: 336, 65%, 45%;
+  --pink-1000-value: 333, 74%, 15%;
+
+  font-family: Inter, Geist, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  background-color: var(--background-100);
+  color: hsl(var(--gray-1000-value));
+}
+
+:root.dark {
+  --background-100: #121212;
+  --background-200: #000;
+
+  /* --accents-1: #111;
+  --accents-2: #333;
+  --accents-3: #444;
+  --accents-4: #666;
+  --accents-5: #888;
+  --accents-6: #999;
+  --accents-7: #eaeaea;
+  --accents-8: #fafafa; */
+
+  --gray-100-value: 0, 0%, 10%;
+  --gray-200-value: 0, 0%, 12%;
+  --gray-300-value: 0, 0%, 16%;
+  --gray-400-value: 0, 0%, 18%;
+  --gray-500-value: 0, 0%, 27%;
+  --gray-600-value: 0, 0%, 53%;
+  --gray-700-value: 0, 0%, 56%;
+  --gray-800-value: 0, 0%, 49%;
+  --gray-900-value: 0, 0%, 63%;
+  --gray-1000-value: 0, 0%, 93%;
+
+  --blue-100-value: 216, 50%, 12%;
+  --blue-200-value: 214, 59%, 15%;
+  --blue-300-value: 213, 71%, 20%;
+  --blue-400-value: 212, 78%, 23%;
+  --blue-500-value: 211, 86%, 27%;
+  --blue-600-value: 206, 100%, 50%;
+  --blue-700-value: 212, 100%, 48%;
+  --blue-800-value: 212, 100%, 41%;
+  --blue-900-value: 210, 100%, 66%;
+  --blue-1000-value: 206, 100%, 96%;
+
+  --red-100-value: 357, 37%, 12%;
+  --red-200-value: 357, 46%, 16%;
+  --red-300-value: 356, 54%, 22%;
+  --red-400-value: 357, 55%, 26%;
+  --red-500-value: 357, 60%, 32%;
+  --red-600-value: 358, 75%, 59%;
+  --red-700-value: 358, 75%, 59%;
+  --red-800-value: 358, 69%, 52%;
+  --red-900-value: 358, 100%, 69%;
+  --red-1000-value: 353, 90%, 96%;
+
+  --amber-100-value: 35, 100%, 8%;
+  --amber-200-value: 32, 100%, 10%;
+  --amber-300-value: 33, 100%, 15%;
+  --amber-400-value: 35, 100%, 17%;
+  --amber-500-value: 35, 91%, 22%;
+  --amber-600-value: 39, 85%, 49%;
+  --amber-700-value: 39, 100%, 57%;
+  --amber-800-value: 35, 100%, 52%;
+  --amber-900-value: 39, 90%, 50%;
+  --amber-1000-value: 40, 94%, 93%;
+
+  --green-100-value: 136, 50%, 9%;
+  --green-200-value: 137, 50%, 12%;
+  --green-300-value: 136, 50%, 14%;
+  --green-400-value: 135, 70%, 16%;
+  --green-500-value: 135, 70%, 23%;
+  --green-600-value: 135, 70%, 34%;
+  --green-700-value: 131, 41%, 46%;
+  --green-800-value: 132, 43%, 39%;
+  --green-900-value: 131, 43%, 57%;
+  --green-1000-value: 136, 73%, 94%;
+
+  --teal-100-value: 169, 78%, 7%;
+  --teal-200-value: 170, 74%, 9%;
+  --teal-300-value: 171, 75%, 13%;
+  --teal-400-value: 171, 85%, 13%;
+  --teal-500-value: 172, 85%, 20%;
+  --teal-600-value: 172, 85%, 32%;
+  --teal-700-value: 173, 80%, 36%;
+  --teal-800-value: 173, 83%, 30%;
+  --teal-900-value: 174, 90%, 41%;
+  --teal-1000-value: 166, 71%, 93%;
+
+  --purple-100-value: 283, 30%, 12%;
+  --purple-200-value: 281, 38%, 16%;
+  --purple-300-value: 279, 44%, 23%;
+  --purple-400-value: 277, 46%, 28%;
+  --purple-500-value: 274, 49%, 35%;
+  --purple-600-value: 272, 51%, 54%;
+  --purple-700-value: 272, 51%, 54%;
+  --purple-800-value: 272, 47%, 45%;
+  --purple-900-value: 275, 80%, 71%;
+  --purple-1000-value: 281, 73%, 96%;
+
+  --pink-100-value: 335, 32%, 12%;
+  --pink-200-value: 335, 43%, 16%;
+  --pink-300-value: 335, 47%, 21%;
+  --pink-400-value: 335, 51%, 22%;
+  --pink-500-value: 335, 57%, 27%;
+  --pink-600-value: 336, 75%, 40%;
+  --pink-700-value: 336, 80%, 58%;
+  --pink-800-value: 336, 74%, 51%;
+  --pink-900-value: 341, 90%, 67%;
+  --pink-1000-value: 333, 90%, 96%;
+
+  --gray-alpha-100: hsla(0, 0%, 100%, .06);
+  --gray-alpha-200: hsla(0, 0%, 100%, .09);
+  --gray-alpha-300: hsla(0, 0%, 100%, .13);
+  --gray-alpha-400: hsla(0, 0%, 100%, .14);
+  --gray-alpha-500: hsla(0, 0%, 100%, .24);
+  --gray-alpha-600: hsla(0, 0%, 100%, .51);
+  --gray-alpha-700: hsla(0, 0%, 100%, .54);
+  --gray-alpha-800: hsla(0, 0%, 100%, .47);
+  --gray-alpha-900: hsla(0, 0%, 100%, .61);
+  --gray-alpha-1000: hsla(0, 0%, 100%, .92);
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  border-color: hsl(var(--gray-300-value));
+}

package/dist/styles/tw.css

@@ -10,16 +10,16 @@
   --radius: 0.5rem;
 
   --background-100: #fff;
-  --background-200: #fafafa;
+  --background-200: #f8f8f8;
 
-  --accents-1: #fafafa;
+  /* --accents-1: #fafafa;
   --accents-2: #eaeaea;
   --accents-3: #999;
   --accents-4: #888;
   --accents-5: #666;
   --accents-6: #444;
   --accents-7: #333;
-  --accents-8: #111;
+  --accents-8: #111; */
 
   --gray-alpha-100: hsla(0, 0%, 0%, 0.05);
   --gray-alpha-200: hsla(0, 0%, 0%, 0.08);
@@ -120,24 +120,26 @@
   --pink-900-value: 336, 65%, 45%;
   --pink-1000-value: 333, 74%, 15%;
 
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Inter, Geist, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
   color-scheme: light dark;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
 }
 
-.dark {
-  --background-100: #0a0a0a;
+:root.dark {
+  --background-100: #121212;
   --background-200: #000;
 
-  --accents-1: #111;
+  /* --accents-1: #111;
   --accents-2: #333;
   --accents-3: #444;
   --accents-4: #666;
   --accents-5: #888;
   --accents-6: #999;
   --accents-7: #eaeaea;
-  --accents-8: #fafafa;
+  --accents-8: #fafafa; */
 
   --gray-100-value: 0, 0%, 10%;
   --gray-200-value: 0, 0%, 12%;
@@ -370,9 +372,4 @@
   * {
     @apply border-border outline-ring/50;
   }
-
-  body {
-    background-color: var(--color-background);
-    color: var(--color-foreground);
-  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pxd",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A universal UI component library for Vue2&3.",
   "author": "libondev <bon.li@outlook.com>",
   "license": "MIT",
@@ -37,7 +37,12 @@
       "types": "./dist/components/index.d.ts",
       "default": "./dist/components/index.js"
     },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "default": "./dist/composables/index.js"
+    },
     "./tw.css": "./dist/styles/tw.css",
+    "./tokens.css": "./dist/styles/tokens.css",
     "./components/*": "./dist/components/*/index.vue"
   },
   "main": "./dist/index.js",
@@ -60,44 +65,52 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "peerDependencies": {
+    "tailwind-merge": ">=3.0.0",
+    "vue": ">=2.7.0 || >=3.3.0"
+  },
+  "dependencies": {
+    "gdsi": "^1.2.1",
+    "tailwind-merge": "^3.2.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.12.0",
+    "@nuxt/kit": "^3.16.2",
+    "@nuxt/schema": "^3.16.2",
+    "@testing-library/vue": "^8.1.0",
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.1",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.25.1",
+    "jsdom": "^26.1.0",
+    "mkdist": "^2.3.0",
+    "npm-run-all2": "^7.0.2",
+    "tinyglobby": "^0.2.13",
+    "typescript": "^5.8.3",
+    "unbuild": "^3.5.0",
+    "unplugin-auto-import": "^19.1.2",
+    "unplugin-vue-components": "^28.5.0",
+    "vitest": "^3.1.2",
+    "vue": "^3.5.13",
+    "vue-sfc-transformer": "^0.1.13",
+    "vue-tsc": "^2.2.10"
+  },
   "scripts": {
-    "dev": "unbuild --stub",
+    "dev": "run-s update-exports dev:lib dev:docs",
+    "dev:lib": "unbuild --stub",
     "dev:docs": "pnpm --filter docs dev",
-    "build": "run-s typecheck update-exports build:lib",
+    "build": "run-s update-exports typecheck lint build:lib",
     "build:lib": "unbuild",
-    "build:docs": "pnpm build && pnpm --filter docs build",
+    "build:docs": "pnpm --filter docs build",
     "preview:docs": "pnpm --filter docs preview",
     "update-exports": "node scripts/update-exports.js",
-    "prepublishOnly": "pnpm build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:watch": "vitest",
-    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "catalog:",
-    "@nuxt/kit": "catalog:",
-    "@nuxt/schema": "catalog:",
-    "@testing-library/vue": "catalog:",
-    "@tsconfig/node22": "catalog:",
-    "@types/node": "catalog:",
-    "@vitejs/plugin-vue": "catalog:",
-    "@vue/test-utils": "catalog:",
-    "@vue/tsconfig": "catalog:",
-    "eslint": "catalog:",
-    "jsdom": "catalog:",
-    "mkdist": "catalog:",
-    "npm-run-all2": "catalog:",
-    "tailwindcss": "catalog:",
-    "tinyglobby": "catalog:",
-    "typescript": "catalog:",
-    "unbuild": "catalog:",
-    "unplugin-auto-import": "catalog:",
-    "unplugin-vue-components": "catalog:",
-    "vitest": "catalog:",
-    "vue": "catalog:",
-    "vue-sfc-transformer": "catalog:",
-    "vue-tsc": "catalog:"
+    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
+    "bump": "pnpx bumpp"
   }
-}
+}