@lego-box/ui-kit 0.1.0 → 0.1.2

package/README.md

@@ -1,47 +1,47 @@
-# @lego-box/ui-kit
-
-Reusable UI component library for Lego Box applications. Built with React, TypeScript, and Tailwind CSS.
-
-## Installation
-
-```bash
-pnpm add @lego-box/ui-kit
-# or
-npm install @lego-box/ui-kit
-```
-
-## Usage
-
-Import components directly:
-
-```tsx
-import { Button, Card, Input } from '@lego-box/ui-kit';
-
-function MyComponent() {
-  return (
-    <Card>
-      <Input placeholder="Enter text" />
-      <Button>Submit</Button>
-    </Card>
-  );
-}
-```
-
-CSS is automatically injected - no need to import stylesheets manually.
-
-## Components
-
-- **Form Components:** Button, Input, Checkbox, Label, Select, PasswordInput
-- **Layout Components:** Card, Dialog, Tabs, AdminShell, TopBar, SideNav
-- **Data Display:** DataTable, GroupedTable, Badge, StatusBadge, Pagination
-- **User Management:** UserFormDialog, RoleFormDialog, PermissionFormDialog
-- **Feedback:** Loading, NotFound, AccessDenied, Tooltip
-- **And many more...**
-
-## Theming
-
-The library uses CSS variables for theming. Supports light and dark modes out of the box.
-
-## License
-
-MIT
+# @lego-box/ui-kit
+
+Reusable UI component library for Lego Box applications. Built with React, TypeScript, and Tailwind CSS.
+
+## Installation
+
+```bash
+pnpm add @lego-box/ui-kit
+# or
+npm install @lego-box/ui-kit
+```
+
+## Usage
+
+Import components directly:
+
+```tsx
+import { Button, Card, Input } from '@lego-box/ui-kit';
+
+function MyComponent() {
+  return (
+    <Card>
+      <Input placeholder="Enter text" />
+      <Button>Submit</Button>
+    </Card>
+  );
+}
+```
+
+CSS is automatically injected - no need to import stylesheets manually.
+
+## Components
+
+- **Form Components:** Button, Input, Checkbox, Label, Select, PasswordInput
+- **Layout Components:** Card, Dialog, Tabs, AdminShell, TopBar, SideNav
+- **Data Display:** DataTable, GroupedTable, Badge, StatusBadge, Pagination
+- **User Management:** UserFormDialog, RoleFormDialog, PermissionFormDialog
+- **Feedback:** Loading, NotFound, AccessDenied, Tooltip
+- **And many more...**
+
+## Theming
+
+The library uses CSS variables for theming. Supports light and dark modes out of the box.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -92,6 +92,8 @@ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string;
     onValueChange: (value: string) => void;
     children: React.ReactNode;
+    /** @internal Filtered out - do not pass to DOM (Radix compatibility) */
+    selectedValue?: string;
 }
 interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -114,14 +116,8 @@ interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
  * - Gap between tabs
  */
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & {
-    selectedValue?: string;
-    onValueChange?: (value: string) => void;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & {
-    selectedValue?: string;
-    onValueChange?: (value: string) => void;
-} & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 
 interface DataTableColumn<T> {
     key: string;
@@ -476,7 +472,7 @@ declare function CanGuard({ allowed, children, fallback }: CanGuardProps): react
 /**
  * CanDisable - Disables children when not allowed and shows tooltip on hover.
  * Use for tabs, buttons, and actions that should be disabled (not hidden) when lacking permission.
- * Forwards all additional props (e.g. selectedValue, onValueChange from TabsList) to the child.
+ * Forwards all additional props to the child.
  */
 interface CanDisableProps {
     /** Whether the action is allowed */

package/dist/index.d.ts

@@ -92,6 +92,8 @@ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     value: string;
     onValueChange: (value: string) => void;
     children: React.ReactNode;
+    /** @internal Filtered out - do not pass to DOM (Radix compatibility) */
+    selectedValue?: string;
 }
 interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -114,14 +116,8 @@ interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
  * - Gap between tabs
  */
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & {
-    selectedValue?: string;
-    onValueChange?: (value: string) => void;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & {
-    selectedValue?: string;
-    onValueChange?: (value: string) => void;
-} & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 
 interface DataTableColumn<T> {
     key: string;
@@ -476,7 +472,7 @@ declare function CanGuard({ allowed, children, fallback }: CanGuardProps): react
 /**
  * CanDisable - Disables children when not allowed and shows tooltip on hover.
  * Use for tabs, buttons, and actions that should be disabled (not hidden) when lacking permission.
- * Forwards all additional props (e.g. selectedValue, onValueChange from TabsList) to the child.
+ * Forwards all additional props to the child.
  */
 interface CanDisableProps {
     /** Whether the action is allowed */

package/dist/index.js

@@ -497,30 +497,27 @@ Badge.displayName = "Badge";
 // src/components/tabs.tsx
 var React10 = __toESM(require("react"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var TabsContext = React10.createContext(null);
 var Tabs = React10.forwardRef(
-  ({ value, onValueChange, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "div",
-      {
-        ref,
-        className: cn("w-full", className),
-        ...props,
-        children: React10.Children.map(children, (child) => {
-          if (React10.isValidElement(child)) {
-            return React10.cloneElement(child, {
-              selectedValue: value,
-              onValueChange
-            });
-          }
-          return child;
-        })
-      }
+  ({
+    value,
+    onValueChange,
+    children,
+    className,
+    // Explicitly omit component-specific props so they never reach the DOM (fixes React warnings)
+    selectedValue: _selectedValue,
+    ...props
+  }, ref) => {
+    const contextValue = React10.useMemo(
+      () => ({ value, onValueChange }),
+      [value, onValueChange]
     );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("w-full", className), ...props, children }) });
   }
 );
 Tabs.displayName = "Tabs";
 var TabsList = React10.forwardRef(
-  ({ children, className, selectedValue, onValueChange, ...props }, ref) => {
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
@@ -530,28 +527,26 @@ var TabsList = React10.forwardRef(
           className
         ),
         ...props,
-        children: React10.Children.map(children, (child) => {
-          if (React10.isValidElement(child)) {
-            return React10.cloneElement(child, {
-              selectedValue,
-              onValueChange
-            });
-          }
-          return child;
-        })
+        children
       }
     );
   }
 );
 TabsList.displayName = "TabsList";
 var TabsTrigger = React10.forwardRef(
-  ({ value, children, className, selectedValue, onValueChange, badge, disabled, ...props }, ref) => {
-    const isActive = selectedValue === value;
+  ({ value, children, className, badge, disabled, ...props }, ref) => {
+    const context = React10.useContext(TabsContext);
+    const isActive = context?.value === value;
+    const handleClick = () => {
+      if (!disabled && context?.onValueChange) {
+        context.onValueChange(value);
+      }
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         ref,
-        onClick: () => !disabled && onValueChange?.(value),
+        onClick: handleClick,
         disabled,
         className: cn(
           "inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200",