@mieweb/ui 0.2.2 → 0.3.0-dev.100

package/dist/chunk-AWUADXYI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":["cva","React","useFocusTrap","useEscapeKey","isStorybookDocsMode","jsx","jsxs","cn"],"mappings":"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","file":"chunk-AWUADXYI.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { isStorybookDocsMode } from '../../utils/environment';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\n/**\n * Modal scroll lock state manager.\n * Uses a singleton pattern with ref-like storage to track open modals\n * and manage body scroll locking across multiple modal instances.\n * Includes reset capability for testing environments.\n */\nconst scrollLockState = {\n  count: 0,\n  originalOverflow: null as string | null,\n  reset() {\n    this.count = 0;\n    this.originalOverflow = null;\n  },\n};\n\n// Export for testing environments\nexport const __resetScrollLockState = () => scrollLockState.reset();\n\nconst modalOverlayVariants = cva(\n  [\n    'fixed inset-0',\n    'bg-black/50 backdrop-blur-sm',\n    'data-[state=open]:animate-in data-[state=open]:fade-in-0',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\nconst modalContentVariants = cva(\n  [\n    'relative w-full bg-card text-card-foreground',\n    'border border-border shadow-lg',\n    // Full-screen on mobile, rounded on larger screens\n    'rounded-none sm:rounded-xl',\n    'flex flex-col',\n    // Full viewport height on mobile, constrained on larger screens\n    'max-h-dvh sm:max-h-[calc(100dvh-2rem)]',\n    'min-h-dvh sm:min-h-0',\n    // If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),\n    // make it participate in the flex column layout so overflow constraints work.\n    '[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0',\n    'focus:outline-none',\n    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n    'duration-200',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'sm:max-w-sm',\n        md: 'sm:max-w-md',\n        lg: 'sm:max-w-lg',\n        xl: 'sm:max-w-xl',\n        '2xl': 'sm:max-w-2xl',\n        '3xl': 'sm:max-w-3xl',\n        '4xl': 'sm:max-w-4xl',\n        full: 'max-w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface ModalProps extends VariantProps<typeof modalContentVariants> {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback when the modal should close */\n  onOpenChange: (open: boolean) => void;\n  /** Modal content */\n  children: React.ReactNode;\n  /** Whether to close when clicking the overlay */\n  closeOnOverlayClick?: boolean;\n  /** Whether to close when pressing Escape */\n  closeOnEscape?: boolean;\n  /** Additional class name for the modal content */\n  className?: string;\n  /** ID for the modal, used for accessibility */\n  id?: string;\n  /** Accessible label for the modal */\n  'aria-label'?: string;\n  /** ID of the element that labels the modal */\n  'aria-labelledby'?: string;\n  /** ID of the element that describes the modal */\n  'aria-describedby'?: string;\n}\n\n/**\n * An accessible modal/dialog component.\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onOpenChange={setIsOpen} size=\"lg\">\n *   <ModalHeader>\n *     <ModalTitle>Confirm Action</ModalTitle>\n *     <ModalClose />\n *   </ModalHeader>\n *   <ModalBody>\n *     Are you sure you want to continue?\n *   </ModalBody>\n *   <ModalFooter>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </ModalFooter>\n * </Modal>\n * ```\n */\nfunction Modal({\n  open,\n  onOpenChange,\n  children,\n  size,\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n}: ModalProps) {\n  const generatedId = React.useId();\n  const modalId = id || generatedId;\n\n  // Focus trap (only active when modal is open)\n  const focusTrapRef = useFocusTrap<HTMLDivElement>(open);\n\n  // Handle escape key\n  useEscapeKey(() => {\n    if (closeOnEscape && open) {\n      onOpenChange(false);\n    }\n  }, open);\n\n  // Handle overlay click\n  const handleOverlayClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (closeOnOverlayClick && e.target === e.currentTarget) {\n        onOpenChange(false);\n      }\n    },\n    [closeOnOverlayClick, onOpenChange]\n  );\n\n  // Prevent body scroll when modal is open (handles multiple modals)\n  // Skip scroll lock in Storybook docs mode where multiple stories render inline\n  React.useEffect(() => {\n    // Skip scroll lock entirely in Storybook docs mode\n    if (!open || isStorybookDocsMode()) {\n      return undefined;\n    }\n\n    scrollLockState.count++;\n    // Only capture and set overflow when first modal opens\n    if (scrollLockState.count === 1) {\n      scrollLockState.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n\n    return () => {\n      scrollLockState.count--;\n      // Only restore overflow when last modal closes\n      if (\n        scrollLockState.count === 0 &&\n        scrollLockState.originalOverflow !== null\n      ) {\n        document.body.style.overflow = scrollLockState.originalOverflow;\n        scrollLockState.originalOverflow = null;\n      }\n    };\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <ModalContext.Provider\n      value={{ onClose: () => onOpenChange(false), modalId }}\n    >\n      {/* Portal to body */}\n      <div className=\"fixed inset-0 z-50\">\n        {/* Overlay backdrop */}\n        <div\n          className={cn(modalOverlayVariants())}\n          data-state={open ? 'open' : 'closed'}\n          aria-hidden=\"true\"\n        />\n        {/* Scrollable centering container — click outside to close */}\n        <div className=\"fixed inset-0 overflow-y-auto\">\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n          <div\n            className=\"flex min-h-full items-center justify-center p-0 sm:p-4\"\n            onClick={handleOverlayClick}\n          >\n            {/* Content */}\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}\n            <div\n              ref={focusTrapRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy || `${modalId}-title`}\n              aria-describedby={ariaDescribedBy}\n              id={modalId}\n              tabIndex={-1}\n              data-state={open ? 'open' : 'closed'}\n              data-slot=\"modal\"\n              className={cn(modalContentVariants({ size }), className)}\n              onClick={(e) => e.stopPropagation()}\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ModalContext.Provider>\n  );\n}\n\nModal.displayName = 'Modal';\n\n// ============================================================================\n// Modal Context\n// ============================================================================\n\ninterface ModalContextValue {\n  onClose: () => void;\n  modalId: string;\n}\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n  undefined\n);\n\nfunction useModalContext() {\n  const context = React.useContext(ModalContext);\n  if (!context) {\n    throw new Error('Modal components must be used within a Modal');\n  }\n  return context;\n}\n\n// ============================================================================\n// Modal Header\n// ============================================================================\n\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Header section of a Modal.\n */\nconst ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"modal-header\"\n      className={cn(\n        'flex shrink-0 items-center justify-between',\n        'border-border border-b px-6 py-4',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nModalHeader.displayName = 'ModalHeader';\n\n// ============================================================================\n// Modal Title\n// ============================================================================\n\nexport type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/**\n * Title for a Modal.\n */\nconst ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    const { modalId } = useModalContext();\n    return (\n      <h2\n        ref={ref}\n        id={`${modalId}-title`}\n        data-slot=\"modal-title\"\n        className={cn(\n          'text-lg leading-none font-semibold tracking-tight',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </h2>\n    );\n  }\n);\n\nModalTitle.displayName = 'ModalTitle';\n\n// ============================================================================\n// Modal Close Button\n// ============================================================================\n\nexport type ModalCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for a Modal.\n */\nconst ModalClose = React.forwardRef<HTMLButtonElement, ModalCloseProps>(\n  ({ className, children, onClick, ...props }, ref) => {\n    const { onClose } = useModalContext();\n\n    const handleClick = React.useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        if (!e.defaultPrevented) {\n          onClose();\n        }\n      },\n      [onClick, onClose]\n    );\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={handleClick}\n        data-slot=\"modal-close\"\n        className={cn(\n          'inline-flex h-8 w-8 items-center justify-center rounded-lg',\n          'text-muted-foreground hover:text-foreground',\n          'hover:bg-muted transition-colors',\n          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n          className\n        )}\n        aria-label=\"Close\"\n        {...props}\n      >\n        {children || <CloseIcon />}\n      </button>\n    );\n  }\n);\n\nModalClose.displayName = 'ModalClose';\n\n// ============================================================================\n// Modal Body\n// ============================================================================\n\nexport type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Main content area of a Modal.\n */\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"modal-body\"\n      className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', className)}\n      {...props}\n    />\n  )\n);\n\nModalBody.displayName = 'ModalBody';\n\n// ============================================================================\n// Modal Footer\n// ============================================================================\n\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Footer section of a Modal, typically for action buttons.\n */\nconst ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"modal-footer\"\n      className={cn(\n        'flex shrink-0 items-center justify-end gap-3',\n        'border-border border-t px-6 py-4',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nModalFooter.displayName = 'ModalFooter';\n\n// ============================================================================\n// Close Icon\n// ============================================================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport {\n  Modal,\n  ModalHeader,\n  ModalTitle,\n  ModalClose,\n  ModalBody,\n  ModalFooter,\n  modalContentVariants,\n  modalOverlayVariants,\n};\n"]}

package/dist/{chunk-PEFJAWNR.cjs → chunk-BWYYA3LQ.cjs}

@@ -44,14 +44,28 @@ function Breadcrumb({
     ];
   }, [items, maxItems]);
   const defaultSeparator = /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" });
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-wrap items-center gap-1.5", children: displayedItems.map((item, index) => {
-    const isLast = index === displayedItems.length - 1;
-    const isEllipsis = item.isEllipsis;
-    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
-      index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: separator || defaultSeparator }),
-      isEllipsis ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: "..." }) : isLast || !item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { item }) : renderLink ? renderLink(item, index) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { item })
-    ] }, index);
-  }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "data-slot": "breadcrumb", "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: "flex flex-wrap items-center gap-1.5",
+      children: displayedItems.map((item, index) => {
+        const isLast = index === displayedItems.length - 1;
+        const isEllipsis = item.isEllipsis;
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
+          index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "breadcrumb-separator", "aria-hidden": "true", children: separator || defaultSeparator }),
+          isEllipsis ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "breadcrumb-ellipsis",
+              className: "text-muted-foreground text-sm",
+              children: "..."
+            }
+          ) : isLast || !item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { item }) : renderLink ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "breadcrumb-link", children: renderLink(item, index) }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { item })
+        ] }, index);
+      })
+    }
+  ) });
 }
 Breadcrumb.displayName = "Breadcrumb";
 function BreadcrumbLink({ item }) {
@@ -59,6 +73,7 @@ function BreadcrumbLink({ item }) {
     "a",
     {
       href: item.href,
+      "data-slot": "breadcrumb-link",
       className: chunkOR5DRJCW_cjs.cn(
         "inline-flex items-center gap-1.5",
         "text-muted-foreground text-sm",
@@ -76,6 +91,7 @@ function BreadcrumbPage({ item }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
+      "data-slot": "breadcrumb-page",
       className: "text-foreground inline-flex items-center gap-1.5 text-sm font-medium",
       "aria-current": "page",
       children: [
@@ -117,5 +133,5 @@ function BreadcrumbSlash({ className }) {
 
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbSlash = BreadcrumbSlash;
-//# sourceMappingURL=chunk-PEFJAWNR.cjs.map
-//# sourceMappingURL=chunk-PEFJAWNR.cjs.map
+//# sourceMappingURL=chunk-BWYYA3LQ.cjs.map
+//# sourceMappingURL=chunk-BWYYA3LQ.cjs.map

package/dist/chunk-BWYYA3LQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumb/Breadcrumb.tsx"],"names":["React","jsx","jsxs","cn"],"mappings":"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","file":"chunk-BWYYA3LQ.cjs","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Breadcrumb Types\n// ============================================================================\n\nexport interface BreadcrumbItem {\n  /** Label for the breadcrumb item */\n  label: string;\n  /** URL to navigate to (optional for the last item) */\n  href?: string;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n}\n\n// ============================================================================\n// Breadcrumb Component\n// ============================================================================\n\nexport interface BreadcrumbProps {\n  /** Array of breadcrumb items */\n  items: BreadcrumbItem[];\n  /** Custom separator between items */\n  separator?: React.ReactNode;\n  /** Maximum items to display (collapses middle items) */\n  maxItems?: number;\n  /** Custom renderer for links */\n  renderLink?: (item: BreadcrumbItem, index: number) => React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * A navigation breadcrumb component.\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   items={[\n *     { label: 'Home', href: '/' },\n *     { label: 'Products', href: '/products' },\n *     { label: 'Category', href: '/products/category' },\n *     { label: 'Current Item' },\n *   ]}\n * />\n * ```\n */\nfunction Breadcrumb({\n  items,\n  separator,\n  maxItems,\n  renderLink,\n  className,\n}: BreadcrumbProps) {\n  // Collapse items if maxItems is specified\n  const displayedItems = React.useMemo(() => {\n    if (!maxItems || items.length <= maxItems) {\n      return items;\n    }\n\n    // Show first item, ellipsis, and last (maxItems - 2) items\n    const firstItem = items[0];\n    const lastItems = items.slice(-(maxItems - 1));\n\n    return [\n      firstItem,\n      { label: '...', isEllipsis: true } as BreadcrumbItem & {\n        isEllipsis?: boolean;\n      },\n      ...lastItems,\n    ];\n  }, [items, maxItems]);\n\n  const defaultSeparator = (\n    <ChevronRightIcon className=\"text-muted-foreground h-4 w-4 shrink-0\" />\n  );\n\n  return (\n    <nav data-slot=\"breadcrumb\" aria-label=\"Breadcrumb\" className={className}>\n      <ol\n        data-slot=\"breadcrumb-list\"\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        {displayedItems.map((item, index) => {\n          const isLast = index === displayedItems.length - 1;\n          const isEllipsis = (item as BreadcrumbItem & { isEllipsis?: boolean })\n            .isEllipsis;\n\n          return (\n            <li key={index} className=\"flex items-center gap-1.5\">\n              {index > 0 && (\n                <span data-slot=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  {separator || defaultSeparator}\n                </span>\n              )}\n              {isEllipsis ? (\n                <span\n                  data-slot=\"breadcrumb-ellipsis\"\n                  className=\"text-muted-foreground text-sm\"\n                >\n                  ...\n                </span>\n              ) : isLast || !item.href ? (\n                <BreadcrumbPage item={item} />\n              ) : renderLink ? (\n                <span data-slot=\"breadcrumb-link\">\n                  {renderLink(item, index)}\n                </span>\n              ) : (\n                <BreadcrumbLink item={item} />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumb.displayName = 'Breadcrumb';\n\n// ============================================================================\n// Breadcrumb Link (Internal)\n// ============================================================================\n\ninterface BreadcrumbLinkProps {\n  item: BreadcrumbItem;\n}\n\nfunction BreadcrumbLink({ item }: BreadcrumbLinkProps) {\n  return (\n    <a\n      href={item.href}\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        'inline-flex items-center gap-1.5',\n        'text-muted-foreground text-sm',\n        'hover:text-foreground transition-colors',\n        'focus-visible:ring-ring rounded focus-visible:ring-2 focus-visible:outline-none'\n      )}\n    >\n      {item.icon}\n      {item.label}\n    </a>\n  );\n}\n\n// ============================================================================\n// Breadcrumb Page (Current Page - Internal)\n// ============================================================================\n\ninterface BreadcrumbPageProps {\n  item: BreadcrumbItem;\n}\n\nfunction BreadcrumbPage({ item }: BreadcrumbPageProps) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      className=\"text-foreground inline-flex items-center gap-1.5 text-sm font-medium\"\n      aria-current=\"page\"\n    >\n      {item.icon}\n      {item.label}\n    </span>\n  );\n}\n\n// ============================================================================\n// Chevron Icon\n// ============================================================================\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Slash Separator Component\n// ============================================================================\n\nfunction BreadcrumbSlash({ className }: { className?: string }) {\n  return (\n    <span\n      className={cn('text-muted-foreground mx-1', className)}\n      aria-hidden=\"true\"\n    >\n      /\n    </span>\n  );\n}\n\nexport { Breadcrumb, BreadcrumbSlash };\n"]}