@neasg/design-system 0.4.11 → 0.4.12

package/dist/tabs.js

@@ -2,11 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { Check } from "lucide-react";
 import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { XIcon } from "./animated-icons/x";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
-import { PopoverMenuItem, PopoverMenuSection } from "./popover-menu";
+import { PopoverMenuSection } from "./popover-menu";
 const TabsContext = React.createContext(null);
 const getTabValueSelector = (value) => {
     const escapedValue = typeof CSS !== "undefined" && typeof CSS.escape === "function"
@@ -40,7 +41,7 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 function renderTabsItemLabel(label, active) {
     return typeof label === "function" ? label({ active }) : label;
 }
-function TabTriggerWithDropdown({ item, triggerClassName, }) {
+function TabTriggerWithDropdown({ item, triggerClassName, contentClassName, }) {
     var _a, _b, _c, _d, _e;
     const [open, setOpen] = React.useState(false);
     const sections = (_a = item.sections) !== null && _a !== void 0 ? _a : [];
@@ -81,9 +82,11 @@ function TabTriggerWithDropdown({ item, triggerClassName, }) {
             setInternalActiveSection((_b = (_a = sections[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
         }
     }, [isTabSelected, item.activeSection, sections]);
-    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", contentClassName: "min-w-[12rem]", trigger: _jsxs(TabsTrigger, { value: item.value, disabled: item.disabled, "data-state": isTabSelected ? "active" : "inactive", "data-tab-value": item.value, className: cn("flex items-center gap-1", triggerClassName), children: [renderTabsItemLabel(item.label, isTabSelected), _jsx(ChevronDownIcon, { size: 12, className: cn("transition-transform duration-200", open && "rotate-180") })] }), children: _jsx(PopoverMenuSection, { children: sections.map((section) => (_jsx(PopoverMenuItem, { active: isTabSelected && activeSection === section.id, className: "py-2 pl-2 pr-8", onClick: () => handleSectionClick(section.id), children: section.label }, section.id))) }) }));
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", contentClassName: cn("min-w-[12rem]", contentClassName), trigger: _jsxs(TabsTrigger, { value: item.value, disabled: item.disabled, "data-state": isTabSelected ? "active" : "inactive", "data-tab-value": item.value, className: cn("flex items-center gap-1", triggerClassName), children: [renderTabsItemLabel(item.label, isTabSelected), _jsx(ChevronDownIcon, { size: 12, className: cn("transition-transform duration-200", open && "rotate-180") })] }), children: _jsx(PopoverMenuSection, { className: "space-y-1", children: sections.map((section) => (_jsxs("button", { type: "button", className: cn("flex min-h-fit w-full cursor-pointer items-start gap-2 rounded-sm px-3 py-2 text-left text-sm font-normal leading-5 text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", isTabSelected &&
+                    activeSection === section.id &&
+                    "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground"), onClick: () => handleSectionClick(section.id), children: [_jsx("span", { className: "block min-w-0 flex-1 whitespace-normal break-words leading-5", children: section.label }), isTabSelected && activeSection === section.id ? (_jsx(Check, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" })) : null] }, section.id))) }) }));
 }
-function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, }) {
+function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, contentClassName, }) {
     return (_jsx(TabTriggerWithDropdown, { item: {
             value,
             label,
@@ -93,7 +96,7 @@ function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSec
             scrollOffset,
             onSectionSelect,
             activeSection,
-        }, triggerClassName: className }));
+        }, triggerClassName: className, contentClassName: contentClassName }));
 }
 function TabTriggerItem({ item, triggerClassName }) {
     var _a;

package/dist/theme-switcher.d.ts

@@ -21,7 +21,7 @@ export interface ThemeSwitcherProps extends Omit<SwitchProps, "checked" | "defau
     useLightLabel?: string;
     className?: string;
 }
-declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, tabIndex, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeSwitcher {
     var displayName: string;
 }

package/dist/theme-switcher.js

@@ -5,23 +5,21 @@ import { Moon, Sun } from "lucide-react";
 import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Switch } from "./switch";
-function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCollapsed = false, label, lightLabel = "Light theme", darkLabel = "Dark theme", useDarkLabel = "Use dark theme", useLightLabel = "Use light theme", className, disabled, ...props }) {
+function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCollapsed = false, label, lightLabel = "Light theme", darkLabel = "Dark theme", useDarkLabel = "Use dark theme", useLightLabel = "Use light theme", className, disabled, tabIndex, ...props }) {
     const isControlled = checked !== undefined;
     const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
     const isDark = isControlled ? checked : uncontrolledChecked;
     const activeLabel = label !== null && label !== void 0 ? label : (isDark ? darkLabel : lightLabel);
     const ActiveIcon = isDark ? Moon : Sun;
-    const CollapsedIcon = isDark ? Sun : Moon;
     const handleCheckedChange = React.useCallback((nextChecked) => {
         if (!isControlled) {
             setUncontrolledChecked(nextChecked);
         }
         onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
     }, [isControlled, onCheckedChange]);
-    if (isCollapsed) {
-        return (_jsx("div", { "data-slot": "theme-switcher", className: cn("flex w-full justify-center py-1", className), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled, "aria-label": isDark ? useLightLabel : useDarkLabel, "aria-pressed": isDark, onClick: () => handleCheckedChange(!isDark), children: _jsx(CollapsedIcon, { "aria-hidden": "true", className: "h-4 w-4" }) }) }));
-    }
-    return (_jsx("div", { "data-slot": "theme-switcher", className: "px-1.5 py-1", children: _jsx(Switch, { checked: isDark, onCheckedChange: handleCheckedChange, disabled: disabled, label: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: activeLabel })] }), wrapperClassName: cn("w-full flex-row-reverse justify-between rounded-control px-3 py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", className), ...props }) }));
+    return (_jsxs("div", { "data-slot": "theme-switcher", className: cn("relative w-full overflow-hidden py-1 transition-[padding] duration-300 ease-in-out", isCollapsed ? "px-0" : "px-1.5", className), children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled, "aria-hidden": isCollapsed ? undefined : true, "aria-label": isDark ? useLightLabel : useDarkLabel, "aria-pressed": isDark, tabIndex: isCollapsed ? tabIndex : -1, className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150", isCollapsed ? "opacity-100" : "pointer-events-none opacity-0"), onClick: () => handleCheckedChange(!isDark), children: _jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4" }) }), _jsx("div", { "aria-hidden": isCollapsed ? true : undefined, className: cn("transition-[opacity,transform] duration-150", isCollapsed
+                    ? "pointer-events-none translate-x-1 opacity-0"
+                    : "translate-x-0 opacity-100"), children: _jsx(Switch, { checked: isDark, onCheckedChange: handleCheckedChange, disabled: disabled, tabIndex: isCollapsed ? -1 : tabIndex, label: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: activeLabel })] }), wrapperClassName: "w-full flex-row-reverse justify-between rounded-control px-3 py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", ...props }) })] }));
 }
 ThemeSwitcher.displayName = "ThemeSwitcher";
 export { ThemeSwitcher };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",