@dimaan/ui 0.0.11 → 0.0.12

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FieldsetHTMLAttributes, Ref, AnchorHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { LinkProps } from 'react-router-dom';
 import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
 import { FieldValues, FieldPath, Control } from 'react-hook-form';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
@@ -30,22 +31,85 @@ declare function DashboardLayout({ defaultCollapsed, collapsed: collapsedProp, o
 type DashboardMainProps = HTMLAttributes<HTMLDivElement>;
 declare function DashboardMain({ className, children, ...props }: DashboardMainProps): react_jsx_runtime.JSX.Element;
 
-type RenderLink = (props: {
-    href?: string;
-    className?: string;
+type SidebarProps = HTMLAttributes<HTMLElement>;
+declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+}
+declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavProps = HTMLAttributes<HTMLElement>;
+declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon?: ReactNode;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /** Highlight the parent (e.g. when one of its children is active). */
+    active?: boolean;
+    /** Uncontrolled initial state. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavItemRenderProps = {
+    className: string;
     children: ReactNode;
+    to: LinkProps['to'];
+    isActive: boolean;
+    title?: string;
     'aria-current'?: 'page';
-}) => ReactElement;
+    'data-active'?: 'true';
+};
+interface SidebarNavItemProps extends LinkProps {
+    icon?: ReactNode;
+    active?: boolean;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /** Whether the link should match exactly. */
+    end?: boolean;
+    /**
+     * Override the rendered element. Use this to plug in routing-library link
+     * components (e.g. react-router `<Link>`) while keeping the styling.
+     */
+    render?: (props: SidebarNavItemRenderProps) => ReactElement;
+}
+/**
+ * Individual navigation item inside a `<SidebarNav>` or `<SidebarGroup>`.
+ * Automatically detects active state based on the current route.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SidebarNavItem to="/dashboard" icon={<Home />}>
+ *   Dashboard
+ * </SidebarNavItem>
+ * ```
+ */
+declare function SidebarNavItem({ icon, active: forcedActive, label, endSlot, className, children, render, to, end, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
+
 interface AppShellNavItem {
     /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
     key?: string;
     label: ReactNode;
-    href?: string;
+    to?: string;
     icon?: ReactNode;
     active?: boolean;
+    /** Whether the link should match exactly. */
+    end?: boolean;
     endSlot?: ReactNode;
     /** Optional render prop for routing libraries (e.g. react-router <Link>). */
-    render?: RenderLink;
+    render?: (props: SidebarNavItemRenderProps) => ReactElement;
 }
 interface AppShellNavGroup {
     /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
@@ -91,14 +155,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
  * <AppShell
  *   brand={{ logo: <Logo />, name: 'Acme' }}
  *   nav={[
- *     { key: 'home', label: 'Home', href: '/', icon: <Home /> },
+ *     { key: 'home', label: 'Home', to: '/', icon: <Home /> },
  *     {
  *       key: 'settings',
  *       label: 'Settings',
  *       icon: <Settings />,
  *       items: [
- *         { key: 'profile', label: 'Profile', href: '/settings/profile' },
- *         { key: 'team', label: 'Team', href: '/settings/team' },
+ *         { key: 'profile', label: 'Profile', to: '/settings/profile' },
+ *         { key: 'team', label: 'Team', to: '/settings/team' },
  *       ],
  *     },
  *   ]}
@@ -111,14 +175,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
  * </AppShell>
  * ```
  *
- * @example With React Router Link integration via render prop
+ * @example With custom rendering
  * ```tsx
  * const nav = [{
  *   key: 'home',
  *   label: 'Home',
  *   icon: <Home />,
  *   render: ({ children, className, ...rest }) => (
- *     <Link to="/" className={className} {...rest}>{children}</Link>
+ *     <MyCustomLink {...rest} className={className}>{children}</MyCustomLink>
  *   ),
  * }];
  * ```
@@ -872,7 +936,7 @@ declare function ListPage<T>({ title, description, bordered, actions, data, colu
 type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 /** Props passed to the routing-library `render` slot of the back button. */
 interface PageHeaderBackRenderProps {
-    href?: string;
+    to?: LinkProps['to'];
     className?: string;
     children: ReactNode;
     onClick?: () => void;
@@ -880,11 +944,11 @@ interface PageHeaderBackRenderProps {
 interface PageHeaderBackProps {
     /** Visible label next to the arrow. Defaults to `"Back"`. */
     label?: ReactNode;
-    /** Target href — renders an `<a>`. */
-    href?: string;
+    /** Target to — renders a React Router `<Link>`. */
+    to?: LinkProps['to'];
     /** Click handler — renders a `<button>` (or wraps the `render` element). */
     onClick?: () => void;
-    /** Routing-library render prop (e.g. wrap React Router `<Link>`). Wins over `href`. */
+    /** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
     render?: (props: PageHeaderBackRenderProps) => ReactElement;
 }
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
@@ -929,7 +993,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  *   description={user.email}
  *   back={{
  *     label: 'Users',
- *     render: (props) => <Link to="/users" {...props} />,
+ *     to: '/users',
  *   }}
  *   actions={
  *     <>
@@ -1090,58 +1154,6 @@ declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadixRadioGro
     radioSize?: RadioGroupSize;
 } & react.RefAttributes<HTMLButtonElement>>;
 
-type SidebarProps = HTMLAttributes<HTMLElement>;
-declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
-
-type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
-declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
-    label?: ReactNode;
-}
-declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
-
-type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
-declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
-
-type SidebarNavProps = HTMLAttributes<HTMLElement>;
-declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-    icon?: ReactNode;
-    label?: ReactNode;
-    endSlot?: ReactNode;
-    /** Highlight the parent (e.g. when one of its children is active). */
-    active?: boolean;
-    /** Uncontrolled initial state. */
-    defaultOpen?: boolean;
-    /** Controlled open state. */
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children: ReactNode;
-}
-declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
-
-type SidebarNavItemRenderProps = {
-    className: string;
-    children: ReactNode;
-    title?: string;
-    'aria-current'?: 'page';
-    'data-active'?: 'true';
-};
-interface SidebarNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    icon?: ReactNode;
-    active?: boolean;
-    label?: ReactNode;
-    endSlot?: ReactNode;
-    /**
-     * Override the rendered element. Use this to plug in routing-library link
-     * components (e.g. react-router `<Link>`) while keeping the styling.
-     */
-    render?: (props: SidebarNavItemRenderProps) => ReactElement;
-}
-declare function SidebarNavItem({ icon, active, label, endSlot, className, children, render, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
-
 type SwitchSize = 'sm' | 'md' | 'lg';
 /**
  * Each size is a tuple: track dimensions + thumb size + thumb travel distance.

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FieldsetHTMLAttributes, Ref, AnchorHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, ReactElement, InputHTMLAttributes, ChangeEvent, ComponentPropsWithoutRef, FieldsetHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { LinkProps } from 'react-router-dom';
 import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
 import { FieldValues, FieldPath, Control } from 'react-hook-form';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
@@ -30,22 +31,85 @@ declare function DashboardLayout({ defaultCollapsed, collapsed: collapsedProp, o
 type DashboardMainProps = HTMLAttributes<HTMLDivElement>;
 declare function DashboardMain({ className, children, ...props }: DashboardMainProps): react_jsx_runtime.JSX.Element;
 
-type RenderLink = (props: {
-    href?: string;
-    className?: string;
+type SidebarProps = HTMLAttributes<HTMLElement>;
+declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+}
+declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavProps = HTMLAttributes<HTMLElement>;
+declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon?: ReactNode;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /** Highlight the parent (e.g. when one of its children is active). */
+    active?: boolean;
+    /** Uncontrolled initial state. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavItemRenderProps = {
+    className: string;
     children: ReactNode;
+    to: LinkProps['to'];
+    isActive: boolean;
+    title?: string;
     'aria-current'?: 'page';
-}) => ReactElement;
+    'data-active'?: 'true';
+};
+interface SidebarNavItemProps extends LinkProps {
+    icon?: ReactNode;
+    active?: boolean;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /** Whether the link should match exactly. */
+    end?: boolean;
+    /**
+     * Override the rendered element. Use this to plug in routing-library link
+     * components (e.g. react-router `<Link>`) while keeping the styling.
+     */
+    render?: (props: SidebarNavItemRenderProps) => ReactElement;
+}
+/**
+ * Individual navigation item inside a `<SidebarNav>` or `<SidebarGroup>`.
+ * Automatically detects active state based on the current route.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SidebarNavItem to="/dashboard" icon={<Home />}>
+ *   Dashboard
+ * </SidebarNavItem>
+ * ```
+ */
+declare function SidebarNavItem({ icon, active: forcedActive, label, endSlot, className, children, render, to, end, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
+
 interface AppShellNavItem {
     /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
     key?: string;
     label: ReactNode;
-    href?: string;
+    to?: string;
     icon?: ReactNode;
     active?: boolean;
+    /** Whether the link should match exactly. */
+    end?: boolean;
     endSlot?: ReactNode;
     /** Optional render prop for routing libraries (e.g. react-router <Link>). */
-    render?: RenderLink;
+    render?: (props: SidebarNavItemRenderProps) => ReactElement;
 }
 interface AppShellNavGroup {
     /** Optional stable key. Falls back to array index if omitted — only safe for static nav. */
@@ -91,14 +155,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
  * <AppShell
  *   brand={{ logo: <Logo />, name: 'Acme' }}
  *   nav={[
- *     { key: 'home', label: 'Home', href: '/', icon: <Home /> },
+ *     { key: 'home', label: 'Home', to: '/', icon: <Home /> },
  *     {
  *       key: 'settings',
  *       label: 'Settings',
  *       icon: <Settings />,
  *       items: [
- *         { key: 'profile', label: 'Profile', href: '/settings/profile' },
- *         { key: 'team', label: 'Team', href: '/settings/team' },
+ *         { key: 'profile', label: 'Profile', to: '/settings/profile' },
+ *         { key: 'team', label: 'Team', to: '/settings/team' },
  *       ],
  *     },
  *   ]}
@@ -111,14 +175,14 @@ interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' |
  * </AppShell>
  * ```
  *
- * @example With React Router Link integration via render prop
+ * @example With custom rendering
  * ```tsx
  * const nav = [{
  *   key: 'home',
  *   label: 'Home',
  *   icon: <Home />,
  *   render: ({ children, className, ...rest }) => (
- *     <Link to="/" className={className} {...rest}>{children}</Link>
+ *     <MyCustomLink {...rest} className={className}>{children}</MyCustomLink>
  *   ),
  * }];
  * ```
@@ -872,7 +936,7 @@ declare function ListPage<T>({ title, description, bordered, actions, data, colu
 type PageHeaderHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 /** Props passed to the routing-library `render` slot of the back button. */
 interface PageHeaderBackRenderProps {
-    href?: string;
+    to?: LinkProps['to'];
     className?: string;
     children: ReactNode;
     onClick?: () => void;
@@ -880,11 +944,11 @@ interface PageHeaderBackRenderProps {
 interface PageHeaderBackProps {
     /** Visible label next to the arrow. Defaults to `"Back"`. */
     label?: ReactNode;
-    /** Target href — renders an `<a>`. */
-    href?: string;
+    /** Target to — renders a React Router `<Link>`. */
+    to?: LinkProps['to'];
     /** Click handler — renders a `<button>` (or wraps the `render` element). */
     onClick?: () => void;
-    /** Routing-library render prop (e.g. wrap React Router `<Link>`). Wins over `href`. */
+    /** Routing-library render prop (e.g. wrap a different link component). Wins over `to`. */
     render?: (props: PageHeaderBackRenderProps) => ReactElement;
 }
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
@@ -929,7 +993,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  *   description={user.email}
  *   back={{
  *     label: 'Users',
- *     render: (props) => <Link to="/users" {...props} />,
+ *     to: '/users',
  *   }}
  *   actions={
  *     <>
@@ -1090,58 +1154,6 @@ declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadixRadioGro
     radioSize?: RadioGroupSize;
 } & react.RefAttributes<HTMLButtonElement>>;
 
-type SidebarProps = HTMLAttributes<HTMLElement>;
-declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
-
-type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
-declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
-    label?: ReactNode;
-}
-declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
-
-type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
-declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
-
-type SidebarNavProps = HTMLAttributes<HTMLElement>;
-declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
-
-interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-    icon?: ReactNode;
-    label?: ReactNode;
-    endSlot?: ReactNode;
-    /** Highlight the parent (e.g. when one of its children is active). */
-    active?: boolean;
-    /** Uncontrolled initial state. */
-    defaultOpen?: boolean;
-    /** Controlled open state. */
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children: ReactNode;
-}
-declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
-
-type SidebarNavItemRenderProps = {
-    className: string;
-    children: ReactNode;
-    title?: string;
-    'aria-current'?: 'page';
-    'data-active'?: 'true';
-};
-interface SidebarNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    icon?: ReactNode;
-    active?: boolean;
-    label?: ReactNode;
-    endSlot?: ReactNode;
-    /**
-     * Override the rendered element. Use this to plug in routing-library link
-     * components (e.g. react-router `<Link>`) while keeping the styling.
-     */
-    render?: (props: SidebarNavItemRenderProps) => ReactElement;
-}
-declare function SidebarNavItem({ icon, active, label, endSlot, className, children, render, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
-
 type SwitchSize = 'sm' | 'md' | 'lg';
 /**
  * Each size is a tuple: track dimensions + thumb size + thumb travel distance.