npm - @customafk/lunas-ui - Versions diffs - 0.2.74 → 0.2.76 - Mend

@customafk/lunas-ui 0.2.74 → 0.2.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (806) hide show

package/dist/dialogs/detail-dialog/components/sidebar.d.mts CHANGED Viewed

@@ -1,71 +1,77 @@
-import { t as Button } from "../../../button-CKRN3ZQT.mjs";
-import { n as TooltipContent } from "../../../tooltip-D4U-RhIu.mjs";
-import { t as Separator } from "../../../separator-D6_fMJtM.mjs";
+import { t as Button } from "../../../button-BnoPktln.mjs";
+import { n as TooltipContent } from "../../../tooltip-BVYKhsC2.mjs";
+import { t as Separator } from "../../../separator-Cvxkpzrj.mjs";
 import { VariantProps } from "class-variance-authority";
 //#region packages/components/dialogs/detail-dialog/components/sidebar-core.d.ts
+declare const SIDEBAR_COOKIE_NAME = "detail_dialog_sidebar_state";
+declare const SIDEBAR_COOKIE_MAX_AGE: number;
+declare const SIDEBAR_WIDTH = "18rem";
+declare const SIDEBAR_WIDTH_ICON = "3rem";
+declare const SIDEBAR_KEYBOARD_SHORTCUT = "p";
 type SidebarContextProps = {
-  /** Current visual state of the sidebar. */state: 'expanded' | 'collapsed'; /** Whether the sidebar is open on desktop. */
-  open: boolean; /** Setter for the desktop open state. */
-  setOpen: (open: boolean) => void; /** Whether the sidebar sheet is open on mobile. */
-  openMobile: boolean; /** Setter for the mobile open state. */
-  setOpenMobile: (open: boolean) => void; /** `true` when the viewport is considered mobile-sized. */
-  isMobile: boolean; /** Toggles the sidebar between expanded and collapsed. */
+  /** Current visual state of the sidebar. */
+  state: 'expanded' | 'collapsed';
+  /** Whether the sidebar is open. */
+  open: boolean;
+  /** Setter for the open state. */
+  setOpen: (open: boolean) => void;
+  /** Toggles the sidebar between expanded and collapsed. */
   toggleSidebar: () => void;
 };
+declare const SidebarContext: import("react").Context<SidebarContextProps | null>;
 /**
  * Reads the current sidebar open/collapsed state and toggle handler from context.
  * Also used internally by `DetailDialogSidebarRail` in `./sidebar-extras`.
  */
 declare function useSidebar(): SidebarContextProps;
 /**
- * Context provider that manages sidebar open/collapsed state and persists it via a cookie.
+ * Sidebar open/collapsed state, cookie-persisted, with a keyboard shortcut to toggle. Shared by
+ * `SidebarProvider` (below, generic/standalone) and `DetailDialogProvider` (`../components/provider`,
+ * DetailDialog's own layout shell) so the state logic lives in exactly one place.
+ */
+declare function useSidebarState({ defaultOpen, open: openProp, onOpenChange: setOpenProp }: {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}): SidebarContextProps;
+/**
+ * Generic, standalone-reusable context provider for `Sidebar` — a plain 2-column grid (sidebar |
+ * content). For `DetailDialog`'s own header/content grid shell, use `DetailDialogProvider`
+ * (`../components/provider`) instead.
  *
  * @example
  * ```tsx
- * import { SidebarProvider } from '@customafk/lunas-ui/dialogs/detail-dialog/components/sidebar';
+ * import { SidebarProvider, Sidebar } from '@customafk/lunas-ui/dialogs/detail-dialog/components/sidebar';
  *
  * <SidebarProvider defaultOpen={true}>
- *   <Sidebar collapsible="icon">{...}</Sidebar>
+ *   <Sidebar>{...}</Sidebar>
+ *   <main>{...}</main>
  * </SidebarProvider>
  * ```
  */
-declare function SidebarProvider({
-  defaultOpen,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  /** Whether the sidebar is open by default (uncontrolled). Defaults to `true`. */defaultOpen?: boolean; /** Controlled open state. When provided the component becomes controlled. */
-  open?: boolean; /** Callback fired when the open state changes in controlled mode. */
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
+  /** Whether the sidebar is open by default (uncontrolled). Defaults to `true`. */
+  defaultOpen?: boolean;
+  /** Controlled open state. When provided the component becomes controlled. */
+  open?: boolean;
+  /** Callback fired when the open state changes in controlled mode. */
   onOpenChange?: (open: boolean) => void;
 }): import("react").JSX.Element;
 /**
- * Responsive sidebar container that supports desktop icon-collapse and a mobile Sheet overlay.
+ * Sidebar container that collapses to an icon strip. Always rendered inline, regardless of viewport size.
  *
  * @example
  * ```tsx
  * import { Sidebar } from '@customafk/lunas-ui/dialogs/detail-dialog/components/sidebar';
  *
- * <Sidebar collapsible="icon" side="left">
+ * <Sidebar side="left">
  *   {children}
  * </Sidebar>
  * ```
  */
-declare function Sidebar({
-  side,
-  variant,
-  collapsible,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  /** Which edge the sidebar is anchored to. Defaults to `'left'`. */side?: 'left' | 'right'; /** Visual style variant of the sidebar. Defaults to `'sidebar'`. */
-  variant?: 'sidebar' | 'floating' | 'inset'; /** Collapse behaviour — slides off-canvas, shrinks to icon strip, or stays fixed. Defaults to `'offcanvas'`. */
-  collapsible?: 'offcanvas' | 'icon' | 'none';
+declare function Sidebar({ side, className, children, ...props }: React.ComponentProps<'div'> & {
+  /** Which edge the sidebar is anchored to. Defaults to `'left'`. */
+  side?: 'left' | 'right';
 }): import("react").JSX.Element;
 /**
  * Icon button that toggles the detail-dialog sidebar open or collapsed.
@@ -77,45 +83,17 @@ declare function Sidebar({
  * <DetailDialogSidebarTrigger />
  * ```
  */
-declare function DetailDialogSidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>): import("react").JSX.Element;
-declare function DetailDialogSidebarHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarFooter({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenu({
-  className,
-  ...props
-}: React.ComponentProps<'ul'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<'li'>): import("react").JSX.Element;
+declare function DetailDialogSidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function DetailDialogSidebarHeader({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarFooter({ className, children, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | "lg" | null | undefined;
+  size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function DetailDialogSidebarMenuButton({
-  asChild,
-  isActive,
-  variant,
-  size,
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<'button'> & {
+declare function DetailDialogSidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
   asChild?: boolean;
   isActive?: boolean;
   tooltip?: string | React.ComponentProps<typeof TooltipContent>;
@@ -128,79 +106,32 @@ declare function DetailDialogSidebarMenuButton({
  * `DetailDialog`'s own bundle doesn't pay for these; still re-exported in full from `./sidebar.tsx`
  * for direct standalone use.
  */
-declare function DetailDialogSidebarRail({
-  className,
-  ...props
-}: React.ComponentProps<'button'>): import("react").JSX.Element;
-declare function SidebarInset({
-  className,
-  ...props
-}: React.ComponentProps<'main'>): import("react").JSX.Element;
-declare function DetailDialogSidebarGroup({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarGroupLabel({
-  className,
-  asChild,
-  ...props
-}: React.ComponentProps<'div'> & {
+declare function DetailDialogSidebarRail({ className, ...props }: React.ComponentProps<'button'>): import("react").JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): import("react").JSX.Element;
+declare function DetailDialogSidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
   asChild?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarGroupAction({
-  className,
-  asChild,
-  ...props
-}: React.ComponentProps<'button'> & {
+declare function DetailDialogSidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
   asChild?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuAction({
-  className,
-  asChild,
-  showOnHover,
-  ...props
-}: React.ComponentProps<'button'> & {
+declare function DetailDialogSidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
   asChild?: boolean;
   showOnHover?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSkeleton({
-  className,
-  showIcon,
-  ...props
-}: React.ComponentProps<'div'> & {
+declare function DetailDialogSidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
   showIcon?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSub({
-  className,
-  ...props
-}: React.ComponentProps<'ul'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<'li'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSubButton({
-  asChild,
-  size,
-  isActive,
-  className,
-  ...props
-}: React.ComponentProps<'a'> & {
+declare function DetailDialogSidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<'a'> & {
   asChild?: boolean;
   size?: 'sm' | 'md';
   isActive?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+declare function DetailDialogSidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
 //#endregion
-export { DetailDialogSidebarContent, DetailDialogSidebarFooter, DetailDialogSidebarGroup, DetailDialogSidebarGroupAction, DetailDialogSidebarGroupContent, DetailDialogSidebarGroupLabel, DetailDialogSidebarHeader, DetailDialogSidebarMenu, DetailDialogSidebarMenuAction, DetailDialogSidebarMenuBadge, DetailDialogSidebarMenuButton, DetailDialogSidebarMenuItem, DetailDialogSidebarMenuSkeleton, DetailDialogSidebarMenuSub, DetailDialogSidebarMenuSubButton, DetailDialogSidebarMenuSubItem, DetailDialogSidebarRail, DetailDialogSidebarSeparator, DetailDialogSidebarTrigger, Sidebar, SidebarInset, SidebarProvider, useSidebar };
+export { DetailDialogSidebarContent, DetailDialogSidebarFooter, DetailDialogSidebarGroup, DetailDialogSidebarGroupAction, DetailDialogSidebarGroupContent, DetailDialogSidebarGroupLabel, DetailDialogSidebarHeader, DetailDialogSidebarMenu, DetailDialogSidebarMenuAction, DetailDialogSidebarMenuBadge, DetailDialogSidebarMenuButton, DetailDialogSidebarMenuItem, DetailDialogSidebarMenuSkeleton, DetailDialogSidebarMenuSub, DetailDialogSidebarMenuSubButton, DetailDialogSidebarMenuSubItem, DetailDialogSidebarRail, DetailDialogSidebarSeparator, DetailDialogSidebarTrigger, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, Sidebar, SidebarContext, SidebarContextProps, SidebarInset, SidebarProvider, useSidebar, useSidebarState };
 //# sourceMappingURL=sidebar.d.mts.map

package/dist/dialogs/detail-dialog/components/sidebar.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Skeleton as e}from"../../../ui/skeleton.mjs";import{a as t,c as n,i as r,l as i,n as a,o,r as s,s as c,t as l,u}from"../../../sidebar-core-Bh0dZXsm.mjs";import{Separator as d}from"../../../ui/separator.mjs";import{useMemo as f}from"react";import{cn as p}from"@customafk/react-toolkit/utils";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{Slot as g}from"radix-ui";function _({className:e,...t}){let{toggleSidebar:n}=u();return m(`button`,{"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:n,title:`Toggle Sidebar`,className:p(`absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex`,`after:absolute after:inset-y-0 after:left-1/2 after:w-0.5`,`hover:after:bg-sidebar-border`,`group-data-[side=left]:-right-4 group-data-[side=right]:left-0`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,`hover:group-data-[collapsible=offcanvas]:bg-sidebar`,`group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full`,`[[data-side=left][data-collapsible=offcanvas]_&]:-right-2`,`[[data-side=right][data-collapsible=offcanvas]_&]:-left-2`,e),...t})}function v({className:e,...t}){return m(`main`,{"data-slot":`sidebar-inset`,className:p(`relative flex w-full flex-1 flex-col bg-background`,`md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0`,`md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm`,`md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2`,e),...t})}function y({className:e,...t}){return m(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:p(`relative flex w-full min-w-0 flex-col p-2`,e),...t})}function b({className:e,asChild:t=!1,...n}){return m(t?g.Slot:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:p(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,e),...n})}function x({className:e,asChild:t=!1,...n}){return m(t?g.Slot:`button`,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:p(`absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`group-data-[collapsible=icon]:hidden`,e),...n})}function S({className:e,...t}){return m(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:p(`w-full text-sm`,e),...t})}function C({className:e,asChild:t=!1,showOnHover:n=!1,...r}){return m(t?g.Slot:`button`,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:p(`absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden`,`text-sidebar-foreground ring-sidebar-ring`,`transition-[background-color,color,opacity]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`peer-hover/menu-button:text-sidebar-accent-foreground`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,n&&`peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,n&&`group-focus-within/menu-item:opacity-100`,n&&`group-hover/menu-item:opacity-100`,n&&`data-[state=open]:opacity-100 md:opacity-0`,e),...r})}function w({className:e,...t}){return m(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:p(`pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors`,`peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function T({className:t,showIcon:n=!1,...r}){let i=f(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return h(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:p(`flex h-8 items-center gap-2 rounded-md px-2`,t),...r,children:[n&&m(e,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),m(e,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":i}})]})}function E({className:e,...t}){return m(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:p(`mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function D({className:e,...t}){return m(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:p(`group/menu-sub-item relative`,e),...t})}function O({asChild:e=!1,size:t=`md`,isActive:n=!1,className:r,...i}){return m(e?g.Slot:`a`,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":t,"data-active":n,className:p(`text-sidebar-foreground ring-sidebar-ring`,`flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden`,`transition-[background-color,color]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`disabled:pointer-events-none disabled:opacity-50`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:hidden`,`[&>span:last-child]:truncate`,`[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground`,t===`sm`&&`text-xs`,t===`md`&&`text-sm`,r),...i})}function k({className:e,...t}){return m(d,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:p(`mx-2 w-auto bg-sidebar-border`,e),...t})}export{l as DetailDialogSidebarContent,a as DetailDialogSidebarFooter,y as DetailDialogSidebarGroup,x as DetailDialogSidebarGroupAction,S as DetailDialogSidebarGroupContent,b as DetailDialogSidebarGroupLabel,s as DetailDialogSidebarHeader,r as DetailDialogSidebarMenu,C as DetailDialogSidebarMenuAction,w as DetailDialogSidebarMenuBadge,t as DetailDialogSidebarMenuButton,o as DetailDialogSidebarMenuItem,T as DetailDialogSidebarMenuSkeleton,E as DetailDialogSidebarMenuSub,O as DetailDialogSidebarMenuSubButton,D as DetailDialogSidebarMenuSubItem,_ as DetailDialogSidebarRail,k as DetailDialogSidebarSeparator,c as DetailDialogSidebarTrigger,n as Sidebar,v as SidebarInset,i as SidebarProvider,u as useSidebar};
+"use client";import{Skeleton as e}from"../../../ui/skeleton.mjs";import{_ as t,a as n,c as r,d as i,f as a,g as o,h as s,i as c,l,m as u,n as d,o as f,p,r as m,s as h,t as g,u as _}from"../../../sidebar-core-Bz_LtXZy.mjs";import{Separator as v}from"../../../ui/separator.mjs";import{useMemo as y}from"react";import{cn as b}from"@customafk/react-toolkit/utils";import{jsx as x,jsxs as S}from"react/jsx-runtime";import{Slot as C}from"radix-ui";function w({className:e,...t}){let{toggleSidebar:n}=o();return x(`button`,{"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:n,title:`Toggle Sidebar`,className:b(`absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex`,`after:absolute after:inset-y-0 after:left-1/2 after:w-0.5`,`hover:after:bg-sidebar-border`,`group-data-[side=left]:-right-4 group-data-[side=right]:left-0`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,e),...t})}function T({className:e,...t}){return x(`main`,{"data-slot":`sidebar-inset`,className:b(`relative flex w-full flex-1 flex-col bg-background`,e),...t})}function E({className:e,...t}){return x(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:b(`relative flex w-full min-w-0 flex-col p-2`,e),...t})}function D({className:e,asChild:t=!1,...n}){return x(t?C.Slot:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:b(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,e),...n})}function O({className:e,asChild:t=!1,...n}){return x(t?C.Slot:`button`,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:b(`absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`group-data-[collapsible=icon]:hidden`,e),...n})}function k({className:e,...t}){return x(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:b(`w-full text-sm`,e),...t})}function A({className:e,asChild:t=!1,showOnHover:n=!1,...r}){return x(t?C.Slot:`button`,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:b(`absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden`,`text-sidebar-foreground ring-sidebar-ring`,`transition-[background-color,color,opacity]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`peer-hover/menu-button:text-sidebar-accent-foreground`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,n&&`peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,n&&`group-focus-within/menu-item:opacity-100`,n&&`group-hover/menu-item:opacity-100`,n&&`data-[state=open]:opacity-100 md:opacity-0`,e),...r})}function j({className:e,...t}){return x(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:b(`pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors`,`peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function M({className:t,showIcon:n=!1,...r}){let i=y(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return S(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:b(`flex h-8 items-center gap-2 rounded-md px-2`,t),...r,children:[n&&x(e,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),x(e,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":i}})]})}function N({className:e,...t}){return x(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:b(`mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function P({className:e,...t}){return x(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:b(`group/menu-sub-item relative`,e),...t})}function F({asChild:e=!1,size:t=`md`,isActive:n=!1,className:r,...i}){return x(e?C.Slot:`a`,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":t,"data-active":n,className:b(`text-sidebar-foreground ring-sidebar-ring`,`flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden`,`transition-[background-color,color]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`disabled:pointer-events-none disabled:opacity-50`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:hidden`,`[&>span:last-child]:truncate`,`[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground`,t===`sm`&&`text-xs`,t===`md`&&`text-sm`,r),...i})}function I({className:e,...t}){return x(v,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:b(`mx-2 w-auto bg-sidebar-border`,e),...t})}export{g as DetailDialogSidebarContent,d as DetailDialogSidebarFooter,E as DetailDialogSidebarGroup,O as DetailDialogSidebarGroupAction,k as DetailDialogSidebarGroupContent,D as DetailDialogSidebarGroupLabel,m as DetailDialogSidebarHeader,c as DetailDialogSidebarMenu,A as DetailDialogSidebarMenuAction,j as DetailDialogSidebarMenuBadge,n as DetailDialogSidebarMenuButton,f as DetailDialogSidebarMenuItem,M as DetailDialogSidebarMenuSkeleton,N as DetailDialogSidebarMenuSub,F as DetailDialogSidebarMenuSubButton,P as DetailDialogSidebarMenuSubItem,w as DetailDialogSidebarRail,I as DetailDialogSidebarSeparator,h as DetailDialogSidebarTrigger,r as SIDEBAR_COOKIE_MAX_AGE,l as SIDEBAR_COOKIE_NAME,_ as SIDEBAR_KEYBOARD_SHORTCUT,i as SIDEBAR_WIDTH,a as SIDEBAR_WIDTH_ICON,p as Sidebar,u as SidebarContext,T as SidebarInset,s as SidebarProvider,o as useSidebar,t as useSidebarState};
 //# sourceMappingURL=sidebar.mjs.map

package/dist/dialogs/detail-dialog/components/sidebar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar.mjs","names":["SlotPrimitive","Separator"],"sources":["../../../../packages/components/dialogs/detail-dialog/components/sidebar-extras.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator } from '@/components/ui/separator';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { useSidebar } from './sidebar-core';\n\n/*\n Extended sidebar sub-components not used by `DetailDialog` itself — column-group layout,\n * submenus, a standalone skeleton, and the desktop drag rail. Split out of `./sidebar-core` so\n * `DetailDialog`'s own bundle doesn't pay for these; still re-exported in full from `./sidebar.tsx`\n * for direct standalone use.\n /\nfunction DetailDialogSidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex',\n 'after:absolute after:inset-y-0 after:left-1/2 after:w-0.5',\n 'hover:after:bg-sidebar-border',\n 'group-data-[side=left]:-right-4 group-data-[side=right]:left-0',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'relative flex w-full flex-1 flex-col bg-background',\n 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0',\n 'md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',\n 'md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col p-2', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {\n const Comp = asChild ? SlotPrimitive.Slot : 'div';\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? SlotPrimitive.Slot : 'button';\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]',\n 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? SlotPrimitive.Slot : 'button';\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden',\n 'text-sidebar-foreground ring-sidebar-ring',\n 'transition-[background-color,color,opacity]',\n 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n 'peer-hover/menu-button:text-sidebar-accent-foreground',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n showOnHover && 'group-focus-within/menu-item:opacity-100',\n showOnHover && 'group-hover/menu-item:opacity-100',\n showOnHover && 'data-[state=open]:opacity-100 md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<'div'> & { showIcon?: boolean }) {\n const width = useMemo(() => `${Math.floor(Math.random() 40) + 50}%`, []);\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={{ '--skeleton-width': width } as React.CSSProperties}\n />\n </div>\n );\n}\n\nfunction DetailDialogSidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' \| 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? SlotPrimitive.Slot : 'a';\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring',\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden',\n 'transition-[background-color,color]',\n 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:hidden',\n '[&>span:last-child]:truncate',\n '[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n}\n\nexport {\n DetailDialogSidebarGroup,\n DetailDialogSidebarGroupAction,\n DetailDialogSidebarGroupContent,\n DetailDialogSidebarGroupLabel,\n DetailDialogSidebarMenuAction,\n DetailDialogSidebarMenuBadge,\n DetailDialogSidebarMenuSkeleton,\n DetailDialogSidebarMenuSub,\n DetailDialogSidebarMenuSubButton,\n DetailDialogSidebarMenuSubItem,\n DetailDialogSidebarRail,\n DetailDialogSidebarSeparator,\n SidebarInset,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"sidebar.mjs","names":["SlotPrimitive","Separator"],"sources":["../../../../packages/components/dialogs/detail-dialog/components/sidebar-extras.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator } from '@/components/ui/separator';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { useSidebar } from './sidebar-core';\n\n/*\n Extended sidebar sub-components not used by `DetailDialog` itself — column-group layout,\n * submenus, a standalone skeleton, and the desktop drag rail. Split out of `./sidebar-core` so\n * `DetailDialog`'s own bundle doesn't pay for these; still re-exported in full from `./sidebar.tsx`\n * for direct standalone use.\n /\nfunction DetailDialogSidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex',\n 'after:absolute after:inset-y-0 after:left-1/2 after:w-0.5',\n 'hover:after:bg-sidebar-border',\n 'group-data-[side=left]:-right-4 group-data-[side=right]:left-0',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col bg-background', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col p-2', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {\n const Comp = asChild ? SlotPrimitive.Slot : 'div';\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? SlotPrimitive.Slot : 'button';\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]',\n 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? SlotPrimitive.Slot : 'button';\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden',\n 'text-sidebar-foreground ring-sidebar-ring',\n 'transition-[background-color,color,opacity]',\n 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n 'peer-hover/menu-button:text-sidebar-accent-foreground',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n showOnHover && 'group-focus-within/menu-item:opacity-100',\n showOnHover && 'group-hover/menu-item:opacity-100',\n showOnHover && 'data-[state=open]:opacity-100 md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<'div'> & { showIcon?: boolean }) {\n const width = useMemo(() => `${Math.floor(Math.random() 40) + 50}%`, []);\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={{ '--skeleton-width': width } as React.CSSProperties}\n />\n </div>\n );\n}\n\nfunction DetailDialogSidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' \| 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? SlotPrimitive.Slot : 'a';\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring',\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden',\n 'transition-[background-color,color]',\n 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:hidden',\n '[&>span:last-child]:truncate',\n '[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction DetailDialogSidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n}\n\nexport {\n DetailDialogSidebarGroup,\n DetailDialogSidebarGroupAction,\n DetailDialogSidebarGroupContent,\n DetailDialogSidebarGroupLabel,\n DetailDialogSidebarMenuAction,\n DetailDialogSidebarMenuBadge,\n DetailDialogSidebarMenuSkeleton,\n DetailDialogSidebarMenuSub,\n DetailDialogSidebarMenuSubButton,\n DetailDialogSidebarMenuSubItem,\n DetailDialogSidebarRail,\n DetailDialogSidebarSeparator,\n SidebarInset,\n};\n"],"mappings":"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"}

package/dist/dialogs/detail-dialog/index.cjs CHANGED Viewed

@@ -1,2 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../layouts/flex.cjs"),t=require("../../date-B3cozmfV.cjs"),n=require("../../features/logo/index.cjs"),r=require("../../typography/title.cjs"),i=require("../../sidebar-core-DQE6ymo4.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("radix-ui");const u=({open:u,isLoading:d,title:f,createdAt:p,onOpenChange:m,sidebar:h,children:g})=>{let{content:_,footer:v}=h||{},y=(0,o.useCallback)(e=>{e.preventDefault(),e.stopPropagation()},[]);return(0,c.jsx)(l.Dialog.Root,{"data-slot":`detail-dialog`,open:u,onOpenChange:m,children:(0,c.jsxs)(l.Dialog.Portal,{"data-slot":`detail-dialog-portal`,children:[(0,c.jsx)(l.Dialog.Overlay,{"data-slot":`detail-dialog-overlay`,className:`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in`}),(0,c.jsx)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:(0,c.jsxs)(l.Dialog.Content,{"data-slot":`dialog-content`,className:(0,s.cn)(`data-[state=closed]:animate-out data-[state=open]:animate-in`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`,`relative z-50 grid`,`gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200`,`h-full max-h-dvh w-full max-w-svw`,`sm:rounded-lg`,`sm:max-w-lg`,`md:max-h-[calc(100dvh-2rem)]`,`md:max-w-[calc(100svw-2rem)]`),onInteractOutside:y,children:[(0,c.jsxs)(i.l,{children:[(0,c.jsxs)(i.c,{collapsible:`icon`,children:[(0,c.jsx)(i.r,{children:(0,c.jsx)(i.i,{children:(0,c.jsx)(i.o,{children:(0,c.jsxs)(i.a,{size:`lg`,tabIndex:-1,children:[(0,c.jsx)(n.LunasLogo,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-h-8 min-w-8`}),(0,c.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,c.jsx)(`span`,{className:`truncate font-medium`,children:h?.title||`Detail Dialog`}),(0,c.jsx)(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),(0,c.jsx)(i.t,{children:_}),(0,c.jsx)(i.n,{children:v})]}),(0,c.jsx)(`main`,{"data-slot":`detail-dialog-main`,className:`relative h-full flex-1`,children:(0,c.jsxs)(e.Flex,{padding:`none`,gap:`none`,vertical:!0,align:`stretch`,className:`absolute inset-0 size-full`,children:[(0,c.jsxs)(`header`,{className:`flex w-full flex-0 items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2`,children:[(0,c.jsx)(i.s,{}),(0,c.jsxs)(e.Flex,{vertical:!0,align:`start`,padding:`none`,width:`null`,wrap:!1,className:`flex-1 gap-0`,children:[(0,c.jsx)(r.Title,{level:5,className:`line-clamp-1 truncate text-wrap`,children:f||`Detail Dialog`}),!!p&&(0,c.jsxs)(e.Flex,{padding:`none`,className:`relative items-center text-text-positive-weak`,children:[(0,c.jsx)(a.CalendarIcon,{size:12}),(0,c.jsx)(t.t,{showTime:!0,showHoliday:!0,date:p,format:`full`})]})]})]}),d?(0,c.jsx)(e.Flex,{justify:`center`,className:`inset-shadow-sm w-full flex-1 bg-muted-muted`,children:(0,c.jsx)(`div`,{className:`loader`})}):(0,c.jsx)(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white`,children:g})]})})]}),(0,c.jsx)(l.Dialog.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:(0,c.jsx)(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:(0,c.jsx)(a.XIcon,{size:24})})})]})})]})})};exports.DetailDialog=u;
-//# sourceMappingURL=index.cjs.map
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../detail-dialog-uN5mrCa7.cjs");exports.DetailDialog=e.t;

package/dist/dialogs/detail-dialog/index.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as DetailDialogProps, t as DetailDialog } from "../../index-C9eXmnvk.cjs";
+import { n as DetailDialogProps, t as DetailDialog } from "../../index-BOifmu0V.cjs";
 export { DetailDialog, DetailDialogProps };

package/dist/dialogs/detail-dialog/index.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as DetailDialogProps, t as DetailDialog } from "../../index-C9eXmnvk.mjs";
+import { n as DetailDialogProps, t as DetailDialog } from "../../index-BOifmu0V.mjs";
 export { DetailDialog, DetailDialogProps };

package/dist/dialogs/detail-dialog/index.mjs CHANGED Viewed

@@ -1,2 +1 @@
-"use client";import{Flex as e}from"../../layouts/flex.mjs";import{t}from"../../date-Nsz0Pewe.mjs";import{LunasLogo as n}from"../../features/logo/index.mjs";import{Title as r}from"../../typography/title.mjs";import{a as i,c as a,i as o,l as s,n as c,o as l,r as u,s as d,t as f}from"../../sidebar-core-Bh0dZXsm.mjs";import{CalendarIcon as p,XIcon as m}from"lucide-react";import{useCallback as h}from"react";import{cn as g}from"@customafk/react-toolkit/utils";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{Dialog as y}from"radix-ui";const b=({open:b,isLoading:x,title:S,createdAt:C,onOpenChange:w,sidebar:T,children:E})=>{let{content:D,footer:O}=T||{},k=h(e=>{e.preventDefault(),e.stopPropagation()},[]);return _(y.Root,{"data-slot":`detail-dialog`,open:b,onOpenChange:w,children:v(y.Portal,{"data-slot":`detail-dialog-portal`,children:[_(y.Overlay,{"data-slot":`detail-dialog-overlay`,className:`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in`}),_(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:v(y.Content,{"data-slot":`dialog-content`,className:g(`data-[state=closed]:animate-out data-[state=open]:animate-in`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`,`relative z-50 grid`,`gap-4 overflow-hidden rounded-none border-none bg-background p-0 shadow-dialog outline-none duration-200`,`h-full max-h-dvh w-full max-w-svw`,`sm:rounded-lg`,`sm:max-w-lg`,`md:max-h-[calc(100dvh-2rem)]`,`md:max-w-[calc(100svw-2rem)]`),onInteractOutside:k,children:[v(s,{children:[v(a,{collapsible:`icon`,children:[_(u,{children:_(o,{children:_(l,{children:v(i,{size:`lg`,tabIndex:-1,children:[_(n,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-h-8 min-w-8`}),v(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[_(`span`,{className:`truncate font-medium`,children:T?.title||`Detail Dialog`}),_(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),_(f,{children:D}),_(c,{children:O})]}),_(`main`,{"data-slot":`detail-dialog-main`,className:`relative h-full flex-1`,children:v(e,{padding:`none`,gap:`none`,vertical:!0,align:`stretch`,className:`absolute inset-0 size-full`,children:[v(`header`,{className:`flex w-full flex-0 items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2`,children:[_(d,{}),v(e,{vertical:!0,align:`start`,padding:`none`,width:`null`,wrap:!1,className:`flex-1 gap-0`,children:[_(r,{level:5,className:`line-clamp-1 truncate text-wrap`,children:S||`Detail Dialog`}),!!C&&v(e,{padding:`none`,className:`relative items-center text-text-positive-weak`,children:[_(p,{size:12}),_(t,{showTime:!0,showHoliday:!0,date:C,format:`full`})]})]})]}),x?_(e,{justify:`center`,className:`inset-shadow-sm w-full flex-1 bg-muted-muted`,children:_(`div`,{className:`loader`})}):_(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm flex flex-1 snap-y flex-col gap-0 overflow-y-auto bg-white`,children:E})]})})]}),_(y.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:_(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:_(m,{size:24})})})]})})]})})};export{b as DetailDialog};
-//# sourceMappingURL=index.mjs.map
+"use client";import{t as e}from"../../detail-dialog-Ct0vAjFe.mjs";export{e as DetailDialog};

package/dist/dialogs/error-dialog.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"error-dialog.cjs","names":["AlertDialog","AlertDialogContent","AlertDialogHeader","AlertTriangleIcon","AlertDialogTitle","AlertDialogFooter","AlertDialogAction"],"sources":["../../packages/components/dialogs/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { AlertTriangleIcon } from 'lucide-react';\n\nimport { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';\n\nexport type ErrorDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Title text displayed inside the dialog header. Defaults to `'An error occurred'`. /\n title?: string;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a modal alert dialog for communicating error states to the user.\n \n @example\n * ```tsx\n * import { ErrorDialog } from '@customafk/lunas-ui/dialogs/error-dialog';\n \n <ErrorDialog open={hasError} title=\"Something went wrong\" onOpenChange={setHasError}>\n * <p>Please try again later.</p>\n * </ErrorDialog>\n * ```\n */\nexport const ErrorDialog: React.FC<React.PropsWithChildren<ErrorDialogProps>> = ({ open, title, children, onOpenChange }) => {\n const handleClose = useCallback(() => {\n onOpenChange?.(false);\n }, [onOpenChange]);\n\n return (\n <AlertDialog open={open} onOpenChange={onOpenChange}>\n <AlertDialogContent className=\"gap-8 p-4 sm:max-w-md\">\n <AlertDialogHeader>\n <div className=\"flex flex-col items-center text-danger\">\n <AlertTriangleIcon size={42} />\n <AlertDialogTitle className=\"text-xl font-medium\">{title \|\| 'An error occurred'}</AlertDialogTitle>\n </div>\n </AlertDialogHeader>\n {children}\n <AlertDialogFooter>\n <AlertDialogAction className=\"w-full sm:w-28\" onClick={handleClose}>\n Close\n </AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n};\n"],"mappings":"0MA6BA,MAAa,GAAoE,CAAE,OAAM,QAAO,WAAU,kBAAmB,CAC3H,IAAM,GAAA,EAAA,EAAA,YAAA,KAAgC,CACpC,IAAe,EAAK,CACtB,EAAG,CAAC,CAAY,CAAC,EAEjB,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAD,CAAmB,OAAoB,~~yBACrC~~,EAAA,EAAA,KAAA,CAACC,EAAAA,mBAAD,CAAoB,UAAU,~~iCAA9B~~,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,~~kDAAf~~,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAmB,KAAM,EAAK,CAAA,GAC9B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,UAAU~~,+BAAuB~~,GAAS,mBAAsC,CAAA,CAC/F,~~GACY~~,CAAA,EAClB,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAmB,UAAU,iBAAiB,QAAS,~~WAAa~~,OAEjD,CAAA,CACF,CAAA,CACD,GACT,CAAA,CAEjB"}
1	+ {"version":3,"file":"error-dialog.cjs","names":["AlertDialog","AlertDialogContent","AlertDialogHeader","AlertTriangleIcon","AlertDialogTitle","AlertDialogFooter","AlertDialogAction"],"sources":["../../packages/components/dialogs/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { AlertTriangleIcon } from 'lucide-react';\n\nimport { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';\n\nexport type ErrorDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Title text displayed inside the dialog header. Defaults to `'An error occurred'`. /\n title?: string;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a modal alert dialog for communicating error states to the user.\n \n @example\n * ```tsx\n * import { ErrorDialog } from '@customafk/lunas-ui/dialogs/error-dialog';\n \n <ErrorDialog open={hasError} title=\"Something went wrong\" onOpenChange={setHasError}>\n * <p>Please try again later.</p>\n * </ErrorDialog>\n * ```\n */\nexport const ErrorDialog: React.FC<React.PropsWithChildren<ErrorDialogProps>> = ({ open, title, children, onOpenChange }) => {\n const handleClose = useCallback(() => {\n onOpenChange?.(false);\n }, [onOpenChange]);\n\n return (\n <AlertDialog open={open} onOpenChange={onOpenChange}>\n <AlertDialogContent className=\"gap-8 p-4 sm:max-w-md\">\n <AlertDialogHeader>\n <div className=\"flex flex-col items-center text-danger\">\n <AlertTriangleIcon size={42} />\n <AlertDialogTitle className=\"text-xl font-medium\">{title \|\| 'An error occurred'}</AlertDialogTitle>\n </div>\n </AlertDialogHeader>\n {children}\n <AlertDialogFooter>\n <AlertDialogAction className=\"w-full sm:w-28\" onClick={handleClose}>\n Close\n </AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n};\n"],"mappings":"0MA6BA,MAAa,GAAoE,CAAE,OAAM,QAAO,WAAU,kBAAmB,CAC3H,IAAM,GAAA,EAAA,EAAA,YAAA,KAAgC,CACpC,IAAe,EAAK,CACtB,EAAG,CAAC,CAAY,CAAC,EAEjB,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAD,CAAmB,OAAoB,eACrC,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,mBAAD,CAAoB,UAAU,wBAA9B,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,yCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAmB,KAAM,EAAK,CAAA,GAC9B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAkB,UAAU,sBAAuB,SAAA,GAAS,mBAAsC,CAAA,CAC/F,CACY,CAAA,CAAA,CAAA,EAClB,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAmB,UAAU,iBAAiB,QAAS,EAAa,SAAA,OAEjD,CAAA,CACF,CAAA,CACD,GACT,CAAA,CAEjB"}

package/dist/dialogs/error-dialog.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as ErrorDialogProps, t as ErrorDialog } from "../error-dialog-D4jOPhmw.cjs";
+import { n as ErrorDialogProps, t as ErrorDialog } from "../error-dialog-DYQSm_JC.cjs";
 export { ErrorDialog, ErrorDialogProps };

package/dist/dialogs/error-dialog.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as ErrorDialogProps, t as ErrorDialog } from "../error-dialog-D4jOPhmw.mjs";
+import { n as ErrorDialogProps, t as ErrorDialog } from "../error-dialog-DYQSm_JC.mjs";
 export { ErrorDialog, ErrorDialogProps };

package/dist/dialogs/error-dialog.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"error-dialog.mjs","names":[],"sources":["../../packages/components/dialogs/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { AlertTriangleIcon } from 'lucide-react';\n\nimport { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';\n\nexport type ErrorDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Title text displayed inside the dialog header. Defaults to `'An error occurred'`. /\n title?: string;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a modal alert dialog for communicating error states to the user.\n \n @example\n * ```tsx\n * import { ErrorDialog } from '@customafk/lunas-ui/dialogs/error-dialog';\n \n <ErrorDialog open={hasError} title=\"Something went wrong\" onOpenChange={setHasError}>\n * <p>Please try again later.</p>\n * </ErrorDialog>\n * ```\n */\nexport const ErrorDialog: React.FC<React.PropsWithChildren<ErrorDialogProps>> = ({ open, title, children, onOpenChange }) => {\n const handleClose = useCallback(() => {\n onOpenChange?.(false);\n }, [onOpenChange]);\n\n return (\n <AlertDialog open={open} onOpenChange={onOpenChange}>\n <AlertDialogContent className=\"gap-8 p-4 sm:max-w-md\">\n <AlertDialogHeader>\n <div className=\"flex flex-col items-center text-danger\">\n <AlertTriangleIcon size={42} />\n <AlertDialogTitle className=\"text-xl font-medium\">{title \|\| 'An error occurred'}</AlertDialogTitle>\n </div>\n </AlertDialogHeader>\n {children}\n <AlertDialogFooter>\n <AlertDialogAction className=\"w-full sm:w-28\" onClick={handleClose}>\n Close\n </AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n};\n"],"mappings":"4TA6BA,MAAa,GAAoE,CAAE,OAAM,QAAO,WAAU,kBAAmB,CAC3H,IAAM,EAAc,MAAkB,CACpC,IAAe,EAAK,CACtB,EAAG,CAAC,CAAY,CAAC,EAEjB,OACE,EAAC,EAAD,CAAmB,OAAoB,~~wBACrC~~,EAAC,EAAD,CAAoB,UAAU,~~iCAA9B~~,CACE,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAU,~~kDAAf~~,CACE,EAAC,EAAD,CAAmB,KAAM,EAAK,CAAA,EAC9B,EAAC,EAAD,CAAkB,UAAU~~,+BAAuB~~,GAAS,mBAAsC,CAAA,CAC/F,~~GACY~~,CAAA,EAClB,EACD,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAmB,UAAU,iBAAiB,QAAS,~~WAAa~~,OAEjD,CAAA,CACF,CAAA,CACD,GACT,CAAA,CAEjB"}
1	+ {"version":3,"file":"error-dialog.mjs","names":[],"sources":["../../packages/components/dialogs/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { AlertTriangleIcon } from 'lucide-react';\n\nimport { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';\n\nexport type ErrorDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Title text displayed inside the dialog header. Defaults to `'An error occurred'`. /\n title?: string;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a modal alert dialog for communicating error states to the user.\n \n @example\n * ```tsx\n * import { ErrorDialog } from '@customafk/lunas-ui/dialogs/error-dialog';\n \n <ErrorDialog open={hasError} title=\"Something went wrong\" onOpenChange={setHasError}>\n * <p>Please try again later.</p>\n * </ErrorDialog>\n * ```\n */\nexport const ErrorDialog: React.FC<React.PropsWithChildren<ErrorDialogProps>> = ({ open, title, children, onOpenChange }) => {\n const handleClose = useCallback(() => {\n onOpenChange?.(false);\n }, [onOpenChange]);\n\n return (\n <AlertDialog open={open} onOpenChange={onOpenChange}>\n <AlertDialogContent className=\"gap-8 p-4 sm:max-w-md\">\n <AlertDialogHeader>\n <div className=\"flex flex-col items-center text-danger\">\n <AlertTriangleIcon size={42} />\n <AlertDialogTitle className=\"text-xl font-medium\">{title \|\| 'An error occurred'}</AlertDialogTitle>\n </div>\n </AlertDialogHeader>\n {children}\n <AlertDialogFooter>\n <AlertDialogAction className=\"w-full sm:w-28\" onClick={handleClose}>\n Close\n </AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n};\n"],"mappings":"4TA6BA,MAAa,GAAoE,CAAE,OAAM,QAAO,WAAU,kBAAmB,CAC3H,IAAM,EAAc,MAAkB,CACpC,IAAe,EAAK,CACtB,EAAG,CAAC,CAAY,CAAC,EAEjB,OACE,EAAC,EAAD,CAAmB,OAAoB,eACrC,SAAA,EAAC,EAAD,CAAoB,UAAU,wBAA9B,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAU,yCAAf,SAAA,CACE,EAAC,EAAD,CAAmB,KAAM,EAAK,CAAA,EAC9B,EAAC,EAAD,CAAkB,UAAU,sBAAuB,SAAA,GAAS,mBAAsC,CAAA,CAC/F,CACY,CAAA,CAAA,CAAA,EAClB,EACD,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAmB,UAAU,iBAAiB,QAAS,EAAa,SAAA,OAEjD,CAAA,CACF,CAAA,CACD,GACT,CAAA,CAEjB"}

package/dist/dialogs/loading-dialog.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-dialog.cjs","names":["Dialog","DialogContent","DialogTitle"],"sources":["../../packages/components/dialogs/loading-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, DialogContent, DialogTitle } from '../ui/dialog';\n\nexport type LoadingDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.\n \n @example\n * ```tsx\n * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';\n \n <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />\n * ```\n */\nexport const LoadingDialog: React.FC<LoadingDialogProps> = ({ open, onOpenChange }) => {\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent showCloseButton={false} className=\"pointer-events-none border-none bg-transparent shadow-none outline-none [&>div]:bg-transparent\">\n <DialogTitle />\n <div className=\"flex items-center justify-center\">\n <div className=\"loader opacity-60\" />\n </div>\n </DialogContent>\n </Dialog>\n );\n};\n"],"mappings":"uJAqBA,MAAa,GAA+C,CAAE,OAAM,mBAEhE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAc,OAAoB,~~yBAChC~~,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAe,gBAAiB,GAAO,UAAU,~~0GAAjD~~,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAc,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,~~6CACb~~,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mBAAqB,CAAA,CACjC,CAAA,CACQ,GACT,CAAA"}
1	+ {"version":3,"file":"loading-dialog.cjs","names":["Dialog","DialogContent","DialogTitle"],"sources":["../../packages/components/dialogs/loading-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, DialogContent, DialogTitle } from '../ui/dialog';\n\nexport type LoadingDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.\n \n @example\n * ```tsx\n * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';\n \n <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />\n * ```\n */\nexport const LoadingDialog: React.FC<LoadingDialogProps> = ({ open, onOpenChange }) => {\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent showCloseButton={false} className=\"pointer-events-none border-none bg-transparent shadow-none outline-none [&>div]:bg-transparent\">\n <DialogTitle />\n <div className=\"flex items-center justify-center\">\n <div className=\"loader opacity-60\" />\n </div>\n </DialogContent>\n </Dialog>\n );\n};\n"],"mappings":"uJAqBA,MAAa,GAA+C,CAAE,OAAM,mBAEhE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAc,OAAoB,eAChC,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAe,gBAAiB,GAAO,UAAU,iGAAjD,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAc,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mCACb,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,mBAAqB,CAAA,CACjC,CAAA,CACQ,GACT,CAAA"}

package/dist/dialogs/loading-dialog.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as LoadingDialogProps, t as LoadingDialog } from "../loading-dialog-C73EJx9s.cjs";
+import { n as LoadingDialogProps, t as LoadingDialog } from "../loading-dialog-DXjQSQnC.cjs";
 export { LoadingDialog, LoadingDialogProps };

package/dist/dialogs/loading-dialog.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as LoadingDialogProps, t as LoadingDialog } from "../loading-dialog-C73EJx9s.mjs";
+import { n as LoadingDialogProps, t as LoadingDialog } from "../loading-dialog-DXjQSQnC.mjs";
 export { LoadingDialog, LoadingDialogProps };

package/dist/dialogs/loading-dialog.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-dialog.mjs","names":[],"sources":["../../packages/components/dialogs/loading-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, DialogContent, DialogTitle } from '../ui/dialog';\n\nexport type LoadingDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.\n \n @example\n * ```tsx\n * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';\n \n <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />\n * ```\n */\nexport const LoadingDialog: React.FC<LoadingDialogProps> = ({ open, onOpenChange }) => {\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent showCloseButton={false} className=\"pointer-events-none border-none bg-transparent shadow-none outline-none [&>div]:bg-transparent\">\n <DialogTitle />\n <div className=\"flex items-center justify-center\">\n <div className=\"loader opacity-60\" />\n </div>\n </DialogContent>\n </Dialog>\n );\n};\n"],"mappings":"6IAqBA,MAAa,GAA+C,CAAE,OAAM,kBAEhE,EAAC,EAAD,CAAc,OAAoB,~~wBAChC~~,EAAC,EAAD,CAAe,gBAAiB,GAAO,UAAU,~~0GAAjD~~,CACE,EAAC,EAAD,CAAc,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,~~4CACb~~,EAAC,MAAD,CAAK,UAAU,mBAAqB,CAAA,CACjC,CAAA,CACQ,GACT,CAAA"}
1	+ {"version":3,"file":"loading-dialog.mjs","names":[],"sources":["../../packages/components/dialogs/loading-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, DialogContent, DialogTitle } from '../ui/dialog';\n\nexport type LoadingDialogProps = {\n /** Controls whether the dialog is open. /\n open?: boolean;\n /* Callback invoked when the dialog open state changes. /\n onOpenChange?: (open: boolean) => void;\n};\n\n/\n Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.\n \n @example\n * ```tsx\n * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';\n \n <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />\n * ```\n */\nexport const LoadingDialog: React.FC<LoadingDialogProps> = ({ open, onOpenChange }) => {\n return (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent showCloseButton={false} className=\"pointer-events-none border-none bg-transparent shadow-none outline-none [&>div]:bg-transparent\">\n <DialogTitle />\n <div className=\"flex items-center justify-center\">\n <div className=\"loader opacity-60\" />\n </div>\n </DialogContent>\n </Dialog>\n );\n};\n"],"mappings":"6IAqBA,MAAa,GAA+C,CAAE,OAAM,kBAEhE,EAAC,EAAD,CAAc,OAAoB,eAChC,SAAA,EAAC,EAAD,CAAe,gBAAiB,GAAO,UAAU,iGAAjD,SAAA,CACE,EAAC,EAAD,CAAc,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,mCACb,SAAA,EAAC,MAAD,CAAK,UAAU,mBAAqB,CAAA,CACjC,CAAA,CACQ,GACT,CAAA"}

package/dist/donut-chart-CsPPKy0G.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"donut-chart-CsPPKy0G.cjs","names":["formatCompactNumber","getChartColor","ChartContainer","PieChart","ChartTooltip","ChartTooltipContent","Pie","Label","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/donut-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Label, Pie, PieChart } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type DonutChartSegment = NamedValue & {\n /** Config key; derived from `name` when omitted. /\n key?: string;\n color?: string;\n};\n\nexport type DonutChartProps = BaseChartProps & {\n data: DonutChartSegment[];\n /* Text under the center total, e.g. `'Total sales'`. /\n centerLabel?: string;\n /* Formats the center total. Defaults to compact notation. /\n centerValueFormatter?: (total: number) => string;\n /* Overrides the computed segment sum shown in the center. /\n totalValue?: number;\n showLegend?: boolean;\n showCenterTotal?: boolean;\n};\n\nconst toKey = (segment: DonutChartSegment): string => segment.key \|\| segment.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/\n A donut breakdown chart with a center total — category sales, traffic sources, payment methods.\n \n @example\n * ```tsx\n * import { DonutChart } from '@customafk/lunas-ui/features/charts';\n \n <DonutChart\n * data={[\n * { name: 'Fashion', value: 12400 },\n * { name: 'Electronics', value: 8200 },\n * ]}\n * centerLabel=\"Total sales\"\n * />\n * ```\n */\nexport const DonutChart = ({\n data,\n centerLabel,\n centerValueFormatter = formatCompactNumber,\n totalValue,\n showLegend = true,\n showCenterTotal = true,\n className,\n animate = true,\n height,\n}: DonutChartProps) => {\n const { chartData, config, total } = useMemo(() => {\n const entries = data.map((segment, index) => ({\n ...segment,\n key: toKey(segment),\n fill: segment.color \|\| getChartColor(index),\n }));\n const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n return {\n chartData: entries,\n config: chartConfig,\n total: totalValue ?? data.reduce((sum, segment) => sum + segment.value, 0),\n };\n }, [data, totalValue]);\n\n return (\n <ChartContainer\n data-slot=\"donut-chart\"\n config={config}\n className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <PieChart>\n <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n <Pie data={chartData} dataKey=\"value\" nameKey=\"key\" innerRadius=\"60%\" strokeWidth={5} isAnimationActive={animate}>\n {showCenterTotal && (\n <Label\n content={({ viewBox }) => {\n if (!viewBox \|\| !('cx' in viewBox) \|\| !('cy' in viewBox)) return null;\n return (\n <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-2xl font-bold\">\n {centerValueFormatter(total)}\n </tspan>\n {centerLabel && (\n <tspan x={viewBox.cx} y={(viewBox.cy \|\| 0) + 22} className=\"fill-muted text-xs\">\n {centerLabel}\n </tspan>\n )}\n </text>\n );\n }}\n />\n )}\n </Pie>\n {showLegend && <ChartLegend content={<ChartLegendContent nameKey=\"key\" />} />}\n </PieChart>\n </ChartContainer>\n );\n};\n"],"mappings":"mMA8BA,MAAM,EAAS,GAAuC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAkB7G,GAAc,CACzB,OACA,cACA,uBAAuBA,EAAAA,oBACvB,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,UAAU,GACV,YACqB,CACrB,GAAM,CAAE,YAAW,SAAQ,UAAA,EAAA,EAAA,QAAA,KAAwB,CACjD,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAASC,EAAAA,cAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CACL,UAAW,EACX,OAH+B,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAG1G,EAClB,MAAO,GAAc,EAAK,QAAQ,EAAK,IAAY,EAAM,EAAQ,MAAO,CAAC,CAC3E,CACF,EAAG,CAAC,EAAM,CAAU,CAAC,EAErB,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,cACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,~~YAE5D~~,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,GACxF,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,YAAY,MAAM,YAAa,EAAG,kBAAmB,~~WACtG~~,IACC,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,MAE/D,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,~~kBAAzE~~,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,~~oEAC5C~~,EAAqB,CAAK,CACtB,CAAA,EACN,IACC,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,~~8BACxD~~,CACI,CAAA,CAEL,GAGX,CAAA,CAEA,CAAA,EACJ,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAoB,QAAQ,KAAO,CAAA,CAAI,CAAA,CACpE,CAAA,CAAA,CACI,CAAA,CAEpB"}
1	+ {"version":3,"file":"donut-chart-CsPPKy0G.cjs","names":["formatCompactNumber","getChartColor","ChartContainer","PieChart","ChartTooltip","ChartTooltipContent","Pie","Label","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/donut-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Label, Pie, PieChart } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type DonutChartSegment = NamedValue & {\n /** Config key; derived from `name` when omitted. /\n key?: string;\n color?: string;\n};\n\nexport type DonutChartProps = BaseChartProps & {\n data: DonutChartSegment[];\n /* Text under the center total, e.g. `'Total sales'`. /\n centerLabel?: string;\n /* Formats the center total. Defaults to compact notation. /\n centerValueFormatter?: (total: number) => string;\n /* Overrides the computed segment sum shown in the center. /\n totalValue?: number;\n showLegend?: boolean;\n showCenterTotal?: boolean;\n};\n\nconst toKey = (segment: DonutChartSegment): string => segment.key \|\| segment.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/\n A donut breakdown chart with a center total — category sales, traffic sources, payment methods.\n \n @example\n * ```tsx\n * import { DonutChart } from '@customafk/lunas-ui/features/charts';\n \n <DonutChart\n * data={[\n * { name: 'Fashion', value: 12400 },\n * { name: 'Electronics', value: 8200 },\n * ]}\n * centerLabel=\"Total sales\"\n * />\n * ```\n */\nexport const DonutChart = ({\n data,\n centerLabel,\n centerValueFormatter = formatCompactNumber,\n totalValue,\n showLegend = true,\n showCenterTotal = true,\n className,\n animate = true,\n height,\n}: DonutChartProps) => {\n const { chartData, config, total } = useMemo(() => {\n const entries = data.map((segment, index) => ({\n ...segment,\n key: toKey(segment),\n fill: segment.color \|\| getChartColor(index),\n }));\n const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n return {\n chartData: entries,\n config: chartConfig,\n total: totalValue ?? data.reduce((sum, segment) => sum + segment.value, 0),\n };\n }, [data, totalValue]);\n\n return (\n <ChartContainer\n data-slot=\"donut-chart\"\n config={config}\n className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <PieChart>\n <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n <Pie data={chartData} dataKey=\"value\" nameKey=\"key\" innerRadius=\"60%\" strokeWidth={5} isAnimationActive={animate}>\n {showCenterTotal && (\n <Label\n content={({ viewBox }) => {\n if (!viewBox \|\| !('cx' in viewBox) \|\| !('cy' in viewBox)) return null;\n return (\n <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-2xl font-bold\">\n {centerValueFormatter(total)}\n </tspan>\n {centerLabel && (\n <tspan x={viewBox.cx} y={(viewBox.cy \|\| 0) + 22} className=\"fill-muted text-xs\">\n {centerLabel}\n </tspan>\n )}\n </text>\n );\n }}\n />\n )}\n </Pie>\n {showLegend && <ChartLegend content={<ChartLegendContent nameKey=\"key\" />} />}\n </PieChart>\n </ChartContainer>\n );\n};\n"],"mappings":"mMA8BA,MAAM,EAAS,GAAuC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAkB7G,GAAc,CACzB,OACA,cACA,uBAAuBA,EAAAA,oBACvB,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,UAAU,GACV,YACqB,CACrB,GAAM,CAAE,YAAW,SAAQ,UAAA,EAAA,EAAA,QAAA,KAAwB,CACjD,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAASC,EAAAA,cAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CACL,UAAW,EACX,OAH+B,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAG1G,EAClB,MAAO,GAAc,EAAK,QAAQ,EAAK,IAAY,EAAM,EAAQ,MAAO,CAAC,CAC3E,CACF,EAAG,CAAC,EAAM,CAAU,CAAC,EAErB,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,cACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,GACxF,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,YAAY,MAAM,YAAa,EAAG,kBAAmB,EACtG,SAAA,IACC,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,MAE/D,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,SAAzE,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,2DAC5C,SAAA,EAAqB,CAAK,CACtB,CAAA,EACN,IACC,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,qBACxD,SAAA,CACI,CAAA,CAEL,GAGX,CAAA,CAEA,CAAA,EACJ,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAoB,QAAQ,KAAO,CAAA,CAAI,CAAA,CACpE,CAAA,CAAA,CACI,CAAA,CAEpB"}

package/dist/donut-chart-eKZjuzW0.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"donut-chart-eKZjuzW0.mjs","names":[],"sources":["../packages/components/features/charts/components/donut-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Label, Pie, PieChart } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type DonutChartSegment = NamedValue & {\n /** Config key; derived from `name` when omitted. /\n key?: string;\n color?: string;\n};\n\nexport type DonutChartProps = BaseChartProps & {\n data: DonutChartSegment[];\n /* Text under the center total, e.g. `'Total sales'`. /\n centerLabel?: string;\n /* Formats the center total. Defaults to compact notation. /\n centerValueFormatter?: (total: number) => string;\n /* Overrides the computed segment sum shown in the center. /\n totalValue?: number;\n showLegend?: boolean;\n showCenterTotal?: boolean;\n};\n\nconst toKey = (segment: DonutChartSegment): string => segment.key \|\| segment.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/\n A donut breakdown chart with a center total — category sales, traffic sources, payment methods.\n \n @example\n * ```tsx\n * import { DonutChart } from '@customafk/lunas-ui/features/charts';\n \n <DonutChart\n * data={[\n * { name: 'Fashion', value: 12400 },\n * { name: 'Electronics', value: 8200 },\n * ]}\n * centerLabel=\"Total sales\"\n * />\n * ```\n */\nexport const DonutChart = ({\n data,\n centerLabel,\n centerValueFormatter = formatCompactNumber,\n totalValue,\n showLegend = true,\n showCenterTotal = true,\n className,\n animate = true,\n height,\n}: DonutChartProps) => {\n const { chartData, config, total } = useMemo(() => {\n const entries = data.map((segment, index) => ({\n ...segment,\n key: toKey(segment),\n fill: segment.color \|\| getChartColor(index),\n }));\n const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n return {\n chartData: entries,\n config: chartConfig,\n total: totalValue ?? data.reduce((sum, segment) => sum + segment.value, 0),\n };\n }, [data, totalValue]);\n\n return (\n <ChartContainer\n data-slot=\"donut-chart\"\n config={config}\n className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <PieChart>\n <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n <Pie data={chartData} dataKey=\"value\" nameKey=\"key\" innerRadius=\"60%\" strokeWidth={5} isAnimationActive={animate}>\n {showCenterTotal && (\n <Label\n content={({ viewBox }) => {\n if (!viewBox \|\| !('cx' in viewBox) \|\| !('cy' in viewBox)) return null;\n return (\n <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-2xl font-bold\">\n {centerValueFormatter(total)}\n </tspan>\n {centerLabel && (\n <tspan x={viewBox.cx} y={(viewBox.cy \|\| 0) + 22} className=\"fill-muted text-xs\">\n {centerLabel}\n </tspan>\n )}\n </text>\n );\n }}\n />\n )}\n </Pie>\n {showLegend && <ChartLegend content={<ChartLegendContent nameKey=\"key\" />} />}\n </PieChart>\n </ChartContainer>\n );\n};\n"],"mappings":"uZA8BA,MAAM,EAAS,GAAuC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAkB7G,GAAc,CACzB,OACA,cACA,uBAAuB,EACvB,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,UAAU,GACV,YACqB,CACrB,GAAM,CAAE,YAAW,SAAQ,SAAU,MAAc,CACjD,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAAS,EAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CACL,UAAW,EACX,OAH+B,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAG1G,EAClB,MAAO,GAAc,EAAK,QAAQ,EAAK,IAAY,EAAM,EAAQ,MAAO,CAAC,CAC3E,CACF,EAAG,CAAC,EAAM,CAAU,CAAC,EAErB,OACE,EAAC,EAAD,CACE,YAAU,cACF,SACR,UAAW,EAAG,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,~~WAE5D~~,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAc,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,EACxF,EAAC,EAAD,CAAK,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,YAAY,MAAM,YAAa,EAAG,kBAAmB,~~WACtG~~,GACC,EAAC,EAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,KAE/D,EAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,~~kBAAzE~~,CACE,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,~~oEAC5C~~,EAAqB,CAAK,CACtB,CAAA,EACN,GACC,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,~~8BACxD~~,CACI,CAAA,CAEL,GAGX,CAAA,CAEA,CAAA,EACJ,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAoB,QAAQ,KAAO,CAAA,CAAI,CAAA,CACpE,CAAA,CAAA,CACI,CAAA,CAEpB"}
1	+ {"version":3,"file":"donut-chart-eKZjuzW0.mjs","names":[],"sources":["../packages/components/features/charts/components/donut-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Label, Pie, PieChart } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type DonutChartSegment = NamedValue & {\n /** Config key; derived from `name` when omitted. /\n key?: string;\n color?: string;\n};\n\nexport type DonutChartProps = BaseChartProps & {\n data: DonutChartSegment[];\n /* Text under the center total, e.g. `'Total sales'`. /\n centerLabel?: string;\n /* Formats the center total. Defaults to compact notation. /\n centerValueFormatter?: (total: number) => string;\n /* Overrides the computed segment sum shown in the center. /\n totalValue?: number;\n showLegend?: boolean;\n showCenterTotal?: boolean;\n};\n\nconst toKey = (segment: DonutChartSegment): string => segment.key \|\| segment.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/\n A donut breakdown chart with a center total — category sales, traffic sources, payment methods.\n \n @example\n * ```tsx\n * import { DonutChart } from '@customafk/lunas-ui/features/charts';\n \n <DonutChart\n * data={[\n * { name: 'Fashion', value: 12400 },\n * { name: 'Electronics', value: 8200 },\n * ]}\n * centerLabel=\"Total sales\"\n * />\n * ```\n */\nexport const DonutChart = ({\n data,\n centerLabel,\n centerValueFormatter = formatCompactNumber,\n totalValue,\n showLegend = true,\n showCenterTotal = true,\n className,\n animate = true,\n height,\n}: DonutChartProps) => {\n const { chartData, config, total } = useMemo(() => {\n const entries = data.map((segment, index) => ({\n ...segment,\n key: toKey(segment),\n fill: segment.color \|\| getChartColor(index),\n }));\n const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n return {\n chartData: entries,\n config: chartConfig,\n total: totalValue ?? data.reduce((sum, segment) => sum + segment.value, 0),\n };\n }, [data, totalValue]);\n\n return (\n <ChartContainer\n data-slot=\"donut-chart\"\n config={config}\n className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <PieChart>\n <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n <Pie data={chartData} dataKey=\"value\" nameKey=\"key\" innerRadius=\"60%\" strokeWidth={5} isAnimationActive={animate}>\n {showCenterTotal && (\n <Label\n content={({ viewBox }) => {\n if (!viewBox \|\| !('cx' in viewBox) \|\| !('cy' in viewBox)) return null;\n return (\n <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-2xl font-bold\">\n {centerValueFormatter(total)}\n </tspan>\n {centerLabel && (\n <tspan x={viewBox.cx} y={(viewBox.cy \|\| 0) + 22} className=\"fill-muted text-xs\">\n {centerLabel}\n </tspan>\n )}\n </text>\n );\n }}\n />\n )}\n </Pie>\n {showLegend && <ChartLegend content={<ChartLegendContent nameKey=\"key\" />} />}\n </PieChart>\n </ChartContainer>\n );\n};\n"],"mappings":"uZA8BA,MAAM,EAAS,GAAuC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAkB7G,GAAc,CACzB,OACA,cACA,uBAAuB,EACvB,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,UAAU,GACV,YACqB,CACrB,GAAM,CAAE,YAAW,SAAQ,SAAU,MAAc,CACjD,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAAS,EAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CACL,UAAW,EACX,OAH+B,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAG1G,EAClB,MAAO,GAAc,EAAK,QAAQ,EAAK,IAAY,EAAM,EAAQ,MAAO,CAAC,CAC3E,CACF,EAAG,CAAC,EAAM,CAAU,CAAC,EAErB,OACE,EAAC,EAAD,CACE,YAAU,cACF,SACR,UAAW,EAAG,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAc,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,EACxF,EAAC,EAAD,CAAK,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,YAAY,MAAM,YAAa,EAAG,kBAAmB,EACtG,SAAA,GACC,EAAC,EAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,KAE/D,EAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,SAAzE,SAAA,CACE,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,2DAC5C,SAAA,EAAqB,CAAK,CACtB,CAAA,EACN,GACC,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,qBACxD,SAAA,CACI,CAAA,CAEL,GAGX,CAAA,CAEA,CAAA,EACJ,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAoB,QAAQ,KAAO,CAAA,CAAI,CAAA,CACpE,CAAA,CAAA,CACI,CAAA,CAEpB"}