@janbox/storefront-ui 1.0.24 → 1.0.25

package/dist/lib/cascader/cascader.js

@@ -0,0 +1,174 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef } from "react";
+import { isNil } from "lodash-es";
+import { CascaderFloatingContent } from "./cascader-floating-content.js";
+import { getCascaderProps } from "./helpers.js";
+import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { truncateStyle } from "../../constants/emotion.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const DEFAULT_SEPARATOR = "/";
+const Cascader = ({ ref, ..._props }) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = false,
+    value: selectedPath = [],
+    valueRenderer,
+    options,
+    loadOptions,
+    onChange,
+    placeholder,
+    listProps,
+    separator = DEFAULT_SEPARATOR,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    fullWidth = true,
+    lazy = true,
+    menuWidth = "exact-reference",
+    ...rest
+  } = getCascaderProps(_props);
+  const floatingRef = useRef(null);
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const handleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      const sizeStyle = {};
+      switch (menuWidth) {
+        case "exact-reference":
+          sizeStyle.width = `${width}px`;
+          break;
+        case "min-reference":
+          sizeStyle.minWidth = `${width}px`;
+          break;
+        default:
+          sizeStyle.width = `${menuWidth}px`;
+          break;
+      }
+      Object.assign(elements.floating.style, sizeStyle);
+    }
+  };
+  const getTextCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    const { textVariant } = getSizeVariantState(sizeVariant);
+    if (isNil(textVariant)) return {};
+    return getTypographyVar(textVariant);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...containerProps,
+      css: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          ...fullWidth ? { width: "100%" } : {}
+        },
+        (_a = containerProps == null ? void 0 : containerProps.xs) == null ? void 0 : _a.css,
+        {
+          [mediaQuery("sm")]: (_b = containerProps == null ? void 0 : containerProps.sm) == null ? void 0 : _b.css,
+          [mediaQuery("md")]: (_c = containerProps == null ? void 0 : containerProps.md) == null ? void 0 : _c.css,
+          [mediaQuery("lg")]: (_d = containerProps == null ? void 0 : containerProps.lg) == null ? void 0 : _d.css
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            sizeOptions,
+            placement,
+            open: isOpen,
+            onOpenChange: handleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
+                ForwardRefInputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  as: "button",
+                  suffix: /* @__PURE__ */ jsx(
+                    SvgLoader,
+                    {
+                      source: ArrowDownIcon,
+                      width: 20,
+                      height: 20,
+                      css: {
+                        transition: "transform 150ms",
+                        ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                      }
+                    }
+                  ),
+                  ...rest,
+                  ref,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: [
+                        {
+                          flex: 1,
+                          textAlign: "left",
+                          ...truncateStyle
+                        },
+                        getTextCss((_e = rest.xs) == null ? void 0 : _e.size)
+                      ],
+                      children: selectedPath.length > 0 ? /* @__PURE__ */ jsx("div", { children: valueRenderer ?? selectedPath.join(" / ") }) : /* @__PURE__ */ jsx("div", { css: { color: getColorVar("neutral.400") }, children: placeholder })
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsx(
+                CascaderFloatingContent,
+                {
+                  searchable,
+                  selectedPath,
+                  options,
+                  loadOptions,
+                  onChange,
+                  inputProps,
+                  listProps,
+                  separator,
+                  lazy,
+                  xs: rest.xs,
+                  sm: rest.sm,
+                  md: rest.md,
+                  lg: rest.lg
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+export {
+  Cascader
+};

package/dist/lib/cascader/helpers.d.ts

@@ -1,4 +1,4 @@
-import { CascaderOption, CascaderProps } from './types.js';
+import { CascaderOption, CascaderProps } from './types';
 export declare const getCascaderProps: (extended: CascaderProps) => CascaderProps;
 /**
  * Find option path by value array
@@ -17,3 +17,4 @@ export declare const isExpandable: (option: CascaderOption) => boolean;
  * Filter options by search text
  */
 export declare const filterOptions: (options: CascaderOption[], searchText: string) => CascaderOption[];
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/cascader/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAUxD,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,YAAa,cAAc,EAAE,UAAU,MAAM,EAAE,KAAG,cAAc,EAY1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,WAAY,cAAc,KAAG,OAEpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,WAAY,cAAc,KAAG,OAKrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,YAAa,cAAc,EAAE,cAAc,MAAM,KAAG,cAAc,EA2B3F,CAAC"}

package/dist/lib/cascader/helpers.js

@@ -1,70 +1,34 @@
-import { mergeComponentProps } from '../../utils/index.js';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        size: 'md',
-    },
+  xs: {
+    size: "md"
+  }
 };
-export const getCascaderProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getCascaderProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
 };
-/**
- * Find option path by value array
- * Returns array of options from root to target
- */
-export const findOptionPath = (options, values) => {
-    const result = [];
-    let currentOptions = options;
-    for (const value of values) {
-        const found = currentOptions.find((opt) => opt.value === value);
-        if (!found)
-            break;
-        result.push(found);
-        currentOptions = found.children ?? [];
-    }
-    return result;
+const findOptionPath = (options, values) => {
+  const result = [];
+  let currentOptions = options;
+  for (const value of values) {
+    const found = currentOptions.find((opt) => opt.value === value);
+    if (!found) break;
+    result.push(found);
+    currentOptions = found.children ?? [];
+  }
+  return result;
 };
-/**
- * Check if option has children already loaded
- */
-export const hasChildren = (option) => {
-    return Array.isArray(option.children) && option.children.length > 0;
+const hasChildren = (option) => {
+  return Array.isArray(option.children) && option.children.length > 0;
 };
-/**
- * Check if option can be expanded (has children or is not a leaf and can lazy load)
- */
-export const isExpandable = (option) => {
-    if (option.isLeaf === true)
-        return false;
-    if (hasChildren(option))
-        return true;
-    // If isLeaf is explicitly false, it's expandable (children can be lazy loaded)
-    return option.isLeaf === false;
+const isExpandable = (option) => {
+  if (option.isLeaf === true) return false;
+  if (hasChildren(option)) return true;
+  return option.isLeaf === false;
 };
-/**
- * Filter options by search text
- */
-export const filterOptions = (options, searchText) => {
-    if (!searchText.trim())
-        return options;
-    const lowerSearch = searchText.toLowerCase();
-    const filterRecursive = (opts) => {
-        return opts.reduce((acc, option) => {
-            const labelStr = String(option.label).toLowerCase();
-            const matchesLabel = labelStr.includes(lowerSearch);
-            if (option.children?.length) {
-                const filteredChildren = filterRecursive(option.children);
-                if (filteredChildren.length > 0 || matchesLabel) {
-                    acc.push({
-                        ...option,
-                        children: filteredChildren.length > 0 ? filteredChildren : option.children,
-                    });
-                }
-            }
-            else if (matchesLabel) {
-                acc.push(option);
-            }
-            return acc;
-        }, []);
-    };
-    return filterRecursive(options);
+export {
+  findOptionPath,
+  getCascaderProps,
+  hasChildren,
+  isExpandable
 };

package/dist/lib/cascader/index.d.ts

@@ -1,2 +1,3 @@
-export * from './cascader.jsx';
-export * from './types.js';
+export * from './cascader';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/cascader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/lib/cascader/types.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Placement, UseFloatingOptions } from '@floating-ui/react';
 import { PropsWithCSS, ResponsiveDesign } from '@janbox/storefront-ui/types';
-import { InputProps } from '../input/index.js';
-import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types.js';
-import { ShallowMerge } from '../../types/index.js';
+import { InputProps } from '../input';
+import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
+import { ShallowMerge } from '../../types';
 export type CascaderResponsiveProps = InputMaskResponsiveProps;
 export type CascaderOptionValue = string | number;
 export interface CascaderOption {
@@ -60,3 +60,4 @@ interface CascaderExtendedProps extends ResponsiveDesign<CascaderResponsiveProps
 }
 export type CascaderProps = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, CascaderExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/cascader/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qIAAqI;IACrI,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,qBAAsB,SAAQ,gBAAgB,CAAC,uBAAuB,CAAC;IAC/E,gCAAgC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,wBAAwB;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,yIAAyI;IACzI,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACpE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACxE,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,iDAAiD;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,cAAc,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAC5F,iCAAiC;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,iBAAiB,GAAG,eAAe,CAAC;CAC1D;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

package/dist/lib/checkbox/checkbox.d.ts

@@ -1,2 +1,3 @@
-import { CheckboxProps } from './types.js';
+import { CheckboxProps } from './types';
 export declare const Checkbox: ({ children, indeterminate, color, className, ref, containerProps, ...props }: CheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/lib/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQxC,eAAO,MAAM,QAAQ,iFAQlB,aAAa,qDAiCf,CAAC"}

package/dist/lib/checkbox/checkbox.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import classes from "./checkbox.module.scss.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { getColorShadesByVariant } from "../../utils/index.js";
+import CheckIcon from "../../assets/svg/done-check.svg.js";
+import MinusIcon from "../../assets/svg/minus.svg.js";
+import { cn } from "../../utils/stylesheet.js";
+const Checkbox = ({
+  children,
+  indeterminate,
+  color = "primary",
+  className,
+  ref,
+  containerProps,
+  ...props
+}) => {
+  const { main, contrastText } = getColorShadesByVariant(color);
+  const inputRef = useRef(null);
+  const mergedRefs = useMergeRefs([ref, inputRef]);
+  useEffect(() => {
+    const inputEl = inputRef.current;
+    if (inputEl) {
+      inputEl.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...containerProps,
+      className: cn(classes.checkbox__container, containerProps == null ? void 0 : containerProps.className),
+      css: {
+        "--checkbox-color": main,
+        "--checkbox-contrast-text": contrastText
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: classes.checkbox__main, children: [
+          /* @__PURE__ */ jsx("input", { ...props, type: "checkbox", className: cn(classes.checkbox__input, className), ref: mergedRefs }),
+          /* @__PURE__ */ jsxs("span", { className: classes.checkbox__checkmark, children: [
+            /* @__PURE__ */ jsx(SvgLoader, { className: classes.checkbox__icon_checked, width: 18, height: 18, source: CheckIcon }),
+            /* @__PURE__ */ jsx(SvgLoader, { className: classes.checkbox__icon_indeterminate, width: 18, height: 18, source: MinusIcon })
+          ] })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+export {
+  Checkbox
+};

package/dist/lib/checkbox/checkbox.module.scss.js

@@ -0,0 +1,23 @@
+const checkbox__container = "_checkbox__container_1rrv2_1";
+const checkbox__input = "_checkbox__input_1rrv2_10";
+const checkbox__main = "_checkbox__main_1rrv2_15";
+const checkbox__checkmark = "_checkbox__checkmark_1rrv2_32";
+const checkbox__icon_checked = "_checkbox__icon_checked_1rrv2_43";
+const checkbox__icon_indeterminate = "_checkbox__icon_indeterminate_1rrv2_43";
+const classes = {
+  checkbox__container,
+  checkbox__input,
+  checkbox__main,
+  checkbox__checkmark,
+  checkbox__icon_checked,
+  checkbox__icon_indeterminate
+};
+export {
+  checkbox__checkmark,
+  checkbox__container,
+  checkbox__icon_checked,
+  checkbox__icon_indeterminate,
+  checkbox__input,
+  checkbox__main,
+  classes as default
+};

package/dist/lib/checkbox/index.d.ts

@@ -1,2 +1,3 @@
-export { Checkbox } from './checkbox.jsx';
-export type { CheckboxProps } from './types.js';
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/lib/checkbox/types.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Interpolation } from '@emotion/react';
-import { ColorVariant, ShallowMerge } from '../../types/index.js';
+import { ColorVariant, ShallowMerge } from '../../types';
 export type CheckboxProps = ShallowMerge<JSX.IntrinsicElements['input'], {
     color?: ColorVariant;
     /**
@@ -13,3 +13,4 @@ export type CheckboxProps = ShallowMerge<JSX.IntrinsicElements['input'], {
         css?: Interpolation;
     };
 }>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/checkbox/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B;IACE,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG;QAChD,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;CACH,CACF,CAAC"}

package/dist/lib/chip/chip.d.ts

@@ -1,2 +1,3 @@
-import { ChipProps } from "./types.js";
+import { ChipProps } from './types';
 export declare const Chip: ({ children, ..._props }: ChipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chip.d.ts.map

package/dist/lib/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/chip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAOzD,eAAO,MAAM,IAAI,4BAA6B,SAAS,qDAqCtD,CAAC"}

package/dist/lib/chip/chip.js

@@ -0,0 +1,58 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { getChipProps } from "./helpers.js";
+import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+const Chip = ({ children, ..._props }) => {
+  const { xs, sm, md, lg, color = "green", ...rest } = getChipProps(_props);
+  const { light, main } = getColorShadesByVariant(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      css: [
+        {
+          width: "fit-content",
+          maxWidth: "100%",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: light,
+          borderTopWidth: 1,
+          borderRightWidth: 1,
+          borderBottomWidth: 1,
+          borderLeftWidth: 1,
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          borderBottomLeftRadius: 8,
+          borderBottomRightRadius: 8,
+          borderColor: main,
+          color: main
+        },
+        createStyle(xs),
+        {
+          [mediaQuery("sm")]: createStyle(sm),
+          [mediaQuery("md")]: createStyle(md),
+          [mediaQuery("lg")]: createStyle(lg)
+        }
+      ],
+      children
+    }
+  );
+};
+const createStyle = ({ css, size } = {}) => {
+  const { inputSize, inputPaddingX, textVariant } = getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      minHeight: inputSize,
+      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
+    },
+    css
+  ];
+};
+export {
+  Chip
+};

package/dist/lib/chip/helpers.d.ts

@@ -1,2 +1,3 @@
-import { ChipProps } from './types.js';
+import { ChipProps } from './types';
 export declare const getChipProps: (extended: ChipProps) => ChipProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/chip/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAYpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}

package/dist/lib/chip/helpers.js

@@ -1,11 +1,14 @@
-import { mergeComponentProps } from '../../utils/index.js';
+import { mergeComponentProps } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        css: {},
-        size: 'md',
-    },
-    color: 'primary',
+  xs: {
+    css: {},
+    size: "md"
+  },
+  color: "primary"
 };
-export const getChipProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getChipProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getChipProps
 };

package/dist/lib/chip/index.d.ts

@@ -1,3 +1,4 @@
-export * from './chip.jsx';
-export * from './types.js';
-export * from './helpers.js';
+export * from './chip';
+export * from './types';
+export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/chip/types.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { ColorVariant, SizeVariant, ResponsiveDesign, ShallowMerge, PropsWithCSS } from '../../types/index.js';
+import { ColorVariant, SizeVariant, ResponsiveDesign, ShallowMerge, PropsWithCSS } from '../../types';
 export interface ChipResponsiveProps extends PropsWithCSS {
     size?: SizeVariant;
 }
@@ -8,3 +8,4 @@ type ChipExtendedProps = ResponsiveDesign<ChipResponsiveProps> & {
 };
 export type ChipProps = ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/chip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAElG,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/collapse/collapse.d.ts

@@ -1,2 +1,3 @@
-import { CollapseProps } from './types.js';
+import { CollapseProps } from './types';
 export declare const Collapse: ({ children, open, collapsedSize, orientation, ...props }: CollapseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=collapse.d.ts.map

package/dist/lib/collapse/collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse/collapse.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,QAAQ,6DAMlB,aAAa,qDAwCf,CAAC"}

package/dist/lib/collapse/collapse.js

@@ -0,0 +1,47 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { motion } from "motion/react";
+const Collapse = ({
+  children,
+  open = true,
+  collapsedSize = 0,
+  orientation = "vertical",
+  ...props
+}) => {
+  const [initial] = useState(() => {
+    const css = {};
+    if (open) {
+      css.width = orientation === "horizontal" ? "auto" : void 0;
+      css.height = orientation === "vertical" ? "auto" : void 0;
+    } else {
+      css.width = orientation === "horizontal" ? collapsedSize : void 0;
+      css.height = orientation === "vertical" ? collapsedSize : void 0;
+    }
+    return css;
+  });
+  const animate = useMemo(() => {
+    const css = {};
+    if (open) {
+      css.width = orientation === "horizontal" ? "auto" : void 0;
+      css.height = orientation === "vertical" ? "auto" : void 0;
+    } else {
+      css.width = orientation === "horizontal" ? collapsedSize : void 0;
+      css.height = orientation === "vertical" ? collapsedSize : void 0;
+    }
+    return css;
+  }, [collapsedSize, open, orientation]);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      css: { overflow: "hidden" },
+      animate,
+      initial,
+      ...props,
+      transition: { duration: 0.15, ...props.transition },
+      children
+    }
+  );
+};
+export {
+  Collapse
+};

package/dist/lib/collapse/index.d.ts

@@ -1,2 +1,3 @@
-export * from './collapse.jsx';
-export * from './types.js';
+export * from './collapse';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/collapse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/lib/collapse/types.d.ts

@@ -1,7 +1,8 @@
 import { HTMLMotionProps } from 'motion/react';
-import { ShallowMerge } from '../../types/index.js';
+import { ShallowMerge } from '../../types';
 export type CollapseProps = ShallowMerge<HTMLMotionProps<'div'>, {
     open?: boolean;
     collapsedSize?: number;
     orientation?: 'horizontal' | 'vertical';
 }>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/collapse/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,YAAY,CACtC,eAAe,CAAC,KAAK,CAAC,EACtB;IACE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CACF,CAAC"}