@punkbit/cui 0.0.251-rc.16 → 0.2.0

package/dist/cjs/components/MiddleTruncator/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+
+const TruncatorContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-17vzr86-0"
+})(["display:flex;width:auto;min-width:0;overflow:hidden;white-space:nowrap;font:", ";color:", ";"], ({
+  theme
+}) => theme.click.fileUpload.typography.description.default, ({
+  theme
+}) => theme.click.fileUpload.color.title.default);
+const TruncatorStart = styledComponents.styled.span.withConfig({
+  componentId: "sc-17vzr86-1"
+})(["flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const TruncatorEnd = styledComponents.styled.span.withConfig({
+  componentId: "sc-17vzr86-2"
+})(["flex-shrink:0;white-space:nowrap;"]);
+const MiddleTruncator = ({
+  text,
+  trailingChars = 10
+}) => {
+  const startText = text.slice(0, -trailingChars);
+  const endText = text.slice(-trailingChars);
+  return /* @__PURE__ */ jsxRuntime.jsxs(TruncatorContainer, { title: text, "aria-label": text, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TruncatorStart, { children: startText }),
+    /* @__PURE__ */ jsxRuntime.jsx(TruncatorEnd, { children: endText })
+  ] });
+};
+
+exports.MiddleTruncator = MiddleTruncator;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/MiddleTruncator/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/MiddleTruncator/MiddleTruncator.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nconst TruncatorContainer = styled.div`\n  display: flex;\n  width: auto;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme }) => theme.click.fileUpload.color.title.default};\n`;\n\nconst TruncatorStart = styled.span`\n  flex-shrink: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst TruncatorEnd = styled.span`\n  flex-shrink: 0;\n  white-space: nowrap;\n`;\n\nexport const MiddleTruncator = ({\n  text,\n  trailingChars = 10,\n}: {\n  text: string;\n  trailingChars?: number;\n}) => {\n  const startText = text.slice(0, -trailingChars);\n  const endText = text.slice(-trailingChars);\n\n  return (\n    <TruncatorContainer\n      title={text}\n      aria-label={text}\n    >\n      <TruncatorStart>{startText}</TruncatorStart>\n      <TruncatorEnd>{endText}</TruncatorEnd>\n    </TruncatorContainer>\n  );\n};\n"],"names":["TruncatorContainer","styled","div","withConfig","componentId","theme","click","fileUpload","typography","description","default","color","title","TruncatorStart","span","TruncatorEnd","MiddleTruncator","text","trailingChars","startText","slice","endText","jsxs","jsx"],"mappings":";;;;;;;AAEA,MAAMA,kBAAAA,GAAqBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,8EAAA,EAAA,SAAA,EAAA,GAAA,GAM3B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,UAAAA,CAAWC,WAAAA,CAAYC,SAC5D,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWI,KAAAA,CAAMC,MAAMF,OAAO,CAAA;AAGpE,MAAMG,cAAAA,GAAiBZ,uBAAAA,CAAOa,IAAAA,CAAIX,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0EAAA,CAAA,CAAA;AAOlC,MAAMW,YAAAA,GAAed,uBAAAA,CAAOa,IAAAA,CAAIX,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mCAAA,CAAA,CAAA;AAKzB,MAAMY,kBAAkBA,CAAC;AAAA,EAC9BC,IAAAA;AAAAA,EACAC,aAAAA,GAAgB;AAIlB,CAAA,KAAM;AACJ,EAAA,MAAMC,SAAAA,GAAYF,IAAAA,CAAKG,KAAAA,CAAM,CAAA,EAAG,CAACF,aAAa,CAAA;AAC9C,EAAA,MAAMG,OAAAA,GAAUJ,IAAAA,CAAKG,KAAAA,CAAM,CAACF,aAAa,CAAA;AAEzC,EAAA,uBACEI,eAAA,CAAC,kBAAA,EAAA,EACC,KAAA,EAAOL,IAAAA,EACP,cAAYA,IAAAA,EAEZ,QAAA,EAAA;AAAA,oBAAAM,cAAA,CAAC,kBAAgBJ,QAAAA,EAAAA,SAAAA,EAAU,CAAA;AAAA,oBAC3BI,cAAA,CAAC,gBAAcF,QAAAA,EAAAA,OAAAA,EAAQ;AAAA,GAAA,EACzB,CAAA;AAEJ;;;;"}

package/dist/cjs/components/MultiAccordion/index.cjs

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const RadixAccordion = require('@radix-ui/react-accordion');
+const styledComponents = require('styled-components');
+const react = require('react');
+const Icon = require('../Icon/index.cjs');
+const Text = require('../Text/index.cjs');
+const Container = require('../Container/index.cjs');
+const Spacer = require('../Spacer/index.cjs');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const RadixAccordion__namespace = /*#__PURE__*/_interopNamespace(RadixAccordion);
+
+const MultiAccordionContext = react.createContext({
+  size: "md",
+  fillWidth: true,
+  showBorder: true,
+  showCheck: false
+});
+const MultiAccordion = ({
+  size = "md",
+  children,
+  fillWidth = true,
+  showCheck = false,
+  showBorder = true,
+  gap = "md",
+  markAsCompleted,
+  ...delegated
+}) => {
+  const contextValue = {
+    size,
+    fillWidth,
+    showBorder,
+    showCheck,
+    markAsCompleted
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { $fillWidth: fillWidth, $gap: gap, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+};
+const MultiAccordionItem = ({
+  value,
+  title,
+  color,
+  icon,
+  iconSize,
+  gap,
+  children,
+  isCompleted = false,
+  ...props
+}) => {
+  const {
+    fillWidth,
+    size,
+    showBorder,
+    showCheck,
+    markAsCompleted
+  } = react.useContext(MultiAccordionContext);
+  const onClickStatus = (e) => {
+    e.preventDefault();
+    if (typeof markAsCompleted === "function") {
+      markAsCompleted(value);
+    }
+  };
+  const customSize = size === "none" ? "sm" : size;
+  return /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value, $showBorder: showBorder, $fillWidth: fillWidth, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AccordionTrigger, { $size: size, color, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(AccordionIconsWrapper, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: iconSize ?? customSize }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
+        showCheck && /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { $padding: size, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: gap }),
+      children
+    ] })
+  ] });
+};
+MultiAccordionItem.displayName = "MultiAccordion.Item";
+MultiAccordion.Item = MultiAccordionItem;
+const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root).withConfig({
+  componentId: "sc-18foo7g-0"
+})(["display:flex;flex-direction:column;justify-content:start;align-items:start;gap:", ";", ";"], ({
+  theme,
+  $gap
+}) => theme.click.container.gap[$gap], ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item).withConfig({
+  componentId: "sc-18foo7g-1"
+})(["", ";", ";"], ({
+  theme,
+  $showBorder
+}) => `
+    border: ${$showBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"};
+    border-radius: ${theme.border.radii[1]};
+    background-color: ${theme.click.global.color.background.default};
+  `, ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigger).withConfig({
+  componentId: "sc-18foo7g-2"
+})(["width:100%;border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ";border-radius:inherit;&[data-state='open']{border-bottom-left-radius:0px;border-bottom-right-radius:0px;[data-icon='accordion-status']{color:", ";}}"], ({
+  theme,
+  $size = "md",
+  color = "default"
+}) => {
+  const size = $size === "none" ? "sm" : $size;
+  return `
+    padding: ${theme.click.container.space[$size]};
+    gap: ${theme.click.accordion[size].space.gap};
+    color: ${theme.click.accordion.color[color].label.default};
+    font: ${theme.click.accordion[size].typography.label.default};
+
+    &:active {
+      color: ${theme.click.accordion.color[color].label.active};
+      font: ${theme.click.accordion[size].typography.label.active};
+    }
+
+    &:hover {
+      color: ${theme.click.accordion.color[color].label.hover};
+      background: ${theme.click.global.color.stroke.default};
+      font: ${theme.click.accordion[size].typography.label.hover};
+      cursor: pointer;
+    }
+
+  [data-icon="accordion-status"] {
+    color: ${theme.global.color.stroke.intense};
+  }
+  `;
+}, ({
+  theme
+}) => theme.global.color.accent.default);
+const AccordionIconWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-18foo7g-3"
+})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
+const AccordionIconsWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-18foo7g-4"
+})(["display:flex;align-items:center;justify-content:center;"]);
+const CustomIcon = styledComponents.styled(Icon.Icon).withConfig({
+  componentId: "sc-18foo7g-5"
+})(["", ""], ({
+  $isCompleted,
+  theme
+}) => $isCompleted && `
+        svg path {
+          stroke: ${theme.global.color.background.default} !important;
+          &:first-of-type {
+            stroke: ${theme.global.color.accent.default} !important;
+          }
+          fill: ${theme.global.color.accent.default} !important;;
+        }
+      `);
+const AccordionContent = styledComponents.styled(RadixAccordion__namespace.Content).withConfig({
+  componentId: "sc-18foo7g-6"
+})(["padding:", ";padding-top:0;"], ({
+  theme,
+  $padding
+}) => theme.click.container.space[$padding]);
+const AccordionItemTitle = styledComponents.styled(Text.Text).withConfig({
+  componentId: "sc-18foo7g-7"
+})(["overflow:hidden;"]);
+
+exports.MultiAccordion = MultiAccordion;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/MultiAccordion/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/MultiAccordion/MultiAccordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport { styled } from 'styled-components';\nimport type { AssetSize } from '@/types';\nimport { Icon, type IconName } from '@/components/Icon';\n\nimport { Container } from '@/components/Container';\nimport { Spacer } from '@/components/Spacer';\nimport { Text } from '@/components/Text';\nimport {\n  createContext,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from 'react';\nimport { GapOptions, PaddingOptions } from '@/components/Container';\nimport { SizeType as SpacerSizeType } from '@/components/Spacer';\n\ntype Size = 'none' | 'sm' | 'md' | 'lg';\ntype Color = 'default' | 'link';\n\ntype MarkAsCompletedFunctionType = (value: string) => void | Promise<void>;\n\ninterface MultiAccordionCommonProps {\n  /** The accordion items to render */\n  children: React.ReactNode;\n  /** The size variant of the accordion */\n  size?: Size;\n  /** Whether the accordion should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between accordion items */\n  gap?: GapOptions;\n  /** Whether to show a border around each accordion item */\n  showBorder?: boolean;\n  /** Whether to show a check/completion indicator on items */\n  showCheck?: boolean;\n  /** Callback function to mark an item as completed */\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nexport type MultiAccordionProps = MultiAccordionCommonProps &\n  (\n    | Omit<RadixAccordion.AccordionMultipleProps, 'children'>\n    | Omit<RadixAccordion.AccordionSingleProps, 'children'>\n  );\n\ninterface MultiAccordionContextProps {\n  size: Size;\n  fillWidth: boolean;\n  showBorder: boolean;\n  showCheck: boolean;\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nconst MultiAccordionContext = createContext<MultiAccordionContextProps>({\n  size: 'md',\n  fillWidth: true,\n  showBorder: true,\n  showCheck: false,\n});\n\nexport const MultiAccordion = ({\n  size = 'md',\n  children,\n  fillWidth = true,\n  showCheck = false,\n  showBorder = true,\n  gap = 'md',\n  markAsCompleted,\n  ...delegated\n}: MultiAccordionProps) => {\n  const contextValue = {\n    size,\n    fillWidth,\n    showBorder,\n    showCheck,\n    markAsCompleted,\n  };\n\n  return (\n    <AccordionRoot\n      $fillWidth={fillWidth}\n      $gap={gap}\n      {...delegated}\n    >\n      <MultiAccordionContext.Provider value={contextValue}>\n        {children}\n      </MultiAccordionContext.Provider>\n    </AccordionRoot>\n  );\n};\ninterface MultiAccordionItemProps extends Omit<\n  RadixAccordion.AccordionItemProps,\n  'title'\n> {\n  /** The title text or element displayed in the accordion item header */\n  title: ReactNode;\n  /** The color variant of the item */\n  color?: Color;\n  /** Optional icon to display next to the title */\n  icon?: IconName;\n  /** Size of the optional icon */\n  iconSize?: AssetSize;\n  /** Gap size between the header and content */\n  gap?: SpacerSizeType;\n  /** Whether this item is marked as completed */\n  isCompleted?: boolean;\n}\n\nconst MultiAccordionItem = ({\n  value,\n  title,\n  color,\n  icon,\n  iconSize,\n  gap,\n  children,\n  isCompleted = false,\n  ...props\n}: MultiAccordionItemProps): ReactElement => {\n  const { fillWidth, size, showBorder, showCheck, markAsCompleted } =\n    useContext(MultiAccordionContext);\n\n  const onClickStatus: MouseEventHandler<HTMLOrSVGElement> = e => {\n    e.preventDefault();\n    if (typeof markAsCompleted === 'function') {\n      markAsCompleted(value);\n    }\n  };\n\n  const customSize = size === 'none' ? 'sm' : size;\n\n  return (\n    <AccordionItem\n      value={value}\n      $showBorder={showBorder}\n      $fillWidth={fillWidth}\n      {...props}\n    >\n      <AccordionTrigger\n        $size={size}\n        color={color}\n      >\n        <AccordionIconsWrapper>\n          <AccordionIconWrapper>\n            <Icon\n              name=\"chevron-right\"\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon\"\n            />\n          </AccordionIconWrapper>\n          {icon ? (\n            <Icon\n              name={icon}\n              size={iconSize ?? customSize}\n            />\n          ) : null}\n        </AccordionIconsWrapper>\n        <Container\n          isResponsive={false}\n          gap=\"sm\"\n          alignItems=\"center\"\n          fillWidth\n          justifyContent=\"space-between\"\n          component=\"span\"\n          overflow=\"hidden\"\n        >\n          <AccordionItemTitle\n            component=\"span\"\n            size={customSize}\n            fillWidth={fillWidth}\n          >\n            {title}\n          </AccordionItemTitle>\n          {showCheck && (\n            <CustomIcon\n              name={isCompleted ? 'check-in-circle' : 'circle'}\n              $isCompleted={isCompleted}\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon status\"\n              onClick={onClickStatus}\n              data-icon=\"accordion-status\"\n              data-testid=\"accordion-status-icon\"\n            />\n          )}\n        </Container>\n      </AccordionTrigger>\n      <AccordionContent $padding={size}>\n        <Spacer size={gap} />\n        {children}\n      </AccordionContent>\n    </AccordionItem>\n  );\n};\n\nMultiAccordionItem.displayName = 'MultiAccordion.Item';\nMultiAccordion.Item = MultiAccordionItem;\n\ninterface StyledAccordionRootProps {\n  $fillWidth: boolean;\n  $gap: GapOptions;\n}\n\nconst AccordionRoot = styled(RadixAccordion.Root)<StyledAccordionRootProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: start;\n  gap: ${({ theme, $gap }) => theme.click.container.gap[$gap]};\n  ${({ $fillWidth }) => $fillWidth && 'width: 100%'};\n`;\n\ninterface StyledAccordionItemProps {\n  $fillWidth: boolean;\n  $showBorder: boolean;\n}\n\nconst AccordionItem = styled(RadixAccordion.Item)<StyledAccordionItemProps>`\n  ${({ theme, $showBorder }) => `\n    border: ${\n      $showBorder ? `1px solid ${theme.click.global.color.stroke.default}` : 'none'\n    };\n    border-radius: ${theme.border.radii[1]};\n    background-color: ${theme.click.global.color.background.default};\n  `};\n  ${({ $fillWidth }) => $fillWidth && 'width: 100%'};\n`;\n\ninterface StyledAccordionTriggerProps {\n  $size?: Size;\n  color?: Color;\n}\n\nconst AccordionTrigger = styled(RadixAccordion.Trigger)<StyledAccordionTriggerProps>`\n  width: 100%;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  ${({ theme, $size = 'md', color = 'default' }) => {\n    const size: Size = $size === 'none' ? 'sm' : $size;\n\n    return `\n    padding: ${theme.click.container.space[$size]};\n    gap: ${theme.click.accordion[size].space.gap};\n    color: ${theme.click.accordion.color[color].label.default};\n    font: ${theme.click.accordion[size].typography.label.default};\n\n    &:active {\n      color: ${theme.click.accordion.color[color].label.active};\n      font: ${theme.click.accordion[size].typography.label.active};\n    }\n\n    &:hover {\n      color: ${theme.click.accordion.color[color].label.hover};\n      background: ${theme.click.global.color.stroke.default};\n      font: ${theme.click.accordion[size].typography.label.hover};\n      cursor: pointer;\n    }\n\n  [data-icon=\"accordion-status\"] {\n    color: ${theme.global.color.stroke.intense};\n  }\n  `;\n  }};\n  border-radius: inherit;\n  &[data-state='open'] {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n    [data-icon='accordion-status'] {\n      color: ${({ theme }): string => theme.global.color.accent.default};\n    }\n  }\n`;\n\nconst AccordionIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);\n\n  ${AccordionTrigger}[data-state='open'] & {\n    transform: rotate(90deg);\n  }\n`;\n\nconst AccordionIconsWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst CustomIcon = styled(Icon)<{ $isCompleted: boolean }>`\n  ${({ $isCompleted, theme }) =>\n    $isCompleted &&\n    `\n        svg path {\n          stroke: ${theme.global.color.background.default} !important;\n          &:first-of-type {\n            stroke: ${theme.global.color.accent.default} !important;\n          }\n          fill: ${theme.global.color.accent.default} !important;;\n        }\n      `}\n`;\n\nconst AccordionContent = styled(RadixAccordion.Content)<{ $padding: PaddingOptions }>`\n  padding: ${({ theme, $padding }): string => theme.click.container.space[$padding]};\n  padding-top: 0;\n`;\n\nconst AccordionItemTitle = styled(Text)`\n  overflow: hidden;\n`;\n"],"names":["MultiAccordionContext","createContext","size","fillWidth","showBorder","showCheck","MultiAccordion","children","gap","markAsCompleted","delegated","contextValue","jsx","MultiAccordionItem","value","title","color","icon","iconSize","isCompleted","props","useContext","onClickStatus","e","preventDefault","customSize","jsxs","Icon","Container","Spacer","displayName","Item","AccordionRoot","styled","RadixAccordion","Root","withConfig","componentId","theme","$gap","click","container","$fillWidth","AccordionItem","$showBorder","global","stroke","default","border","radii","background","AccordionTrigger","Trigger","$size","space","accordion","label","typography","active","hover","intense","accent","AccordionIconWrapper","div","AccordionIconsWrapper","CustomIcon","$isCompleted","AccordionContent","Content","$padding","AccordionItemTitle","Text"],"mappings":"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"}

package/dist/cjs/components/MultiSelect/index.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const useUpdateEffect = require('../../hooks/internal/useUpdateEffect.cjs');
+const InternalSelect = require('../Select/common/InternalSelect.cjs');
+
+const MultiSelect = ({
+  value: valueProp,
+  defaultValue,
+  onSelect: onSelectProp,
+  options,
+  children,
+  defaultOpen,
+  onOpenChange: onOpenChangeProp,
+  ...props
+}) => {
+  const [selectedValues, setSelectedValues] = react.useState(valueProp ?? defaultValue ?? []);
+  const [open, setOpen] = react.useState(defaultOpen ?? false);
+  const onOpenChange = react.useCallback((open2) => {
+    setOpen(open2);
+    if (typeof onOpenChangeProp === "function") {
+      onOpenChangeProp(open2);
+    }
+  }, [onOpenChangeProp]);
+  useUpdateEffect.useUpdateEffect(() => {
+    setSelectedValues(valueProp ?? []);
+  }, [valueProp]);
+  const onChange = react.useCallback((values, type, evt) => {
+    setSelectedValues(values);
+    if (typeof onSelectProp === "function") {
+      onSelectProp(values, type, evt);
+    }
+  }, [onSelectProp]);
+  const onSelect = react.useCallback((value, type) => {
+    let newValues = [];
+    if (selectedValues.includes(value)) {
+      newValues = selectedValues.filter((currentValue) => currentValue !== value);
+    } else {
+      newValues = [...selectedValues, value];
+    }
+    onChange(newValues, type);
+  }, [onChange, selectedValues]);
+  const conditionalProps = {};
+  if (options) {
+    conditionalProps.options = options;
+  } else {
+    conditionalProps.children = children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(InternalSelect.InternalSelect, { onChange, value: valueProp ?? selectedValues, open, onOpenChange, onSelect, multiple: true, ...conditionalProps, ...props });
+};
+MultiSelect.Group = InternalSelect.SelectGroup;
+MultiSelect.Item = InternalSelect.SelectItem;
+MultiSelect.ItemDescription = InternalSelect.SelectItemDescription;
+
+exports.MultiSelect = MultiSelect;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/MultiSelect/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useState } from 'react';\n\nimport { useUpdateEffect } from '@/hooks/internal';\n\nimport type { SelectOptionProp, SelectionType } from '@/components/Select/common/types';\nimport {\n  SelectGroup,\n  SelectItem,\n  InternalSelect,\n  SelectItemDescription,\n} from '@/components/Select/common/InternalSelect';\nimport { MultiSelectProps } from './MultiSelect.types';\n\nexport const MultiSelect = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  ...props\n}: MultiSelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    valueProp ?? defaultValue ?? []\n  );\n  const [open, setOpen] = useState(defaultOpen ?? false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(valueProp ?? []);\n  }, [valueProp]);\n\n  const onChange = useCallback(\n    (values: string[], type?: SelectionType, evt?: KeyboardEvent<HTMLElement>) => {\n      setSelectedValues(values);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(values, type, evt);\n      }\n    },\n    [onSelectProp]\n  );\n\n  const onSelect = useCallback(\n    (value: string, type?: SelectionType) => {\n      let newValues = [];\n      if (selectedValues.includes(value)) {\n        newValues = selectedValues.filter(currentValue => currentValue !== value);\n      } else {\n        newValues = [...selectedValues, value];\n      }\n\n      onChange(newValues, type);\n    },\n    [onChange, selectedValues]\n  );\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={valueProp ?? selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      multiple\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nMultiSelect.Group = SelectGroup;\nMultiSelect.Item = SelectItem;\nMultiSelect.ItemDescription = SelectItemDescription;\n"],"names":["MultiSelect","value","valueProp","defaultValue","onSelect","onSelectProp","options","children","defaultOpen","onOpenChange","onOpenChangeProp","props","selectedValues","setSelectedValues","useState","open","setOpen","useCallback","useUpdateEffect","onChange","values","type","evt","newValues","includes","filter","currentValue","conditionalProps","jsx","InternalSelect","Group","SelectGroup","Item","SelectItem","ItemDescription","SelectItemDescription"],"mappings":";;;;;;;;;AAaO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,KAAAA,EAAOC,SAAAA;AAAAA,EACPC,YAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,YAAAA,EAAcC,gBAAAA;AAAAA,EACd,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAM,CAACC,gBAAgBC,iBAAiB,CAAA,GAAIC,eAC1CZ,SAAAA,IAAaC,YAAAA,IAAgB,EAC/B,CAAA;AACA,EAAA,MAAM,CAACY,IAAAA,EAAMC,OAAO,CAAA,GAAIF,cAAAA,CAASN,eAAe,KAAK,CAAA;AAErD,EAAA,MAAMC,YAAAA,GAAeQ,iBAAAA,CACnB,CAACF,KAAAA,KAAkB;AACjBC,IAAAA,OAAAA,CAAQD,KAAI,CAAA;AACZ,IAAA,IAAI,OAAOL,qBAAqB,UAAA,EAAY;AAC1CA,MAAAA,gBAAAA,CAAiBK,KAAI,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EACA,CAACL,gBAAgB,CACnB,CAAA;AAEAQ,EAAAA,+BAAAA,CAAgB,MAAM;AACpBL,IAAAA,iBAAAA,CAAkBX,SAAAA,IAAa,EAAE,CAAA;AAAA,EACnC,CAAA,EAAG,CAACA,SAAS,CAAC,CAAA;AAEd,EAAA,MAAMiB,QAAAA,GAAWF,iBAAAA,CACf,CAACG,MAAAA,EAAkBC,MAAsBC,GAAAA,KAAqC;AAC5ET,IAAAA,iBAAAA,CAAkBO,MAAM,CAAA;AACxB,IAAA,IAAI,OAAOf,iBAAiB,UAAA,EAAY;AACtCA,MAAAA,YAAAA,CAAae,MAAAA,EAAQC,MAAMC,GAAG,CAAA;AAAA,IAChC;AAAA,EACF,CAAA,EACA,CAACjB,YAAY,CACf,CAAA;AAEA,EAAA,MAAMD,QAAAA,GAAWa,iBAAAA,CACf,CAAChB,KAAAA,EAAeoB,IAAAA,KAAyB;AACvC,IAAA,IAAIE,YAAY,EAAA;AAChB,IAAA,IAAIX,cAAAA,CAAeY,QAAAA,CAASvB,KAAK,CAAA,EAAG;AAClCsB,MAAAA,SAAAA,GAAYX,cAAAA,CAAea,MAAAA,CAAOC,CAAAA,YAAAA,KAAgBA,YAAAA,KAAiBzB,KAAK,CAAA;AAAA,IAC1E,CAAA,MAAO;AACLsB,MAAAA,SAAAA,GAAY,CAAC,GAAGX,cAAAA,EAAgBX,KAAK,CAAA;AAAA,IACvC;AAEAkB,IAAAA,QAAAA,CAASI,WAAWF,IAAI,CAAA;AAAA,EAC1B,CAAA,EACA,CAACF,QAAAA,EAAUP,cAAc,CAC3B,CAAA;AAEA,EAAA,MAAMe,mBAA8C,EAAC;AACrD,EAAA,IAAIrB,OAAAA,EAAS;AACXqB,IAAAA,gBAAAA,CAAiBrB,OAAAA,GAAUA,OAAAA;AAAAA,EAC7B,CAAA,MAAO;AACLqB,IAAAA,gBAAAA,CAAiBpB,QAAAA,GAAWA,QAAAA;AAAAA,EAC9B;AAEA,EAAA,uBACEqB,cAAA,CAACC,6BAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAO3B,aAAaU,cAAAA,EACpB,IAAA,EACA,YAAA,EACA,QAAA,EACA,QAAA,EAAQ,IAAA,KACJe,gBAAAA,EACJ,GAAIhB,KAAAA,EAAM,CAAA;AAGhB;AAEAX,WAAAA,CAAY8B,KAAAA,GAAQC,0BAAAA;AACpB/B,WAAAA,CAAYgC,IAAAA,GAAOC,yBAAAA;AACnBjC,WAAAA,CAAYkC,eAAAA,GAAkBC,oCAAAA;;;;"}

package/dist/cjs/components/NumberField/index.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const mergeRefs = require('../../utils/mergeRefs.cjs');
+const InputWrapper = require('../InputWrapper/index.cjs');
+const Icon = require('../Icon/index.cjs');
+
+const NumberField = react.forwardRef(({
+  disabled,
+  label,
+  error,
+  id,
+  loading,
+  onChange: onChangeProp,
+  orientation,
+  dir,
+  hideControls,
+  startContent,
+  endContent,
+  ...props
+}, ref) => {
+  const inputRef = react.useRef(null);
+  const defaultId = react.useId();
+  const onChange = (e) => {
+    onChangeProp(e.target.value, e);
+  };
+  const handleStartContentClick = () => {
+    inputRef.current?.focus();
+  };
+  const hasStartContent = Boolean(startContent);
+  const hasEndContent = Boolean(loading || endContent);
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper.InputWrapper, { disabled, id: id ?? defaultId, label, error, orientation, dir, children: [
+    startContent && /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { onClick: handleStartContentClick, children: startContent }),
+    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.NumberInputElement, { ref: mergeRefs.mergeRefs([inputRef, ref]), type: "number", id: id ?? defaultId, disabled, onChange, $hideControls: hideControls, $hasStartContent: hasStartContent, $hasEndContent: hasEndContent, ...props }),
+    hasEndContent && /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper.InputEndContent, { children: [
+      endContent ? endContent : null,
+      loading && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "loading-animated", size: "sm" })
+    ] })
+  ] });
+});
+
+exports.NumberField = NumberField;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/NumberField/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n  useRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport {\n  InputEndContent,\n  InputStartContent,\n  InputWrapper,\n  NumberInputElement,\n  WrapperProps,\n} from '@/components/InputWrapper';\nimport { mergeRefs } from '@/utils/mergeRefs';\nexport interface NumberFieldProps\n  extends\n    Omit<WrapperProps, 'id' | 'children'>,\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'dir'> {\n  /** The input type - always number for NumberField */\n  type?: 'number';\n  /** Whether to show a loading spinner */\n  loading?: boolean;\n  /** Callback when the input value changes */\n  onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;\n  /** The orientation of the label relative to the input */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Whether to hide the increment/decrement controls */\n  hideControls?: boolean;\n  /** Additional content to the left of the control */\n  startContent?: ReactNode;\n  /** Additional content to the right of the control */\n  endContent?: ReactNode;\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      disabled,\n      label,\n      error,\n      id,\n      loading,\n      onChange: onChangeProp,\n      orientation,\n      dir,\n      hideControls,\n      startContent,\n      endContent,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const defaultId = useId();\n    const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp(e.target.value, e);\n    };\n\n    const handleStartContentClick: React.MouseEventHandler<HTMLDivElement> = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasStartContent = Boolean(startContent);\n    const hasEndContent = Boolean(loading || endContent);\n\n    return (\n      <InputWrapper\n        disabled={disabled}\n        id={id ?? defaultId}\n        label={label}\n        error={error}\n        orientation={orientation}\n        dir={dir}\n      >\n        {startContent && (\n          <InputStartContent onClick={handleStartContentClick}>\n            {startContent}\n          </InputStartContent>\n        )}\n        <NumberInputElement\n          ref={mergeRefs([inputRef, ref])}\n          type=\"number\"\n          id={id ?? defaultId}\n          disabled={disabled}\n          onChange={onChange}\n          $hideControls={hideControls}\n          $hasStartContent={hasStartContent}\n          $hasEndContent={hasEndContent}\n          {...props}\n        />\n        {hasEndContent && (\n          <InputEndContent>\n            {endContent ? endContent : null}\n            {loading && (\n              <Icon\n                name=\"loading-animated\"\n                size=\"sm\"\n              />\n            )}\n          </InputEndContent>\n        )}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["NumberField","forwardRef","disabled","label","error","id","loading","onChange","onChangeProp","orientation","dir","hideControls","startContent","endContent","props","ref","inputRef","useRef","defaultId","useId","e","target","value","handleStartContentClick","current","focus","hasStartContent","Boolean","hasEndContent","jsxs","InputWrapper","jsx","InputStartContent","NumberInputElement","mergeRefs","InputEndContent","Icon"],"mappings":";;;;;;;;;;AAuCO,MAAMA,WAAAA,GAAcC,iBACzB,CACE;AAAA,EACEC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,MAAMC,QAAAA,GAAWC,aAAyB,IAAI,CAAA;AAC9C,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,MAAMZ,QAAAA,GAAWA,CAACa,CAAAA,KAAqC;AACrDZ,IAAAA,YAAAA,CAAaY,CAAAA,CAAEC,MAAAA,CAAOC,KAAAA,EAAOF,CAAC,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,MAAMG,0BAAmEA,MAAM;AAC7EP,IAAAA,QAAAA,CAASQ,SAASC,KAAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAMC,eAAAA,GAAkBC,QAAQf,YAAY,CAAA;AAC5C,EAAA,MAAMgB,aAAAA,GAAgBD,OAAAA,CAAQrB,OAAAA,IAAWO,UAAU,CAAA;AAEnD,EAAA,uBACEgB,eAAA,CAACC,6BACC,QAAA,EACA,EAAA,EAAIzB,MAAMa,SAAAA,EACV,KAAA,EACA,KAAA,EACA,WAAA,EACA,GAAA,EAECN,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,oBACCmB,cAAA,CAACC,8BAAA,EAAA,EAAkB,OAAA,EAAST,uBAAAA,EACzBX,QAAAA,EAAAA,YAAAA,EACH,CAAA;AAAA,oBAEFmB,cAAA,CAACE,mCACC,GAAA,EAAKC,mBAAAA,CAAU,CAAClB,QAAAA,EAAUD,GAAG,CAAC,CAAA,EAC9B,IAAA,EAAK,QAAA,EACL,IAAIV,EAAAA,IAAMa,SAAAA,EACV,QAAA,EACA,QAAA,EACA,aAAA,EAAeP,YAAAA,EACf,kBAAkBe,eAAAA,EAClB,cAAA,EAAgBE,aAAAA,EAChB,GAAId,KAAAA,EAAM,CAAA;AAAA,IAEXc,aAAAA,oCACEO,4BAAA,EAAA,EACEtB,QAAAA,EAAAA;AAAAA,MAAAA,UAAAA,GAAaA,UAAAA,GAAa,IAAA;AAAA,MAC1BP,2BACCyB,cAAA,CAACK,SAAA,EAAA,EACC,IAAA,EAAK,kBAAA,EACL,MAAK,IAAA,EAAI;AAAA,KAAA,EAGf;AAAA,GAAA,EAEJ,CAAA;AAEJ,CACF;;;;"}

package/dist/cjs/components/Pagination/index.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const styledComponents = require('styled-components');
+const Container = require('../Container/index.cjs');
+const Text = require('../Text/index.cjs');
+const IconButton = require('../IconButton/index.cjs');
+const NumberField = require('../NumberField/index.cjs');
+const Select = require('../Select/index.cjs');
+
+const CustomSelect = styledComponents.styled.div.withConfig({
+  componentId: "sc-dz5afv-0"
+})(["width:150px;"]);
+const Pagination = ({
+  totalPages,
+  currentPage,
+  maxRowsPerPageList = [],
+  rowCount,
+  onChange: onChangeProp,
+  onPageSizeChange: onPageSizeChangeProp,
+  pageSize = -1,
+  fillWidth = true,
+  gap = "md",
+  justifyContent,
+  onNextPageClick,
+  onPrevPageClick,
+  onPageNumberFocus,
+  onPageNumberBlur,
+  disableNextButton,
+  allowAllRows = true,
+  ...props
+}) => {
+  const hasRowCount = ["number", "string"].includes(typeof rowCount);
+  const inputRef = react.useRef(null);
+  const formatNumber = (value) => {
+    return new Intl.NumberFormat("en").format(value);
+  };
+  const leftButtonDisabled = currentPage <= 1;
+  const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
+  const onChange = (value) => {
+    const sanitizedValue = parseInt(value, 10);
+    if (sanitizedValue < 1 || inputRef.current?.disabled || (typeof totalPages !== "undefined" ? sanitizedValue > totalPages : false)) {
+      return;
+    }
+    onChangeProp(sanitizedValue);
+  };
+  const onPageSizeChange = (value) => {
+    if (typeof onPageSizeChangeProp === "function") {
+      onPageSizeChangeProp(Number(value));
+    }
+  };
+  const onPrevClick = react.useCallback((e) => {
+    if (leftButtonDisabled) {
+      return;
+    }
+    onChangeProp(currentPage - 1);
+    if (typeof onPrevPageClick === "function") {
+      onPrevPageClick(e);
+    }
+  }, [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]);
+  const onNextClick = react.useCallback((e) => {
+    if (rightButtonDisabled) {
+      return;
+    }
+    onChangeProp(currentPage + 1);
+    if (typeof onNextPageClick === "function") {
+      onNextPageClick(e);
+    }
+  }, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
+  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {
+    pageSize = maxRowsPerPageList[0];
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
+    hasRowCount && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { component: "div", color: "muted", size: "sm", children: [
+      typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
+      " rows"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { gap: "xxs", fillWidth: false, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: "chevron-left", type: "ghost", disabled: leftButtonDisabled, onClick: onPrevClick, "data-testid": "prev-btn" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { maxWidth: "50px", fillWidth: false, children: /* @__PURE__ */ jsxRuntime.jsx(NumberField.NumberField, { ref: inputRef, onChange, value: currentPage, loading: false, "aria-label": currentPage.toString(), min: 1, max: totalPages, onFocus: onPageNumberFocus, hideControls: true, onBlur: onPageNumberBlur, disabled: leftButtonDisabled && rightButtonDisabled }) }),
+      !!totalPages && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { component: "div", color: "muted", size: "sm", children: [
+        "of ",
+        formatNumber(totalPages)
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
+    ] }),
+    maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(CustomSelect, { as: Select.Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
+      allowAllRows && /* @__PURE__ */ jsxRuntime.jsx(Select.Select.Item, { value: "-1", children: "All rows" }),
+      maxRowsPerPageList.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(Select.Select.Item, { value: option.toString(), children: [
+        option,
+        " rows"
+      ] }, option))
+    ] })
+  ] });
+};
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Pagination/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport { styled } from 'styled-components';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\nconst CustomSelect = styled.div`\n  width: 150px;\n`;\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const sanitizedValue = parseInt(value, 10);\n    if (\n      sanitizedValue < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? sanitizedValue > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(sanitizedValue);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <CustomSelect\n          as={Select}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </CustomSelect>\n      )}\n    </Container>\n  );\n};\n"],"names":["CustomSelect","styled","div","withConfig","componentId","Pagination","totalPages","currentPage","maxRowsPerPageList","rowCount","onChange","onChangeProp","onPageSizeChange","onPageSizeChangeProp","pageSize","fillWidth","gap","justifyContent","onNextPageClick","onPrevPageClick","onPageNumberFocus","onPageNumberBlur","disableNextButton","allowAllRows","props","hasRowCount","includes","inputRef","useRef","formatNumber","value","Intl","NumberFormat","format","leftButtonDisabled","rightButtonDisabled","sanitizedValue","parseInt","current","disabled","Number","onPrevClick","useCallback","e","onNextClick","length","jsxs","Container","Text","jsx","IconButton","NumberField","toString","Select","map","option"],"mappings":"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"}

package/dist/cjs/components/Panel/index.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+
+const Panel = ({
+  alignItems = "center",
+  children,
+  color,
+  cursor,
+  fillHeight,
+  fillWidth,
+  gap,
+  hasBorder,
+  hasShadow,
+  height,
+  orientation = "horizontal",
+  padding,
+  radii = "sm",
+  width,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { $alignItems: alignItems, $color: color, $cursor: cursor, $fillHeight: fillHeight, $fillWidth: fillWidth, $gap: gap, $hasBorder: hasBorder, $hasShadow: hasShadow, $height: height, $orientation: orientation, $padding: padding, $radii: radii, $width: width, ...props, children });
+const Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-olel8y-0"
+})(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";", ";"], ({
+  $orientation = "horizontal"
+}) => $orientation === "horizontal" ? "row wrap" : "column", ({
+  $alignItems = "center"
+}) => $alignItems === "center" ? "center" : `flex-${$alignItems}`, ({
+  $width,
+  $fillWidth
+}) => $fillWidth ? "100%" : $width, ({
+  $height,
+  $fillHeight
+}) => $fillHeight ? "100%" : $height, ({
+  $color = "default",
+  theme
+}) => theme.click.panel.color.background[$color], ({
+  $radii = "sm",
+  theme
+}) => theme.click.panel.radii[$radii], ({
+  $padding = "md",
+  theme
+}) => theme.click.panel.space.y[$padding], ({
+  $hasBorder,
+  theme
+}) => $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none", ({
+  $hasShadow,
+  theme
+}) => $hasShadow ? theme.shadow[1] : "none", ({
+  $gap = "sm",
+  theme
+}) => theme.click.panel.space.gap[$gap], ({
+  $cursor
+}) => $cursor && `cursor: ${$cursor}`);
+
+exports.Panel = Panel;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Panel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import type { Orientation } from '@/types';\nimport type { CursorOptions } from './Panel.types';\nimport { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\n\nexport type PanelPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type PanelColor = 'default' | 'muted' | 'transparent';\nexport type PanelRadii = 'none' | 'sm' | 'md' | 'lg';\ntype AlignItemsOption = 'start' | 'center' | 'end';\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Alignment of items along the cross axis */\n  alignItems?: AlignItemsOption;\n  /** The content to display inside the panel */\n  children?: React.ReactNode;\n  /** The background color variant of the panel */\n  color?: PanelColor;\n  /** The cursor style when hovering over the panel */\n  cursor?: CursorOptions;\n  /** Whether the panel should fill the full height of its container */\n  fillHeight?: boolean;\n  /** Whether the panel should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between child elements */\n  gap?: PanelPadding;\n  /** Whether to show a border around the panel */\n  hasBorder?: boolean;\n  /** Whether to show a shadow on the panel */\n  hasShadow?: boolean;\n  /** Fixed height of the panel */\n  height?: string;\n  /** The orientation of content flow - horizontal or vertical */\n  orientation?: Orientation;\n  /** The padding inside the panel */\n  padding?: PanelPadding;\n  /** The border radius of the panel corners */\n  radii?: PanelRadii;\n  /** Fixed width of the panel */\n  width?: string;\n}\n\nexport const Panel = ({\n  alignItems = 'center',\n  children,\n  color,\n  cursor,\n  fillHeight,\n  fillWidth,\n  gap,\n  hasBorder,\n  hasShadow,\n  height,\n  orientation = 'horizontal',\n  padding,\n  radii = 'sm',\n  width,\n  ...props\n}: PanelProps) => (\n  <Wrapper\n    $alignItems={alignItems}\n    $color={color}\n    $cursor={cursor}\n    $fillHeight={fillHeight}\n    $fillWidth={fillWidth}\n    $gap={gap}\n    $hasBorder={hasBorder}\n    $hasShadow={hasShadow}\n    $height={height}\n    $orientation={orientation}\n    $padding={padding}\n    $radii={radii}\n    $width={width}\n    {...props}\n  >\n    {children}\n  </Wrapper>\n);\n\nconst Wrapper = styled.div<{\n  $alignItems?: AlignItemsOption;\n  $color?: PanelColor;\n  $cursor?: CursorOptions;\n  $fillHeight?: boolean;\n  $fillWidth?: boolean;\n  $gap?: PanelPadding;\n  $hasBorder?: boolean;\n  $hasShadow?: boolean;\n  $height?: string;\n  $orientation?: Orientation;\n  $padding?: PanelPadding;\n  $radii?: PanelRadii;\n  $width?: string;\n}>`\n  display: flex;\n  flex-flow: ${({ $orientation = 'horizontal' }) =>\n    $orientation === 'horizontal' ? 'row wrap' : 'column'};\n  align-items: ${({ $alignItems = 'center' }) =>\n    $alignItems === 'center' ? 'center' : `flex-${$alignItems}`};\n  width: ${({ $width, $fillWidth }) => ($fillWidth ? '100%' : $width)};\n  height: ${({ $height, $fillHeight }) => ($fillHeight ? '100%' : $height)};\n  background-color: ${({ $color = 'default', theme }) =>\n    theme.click.panel.color.background[$color]};\n  border-radius: ${({ $radii = 'sm', theme }) => theme.click.panel.radii[$radii]};\n  padding: ${({ $padding = 'md', theme }) => theme.click.panel.space.y[$padding]};\n  border: ${({ $hasBorder, theme }) =>\n    $hasBorder ? `1px solid ${theme.click.global.color.stroke.default}` : 'none'};\n  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : 'none')};\n  gap: ${({ $gap = 'sm', theme }) => theme.click.panel.space.gap[$gap]};\n  ${({ $cursor }) => $cursor && `cursor: ${$cursor}`};\n`;\n"],"names":["Panel","alignItems","children","color","cursor","fillHeight","fillWidth","gap","hasBorder","hasShadow","height","orientation","padding","radii","width","props","jsx","Wrapper","styled","div","withConfig","componentId","$orientation","$alignItems","$width","$fillWidth","$height","$fillHeight","$color","theme","click","panel","background","$radii","$padding","space","y","$hasBorder","global","stroke","default","$hasShadow","shadow","$gap","$cursor"],"mappings":"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"}