@nexus-cross/design-system 1.0.0

package/dist/chunks/chunk-VGO4Z2WH.js

@@ -0,0 +1,336 @@
+'use strict';
+
+var chunkBLGQHR3M_js = require('./chunk-BLGQHR3M.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var lodashEs = require('lodash-es');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var TableHighlightContext = React.createContext({
+  highlightValue: null,
+  setHighlightValue: () => {
+  }
+});
+var useTableHighlight = () => React.useContext(TableHighlightContext);
+var TableHighlightProvider = ({ children }) => {
+  const [highlightValue, setHighlightValue] = React.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(TableHighlightContext.Provider, { value: { highlightValue, setHighlightValue }, children });
+};
+var ALIGN_CLASSES = {
+  center: "nexus-td--center",
+  left: "nexus-td--left",
+  right: "nexus-td--right"
+};
+var TEXT_OVERFLOW_CLASSES = {
+  auto: "nexus-td--nowrap",
+  truncate: "nexus-td--truncate",
+  wrap: "nexus-td--wrap",
+  "break-all": "nexus-td--break-all"
+};
+var TdColumn = ({
+  className = "",
+  children,
+  fieldId,
+  size,
+  colSpan,
+  rowSpan,
+  align = "left",
+  textOverflow = "truncate",
+  highlightKey
+}) => {
+  const { highlightValue, setHighlightValue } = useTableHighlight();
+  const isHighlighted = !!highlightKey && !!highlightValue && highlightKey === highlightValue;
+  const handleMouseEnter = React.useCallback(() => {
+    if (highlightKey) setHighlightValue(highlightKey);
+  }, [highlightKey, setHighlightValue]);
+  const handleMouseLeave = React.useCallback(() => {
+    if (highlightKey) setHighlightValue(null);
+  }, [highlightKey, setHighlightValue]);
+  const sizeStyle = size ? { width: typeof size === "number" ? `${size}px` : size, flex: `0 0 ${typeof size === "number" ? `${size}px` : size}` } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: chunkCZC76ZD5_js.cn("nexus-td", fieldId, className),
+      title: textOverflow === "truncate" && typeof children === "string" ? children : void 0,
+      colSpan,
+      rowSpan,
+      style: sizeStyle,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: chunkCZC76ZD5_js.cn(
+            typeof children !== "string" && "nexus-td__inner--flex",
+            TEXT_OVERFLOW_CLASSES[textOverflow],
+            ALIGN_CLASSES[align],
+            "nexus-td__inner",
+            isHighlighted && "nexus-td__inner--highlight"
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+TdColumn.displayName = "TdColumn";
+var tableRowVariants = classVarianceAuthority.cva("nexus-table-row", {
+  variants: {
+    variant: {
+      default: "nexus-table-row--default",
+      accent: "nexus-table-row--accent"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var TableRow = ({ className = "", children, onClick, variant = "default" }) => {
+  const columnList = React.useMemo(() => {
+    const getChildren = (childArray) => {
+      return childArray.flatMap((child) => {
+        if (!React__default.default.isValidElement(child)) return [];
+        const childType = child.type;
+        if (childType?.displayName === "TdColumn") {
+          return child;
+        }
+        const childProps = child.props;
+        if (Array.isArray(childProps?.children)) {
+          return getChildren(childProps.children);
+        }
+        return [];
+      });
+    };
+    const childList = Array.isArray(children) ? children : [children];
+    return getChildren(childList);
+  }, [children]);
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: chunkCZC76ZD5_js.cn(tableRowVariants({ variant }), className), onClick, children: columnList });
+};
+TableRow.displayName = "TableRow";
+var DefaultSortIcon = ({ direction }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "nexus-table-sort-icon", viewBox: "0 0 16 16", fill: "currentColor", children: [
+  direction === "asc" && /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4l4 5H4z" }),
+  direction === "desc" && /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 12l4-5H4z" }),
+  direction === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4l3 3.5H5z", opacity: 0.3 }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 12l3-3.5H5z", opacity: 0.3 })
+  ] })
+] });
+var findTdColumns = (children) => {
+  let result = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child)) {
+      if (child.type === React.Fragment) {
+        result = [...result, ...findTdColumns(child.props.children)];
+      } else if (child.type === TdColumn || child.type?.displayName === "TdColumn") {
+        result.push(child);
+      } else {
+        result = [...result, ...findTdColumns(child?.props?.children)];
+      }
+    }
+  });
+  return result;
+};
+var findTrRow = (children) => {
+  let result = null;
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child)) {
+      if (child.type === TableRow || child.type?.displayName === "TableRow") {
+        result = child;
+      }
+    }
+  });
+  return result;
+};
+var ALIGN_CLASSES2 = {
+  center: "nexus-td--center",
+  left: "nexus-td--left",
+  right: "nexus-td--right"
+};
+var DefaultNoData = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-table-center nexus-table-nodata", children: "No data available." });
+var DefaultLoading = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-table-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-table-loading-icon" }) });
+function Table({
+  className = "",
+  theadClassName = "",
+  list,
+  children,
+  loadingElement,
+  noDataMsg,
+  hideThead,
+  sortUpElement = /* @__PURE__ */ jsxRuntime.jsx(DefaultSortIcon, { direction: "asc" }),
+  sortDownElement = /* @__PURE__ */ jsxRuntime.jsx(DefaultSortIcon, { direction: "desc" }),
+  loadingType = "skeleton",
+  loading,
+  skeletonCount = 10,
+  notification
+}) {
+  const [isSorting, setIsSorting] = React.useState(false);
+  const [orderData, setOrderData] = React.useState(null);
+  const tdColumns = React.useMemo(() => {
+    const item = (list || []).length > 0 ? list?.[0] : {};
+    return findTdColumns(children({ item, index: 0 }));
+  }, [children, list]);
+  const trRow = React.useMemo(() => {
+    const item = (list || []).length > 0 ? list?.[0] : {};
+    return findTrRow(children({ item, index: 0 }));
+  }, [children, list]);
+  const thRowData = React.useMemo(() => {
+    const thRows = tdColumns?.map((column) => {
+      const component = column;
+      const tdClassName = component?.props?.className;
+      const widthClassName = tdClassName?.match(
+        /(fold:|mobile-sm:|tablet:|desktop-sm:|desktop:|desktop-lg:|wide-desktop:|xs:|sm:|md:|lg:|xl:|2xl:)?(w-\[[0-9]+(\.[0-9]+)?px\]|w-full|w-\d+\/\d+|w-\d+|min-w-[^\s"]+|max-w-[^\s"]+)/g
+      );
+      return {
+        className: component.props?.className ?? "",
+        label: component.props?.label ?? "",
+        fieldId: component.props?.fieldId,
+        enableSorting: typeof component.props?.sortValue !== "undefined" || !!component.props?.handleClickSort,
+        handleClickSort: component.props?.handleClickSort,
+        thColSpan: component.props?.thColSpan,
+        thRowSpan: component.props?.thRowSpan,
+        rowSpan: component.props?.rowSpan,
+        colSpan: component.props?.colSpan,
+        size: component.props?.size,
+        widthClassName: widthClassName && widthClassName.join(" "),
+        align: component.props?.align ?? "left",
+        order: component.props?.order ?? ""
+      };
+    });
+    if (thRows) {
+      return thRows.filter((th) => typeof th.label !== "undefined").map((th) => {
+        if (!orderData?.fieldId) return th;
+        return {
+          ...th,
+          order: orderData.fieldId === th.fieldId ? orderData.order : ""
+        };
+      });
+    }
+    return [];
+  }, [tdColumns, orderData]);
+  const skeletonRows = React.useMemo(() => {
+    const trRowComponent = trRow;
+    return Array.from({ length: skeletonCount }, (_, trIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        className: chunkCZC76ZD5_js.cn(trRowComponent?.props?.className, "nexus-table-skeleton-row"),
+        children: thRowData?.map((thData, tdIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            className: chunkCZC76ZD5_js.cn(thData.widthClassName, "nexus-table-skeleton-td"),
+            style: thData.size ? {
+              width: typeof thData.size === "number" ? `${thData.size}px` : thData.size,
+              flex: `0 0 ${typeof thData.size === "number" ? `${thData.size}px` : thData.size}`
+            } : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkBLGQHR3M_js.Skeleton, { className: "nexus-table-skeleton-bar" })
+          },
+          `skeleton-td-${tdIndex}`
+        ))
+      },
+      `skeleton-tr-${trIndex}`
+    ));
+  }, [skeletonCount, thRowData, trRow]);
+  const tableRows = React.useMemo(() => {
+    const { fieldId: orderTargetFieldId, order } = orderData ?? {};
+    if (!order) return list;
+    const componentList = list?.map(
+      (item, index) => React.Children.map(
+        children({ item, index }),
+        (child) => {
+          if (React.isValidElement(child)) {
+            if (child.type === TdColumn) return child;
+            return React.Children.toArray(child.props.children);
+          }
+          return [];
+        }
+      )
+    );
+    const sortValueList = componentList?.reduce((acc, cur) => {
+      const columns = cur;
+      const target = columns?.find((col) => col?.props?.fieldId === orderTargetFieldId);
+      acc.push(target?.props?.sortValue ?? 0);
+      return acc;
+    }, []);
+    return lodashEs.orderBy(
+      list?.map((item, index) => ({ ...item, sortValue: sortValueList?.[index] })),
+      ["sortValue"],
+      [order]
+    );
+  }, [list, orderData, children]);
+  const handleThSorting = async (thData) => {
+    let newOrder = "desc";
+    const { order, index, fieldId, enableSorting, handleClickSort } = thData;
+    if (!enableSorting || isSorting) return;
+    if (order === "desc") newOrder = "asc";
+    else if (order === "asc") newOrder = "";
+    const newOrderData = { index, order: newOrder, fieldId: fieldId ?? "" };
+    setOrderData(newOrderData);
+    if (handleClickSort) {
+      try {
+        setIsSorting(true);
+        await handleClickSort(newOrderData);
+      } finally {
+        setIsSorting(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TableHighlightProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-table-wrap", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "nexus-table", children: [
+    !hideThead && /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: chunkCZC76ZD5_js.cn("nexus-table-thead", theadClassName), children: thRowData.map((thData, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        rowSpan: thData.thRowSpan ?? thData.rowSpan,
+        colSpan: thData.thColSpan ?? thData.colSpan,
+        className: chunkCZC76ZD5_js.cn(
+          "nexus-table-th",
+          thData.enableSorting && "nexus-table-th--sortable",
+          ALIGN_CLASSES2[thData.align ?? "left"],
+          thData.widthClassName
+        ),
+        style: thData.size ? {
+          width: typeof thData.size === "number" ? `${thData.size}px` : thData.size,
+          flex: `0 0 ${typeof thData.size === "number" ? `${thData.size}px` : thData.size}`
+        } : void 0,
+        children: thData.enableSorting ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "nexus-table-th__sort-btn",
+            onClick: () => handleThSorting({ ...thData, index }),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleThSorting({ ...thData, index });
+              }
+            },
+            "aria-label": `Sort by ${thData.label}${thData.order === "asc" ? ", ascending" : thData.order === "desc" ? ", descending" : ""}`,
+            children: [
+              thData.label,
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                thData.order !== "desc" && thData.order !== "asc" && /* @__PURE__ */ jsxRuntime.jsx(DefaultSortIcon, { direction: "default" }),
+                thData.order === "desc" && sortDownElement,
+                thData.order === "asc" && sortUpElement
+              ] })
+            ]
+          }
+        ) : thData.label
+      },
+      `th-${thData.fieldId ?? index}`
+    )) }) }),
+    notification && /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: thRowData.length || 1, children: notification }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+      (!list || isSorting || loading) && (loadingType === "loading" ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: thRowData.length, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: loadingElement ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultLoading, {}) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: skeletonRows })),
+      !!list && !loading && !isSorting && (list.length > 0 ? tableRows?.map(
+        (item, index) => children({ item, index })
+      ) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: thRowData.length, children: noDataMsg && typeof noDataMsg === "object" ? noDataMsg : /* @__PURE__ */ jsxRuntime.jsx(DefaultNoData, {}) }) }))
+    ] })
+  ] }) }) });
+}
+
+exports.Table = Table;
+exports.TableHighlightProvider = TableHighlightProvider;
+exports.TableRow = TableRow;
+exports.TdColumn = TdColumn;
+exports.tableRowVariants = tableRowVariants;
+exports.useTableHighlight = useTableHighlight;

package/dist/chunks/chunk-VIGRCJAE.mjs

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ErrorBoundary.tsx
+var ErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback !== void 0) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "nexus-error-boundary",
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "nexus-error-boundary__title", children: "Something went wrong" }),
+            this.state.error && /* @__PURE__ */ jsx("p", { className: "nexus-error-boundary__message", children: this.state.error.message })
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+export { ErrorBoundary };

package/dist/chunks/chunk-VVXQZ4XH.mjs

@@ -0,0 +1,93 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonVariants = cva("nexus-btn", {
+  variants: {
+    semantic: {
+      primary: "nexus-btn--primary",
+      secondary: "nexus-btn--secondary",
+      normal: "nexus-btn--normal",
+      danger: "nexus-btn--danger"
+    },
+    variant: {
+      contained: "nexus-btn--contained",
+      outlined: "nexus-btn--outlined",
+      subtle: "nexus-btn--subtle",
+      ghost: "nexus-btn--ghost"
+    },
+    size: {
+      xl: "nexus-btn--xl",
+      lg: "nexus-btn--lg",
+      md: "nexus-btn--md",
+      sm: "nexus-btn--sm"
+    },
+    radius: {
+      default: "",
+      circle: "nexus-btn--circle"
+    }
+  },
+  defaultVariants: {
+    semantic: "primary",
+    variant: "contained",
+    size: "md",
+    radius: "default"
+  }
+});
+var Button = React.forwardRef(
+  ({
+    className,
+    semantic,
+    variant,
+    size,
+    radius,
+    asChild = false,
+    detectDoubleClick = false,
+    disabled,
+    children,
+    onClick,
+    style,
+    ...props
+  }, ref) => {
+    const clickTimeoutRef = React.useRef(
+      null
+    );
+    const handleClick = React.useCallback(
+      (e) => {
+        if (detectDoubleClick && clickTimeoutRef.current) return;
+        onClick?.(e);
+        if (detectDoubleClick) {
+          clickTimeoutRef.current = setTimeout(() => {
+            clickTimeoutRef.current = null;
+          }, 500);
+        }
+      },
+      [detectDoubleClick, onClick]
+    );
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : "button",
+        role: asChild ? "button" : void 0,
+        className: cn(
+          buttonVariants({ semantic, variant, size, radius }),
+          className
+        ),
+        disabled: asChild ? void 0 : disabled,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : void 0,
+        onClick: disabled ? void 0 : handleClick,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/dist/chunks/chunk-W4GG5A7K.mjs

@@ -0,0 +1,51 @@
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cva } from 'class-variance-authority';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var tooltipContentVariants = cva("nexus-tooltip-content", {
+  variants: {
+    variant: {
+      light: "nexus-tooltip--light",
+      dark: "nexus-tooltip--dark"
+    }
+  },
+  defaultVariants: { variant: "dark" }
+});
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = ({
+  children,
+  content,
+  side = "top",
+  align = "center",
+  delayDuration = 200,
+  disabled = false,
+  variant = "dark",
+  triggerClassName = "",
+  className = ""
+}) => {
+  if (disabled) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, className: cn("nexus-tooltip-trigger", triggerClassName), children: /* @__PURE__ */ jsx("span", { children }) }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      TooltipPrimitive.Content,
+      {
+        side,
+        align,
+        className: cn(tooltipContentVariants({ variant }), className),
+        sideOffset: 4,
+        children: [
+          content,
+          /* @__PURE__ */ jsx(
+            TooltipPrimitive.Arrow,
+            {
+              className: variant === "dark" ? "nexus-tooltip-arrow--dark" : "nexus-tooltip-arrow--light"
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+};
+
+export { Tooltip, TooltipProvider, tooltipContentVariants };

package/dist/chunks/chunk-WKCXACMZ.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+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 chipVariants = classVarianceAuthority.cva("nexus-chip", {
+  variants: {
+    variant: {
+      default: "nexus-chip--default",
+      filled: "nexus-chip--filled",
+      outline: "nexus-chip--outline",
+      accent: "nexus-chip--accent"
+    },
+    size: {
+      sm: "nexus-chip--sm",
+      md: "nexus-chip--md",
+      lg: "nexus-chip--lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round" })
+  }
+);
+var Chip = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    disabled,
+    children,
+    onClose,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "div";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        ref,
+        className: chunkCZC76ZD5_js.cn(chipVariants({ variant, size }), className),
+        "aria-disabled": disabled || void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "nexus-chip__close",
+              onClick: disabled ? void 0 : onClose,
+              disabled,
+              "aria-label": "Remove",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "nexus-chip__close-icon" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+
+exports.Chip = Chip;
+exports.chipVariants = chipVariants;

package/dist/chunks/chunk-WR55D4ZS.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+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 textAreaVariants = classVarianceAuthority.cva("nexus-textarea", {
+  variants: {
+    state: {
+      default: "nexus-textarea--default",
+      error: "nexus-textarea--error"
+    }
+  },
+  defaultVariants: { state: "default" }
+});
+var TextArea = React__namespace.forwardRef(
+  ({ className, error, showCount, maxLength, onValueChange, onChange, ...props }, ref) => {
+    const state = error ? "error" : "default";
+    const [count, setCount] = React__namespace.useState(0);
+    const handleChange = React__namespace.useCallback(
+      (e) => {
+        setCount(e.target.value.length);
+        onValueChange?.(e.target.value);
+        onChange?.(e);
+      },
+      [onValueChange, onChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-textarea-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref,
+          className: chunkCZC76ZD5_js.cn(textAreaVariants({ state }), className),
+          maxLength,
+          "aria-invalid": error || void 0,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      showCount && maxLength && /* @__PURE__ */ jsxRuntime.jsxs(
+        "p",
+        {
+          className: "nexus-textarea-count",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-textarea-count__current", children: count.toLocaleString() }),
+            "/",
+            maxLength.toLocaleString()
+          ]
+        }
+      )
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+
+exports.TextArea = TextArea;
+exports.textAreaVariants = textAreaVariants;