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

package/dist/cjs/components/Select/common/SelectStyled.cjs

@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const RadixPopover = require('@radix-ui/react-popover');
+const styledComponents = require('styled-components');
+
+const SelectPopoverRoot = styledComponents.styled(RadixPopover.Root).withConfig({
+  componentId: "sc-80hrfj-0"
+})(["width:100%;"]);
+const SelectValue = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-1"
+})(["text-align:left;flex:1;gap:inherit;color:inherit;font:inherit;overflow:hidden;"]);
+const StyledSelectTrigger = styledComponents.styled(RadixPopover.Trigger).withConfig({
+  componentId: "sc-80hrfj-2"
+})(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;min-height:", ";span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
+  theme
+}) => theme.click.genericMenu.panel.size.height, ({
+  theme,
+  $error
+}) => `
+    border-radius: ${theme.click.field.radii.all};
+    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};
+    gap: ${theme.click.field.space.gap};
+    font: ${theme.click.field.typography.fieldText.default};
+    color: ${theme.click.field.color.text.default};
+    border: 1px solid ${theme.click.field.color.stroke.default};
+    background: ${theme.click.field.color.background.default};
+    &:hover {
+      border: 1px solid ${theme.click.field.color.stroke.hover};
+      background: ${theme.click.field.color.background.hover};
+      color: ${theme.click.field.color.text.hover};
+    }
+    ${$error ? `
+      font: ${theme.click.field.typography.fieldText.error};
+      border: 1px solid ${theme.click.field.color.stroke.error};
+      background: ${theme.click.field.color.background.active};
+      color: ${theme.click.field.color.text.error};
+      &:hover {
+      border: 1px solid ${theme.click.field.color.stroke.error};
+      color: ${theme.click.field.color.text.error};
+      }
+    ` : `
+    &:focus,
+    &[data-state="open"] {
+      font: ${theme.click.field.typography.fieldText.active};
+      border: 1px solid ${theme.click.field.color.stroke.active};
+      background: ${theme.click.field.color.background.active};
+      color: ${theme.click.field.color.text.active};
+      & ~ label {
+        color: ${theme.click.field.color.label.active};
+        font: ${theme.click.field.typography.label.active};;
+      }
+    }
+    `};
+    &:focus-visible {
+      outline: 2px solid ${theme.click.global.color.outline.default};
+      outline-offset: 2px;
+    }
+    &:disabled {
+      font: ${theme.click.field.typography.fieldText.disabled};
+      border: 1px solid ${theme.click.field.color.stroke.disabled};
+      background: ${theme.click.field.color.background.disabled};
+      color: ${theme.click.field.color.text.disabled};
+      cursor: not-allowed;
+    }
+  `);
+const SelectPopoverContent = styledComponents.styled(RadixPopover.Content).withConfig({
+  componentId: "sc-80hrfj-3"
+})(["width:var(--radix-popover-trigger-width);max-height:var(--radix-popover-content-available-height);border-radius:0.25rem;pointer-events:auto;", " ", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
+  $useFullWidthItems,
+  $itemCharacterLimit
+}) => `
+    ${$useFullWidthItems ? `
+      max-width: ${$itemCharacterLimit};
+      min-width: var(--radix-popover-trigger-width);
+      width: 100%;
+    ` : "width: var(--radix-popover-trigger-width)"};
+  `, ({
+  theme
+}) => `
+    border: 1px solid ${theme.click.genericMenu.item.color.default.stroke.default};
+    background: ${theme.click.genericMenu.item.color.default.background.default};
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
+      0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    border-radius: 0.25rem;
+  `);
+const SearchBarContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-4"
+})(["width:auto;position:relative;display:flex;justify-content:flex-start;align-items:center;", ""], ({
+  theme,
+  $showSearch
+}) => `
+    padding: ${$showSearch ? `${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x}` : 0};
+    color: ${theme.click.genericMenu.autocomplete.color.searchTerm.default};
+    font: ${theme.click.genericMenu.autocomplete.typography.search.term.default};
+    height: ${$showSearch ? "auto" : " 0"};
+  `);
+const SearchBar = styledComponents.styled.input.withConfig({
+  componentId: "sc-80hrfj-5"
+})(["background:transparent;border:none;width:100%;outline:none;", ""], ({
+  theme,
+  $showSearch
+}) => `
+    min-height: ${$showSearch ? "21px" : 0};
+    height: ${$showSearch ? "initial" : 0};
+    ${$showSearch ? "padding-right: 24px" : "padding:0"};
+
+    gap: ${theme.click.genericMenu.item.space.gap};
+    font: ${theme.click.genericMenu.autocomplete.typography.search.term.default};
+    border-bottom: ${$showSearch ? `2px solid ${theme.click.genericMenu.button.color.stroke.default}` : 0};
+    color: ${theme.click.genericMenu.autocomplete.color.searchTerm.default};
+    &::placeholder {
+      color: ${theme.click.genericMenu.autocomplete.color.placeholder.default};
+      font: ${theme.click.genericMenu.autocomplete.typography.search.placeholder.default};
+    }
+  `);
+const SearchClose = styledComponents.styled.button.withConfig({
+  componentId: "sc-80hrfj-6"
+})(["position:absolute;", " visibility:", ";"], ({
+  theme
+}) => `
+    top: ${theme.click.genericMenu.item.space.y};
+    right: ${theme.click.genericMenu.item.space.x};
+  `, ({
+  $showClose
+}) => $showClose ? "visible" : "hidden");
+const SelectList = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-7"
+})(["display:flex;flex-direction:column;width:inherit;max-height:calc(var(--radix-popover-content-available-height) - 1rem);"]);
+const SelectListContent = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-8"
+})(["width:inherit;overflow:auto;flex:1;", ""], ({
+  $maxHeight
+}) => $maxHeight && `
+      max-height: ${$maxHeight};
+    `);
+const HiddenSelectElement = styledComponents.styled.select.withConfig({
+  componentId: "sc-80hrfj-9"
+})(["visibility:hidden;position:absolute;z-index:-1;height:0;"]);
+const SelectGroupContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-10"
+})(["display:flex;flex-direction:column;justify-content:center;width:-webkit-fill-available;width:fill-available;width:stretch;overflow:hidden;background:transparent;&[aria-selected]{outline:none;}", ";&[hidden]{display:none;}"], ({
+  theme
+}) => `
+    font: ${theme.click.genericMenu.item.typography.sectionHeader.default};
+    color: ${theme.click.genericMenu.item.color.default.text.muted};
+  `);
+const SelectGroupName = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-11"
+})(["display:flex;width:100%;flex-direction:column;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;", ""], ({
+  theme
+}) => `
+     font: ${theme.click.genericMenu.item.typography.sectionHeader.default};
+     color: ${theme.click.genericMenu.item.color.default.text.muted};
+     padding: ${theme.click.genericMenu.sectionHeader.space.top} ${theme.click.genericMenu.item.space.x} ${theme.click.genericMenu.sectionHeader.space.bottom};
+     gap: ${theme.click.genericMenu.item.space.gap};
+     border-bottom: 1px solid ${theme.click.genericMenu.item.color.default.stroke.default};
+   `);
+const SelectGroupContent = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-12"
+})(["width:inherit;"]);
+const SelectNoDataContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-13"
+})(["border:none;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;&[hidden='true']{display:none;}", ""], ({
+  theme,
+  $clickable
+}) => `
+    font: ${theme.click.genericMenu.button.typography.label.default}
+    padding: ${theme.click.genericMenu.button.space.y} ${theme.click.genericMenu.item.space.x};
+    background: ${theme.click.genericMenu.button.color.background.default};
+    color: ${theme.click.genericMenu.button.color.label.default};
+    cursor: ${$clickable ? "pointer" : "default"}
+  `);
+const SelectItemDescriptionText = styledComponents.styled.div.withConfig({
+  componentId: "sc-80hrfj-14"
+})(["white-space:normal;[data-disabled] &,[disabled] &{color:inherit;}", " &{display:none;}"], StyledSelectTrigger);
+
+exports.HiddenSelectElement = HiddenSelectElement;
+exports.SearchBar = SearchBar;
+exports.SearchBarContainer = SearchBarContainer;
+exports.SearchClose = SearchClose;
+exports.SelectGroupContainer = SelectGroupContainer;
+exports.SelectGroupContent = SelectGroupContent;
+exports.SelectGroupName = SelectGroupName;
+exports.SelectItemDescriptionText = SelectItemDescriptionText;
+exports.SelectList = SelectList;
+exports.SelectListContent = SelectListContent;
+exports.SelectNoDataContainer = SelectNoDataContainer;
+exports.SelectPopoverContent = SelectPopoverContent;
+exports.SelectPopoverRoot = SelectPopoverRoot;
+exports.SelectValue = SelectValue;
+exports.StyledSelectTrigger = StyledSelectTrigger;
+//# sourceMappingURL=SelectStyled.cjs.map

package/dist/cjs/components/Select/common/SelectStyled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectStyled.cjs","sources":["../../../../../src/components/Select/common/SelectStyled.tsx"],"sourcesContent":["import { Content, Root, Trigger } from '@radix-ui/react-popover';\nimport { styled } from 'styled-components';\n\nexport const SelectPopoverRoot = styled(Root)`\n  width: 100%;\n`;\n\nexport const SelectValue = styled.div`\n  text-align: left;\n  flex: 1;\n  gap: inherit;\n  color: inherit;\n  font: inherit;\n  overflow: hidden;\n`;\n\nexport const StyledSelectTrigger = styled(Trigger)<{ $error: boolean }>`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  min-height: ${({ theme }) => theme.click.genericMenu.panel.size.height};\n\n  span:first-of-type {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  ${({ theme, $error }) => `\n    border-radius: ${theme.click.field.radii.all};\n    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};\n    gap: ${theme.click.field.space.gap};\n    font: ${theme.click.field.typography.fieldText.default};\n    color: ${theme.click.field.color.text.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    background: ${theme.click.field.color.background.default};\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${theme.click.field.color.background.hover};\n      color: ${theme.click.field.color.text.hover};\n    }\n    ${\n      $error\n        ? `\n      font: ${theme.click.field.typography.fieldText.error};\n      border: 1px solid ${theme.click.field.color.stroke.error};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.error};\n      &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.error};\n      color: ${theme.click.field.color.text.error};\n      }\n    `\n        : `\n    &:focus,\n    &[data-state=\"open\"] {\n      font: ${theme.click.field.typography.fieldText.active};\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.active};\n      & ~ label {\n        color: ${theme.click.field.color.label.active};\n        font: ${theme.click.field.typography.label.active};;\n      }\n    }\n    `\n    };\n    &:focus-visible {\n      outline: 2px solid ${theme.click.global.color.outline.default};\n      outline-offset: 2px;\n    }\n    &:disabled {\n      font: ${theme.click.field.typography.fieldText.disabled};\n      border: 1px solid ${theme.click.field.color.stroke.disabled};\n      background: ${theme.click.field.color.background.disabled};\n      color: ${theme.click.field.color.text.disabled};\n      cursor: not-allowed;\n    }\n  `}\n  [data-hide-in-trigger] {\n    display: none;\n  }\n`;\n\nexport const SelectPopoverContent = styled(Content)<{\n  $useFullWidthItems: boolean;\n  $itemCharacterLimit?: string;\n}>`\n  width: var(--radix-popover-trigger-width);\n  max-height: var(--radix-popover-content-available-height);\n  border-radius: 0.25rem;\n  pointer-events: auto;\n\n  ${({ $useFullWidthItems, $itemCharacterLimit }) => `\n    ${\n      $useFullWidthItems\n        ? `\n      max-width: ${$itemCharacterLimit};\n      min-width: var(--radix-popover-trigger-width);\n      width: 100%;\n    `\n        : 'width: var(--radix-popover-trigger-width)'\n    };\n  `}\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.item.color.default.stroke.default};\n    background: ${theme.click.genericMenu.item.color.default.background.default};\n    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),\n      0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n    border-radius: 0.25rem;\n  `}\n  overflow: hidden;\n  display: flex;\n  padding: 0.5rem 0rem;\n  align-items: flex-start;\n  gap: 0.625rem;\n`;\n\nexport const SearchBarContainer = styled.div<{ $showSearch: boolean }>`\n  width: auto;\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  ${({ theme, $showSearch }) => `\n    padding: ${\n      $showSearch\n        ? `${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x}`\n        : 0\n    };\n    color: ${theme.click.genericMenu.autocomplete.color.searchTerm.default};\n    font: ${theme.click.genericMenu.autocomplete.typography.search.term.default};\n    height: ${$showSearch ? 'auto' : ' 0'};\n  `}\n`;\n\nexport const SearchBar = styled.input<{ $showSearch: boolean }>`\n  background: transparent;\n  border: none;\n  width: 100%;\n  outline: none;\n  ${({ theme, $showSearch }) => `\n    min-height: ${$showSearch ? '21px' : 0};\n    height: ${$showSearch ? 'initial' : 0};\n    ${$showSearch ? 'padding-right: 24px' : 'padding:0'};\n\n    gap: ${theme.click.genericMenu.item.space.gap};\n    font: ${theme.click.genericMenu.autocomplete.typography.search.term.default};\n    border-bottom: ${\n      $showSearch ? `2px solid ${theme.click.genericMenu.button.color.stroke.default}` : 0\n    };\n    color: ${theme.click.genericMenu.autocomplete.color.searchTerm.default};\n    &::placeholder {\n      color: ${theme.click.genericMenu.autocomplete.color.placeholder.default};\n      font: ${theme.click.genericMenu.autocomplete.typography.search.placeholder.default};\n    }\n  `}\n`;\n\nexport const SearchClose = styled.button<{ $showClose: boolean }>`\n  position: absolute;\n  ${({ theme }) => `\n    top: ${theme.click.genericMenu.item.space.y};\n    right: ${theme.click.genericMenu.item.space.x};\n  `}\n  visibility: ${({ $showClose }) => ($showClose ? 'visible' : 'hidden')};\n`;\n\n/*\n  Added the max-height with calc as the content should always be fit inside SelectPopoverContent\n  SelectPopoverContent has hardcoded padding and thats why we are using 1 rem instead of tokens\n  This makes sure that the content is always visible with the scrolling\n*/\nexport const SelectList = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: inherit;\n  max-height: calc(var(--radix-popover-content-available-height) - 1rem);\n`;\nexport const SelectListContent = styled.div<{ $maxHeight?: string }>`\n  width: inherit;\n  overflow: auto;\n  flex: 1;\n\n  ${({ $maxHeight }) =>\n    $maxHeight &&\n    `\n      max-height: ${$maxHeight};\n    `}\n`;\n\nexport const HiddenSelectElement = styled.select`\n  visibility: hidden;\n  position: absolute;\n  z-index: -1;\n  height: 0;\n`;\n\nexport const SelectGroupContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  overflow: hidden;\n  background: transparent;\n  &[aria-selected] {\n    outline: none;\n  }\n\n  ${({ theme }) => `\n    font: ${theme.click.genericMenu.item.typography.sectionHeader.default};\n    color: ${theme.click.genericMenu.item.color.default.text.muted};\n  `};\n  &[hidden] {\n    display: none;\n  }\n`;\n\nexport const SelectGroupName = styled.div`\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  ${({ theme }) => `\n     font: ${theme.click.genericMenu.item.typography.sectionHeader.default};\n     color: ${theme.click.genericMenu.item.color.default.text.muted};\n     padding: ${theme.click.genericMenu.sectionHeader.space.top} ${theme.click.genericMenu.item.space.x} ${theme.click.genericMenu.sectionHeader.space.bottom};\n     gap: ${theme.click.genericMenu.item.space.gap};\n     border-bottom: 1px solid ${theme.click.genericMenu.item.color.default.stroke.default};\n   `}\n`;\n\nexport const SelectGroupContent = styled.div`\n  width: inherit;\n`;\n\nexport const SelectNoDataContainer = styled.div<{ $clickable: boolean }>`\n  border: none;\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: left;\n\n  &[hidden='true'] {\n    display: none;\n  }\n  ${({ theme, $clickable }) => `\n    font: ${theme.click.genericMenu.button.typography.label.default}\n    padding: ${theme.click.genericMenu.button.space.y} ${\n      theme.click.genericMenu.item.space.x\n    };\n    background: ${theme.click.genericMenu.button.color.background.default};\n    color: ${theme.click.genericMenu.button.color.label.default};\n    cursor: ${$clickable ? 'pointer' : 'default'}\n  `}\n`;\n\nexport const SelectItemDescriptionText = styled.div`\n  white-space: normal;\n\n  [data-disabled] &,\n  [disabled] & {\n    color: inherit;\n  }\n\n  // don't show description when item is rendered in the trigger\n  ${StyledSelectTrigger} & {\n    display: none;\n  }\n`;\n"],"names":["SelectPopoverRoot","styled","Root","withConfig","componentId","SelectValue","div","StyledSelectTrigger","Trigger","theme","click","genericMenu","panel","size","height","$error","field","radii","all","space","y","x","gap","typography","fieldText","default","color","text","stroke","background","hover","error","active","label","global","outline","disabled","SelectPopoverContent","Content","$useFullWidthItems","$itemCharacterLimit","item","SearchBarContainer","$showSearch","autocomplete","searchTerm","search","term","SearchBar","input","button","placeholder","SearchClose","$showClose","SelectList","SelectListContent","$maxHeight","HiddenSelectElement","select","SelectGroupContainer","sectionHeader","muted","SelectGroupName","top","bottom","SelectGroupContent","SelectNoDataContainer","$clickable","SelectItemDescriptionText"],"mappings":"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"}

package/dist/cjs/components/Select/common/useOption.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const OptionContext = require('./OptionContext.cjs');
+
+const useOption = () => {
+  const result = react.useContext(OptionContext.OptionContext);
+  if (!result) {
+    throw new Error("Context used outside of its Provider!");
+  }
+  return result;
+};
+const useSearch = () => {
+  const {
+    search
+  } = useOption();
+  return search;
+};
+
+exports.useOption = useOption;
+exports.useSearch = useSearch;
+//# sourceMappingURL=useOption.cjs.map

package/dist/cjs/components/Select/common/useOption.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOption.cjs","sources":["../../../../../src/components/Select/common/useOption.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { OptionContext } from './OptionContext';\n\nexport const useOption = () => {\n  const result = useContext(OptionContext);\n  if (!result) {\n    throw new Error('Context used outside of its Provider!');\n  }\n  return result;\n};\n\nexport const useSearch = () => {\n  const { search } = useOption();\n  return search;\n};\n"],"names":["useOption","result","useContext","OptionContext","Error","useSearch","search"],"mappings":";;;;;;;AAGO,MAAMA,YAAYA,MAAM;AAC7B,EAAA,MAAMC,MAAAA,GAASC,iBAAWC,2BAAa,CAAA;AACvC,EAAA,IAAI,CAACF,MAAAA,EAAQ;AACX,IAAA,MAAM,IAAIG,MAAM,uCAAuC,CAAA;AAAA,EACzD;AACA,EAAA,OAAOH,MAAAA;AACT;AAEO,MAAMI,YAAYA,MAAM;AAC7B,EAAA,MAAM;AAAA,IAAEC;AAAAA,MAAWN,SAAAA,EAAU;AAC7B,EAAA,OAAOM,MAAAA;AACT;;;;;"}

package/dist/cjs/components/Select/index.cjs

@@ -0,0 +1,60 @@
+'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('./common/InternalSelect.cjs');
+
+const Select = ({
+  value: valueProp,
+  defaultValue,
+  onSelect: onSelectProp,
+  options,
+  children,
+  onOpenChange: onOpenChangeProp,
+  ...props
+}) => {
+  const [selectedValues, setSelectedValues] = react.useState(typeof valueProp === "string" ? [valueProp] : typeof defaultValue === "string" ? [defaultValue] : []);
+  const [open, setOpen] = react.useState(false);
+  const onOpenChange = react.useCallback((open2) => {
+    setOpen(open2);
+    if (typeof onOpenChangeProp === "function") {
+      onOpenChangeProp(open2);
+    }
+  }, [onOpenChangeProp]);
+  const onSelect = react.useCallback((value, type, evt) => {
+    setSelectedValues((values) => {
+      if (values[0] !== value) {
+        return [value];
+      }
+      return values;
+    });
+    onOpenChange(false);
+    if (typeof onSelectProp === "function") {
+      onSelectProp(value, type, evt);
+    }
+  }, [onSelectProp, onOpenChange]);
+  const onChange = react.useCallback((values) => {
+    if (values[0] !== selectedValues[0]) {
+      onSelect(values[0]);
+    }
+  }, [selectedValues, onSelect]);
+  useUpdateEffect.useUpdateEffect(() => {
+    setSelectedValues(typeof valueProp === "string" ? [valueProp] : []);
+  }, [valueProp]);
+  const conditionalProps = {};
+  if (options) {
+    conditionalProps.options = options;
+  } else {
+    conditionalProps.children = children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(InternalSelect.InternalSelect, { onChange, value: typeof valueProp === "string" ? [valueProp] : selectedValues, open, onOpenChange, onSelect, ...conditionalProps, ...props });
+};
+Select.Group = InternalSelect.SelectGroup;
+Select.Item = InternalSelect.SelectItem;
+Select.ItemDescription = InternalSelect.SelectItemDescription;
+
+exports.Select = Select;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, useCallback, useState } from 'react';\n\nimport { useUpdateEffect } from '@/hooks/internal';\n\nimport type { SelectProps, SelectOptionProp, SelectionType } from './Select.types';\nimport {\n  InternalSelect,\n  SelectGroup,\n  SelectItem,\n  SelectItemDescription,\n} from './common/InternalSelect';\n\nexport const Select = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  onOpenChange: onOpenChangeProp,\n  ...props\n}: SelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    typeof valueProp === 'string'\n      ? [valueProp]\n      : typeof defaultValue === 'string'\n        ? [defaultValue]\n        : []\n  );\n  const [open, setOpen] = useState(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  const onSelect = useCallback(\n    (\n      value: string,\n      type?: SelectionType,\n      evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>\n    ) => {\n      setSelectedValues(values => {\n        if (values[0] !== value) {\n          return [value];\n        }\n        return values;\n      });\n      onOpenChange(false);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(value, type, evt);\n      }\n    },\n    [onSelectProp, onOpenChange]\n  );\n\n  const onChange = useCallback(\n    (values: string[]) => {\n      if (values[0] !== selectedValues[0]) {\n        onSelect(values[0]);\n      }\n    },\n    [selectedValues, onSelect]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(typeof valueProp === 'string' ? [valueProp] : []);\n  }, [valueProp]);\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={typeof valueProp === 'string' ? [valueProp] : selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nSelect.Group = SelectGroup;\nSelect.Item = SelectItem;\nSelect.ItemDescription = SelectItemDescription;\n"],"names":["Select","value","valueProp","defaultValue","onSelect","onSelectProp","options","children","onOpenChange","onOpenChangeProp","props","selectedValues","setSelectedValues","useState","open","setOpen","useCallback","type","evt","values","onChange","useUpdateEffect","conditionalProps","InternalSelect","Group","SelectGroup","Item","SelectItem","ItemDescription","SelectItemDescription"],"mappings":";;;;;;;;;AAYO,MAAMA,SAASA,CAAC;AAAA,EACrBC,KAAAA,EAAOC,SAAAA;AAAAA,EACPC,YAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,YAAAA,EAAcC,gBAAAA;AAAAA,EACd,GAAGC;AACQ,CAAA,KAAM;AACjB,EAAA,MAAM,CAACC,cAAAA,EAAgBC,iBAAiB,IAAIC,cAAAA,CAC1C,OAAOX,cAAc,QAAA,GACjB,CAACA,SAAS,CAAA,GACV,OAAOC,YAAAA,KAAiB,QAAA,GACtB,CAACA,YAAY,CAAA,GACb,EACR,CAAA;AACA,EAAA,MAAM,CAACW,IAAAA,EAAMC,OAAO,CAAA,GAAIF,eAAS,KAAK,CAAA;AAEtC,EAAA,MAAML,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;AAEA,EAAA,MAAML,QAAAA,GAAWY,iBAAAA,CACf,CACEf,KAAAA,EACAgB,MACAC,GAAAA,KACG;AACHN,IAAAA,iBAAAA,CAAkBO,CAAAA,MAAAA,KAAU;AAC1B,MAAA,IAAIA,MAAAA,CAAO,CAAC,CAAA,KAAMlB,KAAAA,EAAO;AACvB,QAAA,OAAO,CAACA,KAAK,CAAA;AAAA,MACf;AACA,MAAA,OAAOkB,MAAAA;AAAAA,IACT,CAAC,CAAA;AACDX,IAAAA,YAAAA,CAAa,KAAK,CAAA;AAClB,IAAA,IAAI,OAAOH,iBAAiB,UAAA,EAAY;AACtCA,MAAAA,YAAAA,CAAaJ,KAAAA,EAAOgB,MAAMC,GAAG,CAAA;AAAA,IAC/B;AAAA,EACF,CAAA,EACA,CAACb,YAAAA,EAAcG,YAAY,CAC7B,CAAA;AAEA,EAAA,MAAMY,QAAAA,GAAWJ,iBAAAA,CACf,CAACG,MAAAA,KAAqB;AACpB,IAAA,IAAIA,MAAAA,CAAO,CAAC,CAAA,KAAMR,cAAAA,CAAe,CAAC,CAAA,EAAG;AACnCP,MAAAA,QAAAA,CAASe,MAAAA,CAAO,CAAC,CAAC,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EACA,CAACR,cAAAA,EAAgBP,QAAQ,CAC3B,CAAA;AAEAiB,EAAAA,+BAAAA,CAAgB,MAAM;AACpBT,IAAAA,iBAAAA,CAAkB,OAAOV,SAAAA,KAAc,QAAA,GAAW,CAACA,SAAS,CAAA,GAAI,EAAE,CAAA;AAAA,EACpE,CAAA,EAAG,CAACA,SAAS,CAAC,CAAA;AAEd,EAAA,MAAMoB,mBAA8C,EAAC;AACrD,EAAA,IAAIhB,OAAAA,EAAS;AACXgB,IAAAA,gBAAAA,CAAiBhB,OAAAA,GAAUA,OAAAA;AAAAA,EAC7B,CAAA,MAAO;AACLgB,IAAAA,gBAAAA,CAAiBf,QAAAA,GAAWA,QAAAA;AAAAA,EAC9B;AAEA,EAAA,sCACGgB,6BAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAO,OAAOrB,cAAc,QAAA,GAAW,CAACA,SAAS,CAAA,GAAIS,gBACrD,IAAA,EACA,YAAA,EACA,UACA,GAAIW,gBAAAA,EACJ,GAAIZ,KAAAA,EAAM,CAAA;AAGhB;AAEAV,MAAAA,CAAOwB,KAAAA,GAAQC,0BAAAA;AACfzB,MAAAA,CAAO0B,IAAAA,GAAOC,yBAAAA;AACd3B,MAAAA,CAAO4B,eAAAA,GAAkBC,oCAAAA;;;;"}

package/dist/cjs/components/Separator/index.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const RadixSeparator = require('@radix-ui/react-separator');
+
+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 RadixSeparator__namespace = /*#__PURE__*/_interopNamespace(RadixSeparator);
+
+const CUISeparator = styledComponents.styled(RadixSeparator__namespace.Root).withConfig({
+  componentId: "sc-p0x6f-0"
+})(["", ""], ({
+  theme,
+  size,
+  orientation
+}) => `
+    &[data-orientation="horizontal"] {
+      width: 100%;
+      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};
+    }
+    &[data-orientation="vertical"] {
+      height: 100%;
+      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};
+    }
+    margin: ${orientation === "horizontal" ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}` : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`}
+  `);
+const Separator = ({
+  orientation = "horizontal",
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(CUISeparator, { orientation, ...props });
+
+exports.Separator = Separator;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport * as RadixSeparator from '@radix-ui/react-separator';\nimport { SeparatorProps } from './Separator.types';\nconst CUISeparator = styled(RadixSeparator.Root)<SeparatorProps>`\n  ${({ theme, size, orientation }) => `\n    &[data-orientation=\"horizontal\"] {\n      width: 100%;\n      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};\n    }\n    &[data-orientation=\"vertical\"] {\n      height: 100%;\n      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};\n    }\n    margin: ${\n      orientation === 'horizontal'\n        ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}`\n        : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`\n    }\n  `}\n`;\n\nexport const Separator = ({ orientation = 'horizontal', ...props }: SeparatorProps) => (\n  <CUISeparator\n    orientation={orientation}\n    {...props}\n  />\n);\n"],"names":["CUISeparator","styled","RadixSeparator","Root","withConfig","componentId","theme","size","orientation","click","separator","color","stroke","default","horizontal","space","y","x","all","vertical","Separator","props","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,YAAAA,GAAeC,uBAAAA,CAAOC,yBAAAA,CAAeC,IAAI,EAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC5C,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,IAAAA;AAAAA,EAAMC;AAAY,CAAA,KAAM;AAAA;AAAA;AAAA,kCAAA,EAGFF,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA,oCAAA,EAIxCP,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA;AAAA,YAAA,EAG1EL,gBAAgB,YAAA,GACZ,CAAA,EAAGF,KAAAA,CAAMG,KAAAA,CAAMC,UAAUI,UAAAA,CAAWC,KAAAA,CAAMC,CAAAA,CAAET,IAAI,CAAC,CAAA,CAAA,EAAID,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUI,WAAWC,KAAAA,CAAME,CAAAA,CAAEC,GAAG,CAAA,CAAA,GACjG,GAAGZ,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUS,QAAAA,CAASJ,MAAMC,CAAAA,CAAEE,GAAG,CAAA,CAAA,EAAIZ,KAAAA,CAAMG,MAAMC,SAAAA,CAAUS,QAAAA,CAASJ,MAAME,CAAAA,CAAEV,IAAI,CAAC,CAAA,CAAE;AAAA,EAAA,CAEtG,CAAA;AAGI,MAAMa,YAAYA,CAAC;AAAA,EAAEZ,WAAAA,GAAc,YAAA;AAAA,EAAc,GAAGa;AAAsB,CAAA,qBAC/EC,cAAA,CAAC,YAAA,EAAA,EACC,WAAA,EACA,GAAID,KAAAA,EAAM;;;;"}

package/dist/cjs/components/SidebarCollapsibleItem/index.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const Collapsible = require('../Collapsible/index.cjs');
+const SidebarNavigationItem = require('../SidebarNavigationItem/index.cjs');
+
+const SidebarCollapsibleItem = react.forwardRef(({
+  label,
+  children,
+  open,
+  onOpenChange,
+  iconDir = "start",
+  indicatorDir = "start",
+  icon,
+  level = 0,
+  selected,
+  type = "main",
+  ...props
+}, ref) => {
+  if (!label) {
+    return;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible.Collapsible, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SidebarNavigationItem.SidebarItemWrapper, { ref, as: Collapsible.Collapsible.Header, icon, iconDir, indicatorDir, $collapsible: true, $level: level, $type: type, "data-selected": selected, wrapInTrigger: type === "main", ...props, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Collapsible.Content, { indicatorDir, children })
+  ] });
+});
+
+exports.SidebarCollapsibleItem = SidebarCollapsibleItem;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Collapsible } from '@/components/Collapsible';\nimport { SidebarItemWrapper } from '@/components/SidebarNavigationItem';\nimport { SidebarCollapsibleItemProps } from './SidebarCollapsibleItem.types';\n\nexport const SidebarCollapsibleItem = forwardRef<\n  HTMLDivElement,\n  SidebarCollapsibleItemProps\n>(\n  (\n    {\n      label,\n      children,\n      open,\n      onOpenChange,\n      iconDir = 'start',\n      indicatorDir = 'start',\n      icon,\n      level = 0,\n      selected,\n      type = 'main',\n      ...props\n    },\n    ref\n  ) => {\n    if (!label) {\n      return;\n    }\n    return (\n      <Collapsible\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        <SidebarItemWrapper\n          ref={ref}\n          as={Collapsible.Header}\n          icon={icon}\n          iconDir={iconDir}\n          indicatorDir={indicatorDir}\n          $collapsible\n          $level={level}\n          $type={type}\n          data-selected={selected}\n          wrapInTrigger={type === 'main'}\n          {...props}\n        >\n          {label}\n        </SidebarItemWrapper>\n        <Collapsible.Content indicatorDir={indicatorDir}>{children}</Collapsible.Content>\n      </Collapsible>\n    );\n  }\n);\n"],"names":["SidebarCollapsibleItem","forwardRef","label","children","open","onOpenChange","iconDir","indicatorDir","icon","level","selected","type","props","ref","jsxs","Collapsible","jsx","SidebarItemWrapper","Header"],"mappings":";;;;;;;;;AAKO,MAAMA,sBAAAA,GAAyBC,iBAIpC,CACE;AAAA,EACEC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC,YAAAA,GAAe,OAAA;AAAA,EACfC,IAAAA;AAAAA,EACAC,KAAAA,GAAQ,CAAA;AAAA,EACRC,QAAAA;AAAAA,EACAC,IAAAA,GAAO,MAAA;AAAA,EACP,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,IAAI,CAACX,KAAAA,EAAO;AACV,IAAA;AAAA,EACF;AACA,EAAA,uBACEY,eAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,YAAA,EAEA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,wCAAA,EAAA,EACC,KACA,EAAA,EAAIF,uBAAAA,CAAYG,QAChB,IAAA,EACA,OAAA,EACA,cACA,YAAA,EAAY,IAAA,EACZ,QAAQT,KAAAA,EACR,KAAA,EAAOE,MACP,eAAA,EAAeD,QAAAA,EACf,eAAeC,IAAAA,KAAS,MAAA,EACxB,GAAIC,KAAAA,EAEHV,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,oBACAc,cAAA,CAACD,uBAAA,CAAY,OAAA,EAAZ,EAAoB,cAA6BZ,QAAAA,EAAS;AAAA,GAAA,EAC7D,CAAA;AAEJ,CACF;;;;"}

package/dist/cjs/components/SidebarCollapsibleTitle/index.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Collapsible = require('../Collapsible/index.cjs');
+const SidebarNavigationTitle = require('../SidebarNavigationTitle/index.cjs');
+const Icon = require('../Icon/index.cjs');
+
+const SidebarCollapsibleTitle = ({
+  label,
+  children,
+  open,
+  onOpenChange,
+  iconDir = "start",
+  icon,
+  selected,
+  type = "main",
+  ...props
+}) => {
+  if (!label) {
+    return;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible.Collapsible, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(SidebarNavigationTitle.SidebarTitleWrapper, { as: Collapsible.Collapsible.Trigger, $collapsible: true, iconDir, "data-selected": selected, $type: type, ...props, children: [
+      icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }),
+      label,
+      icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Collapsible.Content, { children })
+  ] });
+};
+
+exports.SidebarCollapsibleTitle = SidebarCollapsibleTitle;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon';\nimport { Collapsible } from '@/components/Collapsible';\nimport { SidebarTitleWrapper } from '@/components/SidebarNavigationTitle';\nimport { SidebarCollapsibleTitleProps } from './SidebarCollapsibleTitle.types';\n\nexport const SidebarCollapsibleTitle = ({\n  label,\n  children,\n  open,\n  onOpenChange,\n  iconDir = 'start',\n  icon,\n  selected,\n  type = 'main',\n  ...props\n}: SidebarCollapsibleTitleProps) => {\n  if (!label) {\n    return;\n  }\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <SidebarTitleWrapper\n        as={Collapsible.Trigger}\n        $collapsible\n        iconDir={iconDir}\n        data-selected={selected}\n        $type={type}\n        {...props}\n      >\n        {icon && iconDir === 'start' && (\n          <Icon\n            name={icon}\n            size=\"sm\"\n          />\n        )}\n        {label}\n        {icon && iconDir === 'end' && (\n          <Icon\n            name={icon}\n            size=\"sm\"\n          />\n        )}\n      </SidebarTitleWrapper>\n      <Collapsible.Content>{children}</Collapsible.Content>\n    </Collapsible>\n  );\n};\n"],"names":["SidebarCollapsibleTitle","label","children","open","onOpenChange","iconDir","icon","selected","type","props","jsxs","Collapsible","SidebarTitleWrapper","Trigger","jsx","Icon"],"mappings":";;;;;;;;;AAKO,MAAMA,0BAA0BA,CAAC;AAAA,EACtCC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,IAAAA,GAAO,MAAA;AAAA,EACP,GAAGC;AACyB,CAAA,KAAM;AAClC,EAAA,IAAI,CAACR,KAAAA,EAAO;AACV,IAAA;AAAA,EACF;AACA,EAAA,uBACES,eAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,YAAA,EAEA,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAACE,0CAAA,EAAA,EACC,EAAA,EAAID,uBAAAA,CAAYE,OAAAA,EAChB,YAAA,EAAY,IAAA,EACZ,OAAA,EACA,eAAA,EAAeN,QAAAA,EACf,KAAA,EAAOC,IAAAA,EACP,GAAIC,KAAAA,EAEHH,QAAAA,EAAAA;AAAAA,MAAAA,IAAAA,IAAQD,YAAY,OAAA,oBACnBS,cAAA,CAACC,aACC,IAAA,EAAMT,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,MAGZL,KAAAA;AAAAA,MACAK,IAAAA,IAAQD,YAAY,KAAA,oBACnBS,cAAA,CAACC,aACC,IAAA,EAAMT,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,KAAA,EAGf,CAAA;AAAA,oBACAQ,cAAA,CAACH,uBAAA,CAAY,OAAA,EAAZ,EAAqBT,QAAAA,EAAS;AAAA,GAAA,EACjC,CAAA;AAEJ;;;;"}

package/dist/cjs/components/SidebarNavigationItem/index.cjs

@@ -0,0 +1,93 @@
+'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 IconWrapper = require('../Collapsible/IconWrapper.cjs');
+
+const SidebarNavigationItem = react.forwardRef(({
+  label,
+  level = 0,
+  icon,
+  selected,
+  iconDir,
+  disabled,
+  type = "main",
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, "aria-disabled": disabled, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children: label }) });
+});
+const SidebarItemWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-1nx5u5p-0"
+})(["display:flex;align-items:center;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;", ""], ({
+  theme,
+  $collapsible = false,
+  $level,
+  $type
+}) => {
+  const itemType = $level === 0 ? "item" : "subItem";
+  return `
+    padding: ${theme.click.sidebar.navigation[itemType].default.space.y} ${theme.click.sidebar.navigation[itemType].default.space.right} ${theme.click.sidebar.navigation[itemType].default.space.y} ${$collapsible ? theme.click.sidebar.navigation[itemType].default.space.left : theme.click.image.sm.size.width};
+    border-radius: ${theme.click.sidebar.navigation[itemType].radii.all};
+    font: ${theme.click.sidebar.navigation[itemType].typography.default};
+    background-color: ${theme.click.sidebar[$type].navigation[itemType].color.background.default};
+    color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};
+    span a {
+      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};
+    cursor: pointer;
+      text-decoration: none;
+    }
+    cursor: pointer;
+    pointer-events: all;
+
+    &:hover, &:focus {
+      font: ${theme.click.sidebar.navigation[itemType].typography.hover};
+      background-color: ${theme.click.sidebar[$type].navigation[itemType].color.background.hover};
+      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.hover};
+      pointer-events: auto;
+    }
+
+    &:active, &[data-selected="true"] {
+      font: ${theme.click.sidebar.navigation[itemType].typography.active};
+      background-color: ${theme.click.sidebar[$type].navigation[itemType].color.background.active};
+      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.active};
+      pointer-events: all;
+    }
+
+    &[aria-disabled=true],
+    &[aria-disabled=true]:hover,
+    &[aria-disabled=true]:focus,
+    &[aria-disabled=true]:active,
+    &[aria-disabled=true]:focus-within,
+    &[aria-disabled=true][data-selected="true"] {
+
+      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};
+      pointer-events: none;
+
+      span a {
+        color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};
+        cursor: not-allowed;
+        text-decoration: none;
+      }
+      cursor: not-allowed;
+    }
+
+    @media (max-width: 640px) {
+      gap: ${theme.click.sidebar.navigation[itemType].mobile.space.gap};
+      padding: ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${theme.click.sidebar.navigation[itemType].mobile.space.right} ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${$collapsible ? theme.click.sidebar.navigation[itemType].mobile.space.left : theme.click.image.sm.size.width};
+      font: ${theme.click.sidebar.navigation[itemType].mobile.typography.default};
+      &:hover, &:focus {
+        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.hover};
+      }
+      &:active, &[data-selected="true"] {
+        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.active};
+      }
+    }
+  `;
+});
+
+exports.SidebarItemWrapper = SidebarItemWrapper;
+exports.SidebarNavigationItem = SidebarNavigationItem;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SidebarNavigationItem/SidebarNavigationItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { styled } from 'styled-components';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationItemProps } from './SidebarNavigationItem.types';\n\nconst SidebarNavigationItem = forwardRef<HTMLDivElement, SidebarNavigationItemProps>(\n  (\n    { label, level = 0, icon, selected, iconDir, disabled, type = 'main', ...props },\n    ref\n  ) => {\n    return (\n      <SidebarItemWrapper\n        $level={level}\n        data-selected={selected}\n        $type={type}\n        ref={ref}\n        aria-disabled={disabled}\n        {...props}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </SidebarItemWrapper>\n    );\n  }\n);\n\nexport const SidebarItemWrapper = styled.div<{\n  $collapsible?: boolean;\n  $level: number;\n  $type: 'main' | 'sqlSidebar';\n}>`\n  display: flex;\n  align-items: center;\n  border: none;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  white-space: nowrap;\n  overflow: hidden;\n  flex-wrap: nowrap;\n\n  ${({ theme, $collapsible = false, $level, $type }) => {\n    const itemType = $level === 0 ? 'item' : 'subItem';\n    return `\n    padding: ${theme.click.sidebar.navigation[itemType].default.space.y} ${\n      theme.click.sidebar.navigation[itemType].default.space.right\n    } ${theme.click.sidebar.navigation[itemType].default.space.y} ${\n      $collapsible\n        ? theme.click.sidebar.navigation[itemType].default.space.left\n        : theme.click.image.sm.size.width\n    };\n    border-radius: ${theme.click.sidebar.navigation[itemType].radii.all};\n    font: ${theme.click.sidebar.navigation[itemType].typography.default};\n    background-color: ${\n      theme.click.sidebar[$type].navigation[itemType].color.background.default\n    };\n    color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};\n    span a {\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};\n    cursor: pointer;\n      text-decoration: none;\n    }\n    cursor: pointer;\n    pointer-events: all;\n\n    &:hover, &:focus {\n      font: ${theme.click.sidebar.navigation[itemType].typography.hover};\n      background-color: ${\n        theme.click.sidebar[$type].navigation[itemType].color.background.hover\n      };\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.hover};\n      pointer-events: auto;\n    }\n\n    &:active, &[data-selected=\"true\"] {\n      font: ${theme.click.sidebar.navigation[itemType].typography.active};\n      background-color: ${\n        theme.click.sidebar[$type].navigation[itemType].color.background.active\n      };\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.active};\n      pointer-events: all;\n    }\n\n    &[aria-disabled=true],\n    &[aria-disabled=true]:hover,\n    &[aria-disabled=true]:focus,\n    &[aria-disabled=true]:active,\n    &[aria-disabled=true]:focus-within,\n    &[aria-disabled=true][data-selected=\"true\"] {\n\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};\n      pointer-events: none;\n\n      span a {\n        color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};\n        cursor: not-allowed;\n        text-decoration: none;\n      }\n      cursor: not-allowed;\n    }\n\n    @media (max-width: 640px) {\n      gap: ${theme.click.sidebar.navigation[itemType].mobile.space.gap};\n      padding: ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${\n        theme.click.sidebar.navigation[itemType].mobile.space.right\n      } ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${\n        $collapsible\n          ? theme.click.sidebar.navigation[itemType].mobile.space.left\n          : theme.click.image.sm.size.width\n      };\n      font: ${theme.click.sidebar.navigation[itemType].mobile.typography.default};\n      &:hover, &:focus {\n        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.hover};\n      }\n      &:active, &[data-selected=\"true\"] {\n        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.active};\n      }\n    }\n  `;\n  }}\n`;\n\nexport { SidebarNavigationItem };\n"],"names":["SidebarNavigationItem","forwardRef","label","level","icon","selected","iconDir","disabled","type","props","ref","jsx","IconWrapper","SidebarItemWrapper","styled","div","withConfig","componentId","theme","$collapsible","$level","$type","itemType","click","sidebar","navigation","default","space","y","right","left","image","sm","size","width","radii","all","typography","color","background","text","hover","active","mobile","gap"],"mappings":";;;;;;;;;AAKA,MAAMA,qBAAAA,GAAwBC,iBAC5B,CACE;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,KAAAA,GAAQ,CAAA;AAAA,EAAGC,IAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAUC,OAAAA;AAAAA,EAASC,QAAAA;AAAAA,EAAUC,IAAAA,GAAO,MAAA;AAAA,EAAQ,GAAGC;AAAM,CAAA,EAC/EC,GAAAA,KACG;AACH,EAAA,sCACG,kBAAA,EAAA,EACC,MAAA,EAAQP,OACR,eAAA,EAAeE,QAAAA,EACf,OAAOG,IAAAA,EACP,GAAA,EACA,eAAA,EAAeD,QAAAA,EACf,GAAIE,KAAAA,EAEJ,QAAA,kBAAAE,cAAA,CAACC,2BACC,IAAA,EACA,OAAA,EAECV,iBACH,CAAA,EACF,CAAA;AAEJ,CACF;AAEO,MAAMW,kBAAAA,GAAqBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6KAAA,EAAA,EAAA,GAgBxC,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,YAAAA,GAAe,KAAA;AAAA,EAAOC,MAAAA;AAAAA,EAAQC;AAAM,CAAA,KAAM;AACpD,EAAA,MAAMC,QAAAA,GAAWF,MAAAA,KAAW,CAAA,GAAI,MAAA,GAAS,SAAA;AACzC,EAAA,OAAO;AAAA,aAAA,EACIF,KAAAA,CAAMK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWH,QAAQ,CAAA,CAAEI,OAAAA,CAAQC,MAAMC,CAAC,CAAA,CAAA,EACjEV,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEI,QAAQC,KAAAA,CAAME,KAAK,IAC1DX,KAAAA,CAAMK,KAAAA,CAAMC,QAAQC,UAAAA,CAAWH,QAAQ,EAAEI,OAAAA,CAAQC,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAC1DT,YAAAA,GACID,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEI,QAAQC,KAAAA,CAAMG,IAAAA,GACvDZ,MAAMK,KAAAA,CAAMQ,KAAAA,CAAMC,EAAAA,CAAGC,IAAAA,CAAKC,KAAK,CAAA;AAAA,mBAAA,EAEpBhB,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEa,MAAMC,GAAG,CAAA;AAAA,UAAA,EAC3DlB,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEe,WAAWX,OAAO,CAAA;AAAA,sBAAA,EAEjER,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAMC,UAAAA,CAAWb,OAAO,CAAA;AAAA,WAAA,EAEjER,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAME,IAAAA,CAAKd,OAAO,CAAA;AAAA;AAAA,aAAA,EAEhER,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAME,IAAAA,CAAKd,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,YAAA,EAQnER,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEe,WAAWI,KAAK,CAAA;AAAA,wBAAA,EAE/DvB,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAMC,UAAAA,CAAWE,KAAK,CAAA;AAAA,aAAA,EAE/DvB,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAME,IAAAA,CAAKC,KAAK,CAAA;AAAA;AAAA;;AAAA;AAAA,YAAA,EAKjEvB,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEe,WAAWK,MAAM,CAAA;AAAA,wBAAA,EAEhExB,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAMC,UAAAA,CAAWG,MAAM,CAAA;AAAA,aAAA,EAEhExB,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAME,IAAAA,CAAKE,MAAM,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,aAAA,EAWjExB,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAME,IAAAA,CAAKjC,QAAQ,CAAA;AAAA;;AAAA;AAAA,eAAA,EAIjEW,KAAAA,CAAMK,KAAAA,CAAMC,OAAAA,CAAQH,KAAK,CAAA,CAAEI,WAAWH,QAAQ,CAAA,CAAEgB,KAAAA,CAAME,IAAAA,CAAKjC,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,WAAA,EAQvEW,KAAAA,CAAMK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWH,QAAQ,CAAA,CAAEqB,MAAAA,CAAOhB,MAAMiB,GAAG,CAAA;AAAA,eAAA,EACrD1B,KAAAA,CAAMK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWH,QAAQ,CAAA,CAAEqB,MAAAA,CAAOhB,MAAMC,CAAC,CAAA,CAAA,EAChEV,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEqB,OAAOhB,KAAAA,CAAME,KAAK,IACzDX,KAAAA,CAAMK,KAAAA,CAAMC,QAAQC,UAAAA,CAAWH,QAAQ,EAAEqB,MAAAA,CAAOhB,KAAAA,CAAMC,CAAC,CAAA,CAAA,EACzDT,YAAAA,GACID,MAAMK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWH,QAAQ,CAAA,CAAEqB,OAAOhB,KAAAA,CAAMG,IAAAA,GACtDZ,MAAMK,KAAAA,CAAMQ,KAAAA,CAAMC,EAAAA,CAAGC,IAAAA,CAAKC,KAAK,CAAA;AAAA,YAAA,EAE7BhB,KAAAA,CAAMK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWH,QAAQ,CAAA,CAAEqB,MAAAA,CAAON,WAAWX,OAAO,CAAA;AAAA;AAAA,cAAA,EAEhER,KAAAA,CAAMK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWH,QAAQ,CAAA,CAAEqB,MAAAA,CAAON,WAAWI,KAAK,CAAA;AAAA;AAAA;AAAA,cAAA,EAGhEvB,KAAAA,CAAMK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWH,QAAQ,CAAA,CAAEqB,MAAAA,CAAON,WAAWK,MAAM,CAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAI/E,CAAC;;;;;"}

package/dist/cjs/components/SidebarNavigationTitle/index.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const IconWrapper = require('../Collapsible/IconWrapper.cjs');
+
+const SidebarNavigationTitle = ({
+  label,
+  icon,
+  iconDir,
+  selected,
+  type = "main",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarTitleWrapper, { "data-selected": selected, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children: label }) });
+};
+const SidebarTitleWrapper = styledComponents.styled.button.withConfig({
+  componentId: "sc-21h93w-0"
+})(["display:inline-flex;align-items:center;background:transparent;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;cursor:pointer;", " a{color:inherit;text-decoration:none;&:active{color:inherit;}}"], ({
+  theme,
+  $collapsible = false,
+  $type
+}) => `
+    padding: 0;
+    padding-left: ${$collapsible ? 0 : theme.click.image.sm.size.width};
+    font: ${theme.click.sidebar.navigation.title.typography.default};
+    color: ${theme.click.sidebar[$type].navigation.title.color.default};
+
+    &:hover {
+      font: ${theme.click.sidebar.navigation.title.typography.hover};
+      color: ${theme.click.sidebar[$type].navigation.title.color.hover};
+    }
+
+    &:active, &[data-state="open"], &[data-selected="true"] {
+      font: ${theme.click.sidebar.navigation.title.typography.active};
+      color: ${theme.click.sidebar[$type].navigation.title.color.active};
+    }
+  `);
+
+exports.SidebarNavigationTitle = SidebarNavigationTitle;
+exports.SidebarTitleWrapper = SidebarTitleWrapper;
+//# sourceMappingURL=index.cjs.map