@react-fabric/core 1.0.0-beta.0

package/dist/esm/components/button/ConfirmButton.js

@@ -0,0 +1,166 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useFloating, autoUpdate, shift, flip, offset, arrow, useClick, useDismiss, useInteractions, FloatingPortal, FloatingFocusManager, FloatingArrow } from '@floating-ui/react';
+import { mergeRefs } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useRef, useState, useCallback, useEffect, useMemo, Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from './Button.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "message", "color", "okLabel", "cancelLabel", "onClick", "loading", "actionMessage", "showActionDone", "showActionDoneEvent"],
+  _excluded2 = ["ref"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Button with confirmation dropdown
+ */
+var ConfirmButton = function ConfirmButton(_ref) {
+  var ref = _ref.ref,
+    message = _ref.message,
+    color = _ref.color,
+    okLabel = _ref.okLabel,
+    cancelLabel = _ref.cancelLabel,
+    onClick = _ref.onClick,
+    loading = _ref.loading,
+    actionMessage = _ref.actionMessage,
+    showActionDone = _ref.showActionDone,
+    _ref$showActionDoneEv = _ref.showActionDoneEvent,
+    showActionDoneEvent = _ref$showActionDoneEv === void 0 ? "click" : _ref$showActionDoneEv,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation("core"),
+    t = _useTranslation.t;
+  var arrowRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    busy = _useState4[0],
+    setBusy = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    actionDone = _useState6[0],
+    setActionDone = _useState6[1];
+  var clickHandler = useCallback(function (e) {
+    setBusy(e);
+    var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    if (e) {
+      void Promise.resolve(ret).then(function (b) {
+        setBusy(false);
+        if (b !== false && actionMessage && showActionDoneEvent === "click") {
+          setActionDone(true);
+        }
+      });
+    }
+  }, [onClick, actionMessage, showActionDoneEvent]);
+  useEffect(function () {
+    if (actionDone) {
+      var timer = setTimeout(function () {
+        return setActionDone(false);
+      }, 2000);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [actionDone]);
+  var _useFloating = useFloating({
+      open: isOpen,
+      onOpenChange: function onOpenChange(nextOpen, _, reason) {
+        setIsOpen(nextOpen);
+        if (reason === "escape-key") {
+          clickHandler(false);
+        }
+      },
+      strategy: "fixed",
+      placement: "bottom",
+      whileElementsMounted: autoUpdate,
+      middleware: [shift({
+        padding: 8
+      }), flip(), offset(9), arrow({
+        element: arrowRef
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = useClick(context, {
+    enabled: !props.disabled
+  });
+  var dismiss = useDismiss(context);
+  var _useInteractions = useInteractions([dismiss, click]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var ButtonWrapper = useCallback(function (_ref2) {
+    var ref = _ref2.ref,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/jsx(Button, _objectSpread({
+      ref: ref
+    }, props));
+  }, []);
+  var innerRef = useMemo(function () {
+    return mergeRefs(ref, refs.setReference);
+  }, [ref, refs.setReference]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ButtonWrapper, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
+      color: color,
+      loading: busy || loading,
+      showActionDone: actionDone || showActionDone,
+      showActionDoneEvent: "manual",
+      actionMessage: actionMessage,
+      ref: innerRef
+    }, getReferenceProps()), {}, {
+      "data-dropdown-open": isOpen
+    })), isOpen && /*#__PURE__*/jsx(FloatingPortal, {
+      children: /*#__PURE__*/jsx(FloatingFocusManager, {
+        modal: true,
+        context: context,
+        children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+          "data-color": color,
+          className: classNames("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base"),
+          ref: refs.setFloating,
+          style: floatingStyles
+        }, getFloatingProps()), {}, {
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "font-medium ",
+            children: [/*#__PURE__*/jsx("p", {
+              className: "py-2 px-4",
+              children: message
+            }), /*#__PURE__*/jsxs("div", {
+              className: "flex justify-end py-2 px-4 gap-2",
+              children: [/*#__PURE__*/jsx(Button, {
+                size: "sm",
+                variant: "link",
+                color: color,
+                onClick: function onClick() {
+                  return [clickHandler(false), setIsOpen(false)];
+                },
+                children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("action.cancel")
+              }), /*#__PURE__*/jsx(Button, {
+                size: "sm",
+                variant: "solid",
+                color: color,
+                autoFocus: true,
+                onClick: function onClick() {
+                  return [clickHandler(true), setIsOpen(false)];
+                },
+                children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok")
+              })]
+            })]
+          }), /*#__PURE__*/jsx(FloatingArrow, {
+            ref: arrowRef,
+            context: context,
+            strokeWidth: 0.5,
+            className: "fill-base stroke-muted"
+          })]
+        }))
+      })
+    })]
+  });
+};
+
+export { ConfirmButton };

package/dist/esm/components/button/ToggleButtonGroup.js

@@ -0,0 +1,68 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useMemo, useCallback, Children, cloneElement } from 'react';
+import { useControlledValue } from '../../hooks/useControlledValue.js';
+import classes from './Button.module.css';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size", "value", "onChange"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
+  var vertical = _ref.vertical,
+    className = _ref.className,
+    children = _ref.children,
+    variant = _ref.variant,
+    rounded = _ref.rounded,
+    disabled = _ref.disabled,
+    fullWidth = _ref.fullWidth,
+    color = _ref.color,
+    size = _ref.size,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var isMultiple = useMemo(function () {
+    return isArray(value);
+  }, [value]);
+  var _useControlledValue = useControlledValue(value, isArray(value) ? EMPTY_ARRAY : ""),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var clickHandler = useCallback(function (cb) {
+    return function (e) {
+      var newValue = "".concat(e.currentTarget.dataset.value);
+      if (isArray(currentValue)) {
+        if (currentValue.includes(newValue)) newValue = currentValue.filter(function (v) {
+          return v !== newValue;
+        });else newValue = [].concat(_toConsumableArray(currentValue), [newValue]);
+      }
+      updateValue(newValue);
+      onChange === null || onChange === void 0 || onChange(newValue);
+      cb === null || cb === void 0 || cb(e);
+    };
+  }, [currentValue, onChange]);
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && classes.vertical, vertical && "flex-col")
+  }, aria), {}, {
+    children: Children.map(children, function (child) {
+      return /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({
+        color: color,
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        rounded: rounded,
+        fullWidth: fullWidth
+      }, child.props), {}, {
+        onClick: clickHandler(child.props.onClick),
+        "data-value": child.props.value,
+        "data-checked": isMultiple ? currentValue.includes(child.props.value) : currentValue === child.props.value
+      }));
+    })
+  }));
+};
+
+export { ToggleButtonGroup };

package/dist/esm/components/callout/Callout.js

@@ -0,0 +1,54 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { CoreIcons } from '../../types/icons.js';
+import { getBgClass, getColorClass, getBorderClass } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
+import { Icon } from '../icon/Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Callout = function Callout(_ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint" : _ref$color,
+    legend = _ref.legend,
+    title = _ref.title,
+    icon = _ref.icon,
+    border = _ref.border,
+    onClose = _ref.onClose,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("fieldset", _objectSpread(_objectSpread({
+    className: classNames("block rounded-capped border max-w-full relative overflow-hidden mb-4", getBgClass(color + "-50"), getColorClass(color + "-700"), getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
+  }, aria), {}, {
+    children: [legend && /*#__PURE__*/jsx("legend", {
+      className: "px-2 mx-4 font-medium",
+      children: legend
+    }), /*#__PURE__*/jsxs("div", {
+      className: classNames("break-words whitespace-break-spaces p-2"),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-nowrap items-center text-xl pe-4 gap-2 mb-4 empty:mb-0",
+        children: [icon && /*#__PURE__*/jsx(Icon, {
+          icon: icon
+        }), title && /*#__PURE__*/jsx("p", {
+          className: "flex-1",
+          children: title
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "pe-4",
+        children: children
+      })]
+    }), onClose && /*#__PURE__*/jsx(Icon, {
+      size: "md",
+      className: classNames("absolute end-2", legend ? "top-0" : "top-2"),
+      icon: CoreIcons.close,
+      onClick: onClose
+    })]
+  }));
+};
+
+export { Callout };

package/dist/esm/components/card/Card.js

@@ -0,0 +1,62 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useMemo, Children } from 'react';
+import { ErrorBoundary } from '../../core/boundary/ErrorBoundary.js';
+import { Header, Footer } from '../../core/headfoot/HeadFoot.js';
+import '@react-fabric/utilities';
+import { nodeCheck } from '../../utils/nodeCheck.js';
+import classes from './Card.module.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Card = function Card(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
+    selected = _ref.selected,
+    selectedRibbon = _ref.selectedRibbon,
+    onClick = _ref.onClick,
+    flex = _ref.flex,
+    draggable = _ref.draggable,
+    dragKey = _ref.dragKey,
+    dragData = _ref.dragData,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useMemo = useMemo(function () {
+      return Children.toArray(children).reduce(function (ret, node) {
+        nodeCheck(node, Header) ? ret[0].push(node) : nodeCheck(node, Footer) ? ret[2].push(node) : ret[1].push(node);
+        return ret;
+      }, [[], [], []]);
+    }, [children]),
+    _useMemo2 = _slicedToArray(_useMemo, 3),
+    header = _useMemo2[0],
+    body = _useMemo2[1],
+    footer = _useMemo2[2];
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(classes.cardWrapper, "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && classes.selected, selected && "outline outline-2 outline-accent-500 outline-offset-2"),
+    children: /*#__PURE__*/jsx(ErrorBoundary, {
+      children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+        className: classNames(classes.card, className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && classes.clickable),
+        draggable: draggable,
+        onDragStart: !draggable ? undefined : function (e) {
+          var _e$dataTransfer;
+          return dragKey && ((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
+        }
+      }, aria), {}, {
+        children: [header, /*#__PURE__*/jsx("div", {
+          role: "none",
+          className: classNames(classes.cardBody, bodyClassName, "flex-1"),
+          onClick: onClick,
+          children: body
+        }), footer]
+      }))
+    })
+  });
+};
+
+export { Card };

package/dist/esm/components/card/Card.module.css

@@ -0,0 +1 @@
+@layer comp{.cardWrapper.selected{&:before{border-bottom:1rem solid transparent;border-inline-end:1rem solid transparent;border-inline-start:1rem solid theme(colors.accent.500);border-start-start-radius:var(--rounding-cap);border-top:1rem solid theme(colors.accent.500);content:""}&:after,&:before{inset-inline-start:-4px;position:absolute;top:-4px;z-index:5}&:after{color:theme(colors.white);content:"✓";line-height:1;padding:4px}}.card{background-color:var(--fabric-bg);box-shadow:0 0 0 1px theme(borderColor.muted);&>*{background-color:transparent}& .cardCover{&.dark>.cardCoverContent,&.inheritScheme:has([data-colorset=dark])>.cardCoverContent{background-image:linear-gradient(180deg,#0000 0,#0006);color:var(--white);text-shadow:0 0 2px var(--black)}&.inheritScheme:has([data-colorset=light])>.cardCoverContent,&.light>.cardCoverContent{background-image:linear-gradient(180deg,#fff0 0,#fff6);color:var(--black);text-shadow:0 0 2px var(--white)}}& .cardBody{padding:1rem}&.clickable{box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 2px 0 var(--fabric-shadow);transition:box-shadow 0ms;&:has(.cardBody:hover):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 4px 0 var(--fabric-shadow),0 8px 16px 0 color-mix(in lab,var(--fabric-shadow) 35%,#0000);transition-delay:.15s}&:has(.cardBody:active):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed);transform:translateY(1px);transition-delay:0ms}& .cardBody{cursor:pointer;&:after{background-image:linear-gradient(175deg,hsla(0,0%,100%,.05),transparent 18%,transparent 72%,rgb(0 0 0/5%));content:"";inset:0;pointer-events:none;position:absolute;z-index:5}}}}}@layer util{.card{& .cardBody{&>*{background-color:transparent;grid-area:unset}}& .cardCover{&>[data-ref=image],&>[data-ref=video]{inset:0;position:absolute;z-index:0}& .cardCoverContent{&>*{flex:0 0 auto}}}}}

package/dist/esm/components/card/CardCover.js

@@ -0,0 +1,48 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useMemo, Children } from 'react';
+import '@react-fabric/utilities';
+import { nodeCheck } from '../../utils/nodeCheck.js';
+import { Image, Video } from '../media/Media.js';
+import classes from './Card.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["className", "children", "height", "justify", "colorScheme"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CardCover = function CardCover(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 120 : _ref$height,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? "end" : _ref$justify,
+    colorScheme = _ref.colorScheme,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useMemo = useMemo(function () {
+      return Children.toArray(children).reduce(function (ret, node) {
+        nodeCheck(node, Image, Video) ? ret[0].push(node) : ret[1].push(node);
+        return ret;
+      }, [[], []]);
+    }, [children]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    media = _useMemo2[0],
+    body = _useMemo2[1];
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    style: {
+      height: height
+    },
+    className: classNames(classes.cardCover, classes[colorScheme !== null && colorScheme !== void 0 ? colorScheme : "inheritScheme"], "relative z-0")
+  }, aria), {}, {
+    children: [media, /*#__PURE__*/jsx("div", {
+      className: classNames(classes.cardCoverContent, "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full", className, "justify-".concat(justify), className),
+      children: body
+    })]
+  }));
+};
+
+export { CardCover };

package/dist/esm/components/chip/Chip.js

@@ -0,0 +1,94 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useCallback } from 'react';
+import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { getColor, getColorClass } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
+import { Icon } from '../icon/Icon.js';
+import classes from './Chip.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SizeMap = {
+  xs: "0.625rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem"
+};
+var Chip = function Chip(_ref) {
+  var ref = _ref.ref,
+    children = _ref.children,
+    className = _ref.className,
+    size = _ref.size,
+    color = _ref.color,
+    variant = _ref.variant,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    rtlFlip = _ref.rtlFlip,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    onIconClick = _ref.onIconClick,
+    onRemove = _ref.onRemove,
+    rounded = _ref.rounded,
+    stopPropagation = _ref.stopPropagation,
+    as = _ref.as,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** style map *******************/
+  var styles = useMemoDebugger(function () {
+    var s = {};
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [color, size], "Chip styles");
+  var clickHandler = useCallback(function (e) {
+    if (stopPropagation) e.stopPropagation();
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [onClick, stopPropagation]);
+  var removeHandler = useCallback(function (e) {
+    if (stopPropagation) e.stopPropagation();
+    onRemove === null || onRemove === void 0 || onRemove(e);
+  }, [onRemove, stopPropagation]);
+  var E = as !== null && as !== void 0 ? as : "div";
+  return /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
+    ref: ref,
+    role: "term",
+    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
+    style: styles,
+    "data-variant": variant,
+    "data-inner-clickable": !!onClick,
+    onClick: clickHandler
+  }, aria), {}, {
+    children: [icon && /*#__PURE__*/jsx(Icon, {
+      className: classNames(classes.chipIcon, "m-1"),
+      icon: icon,
+      bg: iconBg,
+      onClick: onIconClick,
+      color: iconColor,
+      rtlFlip: rtlFlip
+    }), children && /*#__PURE__*/jsx("label", {
+      className: classNames(classes.chipLabel, "leading-none truncate"),
+      children: children
+    }), onRemove && /*#__PURE__*/jsx("span", {
+      role: "none",
+      className: classNames(classes.chipRemove, "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
+      onClick: removeHandler,
+      children: "\xD7"
+    })]
+  }));
+};
+
+export { Chip };

package/dist/esm/components/chip/Chip.module.css

@@ -0,0 +1 @@
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:.25em .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

package/dist/esm/components/collapsable/Collapsable.js

@@ -0,0 +1,84 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toArray from '@babel/runtime/helpers/toArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useState, useRef, useImperativeHandle, useEffect, useMemo, Children } from 'react';
+import { CoreIcons } from '../../types/icons.js';
+import { Icon } from '../icon/Icon.js';
+import classes from './Collapsable.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Collapsable = function Collapsable(_ref) {
+  var ref = _ref.ref,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
+    headerClassName = _ref.headerClassName,
+    children = _ref.children,
+    iconAlign = _ref.iconAlign,
+    _ref$iconClosed = _ref.iconClosed,
+    iconClosed = _ref$iconClosed === void 0 ? CoreIcons.chevronRight : _ref$iconClosed,
+    _ref$iconOpen = _ref.iconOpen,
+    iconOpen = _ref$iconOpen === void 0 ? CoreIcons.chevronDown : _ref$iconOpen,
+    open = _ref.open;
+    _ref.onClose;
+    _ref.onOpen;
+    var aria = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(open),
+    _useState2 = _slicedToArray(_useState, 2),
+    openState = _useState2[0],
+    setOpenState = _useState2[1];
+  var headRef = useRef(null);
+  var bodyRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      button: headRef,
+      body: bodyRef,
+      open: !!openState
+    };
+  }, [openState]);
+  useEffect(function () {
+    setOpenState(open);
+  }, [open]);
+  var _useMemo = useMemo(function () {
+      var _Children$toArray = Children.toArray(children),
+        _Children$toArray2 = _toArray(_Children$toArray),
+        h = _Children$toArray2[0],
+        b = _Children$toArray2.slice(1);
+      return [h, b];
+    }, [children]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    head = _useMemo2[0],
+    body = _useMemo2[1];
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(classes.collapsable, className)
+  }, aria), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      role: "none",
+      ref: headRef,
+      className: classNames(classes.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      onClick: function onClick() {
+        return setOpenState(!openState);
+      },
+      children: [/*#__PURE__*/jsx(Icon, {
+        size: "1.125em",
+        icon: openState ? iconOpen : iconClosed,
+        rtlFlip: true
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex-1 px-2",
+        children: head
+      })]
+    }), openState && /*#__PURE__*/jsx("div", {
+      ref: bodyRef,
+      className: classNames(classes.collapsableBody, bodyClassName),
+      children: body
+    })]
+  }));
+};
+
+export { Collapsable };

package/dist/esm/components/collapsable/Collapsable.module.css

@@ -0,0 +1 @@
+@layer comp{.collapsable{&+&{border-top:1px solid theme(borderColor.base)}}}

package/dist/esm/components/divider/Divider.js

@@ -0,0 +1,65 @@
+'use client';
+
+import classNames from 'classnames';
+import { useCallback } from 'react';
+import { getBorderClass, getBgClass, getColorClass } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var Divider = function Divider(_ref) {
+  var children = _ref.children,
+    color = _ref.color,
+    vertical = _ref.vertical,
+    fill = _ref.fill,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
+    className = _ref.className;
+  var Rule = useCallback(function (_ref2) {
+    var flex = _ref2.flex,
+      className = _ref2.className;
+    return /*#__PURE__*/jsx("hr", {
+      style: {
+        flex: flex
+      },
+      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "mx-1" : "my-1", color && getBorderClass(color + "-200"))
+    });
+  }, [color, vertical]);
+  return children ? /*#__PURE__*/jsxs("div", {
+    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    children: [/*#__PURE__*/jsx(Rule, {
+      flex: align === "start" ? "0 0 1rem" : "1 1 1em"
+    }), /*#__PURE__*/jsx("div", {
+      className: classNames("px-2 whitespace-nowrap", vertical ? "mx-1" : "my-1", fill && getBgClass((color !== null && color !== void 0 ? color : "tint") + "-200"), !fill && getColorClass((color !== null && color !== void 0 ? color : "tint") + "-600"), "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      children: children
+    }), /*#__PURE__*/jsx(Rule, {
+      flex: align === "end" ? "0 0 1rem" : "1 1 1em"
+    })]
+  }) : /*#__PURE__*/jsx(Rule, {
+    className: className
+  });
+};
+
+export { Divider };