@nexus-cross/design-system 1.0.3 → 1.0.4

package/cursor-rules/nexus-ui-api.mdc

@@ -1023,6 +1023,214 @@ Price/amount input field with prefix, suffix, balance display, and auto-fill on
 
 ---
 
+## Badge
+
+Badge indicator. Dot or count display. Wraps children when provided.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `count` | `number` | - | Badge count number |
+| `max` | `number` | `99` | Max count (shows "99+" when exceeded) |
+| `dot` | `boolean` | `false` | Show as dot instead of count |
+| `showZero` | `boolean` | `false` | Show badge when count is 0 |
+| `variant` | `'danger'` \| `'primary'` \| `'secondary'` \| `'info'` \| `'success'` \| `'warning'` | `"danger"` | Color variant |
+| `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Size |
+| `offset` | `any` | - | Position offset [x, y] in px |
+| `children` | `ReactNode` | - | Anchor element to attach badge to (ReactNode) |
+| `className` | `string` | - | Style override |
+
+---
+
+## Progress
+
+Progress bar. Linear progress indicator with percentage display.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number` | `0` | Current progress value |
+| `max` | `number` | `100` | Maximum value |
+| `variant` | `'primary'` \| `'success'` \| `'warning'` \| `'danger'` \| `'info'` | `"primary"` | Color variant |
+| `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Bar height |
+| `showValue` | `boolean` | `false` | Show percentage text |
+| `indeterminate` | `boolean` | `false` | Indeterminate loading animation |
+| `label` | `string` | - | Label text above the bar |
+| `className` | `string` | - | Style override |
+
+---
+
+## Alert
+
+Alert / Banner. Inline notification with icon, title, description.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'info'` \| `'success'` \| `'warning'` \| `'danger'` | `"info"` | Alert type / color |
+| `title` | `string` | - | Alert title (bold) |
+| `children` | `ReactNode` | - | Alert description (ReactNode) |
+| `icon` | `ReactNode` | - | Custom icon (ReactNode). Auto icon by variant if omitted |
+| `closable` | `boolean` | `false` | Show close button |
+| `onClose` | `ReactNode` | - | Close callback () => void |
+| `action` | `ReactNode` | - | Action area (ReactNode, e.g. Button) |
+| `className` | `string` | - | Style override |
+
+---
+
+## EmptyState
+
+Empty state placeholder. Shown when data is empty or unavailable.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `icon` | `ReactNode` | - | Custom icon (ReactNode). Default inbox icon |
+| `title` | `string` | - | Title text |
+| `description` | `string` | - | Description text |
+| `action` | `ReactNode` | - | Action area (ReactNode, e.g. Button) |
+| `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Overall size |
+| `children` | `ReactNode` | - | Additional content (ReactNode) |
+| `className` | `string` | - | Style override |
+
+---
+
+## Breadcrumb
+
+Breadcrumb navigation. Shows current location path.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `items` | `object`[] | - | Breadcrumb items array (required) |
+| `separator` | `ReactNode` | - | Custom separator (ReactNode). Default: chevron |
+| `maxItems` | `number` | - | Max visible items (collapses middle with "...") |
+| `className` | `string` | - | Style override |
+
+---
+
+## Stepper
+
+Stepper. Step-by-step progress indicator.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `steps` | `object`[] | - | Step items array (required) |
+| `current` | `number` | `0` | Current step index (0-based) |
+| `status` | `'process'` \| `'error'` | `"process"` | Current step status |
+| `orientation` | `'horizontal'` \| `'vertical'` | `"horizontal"` | Layout direction |
+| `size` | `'sm'` \| `'md'` | `"md"` | Size |
+| `className` | `string` | - | Style override |
+
+---
+
+## DropdownMenu
+
+Dropdown menu. Based on Radix DropdownMenu. Action menu for context/more menus.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | - | Trigger element (ReactNode, required) |
+| `items` | `object`[] | - | Menu items array (required) |
+| `align` | `'start'` \| `'center'` \| `'end'` | `"start"` | Alignment |
+| `side` | `'top'` \| `'right'` \| `'bottom'` \| `'left'` | `"bottom"` | Position |
+| `className` | `string` | - | Trigger wrapper style |
+| `contentClassName` | `string` | - | Content panel style |
+
+---
+
+## ToggleGroup
+
+Toggle group / Segment control. Based on Radix ToggleGroup.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `type` | `'single'` \| `'multiple'` | `"single"` | Selection mode |
+| `items` | `object`[] | - | Toggle items array (required) |
+| `value` | `ReactNode` | - | Controlled value (string | string[]) |
+| `defaultValue` | `ReactNode` | - | Default value |
+| `onValueChange` | `ReactNode` | - | Value change callback |
+| `variant` | `'default'` \| `'outline'` | `"default"` | Style variant |
+| `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Size |
+| `disabled` | `boolean` | - | Disable all items |
+| `className` | `string` | - | Style override |
+
+---
+
+## Slider
+
+Slider / Range input. Based on Radix Slider. Supports single and range mode.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number`[] | - | Controlled value (number[]). Use [50] for single, [20, 80] for range |
+| `defaultValue` | `number`[] | - | Default value |
+| `min` | `number` | `0` | Minimum |
+| `max` | `number` | `100` | Maximum |
+| `step` | `number` | `1` | Step increment |
+| `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Track height / thumb size |
+| `showValue` | `boolean` | `false` | Show current value text |
+| `formatValue` | `ReactNode` | - | Value format function (value: number) => string |
+| `label` | `string` | - | Label text |
+| `disabled` | `boolean` | - | Disabled |
+| `onValueChange` | `ReactNode` | - | Value change callback (value: number[]) => void |
+| `onValueCommit` | `ReactNode` | - | Committed value callback (on pointer up) |
+| `className` | `string` | - | Style override |
+
+---
+
+## TagInput
+
+Tag input. Enter key to add, Backspace to delete last tag.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string`[] | - | Controlled tags array |
+| `defaultValue` | `string`[] | - | Default tags |
+| `onChange` | `ReactNode` | - | Tags change callback (tags: string[]) => void |
+| `placeholder` | `string` | `"태그 입력 후 Enter"` | Input placeholder |
+| `max` | `number` | - | Maximum number of tags |
+| `disabled` | `boolean` | - | Disabled |
+| `allowDuplicates` | `boolean` | `false` | Allow duplicate tags |
+| `label` | `string` | - | Label text |
+| `description` | `string` | - | Helper text below input |
+| `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Size |
+| `className` | `string` | - | Style override |
+
+---
+
+## NxImage
+
+Enhanced image. Lazy loading, fallback, aspect-ratio support.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `src` | `string` | - | Image source URL |
+| `alt` | `string` | - | Alt text |
+| `fallback` | `ReactNode` | - | Custom fallback element (ReactNode) |
+| `fallbackSrc` | `string` | - | Fallback image URL on error |
+| `aspectRatio` | `string` | - | CSS aspect-ratio (e.g. "16/9", "1/1") |
+| `objectFit` | `'cover'` \| `'contain'` \| `'fill'` \| `'none'` | `"cover"` | Object-fit mode |
+| `lazy` | `boolean` | `true` | Enable lazy loading (loading="lazy") |
+| `wrapperClassName` | `string` | - | Wrapper div style |
+| `className` | `string` | - | Image element style |
+
+---
+
+## DatePicker
+
+DatePicker. Calendar popup for date selection. Based on react-day-picker.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `ReactNode` | - | Controlled date value (Date) |
+| `defaultValue` | `ReactNode` | - | Default date (Date) |
+| `onChange` | `ReactNode` | - | Date change callback (date: Date | undefined) => void |
+| `placeholder` | `string` | `"날짜 선택"` | Placeholder text |
+| `disabled` | `boolean` | `false` | Disabled |
+| `minDate` | `ReactNode` | - | Minimum selectable date (Date) |
+| `maxDate` | `ReactNode` | - | Maximum selectable date (Date) |
+| `locale` | `'ko'` \| `'en'` | `"ko"` | Calendar locale |
+| `formatStr` | `string` | `"yyyy-MM-dd"` | Date format string (date-fns format) |
+| `className` | `string` | - | Style override |
+
+---
+
 ## Hooks
 
 ### useModal

package/dist/alert.d.mts

@@ -0,0 +1,17 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "danger" | "info" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    title?: string;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    action?: React.ReactNode;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Alert, type AlertProps, alertVariants };

package/dist/alert.d.ts

@@ -0,0 +1,17 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "danger" | "info" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    title?: string;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    action?: React.ReactNode;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Alert, type AlertProps, alertVariants };

package/dist/alert.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunk5PQ3UCKF_js = require('./chunks/chunk-5PQ3UCKF.js');
+require('./chunks/chunk-CZC76ZD5.js');
+require('./chunks/chunk-JNMCYWGY.js');
+
+
+
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function () { return chunk5PQ3UCKF_js.Alert; }
+});
+Object.defineProperty(exports, "alertVariants", {
+  enumerable: true,
+  get: function () { return chunk5PQ3UCKF_js.alertVariants; }
+});

package/dist/alert.mjs

@@ -0,0 +1,3 @@
+export { Alert, alertVariants } from './chunks/chunk-2UPGFY6E.mjs';
+import './chunks/chunk-MCKOWMLS.mjs';
+import './chunks/chunk-CVYXRSXT.mjs';

package/dist/badge.d.mts

@@ -0,0 +1,18 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "secondary" | "danger" | "info" | "success" | "warning" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    count?: number;
+    max?: number;
+    dot?: boolean;
+    showZero?: boolean;
+    offset?: [number, number];
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/badge.d.ts

@@ -0,0 +1,18 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "secondary" | "danger" | "info" | "success" | "warning" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    count?: number;
+    max?: number;
+    dot?: boolean;
+    showZero?: boolean;
+    offset?: [number, number];
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/badge.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunkS2GMEC43_js = require('./chunks/chunk-S2GMEC43.js');
+require('./chunks/chunk-CZC76ZD5.js');
+require('./chunks/chunk-JNMCYWGY.js');
+
+
+
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () { return chunkS2GMEC43_js.Badge; }
+});
+Object.defineProperty(exports, "badgeVariants", {
+  enumerable: true,
+  get: function () { return chunkS2GMEC43_js.badgeVariants; }
+});

package/dist/badge.mjs

@@ -0,0 +1,3 @@
+export { Badge, badgeVariants } from './chunks/chunk-CUTMLBC3.mjs';
+import './chunks/chunk-MCKOWMLS.mjs';
+import './chunks/chunk-CVYXRSXT.mjs';

package/dist/breadcrumb.d.mts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface BreadcrumbItem {
+    label: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    maxItems?: number;
+}
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps };

package/dist/breadcrumb.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface BreadcrumbItem {
+    label: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    maxItems?: number;
+}
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps };

package/dist/breadcrumb.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunk3ZWN66YH_js = require('./chunks/chunk-3ZWN66YH.js');
+require('./chunks/chunk-CZC76ZD5.js');
+require('./chunks/chunk-JNMCYWGY.js');
+
+
+
+Object.defineProperty(exports, "Breadcrumb", {
+  enumerable: true,
+  get: function () { return chunk3ZWN66YH_js.Breadcrumb; }
+});

package/dist/breadcrumb.mjs

@@ -0,0 +1,3 @@
+export { Breadcrumb } from './chunks/chunk-EJY7IVSK.mjs';
+import './chunks/chunk-MCKOWMLS.mjs';
+import './chunks/chunk-CVYXRSXT.mjs';

package/dist/chunks/chunk-2N2EPBO4.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var reactDayPicker = require('react-day-picker');
+var dateFns = require('date-fns');
+var locale = require('date-fns/locale');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var CalendarIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "14", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8h14M7 2v4M13 2v4", strokeLinecap: "round" })
+] });
+var DatePicker = ({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "\uB0A0\uC9DC \uC120\uD0DD",
+  disabled = false,
+  minDate,
+  maxDate,
+  locale: localeProp = "ko",
+  formatStr = "yyyy-MM-dd",
+  className
+}) => {
+  const [internalDate, setInternalDate] = React__namespace.useState(defaultValue);
+  const [open, setOpen] = React__namespace.useState(false);
+  const wrapperRef = React__namespace.useRef(null);
+  const selected = value ?? internalDate;
+  const handleSelect = React__namespace.useCallback(
+    (date) => {
+      if (!value) setInternalDate(date);
+      onChange?.(date);
+      setOpen(false);
+    },
+    [value, onChange]
+  );
+  React__namespace.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  const displayText = selected ? dateFns.format(selected, formatStr, { locale: localeProp === "ko" ? locale.ko : void 0 }) : placeholder;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: chunkCZC76ZD5_js.cn("nexus-datepicker", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: chunkCZC76ZD5_js.cn(
+          "nexus-datepicker__trigger",
+          !selected && "nexus-datepicker__trigger--placeholder"
+        ),
+        onClick: () => !disabled && setOpen(!open),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { className: "nexus-datepicker__icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayText })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-datepicker__popover", children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactDayPicker.DayPicker,
+      {
+        mode: "single",
+        selected,
+        onSelect: handleSelect,
+        locale: localeProp === "ko" ? locale.ko : void 0,
+        disabled: [
+          ...minDate ? [{ before: minDate }] : [],
+          ...maxDate ? [{ after: maxDate }] : []
+        ],
+        classNames: {
+          root: "nexus-calendar",
+          months: "nexus-calendar__months",
+          month_caption: "nexus-calendar__caption",
+          nav: "nexus-calendar__nav",
+          button_previous: "nexus-calendar__nav-btn",
+          button_next: "nexus-calendar__nav-btn",
+          month_grid: "nexus-calendar__grid",
+          weekdays: "nexus-calendar__head-row",
+          weekday: "nexus-calendar__head-cell",
+          week: "nexus-calendar__row",
+          day: "nexus-calendar__cell",
+          day_button: "nexus-calendar__day",
+          selected: "nexus-calendar__day--selected",
+          today: "nexus-calendar__day--today",
+          outside: "nexus-calendar__day--outside",
+          disabled: "nexus-calendar__day--disabled"
+        }
+      }
+    ) })
+  ] });
+};
+DatePicker.displayName = "DatePicker";
+
+exports.DatePicker = DatePicker;

package/dist/chunks/chunk-2UPGFY6E.mjs

@@ -0,0 +1,76 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var alertVariants = cva("nexus-alert", {
+  variants: {
+    variant: {
+      info: "nexus-alert--info",
+      success: "nexus-alert--success",
+      warning: "nexus-alert--warning",
+      danger: "nexus-alert--danger"
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+});
+var statusIcons = {
+  info: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  success: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+  warning: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+  danger: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+};
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" }) });
+var Alert = React.forwardRef(
+  ({
+    className,
+    children,
+    variant = "info",
+    title,
+    icon,
+    closable = false,
+    onClose,
+    action,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = React.useState(true);
+    const handleClose = React.useCallback(() => {
+      setVisible(false);
+      onClose?.();
+    }, [onClose]);
+    if (!visible) return null;
+    const IconComp = icon === void 0 ? statusIcons[variant ?? "info"] : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(alertVariants({ variant }), className),
+        ...props,
+        children: [
+          (icon || IconComp) && /* @__PURE__ */ jsx("span", { className: "nexus-alert__icon", children: icon ?? (IconComp && /* @__PURE__ */ jsx(IconComp, { className: "nexus-alert__icon-svg" })) }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-alert__body", children: [
+            title && /* @__PURE__ */ jsx("p", { className: "nexus-alert__title", children: title }),
+            children && /* @__PURE__ */ jsx("div", { className: "nexus-alert__description", children })
+          ] }),
+          action && /* @__PURE__ */ jsx("div", { className: "nexus-alert__action", children: action }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-alert__close",
+              onClick: handleClose,
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(CloseIcon, { className: "nexus-alert__close-icon" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+export { Alert, alertVariants };

package/dist/chunks/chunk-3ZWN66YH.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var ChevronRight = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Breadcrumb = React__namespace.forwardRef(
+  ({ className, items, separator, maxItems, ...props }, ref) => {
+    let displayItems = items;
+    let collapsed = false;
+    if (maxItems && maxItems > 2 && items.length > maxItems) {
+      displayItems = [
+        items[0],
+        { label: "..." },
+        ...items.slice(-(maxItems - 2))
+      ];
+      collapsed = true;
+    }
+    const sep = separator ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { className: "nexus-breadcrumb__separator-icon" });
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: chunkCZC76ZD5_js.cn("nexus-breadcrumb", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "nexus-breadcrumb__list", children: displayItems.map((item, i) => {
+      const isLast = i === displayItems.length - 1;
+      const isCollapsed = collapsed && i === 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "nexus-breadcrumb__item", children: [
+        i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__separator", "aria-hidden": "true", children: sep }),
+        isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__ellipsis", children: "\u2026" }) : isLast ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: "nexus-breadcrumb__link", onClick: item.onClick, children: item.label }) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "nexus-breadcrumb__link nexus-breadcrumb__link--btn", onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-breadcrumb__link", children: item.label })
+      ] }, i);
+    }) }) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+exports.Breadcrumb = Breadcrumb;