suwa-ui 0.0.0-development → 1.0.0-beta.10

package/dist/index.d.ts

@@ -1,11 +1,15 @@
+import { Accordion as Accordion_2 } from '@base-ui/react/accordion';
 import { AppFieldExtendedReactFieldGroupApi } from '@tanstack/react-form';
 import { AppFieldExtendedReactFormApi } from '@tanstack/react-form';
 import { Avatar as Avatar_2 } from '@base-ui/react/avatar';
 import { Checkbox as Checkbox_2 } from '@base-ui/react/checkbox';
+import { CheckboxGroup as CheckboxGroup_2 } from '@base-ui/react';
 import { ClassProp } from 'class-variance-authority/types';
 import { ClassValue } from 'clsx';
+import { Collapsible } from '@base-ui/react/collapsible';
 import { ComponentProps } from 'react';
 import { DeepKeysOfType } from '@tanstack/react-form';
+import { default as default_2 } from 'react';
 import { Dialog as Dialog_2 } from '@base-ui/react/dialog';
 import { FieldsMap } from '@tanstack/react-form';
 import { FormAsyncValidateOrFn } from '@tanstack/react-form';
@@ -17,10 +21,10 @@ import { Input as Input_2 } from '@base-ui/react/input';
 import { JSX } from 'react/jsx-runtime';
 import { KeyboardEventHandler } from 'react';
 import { MouseEventHandler } from 'react';
+import { NavigationMenu as NavigationMenu_2 } from '@base-ui/react/navigation-menu';
+import { Popover as Popover_2 } from '@base-ui/react/popover';
 import { PropsWithChildren } from 'react';
 import { Ranger } from '@tanstack/react-ranger';
-import type * as React_2 from 'react';
-import { ReactNode } from 'react';
 import { RefObject } from 'react';
 import { ScrollArea as ScrollArea_2 } from '@base-ui/react/scroll-area';
 import { Separator as Separator_2 } from '@base-ui/react/separator';
@@ -33,6 +37,32 @@ import { VariantProps } from 'class-variance-authority';
 import { WithFieldGroupProps } from '@tanstack/react-form';
 import { WithFormProps } from '@tanstack/react-form';
 
+export declare const Accordion: ({ className, children, ref, ...props }: AccordionProps) => JSX.Element;
+
+export declare const AccordionItem: ({ tone, className, children, ref, ...props }: AccordionItemProps) => JSX.Element;
+
+export declare type AccordionItemProps = default_2.ComponentProps<typeof Accordion_2.Item> & VariantProps<typeof accordionItemVariants> & default_2.ComponentProps<typeof Accordion_2.Trigger>;
+
+declare const accordionItemVariants: (props?: ({
+    tone?: "primary" | "secondary" | "accent" | "neutral" | "error" | "success" | "warning" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const AccordionPanel: ({ heading, className, children, ref, ...props }: AccordionPanelProps) => JSX.Element;
+
+declare type AccordionPanelProps = default_2.ComponentProps<typeof Accordion_2.Panel> & {
+    heading?: string;
+};
+
+export declare type AccordionProps = default_2.ComponentProps<typeof Accordion_2.Root>;
+
+export declare const AccordionTrigger: ({ title, subtitle, icon: Icon, className, children, ref, ...props }: AccordionTriggerProps) => JSX.Element;
+
+export declare type AccordionTriggerProps = default_2.ComponentProps<typeof Accordion_2.Trigger> & {
+    title: string;
+    subtitle?: string;
+    icon?: Icon;
+};
+
 export declare const Avatar: ({ className, children, ref, ...props }: AvatarProps) => JSX.Element;
 
 export declare const AvatarFallback: ({ className, ref, ...props }: AvatarFallbackProps) => JSX.Element;
@@ -55,31 +85,124 @@ export declare interface BadgeExtendedProps extends Omit<BadgeProps, "style">, V
 declare type BadgeProps = ComponentProps<"div">;
 
 declare const badgeVariants: (props?: ({
-    tone?: "primary" | "secondary" | "tertiary" | "neutral" | "error" | "success" | "warning" | null | undefined;
+    tone?: "primary" | "secondary" | "accent" | "neutral" | "error" | "success" | "warning" | "neutralVariant" | "inverse" | null | undefined;
     style?: "solid" | "outline" | null | undefined;
     radius?: "circle" | "rounded" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function Button({ className, children, tone, style, size, ...props }: ButtonExtendedProps): JSX.Element;
+/**
+ * @fileoverview Button component - A versatile, accessible button component for the Suwa UI design system
+ * @author PHNTMbandit
+ * @version 1.0.0
+ * @since 1.0.0
+ * @license MIT
+ */
+/**
+ * @summary A comprehensive button component with extensive customization options
+ * @description
+ * A versatile, accessible button component with multiple visual variants and sizes.
+ * Built with accessibility-first principles, this component supports WCAG 2.1 AA standards,
+ * keyboard navigation, screen readers, and provides comprehensive theming capabilities.
+ *
+ * @function
+ * @public
+ * @memberof SuwaUI
+ * @name Button
+ *
+ * @param {"primary"|"secondary"|"accent"|"neutral"|"error"|"success"|"warning"|"glass"} [props.tone="primary"] - The color theme variant of the button for semantic meaning
+ * @param {"solid"|"outline"|"ghost"} [props.style="solid"] - The visual style variant affecting background and borders
+ * @param {"small"|"medium"|"large"|"iconSmall"|"iconMedium"|"iconLarge"} [props.size="medium"] - The size variant controlling dimensions and typography
+ *
+ * @returns {React.ReactElement<HTMLButtonElement>} A fully accessible and styled HTML button element
+ *
+ * @example
+ * // Basic button usage
+ * <Button>Click me</Button>
+ *
+ * @example
+ * // Primary call-to-action button
+ * <Button tone="primary" size="large" onClick={handleSubmit}>
+ *   Submit Form
+ * </Button>
+ *
+ * @example
+ * // Secondary action with outline style
+ * <Button tone="secondary" style="outline" onClick={handleCancel}>
+ *   Cancel
+ * </Button>
+ *
+ * @example
+ * // Icon-only button (requires aria-label for accessibility)
+ * <Button
+ *   size="iconMedium"
+ *   aria-label="Add new item"
+ *   onClick={handleAdd}
+ * >
+ *   <PlusIcon />
+ * </Button>
+ *
+ * @example
+ * // Destructive action button
+ * <Button tone="error" style="solid" onClick={handleDelete}>
+ *   Delete Account
+ * </Button>
+ *
+ * @example
+ * // Disabled button state
+ * <Button disabled onClick={handleAction}>
+ *   Processing...
+ * </Button>
+ *
+ * @example
+ * // Glass morphism effect button
+ * <Button tone="glass" style="solid">
+ *   Glass Effect
+ * </Button>
+ *
+ * @example
+ * // Form submission button
+ * <Button type="submit" tone="primary">
+ *   Submit
+ * </Button>
+ *
+ * @see {@link ButtonExtendedProps} - For detailed prop interface documentation
+ * @see {@link buttonVariants} - For styling variant configurations
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/} - WCAG 2.1 accessibility guidelines
+ *
+ *
+ * @default tone "primary"
+ * @default style "solid"
+ * @default size "medium"
+ *
+ * @access public
+ * @readonly
+ * @since 1.0.0
+ * @version 1.0.0
+ */
+export declare function Button({ className, children, tone, style, size, ...props }: ButtonExtendedProps): React.ReactElement<HTMLButtonElement>;
 
 export declare interface ButtonExtendedProps extends Omit<ComponentProps<"button">, "style">, VariantProps<typeof buttonVariants> {
     style?: "solid" | "outline" | "ghost";
 }
 
 declare const buttonVariants: (props?: ({
-    tone?: "primary" | "secondary" | "neutral" | "error" | "success" | "warning" | "accent" | "glass" | null | undefined;
+    tone?: "primary" | "secondary" | "accent" | "neutral" | "error" | "success" | "warning" | "glass" | null | undefined;
     style?: "solid" | "outline" | "ghost" | null | undefined;
-    size?: "small" | "medium" | "large" | "iconLarge" | "iconMedium" | "iconSmall" | null | undefined;
+    size?: "small" | "large" | "medium" | "iconLarge" | "iconMedium" | "iconSmall" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare const Checkbox: ({ className, ref, label, id, disabled, ...props }: CheckboxRootProps) => JSX.Element;
+export declare const Checkbox: ({ className, ref, label, disabled, ...props }: CheckboxRootProps) => JSX.Element;
+
+export declare const CheckboxGroup: ({ className, children, ref, ...props }: CheckboxGroupProps) => JSX.Element;
+
+export declare type CheckboxGroupProps = React.ComponentProps<typeof CheckboxGroup_2>;
 
 export declare const CheckboxIndicator: ({ className, ...props }: CheckboxIndicatorProps) => JSX.Element;
 
 export declare type CheckboxIndicatorProps = ComponentProps<typeof Checkbox_2.Indicator>;
 
 export declare type CheckboxRootProps = ComponentProps<typeof Checkbox_2.Root> & {
-    label?: ReactNode;
+    label?: string;
 };
 
 export declare function cn(...inputs: Array<ClassValue>): string;
@@ -90,11 +213,15 @@ export declare const DialogClose: ({ className, children, ref, ...props }: Dialo
 
 export declare type DialogCloseProps = ComponentProps<typeof Dialog_2.Close>;
 
+export declare const DialogContent: ({ className, children, ref, ...props }: DialogContentProps) => JSX.Element;
+
+declare type DialogContentProps = React.ComponentProps<"div">;
+
 export declare const DialogDescription: ({ className, children, ref, ...props }: DialogDescriptionProps) => JSX.Element;
 
 export declare type DialogDescriptionProps = ComponentProps<typeof Dialog_2.Description>;
 
-export declare const DialogPopup: ({ className, children, showCloseButton, ref, ...props }: DialogPopupProps) => JSX.Element;
+export declare const DialogPopup: ({ showCloseButton, className, children, ref, ...props }: DialogPopupProps) => JSX.Element;
 
 export declare type DialogPopupProps = ComponentProps<typeof Dialog_2.Popup> & {
     showCloseButton?: boolean;
@@ -175,17 +302,68 @@ export declare type FormErrorsProps = ComponentProps<"div">;
 
 export declare const FormSubmit: ({ submittingText, className, children, ref, ...props }: FieldSubmitButtonProps) => JSX.Element;
 
-export declare const Input: ({ leadingIcon, showSeparator, className, ref, ...props }: InputProps) => JSX.Element;
+export declare const Input: ({ leadingIcon: Icon, children, className, ref, ...props }: InputProps) => JSX.Element;
 
 export declare type InputProps = ComponentProps<typeof Input_2> & {
     leadingIcon?: Icon;
-    showSeparator?: boolean;
 };
 
 export declare const Label: ({ className, children, ref, ...props }: LabelProps) => JSX.Element;
 
 export declare type LabelProps = ComponentProps<"label">;
 
+export declare const NavigationMenu: ({ className, children, ref, ...props }: NavigationMenuProps) => JSX.Element;
+
+export declare const NavigationMenuContent: ({ className, children, ref, ...props }: NavigationMenuContentProps) => JSX.Element;
+
+export declare type NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenu_2.Content>;
+
+export declare const NavigationMenuIcon: ({ className, children, ref, ...props }: NavigationMenuIconProps) => JSX.Element;
+
+export declare type NavigationMenuIconProps = React.ComponentProps<typeof NavigationMenu_2.Icon>;
+
+export declare const NavigationMenuItem: ({ className, children, ref, ...props }: NavigationMenuItemProps) => JSX.Element;
+
+export declare type NavigationMenuItemProps = React.ComponentProps<typeof NavigationMenu_2.Item>;
+
+export declare const NavigationMenuLink: ({ className, children, ref, ...props }: NavigationMenuLinkProps) => JSX.Element;
+
+export declare type NavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenu_2.Link>;
+
+export declare const NavigationMenuList: ({ className, children, ref, ...props }: NavigationMenuListProps) => JSX.Element;
+
+export declare type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenu_2.List>;
+
+export declare type NavigationMenuProps = React.ComponentProps<typeof NavigationMenu_2.Root>;
+
+export declare const NavigationMenuTrigger: ({ className, children, ref, ...props }: NavigationMenuTriggerProps) => JSX.Element;
+
+export declare type NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenu_2.Trigger>;
+
+export declare const NavigationMenuViewport: ({ className, children, ref, ...props }: NavigationMenuViewportProps) => JSX.Element;
+
+export declare type NavigationMenuViewportProps = React.ComponentProps<typeof NavigationMenu_2.Positioner>;
+
+export declare const Popover: ({ children, ...props }: PopoverProps) => JSX.Element;
+
+export declare const PopoverDescription: ({ className, ref, children, ...props }: PopoverDescriptionProps) => JSX.Element;
+
+export declare type PopoverDescriptionProps = React.ComponentProps<typeof Popover_2.Description>;
+
+export declare const PopoverPanel: ({ className, ref, children, ...props }: PopoverPanelProps) => JSX.Element;
+
+export declare type PopoverPanelProps = React.ComponentProps<typeof Popover_2.Positioner>;
+
+export declare type PopoverProps = React.ComponentProps<typeof Popover_2.Root>;
+
+export declare const PopoverTitle: ({ className, ref, children, ...props }: PopoverTitleProps) => JSX.Element;
+
+export declare type PopoverTitleProps = React.ComponentProps<typeof Popover_2.Title>;
+
+export declare const PopoverTrigger: ({ className, ref, children, ...props }: PopoverTriggerProps) => JSX.Element;
+
+export declare type PopoverTriggerProps = React.ComponentProps<typeof Popover_2.Trigger>;
+
 export declare const Profile: ({ className, imageUrl, fallbackText, profileName, profileEmail, compact, children, ref, ...props }: ProfileProps) => JSX.Element;
 
 export declare type ProfileProps = ComponentProps<"button"> & {
@@ -203,15 +381,103 @@ export declare type ScrollAreaProps = ComponentProps<typeof ScrollArea_2.Root> &
     defaultHeight?: number;
 };
 
-export declare const Separator: ({ orientation, thickness, className, children, ref, ...props }: SeparatorProps) => JSX.Element;
+export declare const Separator: ({ tone, orientation, thickness, className, children, ref, ...props }: SeparatorProps) => JSX.Element;
 
 export declare type SeparatorProps = Omit<ComponentProps<typeof Separator_2>, "style"> & VariantProps<typeof separatorVariants>;
 
 declare const separatorVariants: (props?: ({
+    tone?: "default" | "variant" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
-    thickness?: "medium" | "thick" | "thin" | null | undefined;
+    thickness?: "thin" | "medium" | "thick" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Sidebar: ({ tone, width, className, children, ref, ...props }: SidebarProps) => JSX.Element;
+
+export declare const SidebarContent: ({ hideScrollbar, className, children, ref, ...props }: SidebarContentProps) => JSX.Element;
+
+export declare type SidebarContentProps = React.ComponentProps<"div"> & {
+    hideScrollbar?: boolean;
+};
+
+declare type SidebarContextProps = default_2.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    trigger?: () => void;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    isMobile?: boolean;
+    setIsMobile?: (isMobile: boolean) => void;
+    side?: "left" | "right";
+    collapsible?: "offcanvas" | "icon" | "none";
+};
+
+export declare const SidebarFooter: ({ className, children, ref, ...props }: SidebarFooterProps) => JSX.Element;
+
+export declare type SidebarFooterProps = React.ComponentProps<"div">;
+
+export declare const SidebarGroup: ({ className, children, ref, ...props }: SidebarGroupProps) => JSX.Element;
+
+export declare const SidebarGroupContent: ({ className, children, ref, ...props }: SidebarGroupContentProps) => JSX.Element;
+
+export declare type SidebarGroupContentProps = React.ComponentProps<"div">;
+
+export declare const SidebarGroupLabel: ({ className, children, ref, ...props }: SidebarGroupLabelProps) => JSX.Element | null;
+
+export declare type SidebarGroupLabelProps = React.ComponentProps<"span">;
+
+export declare type SidebarGroupProps = React.ComponentProps<"div">;
+
+export declare const SidebarHeader: ({ className, children, ref, ...props }: SidebarHeaderProps) => JSX.Element;
+
+export declare type SidebarHeaderProps = React.ComponentProps<"div">;
+
+export declare const SidebarMenu: ({ className, children, ref, ...props }: SidebarMenuProps) => JSX.Element;
+
+export declare type SidebarMenuButtonProps = React.ComponentProps<"button">;
+
+export declare const SidebarMenuLink: ({ isActive, size, label, leadingIcon: Icon, className, children, ref, ...props }: SidebarMenuLinkProps) => JSX.Element;
+
+export declare type SidebarMenuLinkProps = React.ComponentProps<"div"> & VariantProps<typeof sidebarMenuLinkVariants> & {
+    isActive?: boolean;
+    label: string;
+    leadingIcon?: Icon;
+};
+
+declare const sidebarMenuLinkVariants: (props?: ({
+    size?: "compact" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare type SidebarMenuProps = React.ComponentProps<"div">;
+
+export declare type SidebarProps = React.ComponentProps<"div"> & {
+    tone?: "default" | "ghost";
+    width?: string | number;
+};
+
+export declare const SidebarProvider: ({ defaultOpen, side, collapsible, className, children, ref, ...props }: SidebarContextProps) => JSX.Element;
+
+export declare const SidebarSubMenu: ({ className, children, ref, ...props }: SidebarSubMenuProps) => JSX.Element;
+
+export declare const SidebarSubMenuPanel: ({ className, children, ref, ...props }: SidebarSubMenuPanelProps) => JSX.Element;
+
+export declare type SidebarSubMenuPanelProps = React.ComponentProps<typeof Collapsible.Panel>;
+
+export declare type SidebarSubMenuProps = React.ComponentProps<typeof Collapsible.Root>;
+
+export declare const SidebarSubMenuTrigger: ({ leadingIcon: Icon, label, size, className, children, ref, ...props }: SidebarSubMenuTriggerProps) => JSX.Element;
+
+export declare type SidebarSubMenuTriggerProps = React.ComponentProps<typeof Collapsible.Trigger> & VariantProps<typeof sidebarSubMenuTriggerVariants> & {
+    label: string;
+    leadingIcon?: Icon;
+};
+
+declare const sidebarSubMenuTriggerVariants: (props?: ({
+    size?: "compact" | "full" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const SidebarToggle: ({ className, children, ref, ...props }: SidebarToggleProps) => JSX.Element | null;
+
+export declare type SidebarToggleProps = ButtonExtendedProps;
+
 export declare const Slider: ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, min, max, stepSize, defaultValues, showTickLabels, label, className, ref, ...props }: SliderProps) => JSX.Element;
 
 export declare const SliderHandle: ({ sliderInstance, isActive, onKeyDownHandler, onMouseDownHandler, onTouchStart, value, className, children, ref, ...props }: SliderHandleProps) => JSX.Element;
@@ -287,25 +553,6 @@ export declare const TabsTab: ({ className, ...props }: TabsTabProps) => JSX.Ele
 
 export declare type TabsTabProps = ComponentProps<typeof Tabs_2.Tab>;
 
-declare type Theme = "dark" | "light" | "system";
-
-export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): JSX.Element;
-
-declare type ThemeProviderProps = {
-    children: React.ReactNode;
-    defaultTheme?: Theme;
-    storageKey?: string;
-};
-
-declare type ThemeProviderState = {
-    theme: Theme;
-    setTheme: (theme: Theme) => void;
-};
-
-export declare const ThemeToggle: ({ className, children, ref, ...props }: ThemeToggleProps) => JSX.Element;
-
-declare type ThemeToggleProps = React_2.ComponentProps<"button" & typeof Button>;
-
 export declare const Toast: ({ className, children, position, ref, ...props }: ToastProps) => JSX.Element[];
 
 export declare type ToastProps = ComponentProps<"div"> & {
@@ -333,6 +580,4 @@ export declare const TooltipTrigger: ({ children, ...props }: TooltipTriggerProp
 
 export declare type TooltipTriggerProps = ComponentProps<typeof Tooltip_2.Trigger>;
 
-export declare const useTheme: () => ThemeProviderState;
-
 export { }