@byyuurin/ui 0.0.7 → 0.0.8

package/dist/runtime/theme/drawer.js

@@ -3,8 +3,8 @@ export default ct(
   /* @unocss-include */
   {
     slots: {
-      overlay: "fixed inset-0 bg-black/40",
-      content: "fixed bg-ui-cx ring ring-ui-cb/5 flex focus:outline-none",
+      overlay: "fixed z-1 inset-0 bg-black/40",
+      content: "fixed z-1 bg-ui-cx ring ring-ui-cb/5 flex focus:outline-none",
       handle: "shrink-0 rounded-full bg-soft-ui-cb/17.5",
       container: "w-full flex flex-col overflow-hidden overflow-y-auto",
       header: "p-4 sm:px-6 sibling:pt-0",

package/dist/runtime/theme/index.d.ts

@@ -1,7 +1,10 @@
 export { default as accordion } from './accordion.js';
 export { default as alert } from './alert.js';
 export { default as app } from './app.js';
+export { default as avatar } from './avatar.js';
+export { default as avatarGroup } from './avatar-group.js';
 export { default as badge } from './badge.js';
+export { default as breadcrumb } from './breadcrumb.js';
 export { default as button } from './button.js';
 export { default as buttonGroup } from './button-group.js';
 export { default as card } from './card.js';
@@ -12,15 +15,18 @@ export { default as collapsible } from './collapsible.js';
 export { default as drawer } from './drawer.js';
 export { default as input } from './input.js';
 export { default as inputNumber } from './input-number.js';
+export { default as kbd } from './kbd.js';
 export { default as link } from './link.js';
 export { default as modal } from './modal.js';
 export { default as pagination } from './pagination.js';
 export { default as pinInput } from './pinInput.js';
 export { default as popover } from './popover.js';
+export { default as progress } from './progress.js';
 export { default as radioGroup } from './radio-group.js';
 export { default as scrollArea } from './scroll-area.js';
 export { default as select } from './select.js';
 export { default as separator } from './separator.js';
+export { default as skeleton } from './skeleton.js';
 export { default as slider } from './slider.js';
 export { default as switch } from './switch.js';
 export { default as table } from './table.js';

package/dist/runtime/theme/index.js

@@ -1,7 +1,10 @@
 export { default as accordion } from "./accordion.js";
 export { default as alert } from "./alert.js";
 export { default as app } from "./app.js";
+export { default as avatar } from "./avatar.js";
+export { default as avatarGroup } from "./avatar-group.js";
 export { default as badge } from "./badge.js";
+export { default as breadcrumb } from "./breadcrumb.js";
 export { default as button } from "./button.js";
 export { default as buttonGroup } from "./button-group.js";
 export { default as card } from "./card.js";
@@ -12,15 +15,18 @@ export { default as collapsible } from "./collapsible.js";
 export { default as drawer } from "./drawer.js";
 export { default as input } from "./input.js";
 export { default as inputNumber } from "./input-number.js";
+export { default as kbd } from "./kbd.js";
 export { default as link } from "./link.js";
 export { default as modal } from "./modal.js";
 export { default as pagination } from "./pagination.js";
 export { default as pinInput } from "./pinInput.js";
 export { default as popover } from "./popover.js";
+export { default as progress } from "./progress.js";
 export { default as radioGroup } from "./radio-group.js";
 export { default as scrollArea } from "./scroll-area.js";
 export { default as select } from "./select.js";
 export { default as separator } from "./separator.js";
+export { default as skeleton } from "./skeleton.js";
 export { default as slider } from "./slider.js";
 export { default as switch } from "./switch.js";
 export { default as table } from "./table.js";

package/dist/runtime/theme/input-number.d.ts

@@ -58,6 +58,9 @@ declare const _default: {
                 decrement: string;
             };
         };
+        underline: {
+            true: "";
+        };
         highlight: {
             true: {
                 base: string;
@@ -116,6 +119,9 @@ declare const _default: {
                 decrement: string;
             };
         };
+        underline: {
+            true: "";
+        };
         highlight: {
             true: {
                 base: string;

package/dist/runtime/theme/input-number.js

@@ -10,8 +10,8 @@ export default ct(
         "focus:outline-none",
         "disabled:cursor-not-allowed"
       ],
-      increment: "absolute flex items-center",
-      decrement: "absolute flex items-center"
+      increment: "absolute flex items-center ui-base",
+      decrement: "absolute flex items-center ui-base"
     },
     variants: {
       size: {
@@ -37,6 +37,9 @@ export default ct(
           decrement: "bottom-0 end-0 pe-0.5 [&>button]:py-0 scale-80"
         }
       },
+      underline: {
+        true: ""
+      },
       highlight: {
         true: {
           base: "ring ring-inset ring-ui-fill"

package/dist/runtime/theme/input.d.ts

@@ -3,10 +3,10 @@ declare const _default: {
     slots: {
         base: string;
         input: string[];
-        prefix: string;
-        prefixIcon: string;
-        suffix: string;
-        suffixIcon: string;
+        leading: string;
+        leadingIcon: string;
+        trailing: string;
+        trailingIcon: string;
     };
     variants: {
         size: {
@@ -43,10 +43,10 @@ declare const _default: {
                 base: string;
             };
         };
-        prefix: {
+        leading: {
             true: "";
         };
-        suffix: {
+        trailing: {
             true: "";
         };
         loading: {
@@ -107,10 +107,10 @@ declare const _default: {
                 base: string;
             };
         };
-        prefix: {
+        leading: {
             true: "";
         };
-        suffix: {
+        trailing: {
             true: "";
         };
         loading: {
@@ -138,10 +138,10 @@ declare const _default: {
     }, {
         base: string;
         input: string[];
-        prefix: string;
-        prefixIcon: string;
-        suffix: string;
-        suffixIcon: string;
+        leading: string;
+        leadingIcon: string;
+        trailing: string;
+        trailingIcon: string;
     }, undefined>;
     defaultVariants: {
         size: "md";

package/dist/runtime/theme/input.js

@@ -10,10 +10,10 @@ export default ct(
         "focus:outline-none",
         "disabled:cursor-not-allowed"
       ],
-      prefix: "flex items-center",
-      prefixIcon: "shrink-0 size-1.25em",
-      suffix: "flex items-center",
-      suffixIcon: "shrink-0 size-1.25em"
+      leading: "flex items-center",
+      leadingIcon: "shrink-0 size-1.25em",
+      trailing: "flex items-center",
+      trailingIcon: "shrink-0 size-1.25em"
     },
     variants: {
       ...buttonGroupVariant,
@@ -67,10 +67,10 @@ export default ct(
           base: "color-ui-cb bg-transparent"
         }
       },
-      prefix: {
+      leading: {
         true: ""
       },
-      suffix: {
+      trailing: {
         true: ""
       },
       loading: {
@@ -84,7 +84,7 @@ export default ct(
       },
       type: {
         file: {
-          input: "prefix-normal not-disabled:cursor-pointer file:pointer-events-none file:py-0 file:font-size-0.875em file:rounded-ui-button file:border-none file:color-ui-cx file:bg-soft-ui-cb/80"
+          input: "leading-normal not-disabled:cursor-pointer file:pointer-events-none file:py-0 file:font-size-0.875em file:rounded-ui-button file:border-none file:color-ui-cx file:bg-soft-ui-cb/80"
         }
       }
     },
@@ -130,17 +130,17 @@ export default ct(
       },
       {
         loading: true,
-        prefix: true,
+        leading: true,
         class: {
-          prefixIcon: "animate-spin"
+          leadingIcon: "animate-spin"
         }
       },
       {
         loading: true,
-        prefix: false,
-        suffix: true,
+        leading: false,
+        trailing: true,
         class: {
-          suffixIcon: "animate-spin"
+          trailingIcon: "animate-spin"
         }
       }
     ],

package/dist/runtime/theme/kbd.d.ts

@@ -0,0 +1,39 @@
+declare const _default: {
+    base: string;
+    slots: undefined;
+    variants: {
+        variant: {
+            solid: "color-ui-cx bg-soft-ui-fill/90";
+            outline: "color-ui-fill ring bg-ui-cx/90 ring-inset ring-ui-fill/30";
+            soft: "color-ui-fill/80 bg-soft-ui-fill/20";
+            'soft-outline': "color-ui-fill/80 bg-soft-ui-fill/20 ring ring-inset ring-ui-fill/30";
+        };
+        size: {
+            xs: "text-xs";
+            sm: "text-sm";
+            md: "text-base";
+            lg: "text-lg";
+            xl: "text-xl";
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
+        variant: {
+            solid: "color-ui-cx bg-soft-ui-fill/90";
+            outline: "color-ui-fill ring bg-ui-cx/90 ring-inset ring-ui-fill/30";
+            soft: "color-ui-fill/80 bg-soft-ui-fill/20";
+            'soft-outline': "color-ui-fill/80 bg-soft-ui-fill/20 ring ring-inset ring-ui-fill/30";
+        };
+        size: {
+            xs: "text-xs";
+            sm: "text-sm";
+            md: "text-base";
+            lg: "text-lg";
+            xl: "text-xl";
+        };
+    }, undefined, "inline-flex items-center justify-center px-0.25em rounded-ui-base leading-normal min-w-1.5em font-medium font-sans select-none">;
+    defaultVariants: {
+        variant: "outline";
+        size: "md";
+    };
+};
+export default _default;

package/dist/runtime/theme/kbd.js

@@ -0,0 +1,26 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    base: "inline-flex items-center justify-center px-0.25em rounded-ui-base leading-normal min-w-1.5em font-medium font-sans select-none",
+    variants: {
+      variant: {
+        "solid": "color-ui-cx bg-soft-ui-fill/90",
+        "outline": "color-ui-fill ring bg-ui-cx/90 ring-inset ring-ui-fill/30",
+        "soft": "color-ui-fill/80 bg-soft-ui-fill/20",
+        "soft-outline": "color-ui-fill/80 bg-soft-ui-fill/20 ring ring-inset ring-ui-fill/30"
+      },
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "md"
+    }
+  }
+);

package/dist/runtime/theme/modal.js

@@ -3,8 +3,8 @@ export default ct(
   /* @unocss-include */
   {
     slots: {
-      overlay: "fixed inset-0 bg-black/40",
-      content: "fixed bg-ui-cx divide-y divide-ui-cb/10 flex flex-col focus:outline-none",
+      overlay: "fixed z-1 inset-0 bg-black/40",
+      content: "fixed z-1 bg-ui-cx divide-y divide-ui-cb/10 flex flex-col focus:outline-none",
       header: "flex flex-wrap items-center gap-1 px-4 py-5 sm:px-6",
       body: "flex-1 overflow-y-auto p-4 sm:p-6 empty:hidden",
       footer: "flex items-center gap-1.5 p-4 sm:px-6",

package/dist/runtime/theme/popover.js

@@ -4,7 +4,7 @@ export default ct(
   {
     slots: {
       content: [
-        "color-ui-base bg-ui-base shadow-lg rounded-ui-box ring ring-ui-base/10",
+        "z-1 color-ui-base bg-ui-base shadow-lg rounded-ui-box ring ring-ui-base/10",
         "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto"
       ],
       arrow: "fill-ui-base stroke-ui-cb/10"

package/dist/runtime/theme/progress.d.ts

@@ -0,0 +1,122 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        wrapper: string;
+        root: string;
+        indicator: string;
+        status: string;
+        steps: string;
+        step: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                wrapper: string;
+            };
+            sm: {
+                wrapper: string;
+            };
+            md: {
+                wrapper: string;
+            };
+            lg: {
+                wrapper: string;
+            };
+            xl: {
+                wrapper: string;
+            };
+        };
+        step: {
+            active: {
+                step: string;
+            };
+            first: {
+                step: string;
+            };
+            other: {
+                step: string;
+            };
+            last: {
+                step: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                wrapper: string;
+                root: string;
+                status: string;
+            };
+            vertical: {
+                wrapper: string;
+                root: string;
+                status: string;
+            };
+        };
+        inverted: {
+            true: {
+                status: string;
+            };
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
+        size: {
+            xs: {
+                wrapper: string;
+            };
+            sm: {
+                wrapper: string;
+            };
+            md: {
+                wrapper: string;
+            };
+            lg: {
+                wrapper: string;
+            };
+            xl: {
+                wrapper: string;
+            };
+        };
+        step: {
+            active: {
+                step: string;
+            };
+            first: {
+                step: string;
+            };
+            other: {
+                step: string;
+            };
+            last: {
+                step: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                wrapper: string;
+                root: string;
+                status: string;
+            };
+            vertical: {
+                wrapper: string;
+                root: string;
+                status: string;
+            };
+        };
+        inverted: {
+            true: {
+                status: string;
+            };
+        };
+    }, {
+        wrapper: string;
+        root: string;
+        indicator: string;
+        status: string;
+        steps: string;
+        step: string;
+    }, undefined>;
+    defaultVariants: {
+        size: "md";
+    };
+};
+export default _default;

package/dist/runtime/theme/progress.js

@@ -0,0 +1,95 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      wrapper: "gap-2",
+      root: "relative overflow-hidden rounded-full bg-soft-ui-cb/30",
+      indicator: "bg-ui-content rounded-full size-full transition-transform duration-200 ease-out",
+      status: "flex justify-end color-ui-cb/50 transition-[width] duration-200",
+      steps: "grid items-end color-ui-cb/80",
+      step: "truncate text-end row-start-1 col-start-1 transition-opacity"
+    },
+    variants: {
+      size: {
+        xs: {
+          wrapper: "text-xs"
+        },
+        sm: {
+          wrapper: "text-sm"
+        },
+        md: {
+          wrapper: "text-base"
+        },
+        lg: {
+          wrapper: "text-lg"
+        },
+        xl: {
+          wrapper: "text-xl"
+        }
+      },
+      step: {
+        active: {
+          step: "opacity-100"
+        },
+        first: {
+          step: "opacity-100 color-ui-cb/60"
+        },
+        other: {
+          step: "opacity-0"
+        },
+        last: {
+          step: ""
+        }
+      },
+      orientation: {
+        horizontal: {
+          wrapper: "w-full flex flex-col",
+          root: "w-full",
+          status: "flex-row"
+        },
+        vertical: {
+          wrapper: "h-full flex flex-row-reverse",
+          root: "h-full w-0.5em",
+          status: "flex-col"
+        }
+      },
+      inverted: {
+        true: {
+          status: "self-end"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        inverted: true,
+        class: {
+          step: "text-start",
+          status: "flex-row-reverse"
+        }
+      },
+      {
+        orientation: "vertical",
+        inverted: true,
+        class: {
+          steps: "items-start",
+          status: "flex-col-reverse"
+        }
+      },
+      { size: "xs", orientation: "horizontal", class: { root: "h-0.25em" } },
+      { size: "sm", orientation: "horizontal", class: { root: "h-0.5em" } },
+      { size: "md", orientation: "horizontal", class: { root: "h-0.75em" } },
+      { size: "lg", orientation: "horizontal", class: { root: "h-1em" } },
+      { size: "xl", orientation: "horizontal", class: { root: "h-1.25em" } },
+      { size: "xs", orientation: "vertical", class: { root: "w-0.25em" } },
+      { size: "sm", orientation: "vertical", class: { root: "w-0.5em" } },
+      { size: "md", orientation: "vertical", class: { root: "w-0.75em" } },
+      { size: "lg", orientation: "vertical", class: { root: "w-1em" } },
+      { size: "xl", orientation: "vertical", class: { root: "w-1.25em" } }
+    ],
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);

package/dist/runtime/theme/select.d.ts

@@ -12,14 +12,14 @@ declare const _default: {
         label: string;
         separator: string;
         item: string[];
-        itemPrefixIcon: string;
-        itemSuffix: string;
-        itemSuffixIcon: string;
+        itemLeadingIcon: string;
+        itemTrailing: string;
+        itemTrailingIcon: string;
         itemLabel: string;
-        prefix: string;
-        prefixIcon: string;
-        suffix: string;
-        suffixIcon: string;
+        leading: string;
+        leadingIcon: string;
+        trailing: string;
+        trailingIcon: string;
     };
     variants: {
         variant: {
@@ -61,10 +61,10 @@ declare const _default: {
                 item: string;
             };
         };
-        prefix: {
+        leading: {
             true: "";
         };
-        suffix: {
+        trailing: {
             true: "";
         };
         loading: {
@@ -125,10 +125,10 @@ declare const _default: {
                 item: string;
             };
         };
-        prefix: {
+        leading: {
             true: "";
         };
-        suffix: {
+        trailing: {
             true: "";
         };
         loading: {
@@ -160,14 +160,14 @@ declare const _default: {
         label: string;
         separator: string;
         item: string[];
-        itemPrefixIcon: string;
-        itemSuffix: string;
-        itemSuffixIcon: string;
+        itemLeadingIcon: string;
+        itemTrailing: string;
+        itemTrailingIcon: string;
         itemLabel: string;
-        prefix: string;
-        prefixIcon: string;
-        suffix: string;
-        suffixIcon: string;
+        leading: string;
+        leadingIcon: string;
+        trailing: string;
+        trailingIcon: string;
     }, undefined>;
     defaultVariants: {
         size: "md";

package/dist/runtime/theme/select.js

@@ -5,14 +5,14 @@ export default ct(
   {
     slots: {
       base: [
-        "relative group rounded-ui-base inline-flex items-center gap-x-2 focus:outline-none transition-colors",
+        "group inline-flex items-center gap-x-2 rounded-ui-base focus:outline-none transition-colors",
         "disabled:cursor-not-allowed disabled:opacity-50"
       ],
       value: "me-auto truncate pointer-events-none",
       placeholder: "me-auto truncate color-ui-cb/50",
       arrow: "fill-ui-cx stroke-ui-cb/20",
       content: [
-        "max-h-60 w-[var(--reka-popper-anchor-width)] bg-ui-cx shadow-lg rounded-[calc(var(--ui-radius-tabs)*0.66)] ring ring-ui-cb/20 overflow-hidden pointer-events-auto",
+        "z-1 max-h-60 w-[var(--reka-popper-anchor-width)] bg-ui-cx shadow-lg rounded-[calc(var(--ui-radius-tabs)*0.66)] ring ring-ui-cb/20 overflow-hidden pointer-events-auto",
         "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
       ],
       viewport: "divide-y divide-ui-cb/10 scroll-py-1",
@@ -27,14 +27,14 @@ export default ct(
         "data-[highlighted]:color-ui-cb data-[highlighted]:before:bg-soft-ui-cb/3",
         "data-[state=checked]:color-ui-base"
       ],
-      itemPrefixIcon: "shrink-0 color-ui-cb/80 group-data-[highlighted]:color-ui-cb/80 transition-colors",
-      itemSuffix: "ms-auto inline-flex gap-1.5 items-center",
-      itemSuffixIcon: "shrink-0",
+      itemLeadingIcon: "shrink-0 color-ui-cb/80 group-data-[highlighted]:color-ui-cb/80 transition-colors",
+      itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+      itemTrailingIcon: "shrink-0",
       itemLabel: "truncate",
-      prefix: "flex items-center",
-      prefixIcon: "shrink-0 size-1.25em",
-      suffix: "flex items-center",
-      suffixIcon: "shrink-0 size-1.25em"
+      leading: "flex items-center",
+      leadingIcon: "shrink-0 size-1.25em",
+      trailing: "flex items-center",
+      trailingIcon: "shrink-0 size-1.25em"
     },
     variants: {
       ...buttonGroupVariant,
@@ -93,10 +93,10 @@ export default ct(
           item: "text-xl"
         }
       },
-      prefix: {
+      leading: {
         true: ""
       },
-      suffix: {
+      trailing: {
         true: ""
       },
       loading: {
@@ -151,17 +151,17 @@ export default ct(
       },
       {
         loading: true,
-        prefix: true,
+        leading: true,
         class: {
-          prefixIcon: "animate-spin"
+          leadingIcon: "animate-spin"
         }
       },
       {
         loading: true,
-        prefix: false,
-        suffix: true,
+        leading: false,
+        trailing: true,
         class: {
-          suffixIcon: "animate-spin"
+          trailingIcon: "animate-spin"
         }
       }
     ],