@karakuri-ui/react 0.2.1 → 0.2.3

package/README.md

@@ -2,6 +2,9 @@
 
 Enterprise React component library with design token system.
 
+[![npm react](https://img.shields.io/npm/v/@karakuri-ui/react?color=37D8E6&label=react)](https://www.npmjs.com/package/@karakuri-ui/react)
+[![npm tokens](https://img.shields.io/npm/v/@karakuri-ui/tokens?color=37D8E6&label=tokens)](https://www.npmjs.com/package/@karakuri-ui/tokens)
+
 📖 [KARAKURI Design System](https://karakuri-ai.github.io/design-system)
 
 ---
@@ -33,11 +36,11 @@ npm install @karakuri-ui/tokens
 ### Tailwind v3
 
 ```css
+@import '@karakuri-ui/tokens/css/all.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@import '@karakuri-ui/tokens/css/all.css';
 ```
 
 ```js
@@ -76,3 +79,10 @@ import { Chart, type ChartConfig } from '@karakuri-ui/react/chart'  // charts: s
 | **Charts** | Recharts |
 | **Tokens** | Figma Token Studio → `sync-tokens` |
 | **Build** | tsup (library), Next.js (docs) |
+
+## Roadmap
+
+- [ ] AI guide via `llms.txt` — AI tool integration for token-aware code generation
+- [ ] Chat components — TypingIndicator, QuickReply, ChatInput, ChatMessage
+- [ ] Token Playground — live token editor with real-time preview
+- [ ] Figma design kit — component library for designers

package/dist/index.js

@@ -1596,7 +1596,7 @@ var Field = Object.assign(FieldRoot, {
 var inputVariants = (0, import_class_variance_authority9.cva)(
   [
     "flex w-full bg-background text-foreground placeholder:text-foreground/30",
-    "border transition-colors duration-micro",
+    "border transition-colors duration-micro outline-transparent",
     "focus:[outline:2px_solid_transparent]",
     "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted",
     "file:border-0 file:bg-transparent file:text-sm file:font-semibold"
@@ -1805,7 +1805,7 @@ var import_class_variance_authority10 = require("class-variance-authority");
 var textareaVariants = (0, import_class_variance_authority10.cva)(
   [
     "flex w-full bg-background text-foreground placeholder:text-foreground/30",
-    "border transition-colors duration-micro",
+    "border transition-colors duration-micro outline-transparent",
     "focus:[outline:2px_solid_transparent]",
     "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted"
   ].join(" "),
@@ -2545,7 +2545,7 @@ var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, radiu
       onCloseAutoFocus?.(e);
     },
     className: cn(
-      "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background shadow-lg",
+      "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg",
       flush ? "py-1" : "p-1",
       contentRadiusMap[radius],
       className
@@ -2682,7 +2682,7 @@ var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) =
     {
       ref,
       className: cn(
-        "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background shadow-lg",
+        "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg",
         flush ? "py-1" : "p-1",
         contentRadiusMap[radius],
         className
@@ -2842,7 +2842,7 @@ var SelectTrigger = React18.forwardRef(({ className, children, ...props }, ref)
         "flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted",
         "border border-border-form",
         triggerRadiusMap[radius],
-        "transition-colors duration-micro",
+        "transition-colors duration-micro outline-transparent",
         "focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)] focus:[outline:2px_solid_transparent]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[placeholder]:text-foreground/30",
@@ -2900,7 +2900,7 @@ var SelectContent = React18.forwardRef(({ className, children, position = "poppe
         onCloseAutoFocus?.(e);
       },
       className: cn(
-        "relative z-dropdown min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background shadow-lg",
+        "relative z-dropdown min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background text-foreground shadow-lg",
         flush ? "py-1" : "p-1",
         contentRadiusMap2[contentRadius],
         position === "popper" && "max-h-[var(--radix-select-content-available-height)]",
@@ -4939,7 +4939,7 @@ var PaginationRoot = React26.forwardRef(
         className: cn("", className),
         ...props
       },
-      children
+      children ?? /* @__PURE__ */ React26.createElement(PaginationContent, null, withEdges && /* @__PURE__ */ React26.createElement(PaginationItem, null, /* @__PURE__ */ React26.createElement(PaginationFirst, null)), withControls && /* @__PURE__ */ React26.createElement(PaginationItem, null, /* @__PURE__ */ React26.createElement(PaginationPrevious, null)), /* @__PURE__ */ React26.createElement(PaginationItems, null), withControls && /* @__PURE__ */ React26.createElement(PaginationItem, null, /* @__PURE__ */ React26.createElement(PaginationNext, null)), withEdges && /* @__PURE__ */ React26.createElement(PaginationItem, null, /* @__PURE__ */ React26.createElement(PaginationLast, null)))
     ));
   }
 );
@@ -5236,7 +5236,7 @@ var ModalContent = React27.forwardRef(({ className, children, size = "sm", scrol
         "div",
         {
           className: cn(
-            "relative w-full rounded-xl bg-background shadow-xl overflow-hidden",
+            "relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden",
             modalContentVariants({ size }),
             className
           ),
@@ -5252,7 +5252,7 @@ var ModalContent = React27.forwardRef(({ className, children, size = "sm", scrol
     {
       ref,
       className: cn(
-        "relative w-full rounded-xl bg-background shadow-xl overflow-hidden",
+        "relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden",
         "focus:outline-none",
         "data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit",
         modalContentVariants({ size }),
@@ -5356,7 +5356,7 @@ var AlertModalContent = React27.forwardRef(({ className, children, size = "sm",
   {
     ref,
     className: cn(
-      "relative w-full rounded-xl bg-background shadow-xl",
+      "relative w-full rounded-xl bg-background text-foreground shadow-xl",
       "focus:outline-none",
       "data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit",
       alertModalContentVariants({ size }),
@@ -5538,7 +5538,7 @@ var DrawerContent = React28.forwardRef(({ className, children, side = "right", s
     {
       ref,
       className: cn(
-        "fixed z-modal flex flex-col bg-background shadow-xl",
+        "fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
         "focus:outline-none",
         SIDE_POSITION[side],
         isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
@@ -5732,8 +5732,8 @@ var popoverContentVariants = (0, import_class_variance_authority25.cva)(
   {
     variants: {
       variant: {
-        default: "bg-background-paper border border-border shadow-lg",
-        elevated: "bg-background-paper/95 border border-border-subtle shadow-xl backdrop-blur-sm"
+        default: "bg-background-paper text-foreground border border-border shadow-lg",
+        elevated: "bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm"
       },
       size: {
         sm: "text-sm p-3 rounded-lg",