@dimaan/ui 0.0.0 → 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;
@@ -150,6 +151,47 @@ declare const HeaderSearch: react.ForwardRefExoticComponent<HeaderSearchProps &
 type HeaderTitleProps = HTMLAttributes<HTMLDivElement>;
 declare function HeaderTitle({ className, children, ...props }: HeaderTitleProps): react_jsx_runtime.JSX.Element;
 
+type InputVariant = 'default' | 'filled' | 'ghost';
+type InputSize = 'sm' | 'md' | 'lg';
+declare const inputVariantClass: Record<InputVariant, string>;
+declare const inputSizeClass: Record<InputSize, string>;
+declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    variant?: InputVariant;
+    inputSize?: InputSize;
+    /** Optional label rendered above the field. */
+    label?: ReactNode;
+    /** Helper text rendered under the field when not in an error state. */
+    helperText?: ReactNode;
+    /** Error message — renders in destructive style and sets aria-invalid. */
+    error?: ReactNode;
+    /** Element rendered before the input (icon, prefix text, etc.). */
+    leadingIcon?: ReactNode;
+    /** Element rendered after the input (icon, suffix text, etc.). */
+    trailingIcon?: ReactNode;
+    /** Stretch the wrapper to fill the parent's inline width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper that holds the icons + input. */
+    wrapperClassName?: string;
+    /** Class applied to the field container (`<label>` block). */
+    containerClassName?: string;
+}
+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;
 
@@ -318,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, 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, 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;
@@ -150,6 +151,47 @@ declare const HeaderSearch: react.ForwardRefExoticComponent<HeaderSearchProps &
 type HeaderTitleProps = HTMLAttributes<HTMLDivElement>;
 declare function HeaderTitle({ className, children, ...props }: HeaderTitleProps): react_jsx_runtime.JSX.Element;
 
+type InputVariant = 'default' | 'filled' | 'ghost';
+type InputSize = 'sm' | 'md' | 'lg';
+declare const inputVariantClass: Record<InputVariant, string>;
+declare const inputSizeClass: Record<InputSize, string>;
+declare const inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    variant?: InputVariant;
+    inputSize?: InputSize;
+    /** Optional label rendered above the field. */
+    label?: ReactNode;
+    /** Helper text rendered under the field when not in an error state. */
+    helperText?: ReactNode;
+    /** Error message — renders in destructive style and sets aria-invalid. */
+    error?: ReactNode;
+    /** Element rendered before the input (icon, prefix text, etc.). */
+    leadingIcon?: ReactNode;
+    /** Element rendered after the input (icon, suffix text, etc.). */
+    trailingIcon?: ReactNode;
+    /** Stretch the wrapper to fill the parent's inline width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper that holds the icons + input. */
+    wrapperClassName?: string;
+    /** Class applied to the field container (`<label>` block). */
+    containerClassName?: string;
+}
+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;
 
@@ -318,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, 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, 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

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useLayoutEffect, useContext, useState, useCallback, useMemo, useEffect, useId } from 'react';
+import { createContext, forwardRef, Children, isValidElement, cloneElement, useRef, useImperativeHandle, useLayoutEffect, useId, useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -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: [
@@ -750,6 +742,140 @@ var Checkbox = forwardRef(function Checkbox2({
     )
   ] });
 });
+
+// src/components/input/inputVariants.ts
+var inputVariantClass = {
+  default: "border border-input bg-background hover:border-ring",
+  filled: "border border-transparent bg-muted hover:bg-muted/80",
+  ghost: "border border-transparent bg-transparent hover:bg-accent"
+};
+var inputSizeClass = {
+  sm: "h-8 rounded-md px-2.5 text-sm gap-1.5",
+  md: "h-9 rounded-md px-3 text-sm gap-2",
+  lg: "h-11 rounded-md px-4 text-base gap-2.5"
+};
+var inputBaseClass = "group/input relative inline-flex w-full items-center text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var Input = forwardRef(function Input2({
+  variant = "default",
+  inputSize = "md",
+  label,
+  helperText,
+  error,
+  leadingIcon,
+  trailingIcon,
+  fullWidth = true,
+  type = "text",
+  id,
+  className,
+  wrapperClassName,
+  containerClassName,
+  "aria-invalid": ariaInvalidProp,
+  "aria-describedby": ariaDescribedByProp,
+  disabled,
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const errorId = `${inputId}-error`;
+  const hasError = error !== void 0 && error !== null && error !== false;
+  const ariaInvalid = ariaInvalidProp ?? (hasError ? true : void 0);
+  const describedByIds = [
+    ariaDescribedByProp,
+    hasError ? errorId : null,
+    !hasError && helperText ? helperId : null
+  ].filter(Boolean).join(" ");
+  const ariaDescribedBy = describedByIds.length > 0 ? describedByIds : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full", containerClassName), children: [
+    label !== void 0 && label !== null && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-foreground select-none", children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "input-wrapper",
+        className: cn(
+          inputBaseClass,
+          inputVariantClass[variant],
+          inputSizeClass[inputSize],
+          wrapperClassName
+        ),
+        "aria-invalid": ariaInvalid,
+        "data-disabled": disabled ? "true" : void 0,
+        children: [
+          leadingIcon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
+              children: leadingIcon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type,
+              disabled,
+              "aria-invalid": ariaInvalid,
+              "aria-describedby": ariaDescribedBy,
+              className: cn(
+                "h-full w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+                className
+              ),
+              ...props
+            }
+          ),
+          trailingIcon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex h-4 w-4 items-center justify-center text-muted-foreground",
+              children: trailingIcon
+            }
+          ) : null
+        ]
+      }
+    ),
+    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");
@@ -1258,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, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, 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