@mieweb/ui 0.1.0

package/dist/chunk-B26RIQ5R.js

@@ -0,0 +1,97 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var alertVariants = cva(
+  [
+    "relative w-full rounded-lg border p-4",
+    "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current",
+    "[&>svg+div]:translate-y-[-3px]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground border-border",
+        info: "bg-primary-50 text-primary-900 border-primary-200 dark:bg-primary-950 dark:text-primary-100 dark:border-primary-800",
+        success: "bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800",
+        warning: "bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800",
+        danger: "bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Alert = React.forwardRef(
+  ({
+    className,
+    variant,
+    icon,
+    dismissible,
+    onDismiss,
+    dismissLabel = "Dismiss alert",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          alertVariants({ variant }),
+          React.isValidElement(icon) && "pl-11",
+          dismissible && "pr-10",
+          className
+        ),
+        ...props,
+        children: [
+          React.isValidElement(icon) && icon,
+          /* @__PURE__ */ jsx("div", { children }),
+          dismissible && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              className: cn(
+                "absolute top-2 right-2 rounded-md p-1",
+                "opacity-70 hover:opacity-100",
+                "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+                "transition-opacity"
+              ),
+              "aria-label": dismissLabel,
+              children: /* @__PURE__ */ jsx(X, { size: 16, "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+var AlertTitle = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h5",
+  {
+    ref,
+    className: cn("mb-1 leading-none font-semibold tracking-tight", className),
+    ...props,
+    children
+  }
+));
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm [&_p]:leading-relaxed", className),
+    ...props
+  }
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertDescription, AlertTitle, alertVariants };
+//# sourceMappingURL=chunk-B26RIQ5R.js.map
+//# sourceMappingURL=chunk-B26RIQ5R.js.map

package/dist/chunk-B26RIQ5R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;AAKA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB;AAAA,IACE,uCAAA;AAAA,IACA,oEAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,IAAA,EAAM,qHAAA;AAAA,QACN,OAAA,EACE,yGAAA;AAAA,QACF,OAAA,EACE,+GAAA;AAAA,QACF,MAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AA2BA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,GAAe,eAAA;AAAA,IACf,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,aAAA,CAAc,EAAE,OAAA,EAAS,CAAA;AAAA,UACnB,KAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,OAAA;AAAA,UAC9B,WAAA,IAAe,OAAA;AAAA,UACf;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAM,KAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA;AAAA,0BAC/B,GAAA,CAAC,SAAK,QAAA,EAAS,CAAA;AAAA,UACd,WAAA,oBACC,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAS,SAAA;AAAA,cACT,SAAA,EAAW,EAAA;AAAA,gBACT,uCAAA;AAAA,gBACA,8BAAA;AAAA,gBACA,qGAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,YAAA,EAAY,YAAA;AAAA,cAEZ,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,IAAA,EAAM,EAAA,EAAI,eAAY,MAAA,EAAO;AAAA;AAAA;AAClC;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AAKpB,IAAM,UAAA,GAAmB,iBAGvB,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpC,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,gDAAA,EAAkD,SAAS,CAAA;AAAA,IACxE,GAAG,KAAA;AAAA,IAEH;AAAA;AACH,CACD;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;AAKzB,IAAM,gBAAA,GAAyB,iBAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AAED,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"chunk-B26RIQ5R.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nconst alertVariants = cva(\n  [\n    'relative w-full rounded-lg border p-4',\n    '[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current',\n    '[&>svg+div]:translate-y-[-3px]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground border-border',\n        info: 'bg-primary-50 text-primary-900 border-primary-200 dark:bg-primary-950 dark:text-primary-100 dark:border-primary-800',\n        success:\n          'bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800',\n        warning:\n          'bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800',\n        danger:\n          'bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /** Icon to display in the alert */\n  icon?: React.ReactElement | null;\n  /** Whether the alert can be dismissed */\n  dismissible?: boolean;\n  /** Callback when the alert is dismissed */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss button */\n  dismissLabel?: string;\n}\n\n/**\n * An alert component for displaying important messages.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\">\n *   <AlertTitle>Success!</AlertTitle>\n *   <AlertDescription>Your changes have been saved.</AlertDescription>\n * </Alert>\n * ```\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant,\n      icon,\n      dismissible,\n      onDismiss,\n      dismissLabel = 'Dismiss alert',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        className={cn(\n          alertVariants({ variant }),\n          React.isValidElement(icon) && 'pl-11',\n          dismissible && 'pr-10',\n          className\n        )}\n        {...props}\n      >\n        {React.isValidElement(icon) && icon}\n        <div>{children}</div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className={cn(\n              'absolute top-2 right-2 rounded-md p-1',\n              'opacity-70 hover:opacity-100',\n              'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n              'transition-opacity'\n            )}\n            aria-label={dismissLabel}\n          >\n            <X size={16} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\n/**\n * Title for an Alert component.\n */\nconst AlertTitle = React.forwardRef<\n  globalThis.HTMLHeadingElement,\n  React.HTMLAttributes<globalThis.HTMLHeadingElement>\n>(({ className, children, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn('mb-1 leading-none font-semibold tracking-tight', className)}\n    {...props}\n  >\n    {children}\n  </h5>\n));\n\nAlertTitle.displayName = 'AlertTitle';\n\n/**\n * Description text for an Alert component.\n */\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n));\n\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\n"]}

package/dist/chunk-B3L43JGH.js

@@ -0,0 +1,98 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Breadcrumb({
+  items,
+  separator,
+  maxItems,
+  renderLink,
+  className
+}) {
+  const displayedItems = React.useMemo(() => {
+    if (!maxItems || items.length <= maxItems) {
+      return items;
+    }
+    const firstItem = items[0];
+    const lastItems = items.slice(-(maxItems - 1));
+    return [
+      firstItem,
+      { label: "...", isEllipsis: true },
+      ...lastItems
+    ];
+  }, [items, maxItems]);
+  const defaultSeparator = /* @__PURE__ */ jsx(ChevronRightIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ 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__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: separator || defaultSeparator }),
+      isEllipsis ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "..." }) : isLast || !item.href ? /* @__PURE__ */ jsx(BreadcrumbPage, { item }) : renderLink ? renderLink(item, index) : /* @__PURE__ */ jsx(BreadcrumbLink, { item })
+    ] }, index);
+  }) }) });
+}
+Breadcrumb.displayName = "Breadcrumb";
+function BreadcrumbLink({ item }) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: item.href,
+      className: cn(
+        "inline-flex items-center gap-1.5",
+        "text-muted-foreground text-sm",
+        "hover:text-foreground transition-colors",
+        "focus-visible:ring-ring rounded focus-visible:ring-2 focus-visible:outline-none"
+      ),
+      children: [
+        item.icon,
+        item.label
+      ]
+    }
+  );
+}
+function BreadcrumbPage({ item }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "text-foreground inline-flex items-center gap-1.5 text-sm font-medium",
+      "aria-current": "page",
+      children: [
+        item.icon,
+        item.label
+      ]
+    }
+  );
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function BreadcrumbSlash({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-muted-foreground mx-1", className),
+      "aria-hidden": "true",
+      children: "/"
+    }
+  );
+}
+
+export { Breadcrumb, BreadcrumbSlash };
+//# sourceMappingURL=chunk-B3L43JGH.js.map
+//# sourceMappingURL=chunk-B3L43JGH.js.map

package/dist/chunk-B3L43JGH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"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","file":"chunk-B3L43JGH.js","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 aria-label=\"Breadcrumb\" className={className}>\n      <ol className=\"flex flex-wrap items-center gap-1.5\">\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 aria-hidden=\"true\">{separator || defaultSeparator}</span>\n              )}\n              {isEllipsis ? (\n                <span className=\"text-muted-foreground text-sm\">...</span>\n              ) : isLast || !item.href ? (\n                <BreadcrumbPage item={item} />\n              ) : renderLink ? (\n                renderLink(item, index)\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      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      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"]}