@punkbit/cui 0.0.251-rc.16 → 0.2.0-rc.3

package/dist/esm/components/SplitButton/index.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { styled } from 'styled-components';
+import { BaseButton } from '../Button/BaseButton.js';
+import { IconWrapper } from '../IconWrapper/index.js';
+import { Dropdown } from '../Dropdown/index.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+
+const SplitButton = ({
+  type = "primary",
+  disabled,
+  menu,
+  dir,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal,
+  side,
+  fillWidth,
+  children,
+  icon,
+  iconDir = "start",
+  ...props
+}) => {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const targetDiv = ref.current;
+    if (!targetDiv) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.target.clientWidth);
+      }
+    });
+    resizeObserver.observe(targetDiv);
+    return () => {
+      resizeObserver.unobserve(targetDiv);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Dropdown, { dir, open, defaultOpen, onOpenChange, modal, children: [
+    /* @__PURE__ */ jsxs(SplitButtonTrigger, { $disabled: disabled, $fillWidth: fillWidth, ref, $type: type, children: [
+      /* @__PURE__ */ jsx(PrimaryButton, { disabled, $type: type, $fillWidth: fillWidth, ...props, children: /* @__PURE__ */ jsx(ButtonData, { as: IconWrapper, icon, iconDir, children }) }),
+      /* @__PURE__ */ jsx(SecondaryButton, { as: Dropdown.Trigger, disabled, $type: type, asChild: true, "data-testid": "split-button-dropdown", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-down", size: "sm" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownContent, { as: Dropdown.Content, side, $width: width, sideOffset: 4, align: "end", children: menu.map((item, index) => /* @__PURE__ */ jsx(MenuContentItem, { parentKey: `split-menu-option-${index}`, ...item }, `split-menu-option-${index}`)) })
+  ] });
+};
+const DropdownContent = styled.div.withConfig({
+  componentId: "sc-3eqh4s-0"
+})(["min-width:", "px;"], ({
+  $width
+}) => $width);
+const MenuContentItem = ({
+  items = [],
+  type = "item",
+  label,
+  icon,
+  iconDir = "start",
+  parentKey,
+  ...props
+}) => {
+  if (type === "item") {
+    return /* @__PURE__ */ jsx(Dropdown.Item, { ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children: label }) });
+  }
+  if (type === "group") {
+    return /* @__PURE__ */ jsx(Dropdown.Group, { children: items.map((item, index) => /* @__PURE__ */ jsx(MenuContentItem, { parentKey: `${parentKey}-group-${index}`, ...item }, `${parentKey}-group-${index}`)) });
+  }
+  if (type === "sub-menu") {
+    return /* @__PURE__ */ jsxs(Dropdown.Sub, { children: [
+      /* @__PURE__ */ jsx(Dropdown.Trigger, { sub: true, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children: label }) }),
+      /* @__PURE__ */ jsx(Dropdown.Content, { sub: true, children: items.map((item, index) => /* @__PURE__ */ jsx(MenuContentItem, { parentKey: `${parentKey}-sub-menu-${index}`, ...item }, `${parentKey}-sub-menu-${index}`)) })
+    ] });
+  }
+};
+const SplitButtonTrigger = styled.div.withConfig({
+  componentId: "sc-3eqh4s-1"
+})(["display:inline-flex;align-items:center;overflow:hidden;user-select:none;", ""], ({
+  theme,
+  $disabled = false,
+  $type,
+  $fillWidth
+}) => `
+    width: ${$fillWidth ? "100%" : "revert"};
+    border-radius: ${theme.click.button.radii.all};
+    border: 1px solid ${theme.click.button.split[$type].stroke.default};
+    ${$disabled ? `
+          cursor: not-allowed;
+          border-color: ${theme.click.button.split[$type].stroke.disabled};
+        ` : `
+          &:hover {
+            border-color: ${theme.click.button.split[$type].stroke.hover};
+          }
+          &:focus-within {
+            border-color: ${theme.click.button.split[$type].stroke.active};
+          }
+        `}
+  `);
+const PrimaryButton = styled(BaseButton).withConfig({
+  componentId: "sc-3eqh4s-2"
+})(["border:none;align-self:stretch;border-radius:0;align-items:center;padding:", ";", ""], ({
+  theme
+}) => `${theme.click.button.split.space.y} ${theme.click.button.split.space.x}`, ({
+  theme,
+  $type,
+  $fillWidth
+}) => `
+    width: ${$fillWidth ? "100%" : "revert"};
+    justify-content: center;
+    background: ${theme.click.button.split[$type].background.main.default};
+    color: ${theme.click.button.split[$type].text.default};
+    font: ${theme.click.button.split.typography.label.default};
+    &:hover {
+      background: ${theme.click.button.split[$type].background.main.hover};
+      color: ${theme.click.button.split[$type].text.hover};
+      font: ${theme.click.button.split.typography.label.hover};
+    }
+    &:focus {
+      background: ${theme.click.button.split[$type].background.main.active};
+      color: ${theme.click.button.split[$type].text.active};
+      font: ${theme.click.button.split.typography.label.active};
+    }
+    &:disabled {
+      background: ${theme.click.button.split[$type].background.main.disabled};
+      color: ${theme.click.button.split[$type].text.disabled};
+      font: ${theme.click.button.split.typography.label.disabled};
+    }
+  `);
+const SecondaryButton = styled(BaseButton).withConfig({
+  componentId: "sc-3eqh4s-3"
+})(["border:none;align-self:stretch;border-radius:0;", ""], ({
+  theme,
+  $type
+}) => `
+    padding: ${theme.click.button.split.icon.space.y} ${theme.click.button.split.icon.space.x};
+    background: ${theme.click.button.split[$type].background.action.default};
+    color: ${theme.click.button.split[$type].text.default};
+    &:hover {
+      background: ${theme.click.button.split[$type].background.action.hover};
+      color: ${theme.click.button.split[$type].text.hover};
+    }
+    &:focus {
+      background: ${theme.click.button.split[$type].background.action.active};
+      color: ${theme.click.button.split[$type].text.active};
+    }
+    &[data-disabled] {
+      background: ${theme.click.button.split[$type].background.action.disabled};
+      color: ${theme.click.button.split[$type].text.disabled};
+    }
+  `);
+const ButtonData = styled.div.withConfig({
+  componentId: "sc-3eqh4s-4"
+})(["width:auto;"]);
+
+export { SplitButton };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/SplitButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { Dropdown } from '@/components/Dropdown';\nimport { BaseButton } from '@/components/Button/BaseButton';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport { SplitButtonProps, Menu, ButtonType } from './SplitButton.types';\n\nexport const SplitButton = ({\n  type = 'primary',\n  disabled,\n  menu,\n  dir,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal,\n  side,\n  fillWidth,\n  children,\n  icon,\n  iconDir = 'start',\n  ...props\n}: SplitButtonProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const targetDiv = ref.current;\n    if (!targetDiv) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setWidth(entry.target.clientWidth);\n      }\n    });\n\n    resizeObserver.observe(targetDiv);\n\n    return () => {\n      resizeObserver.unobserve(targetDiv);\n    };\n  }, []);\n\n  return (\n    <Dropdown\n      dir={dir}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      <SplitButtonTrigger\n        $disabled={disabled}\n        $fillWidth={fillWidth}\n        ref={ref}\n        $type={type}\n      >\n        <PrimaryButton\n          disabled={disabled}\n          $type={type}\n          $fillWidth={fillWidth}\n          {...props}\n        >\n          <ButtonData\n            as={IconWrapper}\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </ButtonData>\n        </PrimaryButton>\n        <SecondaryButton\n          as={Dropdown.Trigger}\n          disabled={disabled}\n          $type={type}\n          asChild\n          data-testid=\"split-button-dropdown\"\n        >\n          <span>\n            <Icon\n              name=\"chevron-down\"\n              size=\"sm\"\n            />\n          </span>\n        </SecondaryButton>\n      </SplitButtonTrigger>\n      <DropdownContent\n        as={Dropdown.Content}\n        side={side}\n        $width={width}\n        sideOffset={4}\n        align=\"end\"\n      >\n        {menu.map((item: Menu, index: number) => (\n          <MenuContentItem\n            key={`split-menu-option-${index}`}\n            parentKey={`split-menu-option-${index}`}\n            {...item}\n          />\n        ))}\n      </DropdownContent>\n    </Dropdown>\n  );\n};\n\nconst DropdownContent = styled.div<{ $width: number }>`\n  min-width: ${({ $width }) => $width}px;\n`;\n\nconst MenuContentItem = ({\n  items = [],\n  type = 'item',\n  label,\n  icon,\n  iconDir = 'start',\n  parentKey,\n  ...props\n}: Menu & { parentKey: string }) => {\n  if (type === 'item') {\n    return (\n      <Dropdown.Item {...props}>\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </Dropdown.Item>\n    );\n  }\n  if (type === 'group') {\n    return (\n      <Dropdown.Group>\n        {items.map((item, index) => (\n          <MenuContentItem\n            key={`${parentKey}-group-${index}`}\n            parentKey={`${parentKey}-group-${index}`}\n            {...item}\n          />\n        ))}\n      </Dropdown.Group>\n    );\n  }\n  if (type === 'sub-menu') {\n    return (\n      <Dropdown.Sub>\n        <Dropdown.Trigger\n          sub\n          {...props}\n        >\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {label}\n          </IconWrapper>\n        </Dropdown.Trigger>\n        <Dropdown.Content sub>\n          {items.map((item, index) => (\n            <MenuContentItem\n              key={`${parentKey}-sub-menu-${index}`}\n              parentKey={`${parentKey}-sub-menu-${index}`}\n              {...item}\n            />\n          ))}\n        </Dropdown.Content>\n      </Dropdown.Sub>\n    );\n  }\n};\n\nconst SplitButtonTrigger = styled.div<{\n  $disabled?: boolean;\n  $type: ButtonType;\n  $fillWidth?: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n  ${({ theme, $disabled = false, $type, $fillWidth }) => `\n    width: ${$fillWidth ? '100%' : 'revert'};\n    border-radius: ${theme.click.button.radii.all};\n    border: 1px solid ${theme.click.button.split[$type].stroke.default};\n    ${\n      $disabled\n        ? `\n          cursor: not-allowed;\n          border-color: ${theme.click.button.split[$type].stroke.disabled};\n        `\n        : `\n          &:hover {\n            border-color: ${theme.click.button.split[$type].stroke.hover};\n          }\n          &:focus-within {\n            border-color: ${theme.click.button.split[$type].stroke.active};\n          }\n        `\n    }\n  `}\n`;\n\nconst PrimaryButton = styled(BaseButton)<{\n  $type: ButtonType;\n  $fillWidth?: boolean;\n}>`\n  border: none;\n  align-self: stretch;\n  border-radius: 0;\n  align-items: center;\n  padding: ${({ theme }) =>\n    `${theme.click.button.split.space.y} ${theme.click.button.split.space.x}`};\n  ${({ theme, $type, $fillWidth }) => `\n    width: ${$fillWidth ? '100%' : 'revert'};\n    justify-content: center;\n    background: ${theme.click.button.split[$type].background.main.default};\n    color: ${theme.click.button.split[$type].text.default};\n    font: ${theme.click.button.split.typography.label.default};\n    &:hover {\n      background: ${theme.click.button.split[$type].background.main.hover};\n      color: ${theme.click.button.split[$type].text.hover};\n      font: ${theme.click.button.split.typography.label.hover};\n    }\n    &:focus {\n      background: ${theme.click.button.split[$type].background.main.active};\n      color: ${theme.click.button.split[$type].text.active};\n      font: ${theme.click.button.split.typography.label.active};\n    }\n    &:disabled {\n      background: ${theme.click.button.split[$type].background.main.disabled};\n      color: ${theme.click.button.split[$type].text.disabled};\n      font: ${theme.click.button.split.typography.label.disabled};\n    }\n  `}\n`;\n\nconst SecondaryButton = styled(BaseButton)<{ $type: ButtonType }>`\n  border: none;\n  align-self: stretch;\n  border-radius: 0;\n  ${({ theme, $type }) => `\n    padding: ${theme.click.button.split.icon.space.y} ${theme.click.button.split.icon.space.x};\n    background: ${theme.click.button.split[$type].background.action.default};\n    color: ${theme.click.button.split[$type].text.default};\n    &:hover {\n      background: ${theme.click.button.split[$type].background.action.hover};\n      color: ${theme.click.button.split[$type].text.hover};\n    }\n    &:focus {\n      background: ${theme.click.button.split[$type].background.action.active};\n      color: ${theme.click.button.split[$type].text.active};\n    }\n    &[data-disabled] {\n      background: ${theme.click.button.split[$type].background.action.disabled};\n      color: ${theme.click.button.split[$type].text.disabled};\n    }\n  `}\n`;\n\nconst ButtonData = styled.div`\n  width: auto;\n`;\n"],"names":["SplitButton","type","disabled","menu","dir","open","defaultOpen","onOpenChange","modal","side","fillWidth","children","icon","iconDir","props","ref","useRef","width","setWidth","useState","useEffect","targetDiv","current","resizeObserver","ResizeObserver","entries","entry","target","clientWidth","observe","unobserve","IconWrapper","Dropdown","Trigger","Icon","Content","map","item","index","DropdownContent","styled","div","withConfig","componentId","$width","MenuContentItem","items","label","parentKey","SplitButtonTrigger","theme","$disabled","$type","$fillWidth","click","button","radii","all","split","stroke","default","hover","active","PrimaryButton","BaseButton","space","y","x","background","main","text","typography","SecondaryButton","action","ButtonData"],"mappings":"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"}

package/dist/esm/components/Switch/index.js

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import { forwardRef, useId } from 'react';
+import { styled } from 'styled-components';
+import { GenericLabel } from '../GenericLabel/index.js';
+import { FormRoot } from '../FormContainer/FormRoot.js';
+
+const Wrapper = styled(FormRoot).withConfig({
+  componentId: "sc-1326402-0"
+})(["align-items:center;max-width:fit-content;"]);
+const Switch = forwardRef(({
+  checked,
+  disabled,
+  orientation,
+  dir,
+  label,
+  id,
+  ...props
+}, ref) => {
+  const defaultId = useId();
+  return /* @__PURE__ */ jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
+    /* @__PURE__ */ jsx(SwitchRoot, { ref, id: id ?? defaultId, disabled, "aria-label": `${label}`, checked, ...props, children: /* @__PURE__ */ jsx(SwitchThumb, { $checked: checked, $disabled: disabled }) }),
+    label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
+  ] });
+});
+const getRootVars = (theme, disabled, checked) => {
+  if (disabled) {
+    return {
+      backgroundColor: theme.click.switch.color.background.disabled,
+      border: `1px solid ${theme.click.switch.color.stroke.disabled}`
+    };
+  } else if (checked) {
+    return {
+      backgroundColor: theme.click.switch.color.background.active,
+      border: `1px solid ${theme.click.switch.color.stroke.active}`
+    };
+  } else {
+    return {
+      backgroundColor: theme.click.switch.color.background.default,
+      border: `1px solid ${theme.click.switch.color.stroke.default}`
+    };
+  }
+};
+const getThumbVars = (theme, disabled, checked) => {
+  if (disabled) {
+    return {
+      backgroundColor: theme.click.switch.color.indicator.disabled
+    };
+  } else if (checked) {
+    return {
+      backgroundColor: theme.click.switch.color.indicator.active
+    };
+  } else {
+    return {
+      backgroundColor: theme.click.switch.color.indicator.default
+    };
+  }
+};
+const SwitchRoot = styled(RadixSwitch.Root).withConfig({
+  componentId: "sc-1326402-1"
+})((props) => {
+  const vars = getRootVars(props.theme, props.disabled ?? false, props.checked ?? false);
+  return {
+    width: props.theme.click.switch.size.width,
+    height: props.theme.click.switch.size.height,
+    backgroundColor: vars.backgroundColor,
+    border: vars.border,
+    borderRadius: props.theme.click.switch.radii.all,
+    position: "relative",
+    padding: 0,
+    cursor: props.disabled ? "not-allowed" : "pointer"
+  };
+});
+const SwitchThumb = styled(RadixSwitch.Thumb).withConfig({
+  componentId: "sc-1326402-2"
+})((props) => {
+  const vars = getThumbVars(props.theme, props.$disabled, props.$checked);
+  return {
+    display: "block",
+    width: "12px",
+    height: "12px",
+    backgroundColor: vars.backgroundColor,
+    borderRadius: props.theme.click.switch.radii.all,
+    transition: "transform 100ms",
+    transform: props.$checked ? "translateX(15px)" : "translateX(2px)",
+    willChange: "transform"
+  };
+});
+
+export { Switch };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport { styled } from 'styled-components';\nimport { FormRoot } from '@/components/FormContainer';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { SwitchProps } from './Switch.types';\nimport type { Theme } from '@/theme/theme.types';\n\ninterface ThumbProps {\n  $checked: boolean;\n  $disabled?: boolean;\n}\n\nconst Wrapper = styled(FormRoot)`\n  align-items: center;\n  max-width: fit-content;\n`;\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ checked, disabled, orientation, dir, label, id, ...props }, ref) => {\n    const defaultId = useId();\n    return (\n      <Wrapper\n        $orientation={orientation}\n        $dir={dir}\n      >\n        <SwitchRoot\n          ref={ref}\n          id={id ?? defaultId}\n          disabled={disabled}\n          aria-label={`${label}`}\n          checked={checked}\n          {...props}\n        >\n          <SwitchThumb\n            $checked={checked}\n            $disabled={disabled}\n          />\n        </SwitchRoot>\n        {label && (\n          <GenericLabel\n            htmlFor={id ?? defaultId}\n            disabled={disabled}\n          >\n            {label}\n          </GenericLabel>\n        )}\n      </Wrapper>\n    );\n  }\n);\n\nconst getRootVars = (theme: Theme, disabled: boolean | undefined, checked: boolean) => {\n  if (disabled) {\n    return {\n      backgroundColor: theme.click.switch.color.background.disabled,\n      border: `1px solid ${theme.click.switch.color.stroke.disabled}`,\n    };\n  } else if (checked) {\n    return {\n      backgroundColor: theme.click.switch.color.background.active,\n      border: `1px solid ${theme.click.switch.color.stroke.active}`,\n    };\n  } else {\n    return {\n      backgroundColor: theme.click.switch.color.background.default,\n      border: `1px solid ${theme.click.switch.color.stroke.default}`,\n    };\n  }\n};\n\nconst getThumbVars = (theme: Theme, disabled: boolean | undefined, checked: boolean) => {\n  if (disabled) {\n    return {\n      backgroundColor: theme.click.switch.color.indicator.disabled,\n    };\n  } else if (checked) {\n    return {\n      backgroundColor: theme.click.switch.color.indicator.active,\n    };\n  } else {\n    return {\n      backgroundColor: theme.click.switch.color.indicator.default,\n    };\n  }\n};\n\nconst SwitchRoot = styled(RadixSwitch.Root)(props => {\n  const vars = getRootVars(props.theme, props.disabled ?? false, props.checked ?? false);\n\n  return {\n    width: props.theme.click.switch.size.width,\n    height: props.theme.click.switch.size.height,\n    backgroundColor: vars.backgroundColor,\n    border: vars.border,\n    borderRadius: props.theme.click.switch.radii.all,\n    position: 'relative',\n    padding: 0,\n    cursor: props.disabled ? 'not-allowed' : 'pointer',\n  };\n});\n\nconst SwitchThumb = styled(RadixSwitch.Thumb)<ThumbProps>(props => {\n  const vars = getThumbVars(props.theme, props.$disabled, props.$checked);\n\n  return {\n    display: 'block',\n    width: '12px',\n    height: '12px',\n    backgroundColor: vars.backgroundColor,\n    borderRadius: props.theme.click.switch.radii.all,\n    transition: 'transform 100ms',\n    transform: props.$checked ? 'translateX(15px)' : 'translateX(2px)',\n    willChange: 'transform',\n  };\n});\n"],"names":["Wrapper","styled","FormRoot","withConfig","componentId","Switch","forwardRef","checked","disabled","orientation","dir","label","id","props","ref","defaultId","useId","getRootVars","theme","backgroundColor","click","switch","color","background","border","stroke","active","default","getThumbVars","indicator","SwitchRoot","RadixSwitch","Root","vars","width","size","height","borderRadius","radii","all","position","padding","cursor","SwitchThumb","Thumb","$disabled","$checked","display","transition","transform","willChange"],"mappings":"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"}