@dimaan/ui 0.0.1 → 0.0.2

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, AnchorHTMLAttributes, Ref } from 'react';
+import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref } from 'react';
 import { ClassValue } from 'clsx';
 
 interface DashboardLayoutContextValue {
@@ -34,7 +34,8 @@ type RenderLink = (props: {
     'aria-current'?: 'page';
 }) => ReactElement;
 interface AppShellNavItem {
-    key: string;
+    /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
+    key?: string;
     label: ReactNode;
     href?: string;
     icon?: ReactNode;
@@ -44,18 +45,14 @@ interface AppShellNavItem {
     render?: RenderLink;
 }
 interface AppShellNavGroup {
-    key: string;
+    /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
+    key?: string;
     label: ReactNode;
     icon?: ReactNode;
     active?: boolean;
     defaultOpen?: boolean;
     items: AppShellNavItem[];
 }
-interface AppShellNavSection {
-    key: string;
-    label?: ReactNode;
-    items: Array<AppShellNavItem | AppShellNavGroup>;
-}
 interface AppShellBrand {
     logo?: ReactNode;
     name?: ReactNode;
@@ -63,8 +60,12 @@ interface AppShellBrand {
 }
 interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' | 'collapsed' | 'onCollapsedChange'> {
     brand?: AppShellBrand;
-    /** Either a flat list of items, or grouped sections. */
-    nav: AppShellNavSection[] | Array<AppShellNavItem | AppShellNavGroup>;
+    /**
+     * Flat list of nav entries: leaf items (with `href` or `render`) and/or
+     * collapsible groups (with `items`). For more advanced layouts (sections,
+     * dividers, custom structure), compose `Sidebar` + `SidebarNav` directly.
+     */
+    nav: Array<AppShellNavItem | AppShellNavGroup>;
     title?: ReactNode;
     searchPlaceholder?: string;
     onSearch?: (value: string) => void;
@@ -178,6 +179,19 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
+interface LanguageOption<TCode extends string = string> {
+    code: TCode;
+    label?: string;
+}
+interface LanguageSwitcherProps<TCode extends string = string> extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    languages: ReadonlyArray<LanguageOption<TCode>>;
+    value: TCode;
+    onChange: (next: TCode) => void;
+    /** Accessible label for the group. Defaults to "Language". */
+    ariaLabel?: string;
+}
+declare function LanguageSwitcher<TCode extends string = string>({ languages, value, onChange, ariaLabel, className, ...props }: LanguageSwitcherProps<TCode>): react_jsx_runtime.JSX.Element;
+
 type SidebarProps = HTMLAttributes<HTMLElement>;
 declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 
@@ -346,4 +360,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellNavSection, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, AnchorHTMLAttributes, Ref } from 'react';
+import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref } from 'react';
 import { ClassValue } from 'clsx';
 
 interface DashboardLayoutContextValue {
@@ -34,7 +34,8 @@ type RenderLink = (props: {
     'aria-current'?: 'page';
 }) => ReactElement;
 interface AppShellNavItem {
-    key: string;
+    /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
+    key?: string;
     label: ReactNode;
     href?: string;
     icon?: ReactNode;
@@ -44,18 +45,14 @@ interface AppShellNavItem {
     render?: RenderLink;
 }
 interface AppShellNavGroup {
-    key: string;
+    /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
+    key?: string;
     label: ReactNode;
     icon?: ReactNode;
     active?: boolean;
     defaultOpen?: boolean;
     items: AppShellNavItem[];
 }
-interface AppShellNavSection {
-    key: string;
-    label?: ReactNode;
-    items: Array<AppShellNavItem | AppShellNavGroup>;
-}
 interface AppShellBrand {
     logo?: ReactNode;
     name?: ReactNode;
@@ -63,8 +60,12 @@ interface AppShellBrand {
 }
 interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' | 'collapsed' | 'onCollapsedChange'> {
     brand?: AppShellBrand;
-    /** Either a flat list of items, or grouped sections. */
-    nav: AppShellNavSection[] | Array<AppShellNavItem | AppShellNavGroup>;
+    /**
+     * Flat list of nav entries: leaf items (with `href` or `render`) and/or
+     * collapsible groups (with `items`). For more advanced layouts (sections,
+     * dividers, custom structure), compose `Sidebar` + `SidebarNav` directly.
+     */
+    nav: Array<AppShellNavItem | AppShellNavGroup>;
     title?: ReactNode;
     searchPlaceholder?: string;
     onSearch?: (value: string) => void;
@@ -178,6 +179,19 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
+interface LanguageOption<TCode extends string = string> {
+    code: TCode;
+    label?: string;
+}
+interface LanguageSwitcherProps<TCode extends string = string> extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    languages: ReadonlyArray<LanguageOption<TCode>>;
+    value: TCode;
+    onChange: (next: TCode) => void;
+    /** Accessible label for the group. Defaults to "Language". */
+    ariaLabel?: string;
+}
+declare function LanguageSwitcher<TCode extends string = string>({ languages, value, onChange, ariaLabel, className, ...props }: LanguageSwitcherProps<TCode>): react_jsx_runtime.JSX.Element;
+
 type SidebarProps = HTMLAttributes<HTMLElement>;
 declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 
@@ -346,4 +360,4 @@ declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellNavSection, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };

package/dist/index.js

@@ -555,18 +555,11 @@ function SidebarNavItem({
     }
   );
 }
-function isSection(entry) {
-  return "items" in entry && !("label" in entry && "href" in entry) && Array.isArray(entry.items);
-}
 function isGroup(entry) {
-  return "items" in entry;
-}
-function normalize(nav) {
-  if (nav.length === 0) return [];
-  if (isSection(nav[0])) return nav;
-  return [{ key: "__root", items: nav }];
+  return "items" in entry && Array.isArray(entry.items);
 }
-function renderItem(item) {
+function renderItem(item, fallbackKey) {
+  const key = item.key ?? fallbackKey;
   if (item.render) {
     return /* @__PURE__ */ jsx(
       SidebarNavItem,
@@ -577,7 +570,7 @@ function renderItem(item) {
         render: item.render,
         children: item.label
       },
-      item.key
+      key
     );
   }
   return /* @__PURE__ */ jsx(
@@ -589,7 +582,7 @@ function renderItem(item) {
       endSlot: item.endSlot,
       children: item.label
     },
-    item.key
+    key
   );
 }
 function AppShell({
@@ -605,7 +598,6 @@ function AppShell({
   onCollapsedChange,
   children
 }) {
-  const sections = normalize(nav);
   return /* @__PURE__ */ jsxs(
     DashboardLayout,
     {
@@ -618,19 +610,19 @@ function AppShell({
             brand.logo,
             brand.name ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold", children: brand.name }) : null
           ] }),
-          /* @__PURE__ */ jsx(SidebarNav, { children: sections.map((section) => /* @__PURE__ */ jsx(SidebarGroup, { label: section.label, children: section.items.map(
-            (entry) => isGroup(entry) ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(SidebarNav, { children: nav.map(
+            (entry, index) => isGroup(entry) ? /* @__PURE__ */ jsx(
               SidebarNavGroup,
               {
                 label: entry.label,
                 icon: entry.icon,
                 active: entry.active,
                 defaultOpen: entry.defaultOpen ?? entry.items.some((i) => i.active),
-                children: entry.items.map(renderItem)
+                children: entry.items.map((item, itemIndex) => renderItem(item, itemIndex))
               },
-              entry.key
-            ) : renderItem(entry)
-          ) }, section.key)) }),
+              entry.key ?? index
+            ) : renderItem(entry, index)
+          ) }),
           sidebarFooter ? /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter }) : null
         ] }),
         /* @__PURE__ */ jsxs(DashboardMain, { children: [
@@ -847,6 +839,43 @@ var Input = forwardRef(function Input2({
     hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: helperText }) : null
   ] });
 });
+function LanguageSwitcher({
+  languages,
+  value,
+  onChange,
+  ariaLabel = "Language",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex items-center rounded-md border border-border bg-background p-0.5 text-xs",
+        className
+      ),
+      ...props,
+      children: languages.map((lang) => {
+        const isActive = lang.code === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(lang.code),
+            "aria-pressed": isActive,
+            className: cn(
+              "rounded px-2 py-1 font-medium transition-colors",
+              isActive ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: lang.label ?? lang.code.toUpperCase()
+          },
+          lang.code
+        );
+      })
+    }
+  );
+}
 function readDocumentDirection() {
   if (typeof document === "undefined") return "ltr";
   const dir = document.documentElement.getAttribute("dir");
@@ -1355,6 +1384,6 @@ function SortIndicator({ active, direction }) {
   return direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className });
 }
 
-export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map