pxd 0.0.3 → 0.0.4

package/README.md

@@ -1,191 +1,36 @@
 # PXD
-A library of Vue3 components based on radix-vue and unocss. Everything is just right.
+Vue component library based on radix-vue and geist design system. Everything is just right.
 
 > [!IMPORTANT]
 > The library is still under development and may undergo major changes at any time.
 
-![](./res/preview.png)
+> [!IMPORTANT]
+> This is a COMMUNITY PROJECT, not associated with Vercel, originating from [Vercel design system](https://vercel.com/geist/introduction). Did not strictly follow its implementation, and added some personal ideas.
 
 ## Install
 
 ```bash
 pnpm i pxd
-pnpm i -D animated-unocss
 ```
 
 ## Usage
 
 ### Styles
-
-### uno.config.ts
 ```js
-import transformerVariantGroup from '@unocss/transformer-variant-group'
-import { animatedUno } from 'animated-unocss'
-import { defineConfig, presetIcons, presetMini } from 'unocss'
-
-export default defineConfig({
-  content: {
-    pipeline: {
-      include: ['./src/**/*.{vue,tsx,ts}'],
-    },
-  },
-
-  presets: [
-    animatedUno({
-      buildFullVersion: false,
-    }),
-    presetMini({
-      variablePrefix: '',
-    }),
-    presetIcons({
-      extraProperties: {
-        'display': 'inline-block',
-        'vertical-align': '-2px',
-      },
-    }),
-  ],
-
-  shortcuts: {
-    'flex-center': 'flex justify-center items-center',
-    'flex-col-center': 'flex flex-col justify-center items-center',
-    'fixed-center': 'fixed left-50% top-50% translate-x--50% translate-y--50%',
-    'absolute-center': 'absolute left-50% top-50% translate-x--50% translate-y--50%',
-  },
-
-  rules: [
-    // va--2px => vertical-align: -2px
-    [/^va-(.+)$/, ([, v]: string[]) => ({ 'vertical-align': v })],
-    [/^rotate-y-full$/, () => ({ transform: 'rotateY(180deg)' })],
-    [/^rotate-x-full$/, () => ({ transform: 'rotateX(180deg)' })],
-    [/^letter-spacing-(.+)$/, ([, d]: string[]) => ({ 'letter-spacing': d })],
-  ],
-
-  transformers: [
-    // hover:(bg-gray-400 font-medium) font-(light mono) ↓
-    // hover:bg-gray-400 hover:font-medium font-light font-mono
-    transformerVariantGroup(),
-  ],
+// tailwind.config.js
 
-  theme: {
-    colors: {
-      border: 'hsl(var(--border))',
-      input: 'hsl(var(--input))',
-      ring: 'hsl(var(--ring))',
-      background: 'hsl(var(--background))',
-      foreground: 'hsl(var(--foreground))',
-      primary: {
-        DEFAULT: 'hsl(var(--primary))',
-        foreground: 'hsl(var(--primary-foreground))',
-      },
-      secondary: {
-        DEFAULT: 'hsl(var(--secondary))',
-        foreground: 'hsl(var(--secondary-foreground))',
-      },
-      danger: {
-        DEFAULT: 'hsl(var(--danger) / <alpha-value>)',
-        foreground: 'hsl(var(--danger-foreground) / <alpha-value>)',
-      },
-      muted: {
-        DEFAULT: 'hsl(var(--muted))',
-        foreground: 'hsl(var(--muted-foreground))',
-      },
-      accent: {
-        DEFAULT: 'hsl(var(--accent))',
-        foreground: 'hsl(var(--accent-foreground))',
-      },
-      popover: {
-        DEFAULT: 'hsl(var(--popover))',
-        foreground: 'hsl(var(--popover-foreground))',
-      },
-      card: {
-        DEFAULT: 'hsl(var(--card))',
-        foreground: 'hsl(var(--card-foreground))',
-      },
-    },
-    borderRadius: {
-      xl: `calc(var(--radius) + 4px)`,
-      lg: `var(--radius)`,
-      md: `calc(var(--radius) - 2px)`,
-      sm: 'calc(var(--radius) - 4px)',
-    },
-  },
-})
+export default {
+  content: [
+    './src/**/*.{ts,tsx,vue}',
+    './node_modules/pxd/dist/components/**/*.js',
+  ]
+}
 ```
 
 ### vars.css
 
-This step can also be omitted if you have files with the following variable names.
-```css
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 240 5.9% 90%;
-    --input: 220 13% 92%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 0 0% 9.02%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 220 13.04% 95.49%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 4.8% 95.9%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --danger: 0 100% 57.45%;
-    --danger-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 240 3.7% 15.9%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 240 3.8% 15.49%;
-    --secondary-foreground: 210 40% 98%;
-
-    --danger: 0 73.62% 46.08%;
-    --danger-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-```
-
 ```js
+// main.ts
 import 'pxd/vars.css'
 ```
 
@@ -193,67 +38,47 @@ import 'pxd/vars.css'
 
 ```js
 // vite.config.js
-import { defineConfig } from 'vite'
-import VueComponents from 'unplugin-vue-components/vite'
 import PxResolver from 'pxd/resolver'
+import VueComponents from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [
     VueComponents({
       resolvers: [
-        PxResolver({ ...options })
+        PxResolver()
       ]
     })
   ]
 })
 ```
 
-#### Resolver Options
-```ts
-interface ResolverOptions {
-  namespace: string
-}
-```
-You can specify automatically imported component name prefixes by passing in the namespace parameter, such as:
-```js
-// vite.config.ts
-{
-  plugins: [
-    VueComponents({
-      resolvers: [
-        resolver({ namespace: 'v' })
-      ]
-    })
-  ]
-}
-```
-
-```html
-<!-- App.vue -->
-<template>
-  <!-- `px-button` -> `v-button` -->
-  <v-button>Button</v-button>
-</template>
-```
-
 ### Global import
 We strongly recommend using automatic import because it can significantly reduce the package size.
 
-## Import Directly
-
+## Manual Import
 ```js
-import Button from 'pxd/components/button/index.js'
+// main.ts
 
 // All components only need to import this style file.
 import 'pxd/vars.css'
 ```
 
+```vue
+<script setup>
+import Button from 'pxd/components/button/index.js'
+</script>
+
+<template>
+  <Button>
+    Button
+  </Button>
+</template>
+```
+
 ## Acknowledgement
 rankings are in no particular order, they are all very important to this project.
 
-- animate: https://animated-unocss.elonehoo.me/
-- unocss: https://unocss.dev/
-- radix-vue: https://www.radix-vue.com/
-- vite: https://vitejs.dev/
-- shadcn-ui: https://github.com/shadcn-ui/ui
-- iconify: https://iconify.design/
+- Vite: https://vitejs.dev/
+- Iconify: https://iconify.design/
+- Geist Design System: https://vercel.com/geist/introduction

package/dist/components/_icons/CheckIcon.js

@@ -0,0 +1 @@
+import{openBlock as e,createElementBlock as r,createElementVNode as l}from"vue";function c(o,t){return e(),r("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",fill:"currentColor"})])}export{c as r};

package/dist/components/_icons/ChevronDownIcon.js

@@ -0,0 +1 @@
+import{openBlock as e,createElementBlock as r,createElementVNode as l}from"vue";function c(o,t){return e(),r("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[l("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor"})])}export{c as r};

package/dist/components/_icons/ExclamationTriangleIcon.js

@@ -0,0 +1 @@
+import{openBlock as r,createElementBlock as t,createElementVNode as s,defineComponent as c,normalizeClass as f,createVNode as p,unref as n,Fragment as a,toDisplayString as o,createBlock as u,withCtx as C,createTextVNode as i,createCommentVNode as d,renderSlot as h}from"vue";import{_}from"./ExternalLinkIcon.js";function g(m,l){return r(),t("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z",fill:"currentColor"})])}const k={"aria-hidden":"true",class:"inline-flex items-center mr-1 mt-[3px]"},x={class:"pxd-error--text"},v={class:"mr-1"},w={key:0,class:"font-medium mr-1"},b=c({name:"PError",__name:"error",props:{size:{default:"default"},label:{},error:{}},setup(m){const l={small:"text-xs",default:"text-sm",large:"text-lg"};return(e,y)=>(r(),t("div",{class:f(["pxd-error flex items-start text-red-900 text-sm",l[e.size]])},[s("div",k,[p(n(g))]),s("div",x,[typeof e.error=="object"?(r(),t(a,{key:0},[s("span",v,o(e.error.message),1),e.error.link?(r(),u(n(_),{key:0,href:e.error.link,underline:""},{default:C(()=>[i(o(e.error.action),1)]),_:1},8,["href"])):d("",!0)],64)):(r(),t(a,{key:1},[e.label?(r(),t("span",w,o(e.label)+":",1)):d("",!0),h(e.$slots,"default",{},()=>[i(o(e.error),1)])],64))])],2))}});export{b as _};

package/dist/components/_icons/ExternalLinkIcon.js

@@ -0,0 +1 @@
+import{openBlock as n,createElementBlock as l,createElementVNode as i,defineComponent as a,resolveComponent as d,createBlock as r,normalizeClass as s,withCtx as C,renderSlot as u,unref as p,createCommentVNode as c}from"vue";function f(t,e){return n(),l("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[i("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z",fill:"currentColor"})])}const v=a({__name:"link",props:{href:{},external:{type:[Boolean,String]},underline:{type:Boolean},hoverUnderline:{type:Boolean,default:!0}},setup(t){return(e,m)=>{const o=d("RouterLink");return n(),r(o,{to:e.href,rel:"noopener",target:e.external?"_blank":void 0,class:s(["pxd-link inline-flex items-center font-medium",{"underline underline-offset-2":e.underline,"hover:underline":e.hoverUnderline}])},{default:C(()=>[u(e.$slots,"default"),e.external?(n(),r(p(f),{key:0,class:"text-lg"})):c("",!0)]),_:3},8,["to","target","class"])}}});export{v as _};

package/dist/components/_utils/css.d.ts

@@ -0,0 +1,9 @@
+export declare function autoUnit(target: string | number): string;
+/**
+ * Increase string a value with unit
+ *
+ * @example '2px' + 1 = '3px'
+ * @example '15em' + (-2) = '13em'
+ */
+export declare function getFlowDirection(propValue: string): '' | 'flex-col';
+export declare function getStandardSize(mergeSizes?: Record<string, string>): (v: string) => string;

package/dist/components/_utils/css.js

@@ -0,0 +1 @@
+function o(t){return typeof t=="number"||!isNaN(t)?`${t}px`:t}function u(t){return t==="row"?"":"flex-col"}function r(t){const f={small:"h-7 text-sm",default:"h-8 text-sm",large:"h-10 text-base"};return t&&Object.keys(t).forEach(n=>{n in f?f[n]+=` ${t[n]}`:f[n]=t[n]}),n=>f[n]||f.default}export{o as autoUnit,u as getFlowDirection,r as getStandardSize};

package/dist/components/avatar/_.js

@@ -0,0 +1 @@
+import{defineComponent as i,openBlock as r,createElementBlock as t,normalizeStyle as f,unref as a,renderSlot as l,createCommentVNode as s}from"vue";import{autoUnit as n}from"../_utils/css.js";const u=["src","width","height"],h={key:0,class:"absolute bottom-[-5px] left-[-3px] z-10 w-1/2 h-1/2 flex items-center rounded-full border border-white bg-white overflow-hidden"},c=i({name:"PAvatar",__name:"avatar",props:{src:{},size:{default:32},placeholder:{type:Boolean}},emits:["error"],setup(b){return(e,o)=>(r(),t("div",{class:"pxd-avatar relative rounded-full border border-white select-none before:absolute before:inset-0 before:w-full before:h-full before:rounded-full before:bg-[length:400%_100%] before:animate-flash-loading before:bg-gradient-to-l after:absolute after:inset-0 after:w-full after:h-full after:rounded-full after:border after:border-gray-alpha-400",style:f({width:a(n)(e.size),height:a(n)(e.size),"--tw-gradient-stops":"var(--accents-1), var(--accents-2), var(--accents-2), var(--accents-1)"})},[l(e.$slots,"default",{},()=>[e.placeholder?s("",!0):(r(),t("img",{key:0,src:e.src,class:"relative rounded-full text-0 overflow-hidden",width:e.size,height:e.size,alt:"avatar","aria-hidden":"true",onError:o[0]||(o[0]=d=>e.$emit("error",d))},null,40,u))]),e.$slots.badge?(r(),t("div",h,[l(e.$slots,"badge")])):s("",!0)],4))}});export{c as _};

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,6 @@
+export interface AvatarProps {
+    src?: string;
+    size: number | string;
+    placeholder?: boolean;
+}
+export { default } from './src/avatar';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+import{_ as p}from"./_.js";import"vue";import"../_utils/css.js";export{p as default};

package/dist/components/avatar/src/avatar.d.ts

@@ -0,0 +1,22 @@
+import { AvatarProps } from '../index.js';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+        badge?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<AvatarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (args_0: Event) => any;
+}, string, import('vue').PublicProps, Readonly<AvatarProps> & Readonly<{
+    onError?: ((args_0: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/avatar-group/index.d.ts

@@ -0,0 +1,7 @@
+import { AvatarProps } from '../avatar';
+export interface AvatarGroupProps {
+    max?: number;
+    size?: number | string;
+    members: AvatarProps[];
+}
+export { default } from './src/avatar-group';

package/dist/components/avatar-group/index.js

@@ -0,0 +1 @@
+import{defineComponent as c,computed as d,provide as u,openBlock as t,createElementBlock as s,Fragment as f,renderList as p,unref as a,createBlock as o,withCtx as h,createElementVNode as z,toDisplayString as g,createCommentVNode as v}from"vue";import{_ as n}from"../avatar/_.js";import"../_utils/css.js";const x={class:"flex flex-wrap items-center"},b={class:"relative w-full h-full flex items-center justify-center font-bold text-sm rounded-full bg-gray-1000 text-gray-100 font-mono"},B=c({name:"PAvatarGroup",__name:"avatar-group",props:{max:{default:5},size:{default:32},members:{default:()=>[]}},setup(r){const m=d(()=>r.members.slice(0,r.max));return u("avatarGroupProvider",{size:r.size}),(e,y)=>(t(),s("div",x,[(t(!0),s(f,null,p(a(m),(l,i)=>(t(),o(a(n),{key:i,size:e.size,src:l.src,placeholder:l.placeholder,class:"[&:nth-child(n+2)]:-ml-3"},null,8,["size","src","placeholder"]))),128)),e.members.length>e.max?(t(),o(a(n),{key:0,size:e.size,class:"-ml-3"},{default:h(()=>[z("div",b," +"+g(e.members.length-e.max),1)]),_:1},8,["size"])):v("",!0)]))}});export{B as default};

package/dist/components/avatar-group/src/avatar-group.d.ts

@@ -0,0 +1,3 @@
+import { AvatarGroupProps } from '../index.js';
+declare const _default: import('vue').DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/badge/index.d.ts

@@ -0,0 +1 @@
+export { default } from './src/badge';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+import{defineComponent as r,openBlock as n,createElementBlock as u,normalizeClass as o,renderSlot as m}from"vue";const g=r({__name:"badge",props:{variant:{default:"default"}},setup(b){const t={default:"font-medium bg-background-100",gray:"font-medium bg-gray-700 text-background-100",blue:"font-medium bg-blue-700 text-background-100",purple:"font-medium bg-purple-700 text-background-100",amber:"font-medium bg-amber-700",red:"font-medium bg-red-700 text-background-100",pink:"font-medium bg-pink-700 text-background-100",green:"font-medium bg-green-700 text-background-100",teal:"font-medium bg-teal-700 text-background-100","gray-subtle":"font-medium bg-gray-200 text-gray-1000","blue-subtle":"font-medium bg-blue-200 text-blue-700","purple-subtle":"font-medium bg-purple-200 text-purple-700","amber-subtle":"font-medium bg-amber-200 text-amber-700","red-subtle":"font-medium bg-red-200 text-red-700","pink-subtle":"font-medium bg-pink-200 text-pink-700","green-subtle":"font-medium bg-green-200 text-green-700","teal-subtle":"font-medium bg-teal-200 text-teal-700",inverted:"font-medium bg-gray-1000 text-background-100",vue:"font-medium text-background-100 bg-gradient-to-br from-[#42d392] via-[#42d392] via-25% to-[#647eff]",trial:"font-medium text-background-100 bg-gradient-to-br from-[#0070f3] to-[#f81ce5]",turborepo:"font-medium text-background-100 bg-gradient-to-br from-[#ff1e56] to-[#0096ff]"};return(e,d)=>(n(),u("span",{class:o(["pxd-badge inline-flex items-center justify-center px-2.5 h-6 text-xs rounded-full",t[e.variant]])},[m(e.$slots,"default")],2))}});export{g as default};

package/dist/components/badge/src/badge.d.ts

@@ -0,0 +1,42 @@
+interface BadgeProps {
+    variant?: keyof typeof VARIANTS;
+}
+declare const VARIANTS: {
+    default: string;
+    gray: string;
+    blue: string;
+    purple: string;
+    amber: string;
+    red: string;
+    pink: string;
+    green: string;
+    teal: string;
+    'gray-subtle': string;
+    'blue-subtle': string;
+    'purple-subtle': string;
+    'amber-subtle': string;
+    'red-subtle': string;
+    'pink-subtle': string;
+    'green-subtle': string;
+    'teal-subtle': string;
+    inverted: string;
+    vue: string;
+    trial: string;
+    turborepo: string;
+};
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+export { default } from './src/book';

package/dist/components/book/index.js

@@ -0,0 +1 @@
+import{defineComponent as l,openBlock as o,createElementBlock as r,normalizeStyle as n,createElementVNode as t}from"vue";const s=l({__name:"book",props:{title:{},color:{},width:{default:196},variant:{default:"default"}},setup(d){return(a,e)=>(o(),r("div",{class:"pxd-book w-[--book-width] h-full",style:n({"--book-width":`${a.width}px`,"--book-depth":"29cqw"})},e[0]||(e[0]=[t("div",null,null,-1),t("div",{class:"absolute top-1",style:{height:"calc(100% - 2 * 4px)",width:"calc(var(--book-depth) - 2px)",transform:"translateX(calc(var(--book-width) * 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)"}},null,-1),t("div",{class:"absolute left-0 h-full bg-gray-200 rounded-[6px_4px_4px_6px]",style:{transform:"translateZ(calc(-1 * var(--book-depth)))"}},null,-1)]),4))}});export{s as default};

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

@@ -0,0 +1,8 @@
+interface BookProps {
+    title: string;
+    color?: string;
+    width?: number | string;
+    variant?: 'default' | 'simple';
+}
+declare const _default: import('vue').DefineComponent<BookProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BookProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/button/index.d.ts

@@ -1 +1,23 @@
+import { StandardSize } from '../../types';
+export declare const getButtonSizes: (v: string) => string;
+export declare const buttonShapes: {
+    normal: string;
+    square: string;
+    rounded: string;
+    circle: string;
+};
+export declare const buttonVariants: {
+    base: string;
+    default: string;
+    secondary: string;
+    danger: string;
+    warning: string;
+    outline: string;
+    ghost: string;
+    underline: string;
+};
+export type ButtonSizes = StandardSize;
+export type ButtonShapes = keyof typeof buttonShapes;
+export type ButtonVariants = keyof typeof buttonVariants;
+export declare function getButtonVariant(variant: ButtonVariants, withBase?: boolean): string;
 export { default } from './src/button';

package/dist/components/button/index.js

@@ -1 +1 @@
-import{defineComponent as a,openBlock as o,createElementBlock as r,normalizeClass as d,renderSlot as i}from"vue";const s=["type"],p=a({name:"PButton",__name:"button",props:{type:{type:String,default:"button"},variant:{type:String,default:"default"}},setup(e){const t={default:"shadow-sm bg-primary text-primary-foreground not-disabled:hover:bg-primary/75 not-disabled:active:bg-primary/90",secondary:"shadow-sm bg-secondary text-secondary-foreground not-disabled:hover:bg-input/75 not-disabled:active:bg-input",danger:"shadow-sm bg-danger text-danger-foreground not-disabled:hover:bg-danger/75 not-disabled:active:bg-danger/90",outline:"shadow-sm !b-input text-primary bg-background not-disabled:hover:bg-secondary not-disabled:active:bg-input",ghost:"bg-transparent text-primary not-disabled:hover:bg-secondary not-disabled:active:bg-input",link:"bg-transparent text-primary underline-offset-3 not-disabled:hover:underline not-disabled:hover:bg-secondary not-disabled:active:bg-input"};return(n,b)=>(o(),r("button",{type:e.type,class:d(["pxd-button inline-flex items-center h-8 rounded px-3 py-2 font-inherit b-1 b-solid b-transparent justify-center outlines text-sm not-disabled:cursor-pointer disabled:pointer-events-none disabled:op-50",[t[e.variant]]])},[i(n.$slots,"default")],10,s))}});export{p as default};
+import{getStandardSize as b}from"../_utils/css.js";import{defineComponent as u,computed as r,openBlock as l,createElementBlock as c,normalizeClass as g,unref as t,createBlock as p,createCommentVNode as y,renderSlot as o,createElementVNode as f}from"vue";import{_ as m}from"../spinner/_.js";const h=["type","disabled"],v={class:"px-1.5 flex items-center text-nowrap overflow-hidden"},$=u({name:"PButton",__name:"button",props:{type:{default:"button"},icon:{type:Boolean},shadow:{type:Boolean,default:!1},loading:{type:Boolean},disabled:{type:Boolean},shape:{default:"normal"},variant:{default:"default"},size:{default:"default"}},setup(a){const n=r(()=>a.shadow&&!["ghost","underline"].includes(a.variant)),s=r(()=>x(a.size)),i=r(()=>B(a.variant));return(e,k)=>(l(),c("button",{type:e.type,class:g(["pxd-button p-ring",[t(i),t(s),t(w)[e.shape],{"shadow-sm":t(n),"w-8 h-8 !p-0":e.icon}]]),disabled:e.disabled||e.loading},[e.loading?(l(),p(t(m),{key:0})):y("",!0),o(e.$slots,"prefix"),f("span",v,[o(e.$slots,"default")]),o(e.$slots,"suffix")],10,h))}}),x=b({default:"px-2",small:"px-1.5",large:"px-2.5"}),w={normal:"rounded-md",square:"rounded-none",rounded:"rounded-full",circle:"rounded-full overflow-hidden w-8 !p-1"},d={base:"inline-flex items-center select-none border font-inherit b-(1 solid) justify-center text-sm cursor-pointer disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:border-gray-400",default:"bg-gray-1000 text-background-100 border-transparent enabled:hover:opacity-90 enabled:active:opacity-80",secondary:"bg-gray-100 text-gray-1000 border-transparent enabled:hover:bg-gray-200 enabled:active:bg-gray-alpha-300",danger:"bg-red-800 text-background-100 border-transparent enabled:hover:opacity-90 enabled:active:opacity-80",warning:"bg-amber-800 text-background-100 border-transparent enabled:hover:opacity-90 enabled:active:opacity-80",outline:"text-gray-1000 bg-background-100 border-gray-alpha-400 enabled:hover:bg-gray-100 enabled:active:bg-gray-200",ghost:"bg-transparent text-gray-1000 border-transparent enabled:hover:bg-gray-100 enabled:active:bg-gray-200",underline:"bg-transparent text-gray-1000 border-transparent underline underline-offset-4 enabled:hover:opacity-90 enabled:active:opacity-70"};function B(a,n=!0){return(d[a]||d.default)+(n?` ${d.base}`:"")}export{w as buttonShapes,d as buttonVariants,$ as default,x as getButtonSizes,B as getButtonVariant};

package/dist/components/button/src/button.d.ts

@@ -1,27 +1,26 @@
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
-    type: {
-        type: globalThis.PropType<"button" | "submit" | "reset">;
-        default: string;
+import { ButtonShapes, ButtonSizes, ButtonVariants } from '../index.js';
+interface ButtonProps {
+    type?: HTMLButtonElement['type'];
+    icon?: boolean;
+    shadow?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    shape?: ButtonShapes;
+    variant?: ButtonVariants;
+    size?: ButtonSizes;
+}
+declare function __VLS_template(): {
+    slots: {
+        prefix?(_: {}): any;
+        default?(_: {}): any;
+        suffix?(_: {}): any;
     };
-    variant: {
-        type: globalThis.PropType<"default" | "link" | "outline" | "secondary" | "danger" | "ghost">;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
-    type: {
-        type: globalThis.PropType<"button" | "submit" | "reset">;
-        default: string;
-    };
-    variant: {
-        type: globalThis.PropType<"default" | "link" | "outline" | "secondary" | "danger" | "ghost">;
-        default: string;
-    };
-}>>, {
-    type: "button" | "submit" | "reset";
-    variant: "default" | "link" | "outline" | "secondary" | "danger" | "ghost";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/components/checkbox/index.js

@@ -1 +1 @@
-import{defineComponent as r,useModel as u,openBlock as i,createElementBlock as p,createVNode as a,unref as c,mergeProps as h,withCtx as l,createElementVNode as s,renderSlot as m}from"vue";import{CheckboxRoot as k,CheckboxIndicator as b}from"radix-vue";const f={class:"pxd-checkbox outline-none"},x=s("i",{class:"i-ic-check bg-background"},null,-1),_={class:"pl-1.5 active:select-none"},w=r({name:"PCheckbox",__name:"checkbox",props:{modelValue:{type:Boolean},modelModifiers:{}},emits:["update:modelValue"],setup(d){const e=u(d,"modelValue");return(t,o)=>(i(),p("label",f,[a(c(k),h({checked:e.value,"onUpdate:checked":o[0]||(o[0]=n=>e.value=n),class:"w-4 h-4 p-0 b-1 b-solid b-input shadow-sm rounded outlines bg-background overflow-hidden data-[state=unchecked]:va--1.4px data-[state=checked]:b-primary data-[state=checked]:va--1px"},t.$attrs),{default:l(()=>[a(c(b),{class:"block flex items-center justify-center h-full w-full bg-primary"},{default:l(()=>[x]),_:1})]),_:1},16,["checked"]),s("span",_,[m(t.$slots,"default")])]))}});export{w as default};
+import{defineComponent as c,mergeModels as n,useModel as i,openBlock as p,createElementBlock as u,createVNode as e,unref as t,mergeProps as b,withCtx as d,createElementVNode as m,renderSlot as h}from"vue";import{CheckboxRoot as g,CheckboxIndicator as k}from"radix-vue";import{r as x}from"../_icons/CheckIcon.js";const y={class:"pxd-checkbox group inline-flex items-center cursor-pointer text-gray-1000"},f={class:"pl-1 pr-1.5 leading-0 active:select-none text-sm text-gray-1000 empty:hidden peer-disabled:text-gray-500"},v=c({name:"PCheckbox",__name:"checkbox",props:n({defaultChecked:{type:Boolean},checked:{type:[Boolean,String]},disabled:{type:Boolean},required:{type:Boolean},name:{},value:{},id:{},asChild:{type:Boolean},as:{}},{modelValue:{type:Boolean},modelModifiers:{}}),emits:["update:modelValue"],setup(l){const o=i(l,"modelValue");return(a,r)=>(p(),u("label",y,[e(t(g),b({checked:o.value,"onUpdate:checked":r[0]||(r[0]=s=>o.value=s),class:"p-ring peer w-4 min-w-4 h-4 p-0 shadow-sm rounded border border-gray-700 transition-colors bg-background-100 data-[state=checked]:bg-current data-[state=checked]:!border-current disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-500 disabled:text-gray-600 group-hover:[&:not(:disabled,[data-state=checked])]:bg-gray-200 group-hover:[&:not(:disabled,[data-state=checked])]:border-gray-700"},a.$attrs),{default:d(()=>[e(t(k),{"as-child":"",class:"block h-full p-px -m-px"},{default:d(()=>[e(t(x),{class:"text-background-100"})]),_:1})]),_:1},16,["checked"]),m("span",f,[h(a.$slots,"default")])]))}});export{v as default};

package/dist/components/checkbox/src/checkbox.d.ts

@@ -1,10 +1,24 @@
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
-    modelValue: globalThis.PropType<boolean>;
-}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
-    modelValue: globalThis.PropType<boolean>;
-}>>, {}, {}>, {
-    default?(_: {}): any;
-}>;
+import { CheckboxRootProps } from 'radix-vue';
+interface CheckboxProps extends CheckboxRootProps {
+}
+declare let __VLS_typeProps: CheckboxProps;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1,4 @@
+export interface CheckboxGroupProps {
+    direction?: 'row' | 'col';
+}
+export { default } from './src/checkbox-group';

package/dist/components/checkbox-group/index.js

@@ -0,0 +1 @@
+import{defineComponent as r,openBlock as n,createElementBlock as c,normalizeClass as i,unref as l,renderSlot as a}from"vue";import{getFlowDirection as s}from"../_utils/css.js";const u=r({__name:"checkbox-group",props:{direction:{default:"row"}},setup(e){const o=s(e.direction);return(t,p)=>(n(),c("div",{class:i(["flex gap-3",l(o)])},[a(t.$slots,"default")],2))}});export{u as default};

package/dist/components/checkbox-group/src/checkbox-group.d.ts

@@ -0,0 +1,17 @@
+import { CheckboxGroupProps } from '../index.js';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CheckboxGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/choicebox/index.d.ts

@@ -0,0 +1 @@
+export { default } from './src/choicebox';

package/dist/components/choicebox/index.js

@@ -0,0 +1 @@
+import{defineComponent as p,inject as m,computed as f,openBlock as d,createElementBlock as l,unref as t,createElementVNode as o,toDisplayString as a,createVNode as g,renderSlot as h,createCommentVNode as y}from"vue";import{ChoiceboxInjectionKey as x}from"../choicebox-group/index.js";import{r as k}from"../_icons/CheckIcon.js";import"../_utils/css.js";const _=["aria-selected","data-selected"],v={class:"flex gap-6 items-center justify-between p-3"},C={class:"flex flex-col items-stretch justify-start"},j={class:"font-medium text-sm"},V={class:"font-normal text-sm opacity-90 empty:hidden"},w=["data-selected"],N=["data-selected"],S={key:0,class:"border-t border-inherit p-2 flex justify-center"},D=p({__name:"choicebox",props:{title:{},value:{},description:{}},setup(n){const c=n,{multiple:i,modelValue:u,onChoiceboxItemChange:b}=m(x,{modelValue:{}}),r=f(()=>{var e;return(e=u.value)==null?void 0:e.includes(c.value)});return(e,s)=>(d(),l("li",{tabindex:"0","aria-selected":t(r),"data-selected":t(r),class:"pxd-choicebox-item w-full rounded-md list-none cursor-pointer border border-gray-400 bg-background-100 transition-colors hover:bg-gray-100 hover:border-gray-500 data-[selected=true]:border-blue-600 data-[selected=true]:bg-blue-100 data-[selected=true]:text-blue-900",onClick:s[0]||(s[0]=$=>t(b)(e.value))},[o("div",v,[o("div",C,[o("span",j,a(e.title),1),o("span",V,a(e.description),1)]),t(i)?(d(),l("span",{key:0,"data-selected":t(r),class:"relative group block size-4 rounded border border-gray-500 bg-background-100 data-[selected=true]:border-blue-900 data-[selected=true]:bg-blue-900"},[g(t(k),{class:"text-background-100 absolute left-[-1px] top-[-1px] p-px"})],8,w)):(d(),l("span",{key:1,"data-selected":t(r),class:"relative group block size-4 rounded-full bg-background-100 border border-gray-500 data-[selected=true]:border-blue-900"},s[1]||(s[1]=[o("i",{class:"hidden group-data-[selected=true]:block absolute inset-0 m-auto w-1/2 h-1/2 rounded-full bg-blue-900"},null,-1)]),8,N))]),e.$slots.default?(d(),l("div",S,[h(e.$slots,"default")])):y("",!0)],8,_))}});export{D as default};