@byyuurin/ui 0.0.8 → 0.0.10

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

@@ -0,0 +1,56 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        header: string;
+        body: string;
+        heading: string;
+        grid: string;
+        gridRow: string;
+        gridWeekDaysRow: string;
+        gridBody: string;
+        headCell: string;
+        cell: string;
+        cellTrigger: string[];
+    };
+    variants: {
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        readonly: {
+            true: {
+                cellTrigger: string;
+            };
+        };
+        disabled: {
+            true: {
+                cellTrigger: string;
+            };
+        };
+    };
+    compoundVariants: {
+        readonly: false;
+        disabled: false;
+        class: {
+            cellTrigger: string;
+        };
+    }[];
+    defaultVariants: {
+        size: "md";
+    };
+};
+export default _default;

package/dist/runtime/theme/calendar.js

@@ -0,0 +1,69 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "",
+      header: "flex items-center justify-between",
+      body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
+      heading: "text-center font-medium truncate mx-auto",
+      grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
+      gridRow: "grid gap-1 grid-cols-7",
+      gridWeekDaysRow: "mb-1 grid gap-1 w-full grid-cols-7",
+      gridBody: "grid",
+      headCell: "rounded-ui-base color-ui-fill",
+      cell: "relative text-center color-ui-base/80",
+      cellTrigger: [
+        "relative size-2.25em flex items-center justify-center rounded-ui-button whitespace-nowrap transition",
+        "focus-visible:ring-2 focus-visible:ring-ui-base/90 focus:outline-none",
+        "data-[disabled]:color-ui-base/50 data-[disabled]:cursor-not-allowed",
+        "data-[unavailable]:line-through data-[unavailable]:color-ui-base/50 data-[unavailable]:cursor-not-allowed",
+        "data-[selected]:color-ui-cx data-[selected]:bg-soft-ui-fill/95",
+        "data-[today]:font-semibold data-[today]:not-[[data-selected]]:color-ui-fill/95",
+        "data-[highlighted]:bg-soft-ui-fill/20",
+        "data-[outside-view]:color-ui-base/20"
+      ]
+    },
+    variants: {
+      size: {
+        xs: {
+          root: "text-xs"
+        },
+        sm: {
+          root: "text-sm"
+        },
+        md: {
+          root: "text-base"
+        },
+        lg: {
+          root: "text-lg"
+        },
+        xl: {
+          root: "text-xl"
+        }
+      },
+      readonly: {
+        true: {
+          cellTrigger: "cursor-default data-[today]:not-[[data-selected]]:color-ui-fill/60"
+        }
+      },
+      disabled: {
+        true: {
+          cellTrigger: "data-[today]:not-[[data-selected]]:color-ui-fill/60 data-[selected]:bg-soft-ui-fill/50"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        readonly: false,
+        disabled: false,
+        class: {
+          cellTrigger: "hover:not-[[data-selected],[data-disabled],[data-unavailable]]:bg-soft-ui-fill/10"
+        }
+      }
+    ],
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);

package/dist/runtime/theme/card.js

@@ -17,16 +17,16 @@ export default ct(
           description: "color-ui-cx/80"
         },
         "outline": {
-          root: "color-ui-content bg-ui-cx divide-ui-content/20 ring ring-inset ring-ui-fill/20",
-          description: "color-ui-content/80"
+          root: "color-ui-fill bg-ui-base divide-ui-fill/20 ring ring-inset ring-ui-fill/20",
+          description: "color-ui-fill/80"
         },
         "soft": {
-          root: "color-ui-content bg-soft-ui-fill/10 divide-ui-content/20",
-          description: "color-ui-content/80"
+          root: "color-ui-fill bg-soft-ui-fill/10 divide-ui-fill/20",
+          description: "color-ui-fill/80"
         },
         "soft-outline": {
-          root: "color-ui-content bg-soft-ui-fill/10 divide-ui-content/20 ring ring-inset ring-ui-fill/20",
-          description: "color-ui-content/80"
+          root: "color-ui-fill bg-soft-ui-fill/10 divide-ui-fill/20 ring ring-inset ring-ui-fill/20",
+          description: "color-ui-fill/80"
         }
       }
     },

package/dist/runtime/theme/carousel.js

@@ -35,7 +35,7 @@ export default ct(
       },
       active: {
         true: {
-          dot: "bg-soft-ui-content"
+          dot: "bg-ui-fill"
         }
       }
     }

package/dist/runtime/theme/checkbox.js

@@ -5,15 +5,15 @@ export default ct(
     slots: {
       root: "relative flex items-start",
       base: [
-        "size-1.25em shrink-0 flex items-center justify-center rounded-ui-checkbox color-ui-cx ring-2 ring-ui-content ring-inset bg-soft-ui-content",
-        "outline-none focus-visible:outline-ui-cb/80 focus-visible:outline-2 focus-visible:outline-offset-2",
-        "aria-[checked=false]:ring-1 aria-[checked=false]:ring-ui-cb aria-[checked=false]:bg-ui-cx"
+        "size-1.25em shrink-0 flex items-center justify-center rounded-ui-checkbox color-ui-cx ring-2 ring-ui-fill ring-inset bg-ui-fill",
+        "outline-none focus-visible:outline-ui-base/80 focus-visible:outline-2 focus-visible:outline-offset-2",
+        "aria-[checked=false]:ring-1 aria-[checked=false]:ring-ui-base aria-[checked=false]:bg-ui-base"
       ],
       container: "flex items-center h-1.25em overflow-hidden",
       wrapper: "text-inherit ms-2",
       icon: "color-ui-cx shrink-0 size-1em transition data-[state=unchecked]:translate-y-full",
-      label: "flex color-ui-cb after:content-empty",
-      description: "color-ui-cb/60"
+      label: "flex color-ui-base after:content-empty",
+      description: "color-ui-base/60"
     },
     variants: {
       size: {

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

@@ -47,52 +47,19 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        variant: {
-            solid: {
-                base: string;
-            };
-            outline: {
-                base: string;
-            };
-            soft: {
-                base: string;
-            };
-            'soft-outline': {
-                base: string;
-            };
+    compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            label: string;
         };
-        size: {
-            xs: {
-                base: string;
-            };
-            sm: {
-                base: string;
-            };
-            md: {
-                base: string;
-            };
-            lg: {
-                base: string;
-            };
-            xl: {
-                base: string;
-            };
-        };
-        groupOrientation: {
-            horizontal: {
-                base: string;
-            };
-            vertical: {
-                base: string;
-            };
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            label: string;
         };
-    }, {
-        base: string;
-        label: string;
-        leadingIcon: string;
-        trailingIcon: string;
-    }, undefined>;
+    })[];
     defaultVariants: {
         size: "md";
     };

package/dist/runtime/theme/chip.js

@@ -16,13 +16,13 @@ export default ct(
           base: "color-ui-cx bg-soft-ui-fill/90"
         },
         "outline": {
-          base: "color-ui-fill bg-ui-cx ring ring-inset ring-ui-fill/30"
+          base: "color-ui-fill bg-ui-base ring ring-inset ring-ui-fill/30"
         },
         "soft": {
-          base: "color-ui-content/80 bg-soft-ui-fill/10"
+          base: "color-ui-fill/80 bg-soft-ui-fill/10"
         },
         "soft-outline": {
-          base: "color-ui-content/80 bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
+          base: "color-ui-fill/80 bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
         }
       },
       size: {

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

@@ -3,56 +3,32 @@ declare const _default: {
     slots: {
         overlay: string;
         content: string;
-        handle: string;
         container: string;
         header: string;
-        title: string;
-        description: string;
         body: string;
         footer: string;
+        title: string;
+        description: string;
+        close: string;
     };
     variants: {
         direction: {
             top: {
                 content: string;
-                handle: string;
             };
             bottom: {
                 content: string;
-                handle: string;
             };
             left: {
                 content: string;
-                handle: string;
             };
             right: {
                 content: string;
-                handle: string;
             };
         };
-        inset: {
+        transition: {
             true: {
-                content: string;
-            };
-        };
-    };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        direction: {
-            top: {
-                content: string;
-                handle: string;
-            };
-            bottom: {
-                content: string;
-                handle: string;
-            };
-            left: {
-                content: string;
-                handle: string;
-            };
-            right: {
-                content: string;
-                handle: string;
+                overlay: string;
             };
         };
         inset: {
@@ -60,34 +36,96 @@ declare const _default: {
                 content: string;
             };
         };
-    }, {
-        overlay: string;
-        content: string;
-        handle: string;
-        container: string;
-        header: string;
-        title: string;
-        description: string;
-        body: string;
-        footer: string;
-    }, undefined>;
+    };
+    compoundVariants: ({
+        direction: ("top" | "bottom")[];
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+        transition?: undefined;
+    } | {
+        direction: ("left" | "right")[];
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+        transition?: undefined;
+    } | {
+        direction: "top"[];
+        inset: true;
+        class: {
+            content: string;
+        };
+        transition?: undefined;
+    } | {
+        direction: "top"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    } | {
+        direction: "bottom"[];
+        inset: true;
+        class: {
+            content: string;
+        };
+        transition?: undefined;
+    } | {
+        direction: "bottom"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    } | {
+        direction: "left"[];
+        inset: true;
+        class: {
+            content: string;
+        };
+        transition?: undefined;
+    } | {
+        direction: "left"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    } | {
+        direction: "right"[];
+        inset: true;
+        class: {
+            content: string;
+        };
+        transition?: undefined;
+    } | {
+        direction: "right"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    })[];
     defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
         direction: {
             top: {
                 content: string;
-                handle: string;
             };
             bottom: {
                 content: string;
-                handle: string;
             };
             left: {
                 content: string;
-                handle: string;
             };
             right: {
                 content: string;
-                handle: string;
+            };
+        };
+        transition: {
+            true: {
+                overlay: string;
             };
         };
         inset: {
@@ -98,13 +136,13 @@ declare const _default: {
     }, {
         overlay: string;
         content: string;
-        handle: string;
         container: string;
         header: string;
-        title: string;
-        description: string;
         body: string;
         footer: string;
+        title: string;
+        description: string;
+        close: string;
     }>;
 };
 export default _default;

package/dist/runtime/theme/drawer.js

@@ -4,32 +4,33 @@ export default ct(
   {
     slots: {
       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",
+      content: "fixed z-1 bg-ui-base ring ring-ui-base/5 flex focus:outline-none",
       container: "w-full flex flex-col overflow-hidden overflow-y-auto",
-      header: "p-4 sm:px-6 sibling:pt-0",
-      title: "color-ui-cb text-xl font-semibold",
-      description: "mt-1 color-ui-cb/80",
-      body: "p-4 sm:px-6 flex-1 sibling:pt-0",
-      footer: "p-4 sm:px-6 flex flex-col gap-1.5"
+      header: "flex flex-wrap items-center gap-1 px-4 py-5 pb-0 sm:px-6",
+      body: "flex-1 overflow-y-auto p-4 sm:p-6",
+      footer: "flex items-center gap-1.5 p-4 pt-0 sm:px-6",
+      title: "flex-grow color-ui-base text-xl font-semibold",
+      description: "w-full color-ui-base/80",
+      close: "ms-auto"
     },
     variants: {
       direction: {
         top: {
-          content: "top-0 mb-24 flex-col-reverse rounded-b-ui-box",
-          handle: "mb-4"
+          content: "top-0 mb-24 flex-col-reverse rounded-b-ui-box"
         },
         bottom: {
-          content: "bottom-0 mt-24 flex-col rounded-t-ui-box",
-          handle: "mt-4"
+          content: "bottom-0 mt-24 flex-col rounded-t-ui-box"
         },
         left: {
-          content: "left-0 flex-row-reverse rounded-r-ui-box",
-          handle: "mr-4"
+          content: "left-0 flex-row-reverse rounded-r-ui-box"
         },
         right: {
-          content: "right-0 flex-row rounded-l-ui-box",
-          handle: "ml-4"
+          content: "right-0 flex-row rounded-l-ui-box"
+        }
+      },
+      transition: {
+        true: {
+          overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
         }
       },
       inset: {
@@ -42,15 +43,13 @@ export default ct(
       {
         direction: ["top", "bottom"],
         class: {
-          content: "inset-x-0 h-auto max-h-[96%]",
-          handle: "w-12 h-1.5 mx-auto"
+          content: "inset-x-0 h-auto max-h-[96%]"
         }
       },
       {
         direction: ["left", "right"],
         class: {
-          content: "inset-y-0 w-auto max-w-[calc(100%-2rem)]",
-          handle: "h-12 w-1.5 my-auto"
+          content: "inset-y-0 w-auto max-w-[calc(100%-2rem)]"
         }
       },
       {
@@ -60,6 +59,13 @@ export default ct(
           content: "inset-x-4 top-4"
         }
       },
+      {
+        direction: ["top"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-top_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-top_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
+      },
       {
         direction: ["bottom"],
         inset: true,
@@ -67,6 +73,13 @@ export default ct(
           content: "inset-x-4 bottom-4"
         }
       },
+      {
+        direction: ["bottom"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-bottom_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-bottom_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
+      },
       {
         direction: ["left"],
         inset: true,
@@ -74,12 +87,26 @@ export default ct(
           content: "inset-y-4 left-4"
         }
       },
+      {
+        direction: ["left"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-left_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-left_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
+      },
       {
         direction: ["right"],
         inset: true,
         class: {
           content: "inset-y-4 right-4"
         }
+      },
+      {
+        direction: ["right"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-right_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-right_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
       }
     ]
   }

package/dist/runtime/theme/dropdown-menu.d.ts

@@ -0,0 +1,71 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        content: string[];
+        arrow: string;
+        group: string;
+        label: string;
+        separator: string;
+        item: string[];
+        itemLeadingIcon: string;
+        itemLeadingAvatar: string;
+        itemTrailing: string;
+        itemTrailingIcon: string;
+        itemTrailingKbds: string;
+        itemLabel: string;
+        itemLabelExternalIcon: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                content: string;
+            };
+            sm: {
+                content: string;
+            };
+            md: {
+                content: string;
+            };
+            lg: {
+                content: string;
+            };
+            xl: {
+                content: string;
+            };
+        };
+        active: {
+            true: {
+                item: string;
+                itemLeadingIcon: string;
+            };
+            false: {
+                item: string;
+                itemLeadingIcon: string;
+            };
+        };
+        loading: {
+            true: {
+                itemLeadingIcon: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            label: string;
+            item: string;
+            itemTrailingKbds: string;
+        };
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            label: string;
+            item: string;
+            itemTrailingKbds: string;
+        };
+    })[];
+    defaultVariants: {
+        size: "md";
+    };
+};
+export default _default;