softable-pixels-web 1.2.14 → 1.2.15

package/dist/{TabSwitch-BOwilTyF.js → TabSwitch-BrX5uJnO.js}

@@ -84,6 +84,7 @@ function createTabSwitchStyles(props) {
 		padding: "3px",
 		flexDirection: "row",
 		alignItems: "center",
+		borderRadius: "0.5rem",
 		color: "var(--px-text-primary, #4b5563)",
 		width: fitContent ? "fit-content" : "100%",
 		backgroundColor: backgroundColor ?? "transparent",
@@ -126,4 +127,4 @@ const TabSwitch = (props) => {
 
 //#endregion
 export { types_exports as n, TabSwitch as t };
-//# sourceMappingURL=TabSwitch-BOwilTyF.js.map
+//# sourceMappingURL=TabSwitch-BrX5uJnO.js.map

package/dist/TabSwitch-BrX5uJnO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSwitch-BrX5uJnO.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/types.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      <Typography variant=\"b1\" fontWeight=\"bold\">\n        {option.label}\n      </Typography>\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent, backgroundColor, variant } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      padding: '3px',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderRadius: '0.5rem',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      backgroundColor: backgroundColor ?? 'transparent',\n      borderBottom:\n        variant === 'underline'\n          ? '1px solid var(--px-border-primary, #e5e7eb)'\n          : 'unset',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Types\nimport type { CommonStyleProps, TypeStyles } from '@hooks/useThemedStyles/types'\nimport type { ReactNode } from 'react'\nimport type { createTabSwitchStyles } from './styles'\n\nexport interface SwitchOption<T> {\n  value: T\n  label: string\n  disabled?: boolean\n\n  icon?: ReactNode\n}\n\nexport interface TabSwitchProps<T> extends CommonStyleProps {\n  currentValue: T\n  options: SwitchOption<T>[]\n\n  disabled?: boolean\n  fitContent?: boolean\n\n  layoutId?: string\n\n  selectedColor?: string\n  backgroundColor?: string\n  selectedLabelColor?: string\n\n  variant?: 'default' | 'underline'\n\n  styles?: TypeStyles<typeof createTabSwitchStyles>\n\n  onChange: (value: T) => void\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * as TabSwitchTypes from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,YAAY,iBAAiB,YAAY;AAEjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,cAAc;EACd,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,iBAAiB,mBAAmB;EACpC,cACE,YAAY,cACR,gDACA;EACN,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;;;;;AEVJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}

package/dist/{index-EallwVqf.d.ts → index-2hmoLtaJ.d.ts}

@@ -27,7 +27,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
     fontWeight: "400";
     fontSize: string;
     color: "var(--px-text-primary)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     outlineOffset: string;
     cursor: "default" | undefined;
     __rules: {
@@ -70,4 +70,4 @@ interface TextAreaProps {
 declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=index-EallwVqf.d.ts.map
+//# sourceMappingURL=index-2hmoLtaJ.d.ts.map

package/dist/{index-CkqVNQbq.d.ts → index-Cg9O1rrv.d.ts}

@@ -25,7 +25,7 @@ declare function createSelectStyles(props: SelectProps): {
     opacity: number;
     cursor: "not-allowed" | "pointer" | "progress";
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -84,4 +84,4 @@ interface SelectOption {
 declare const Select: React$1.FC<SelectProps>;
 //#endregion
 export { types_d_exports as n, Select as t };
-//# sourceMappingURL=index-CkqVNQbq.d.ts.map
+//# sourceMappingURL=index-Cg9O1rrv.d.ts.map

package/dist/{index-zAtU6zIM.d.ts → index-Csc5gk4F.d.ts}

@@ -10,6 +10,7 @@ declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
     padding: string;
     flexDirection: "row";
     alignItems: "center";
+    borderRadius: string;
     color: "var(--px-text-primary, #4b5563)";
     width: string;
     backgroundColor: string;
@@ -49,4 +50,4 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { types_d_exports as n, TabSwitch as t };
-//# sourceMappingURL=index-zAtU6zIM.d.ts.map
+//# sourceMappingURL=index-Csc5gk4F.d.ts.map

package/dist/{index-DqpXxYBu.d.ts → index-y5WY0xGq.d.ts}

@@ -22,7 +22,7 @@ declare function createInputStyles(props: InputProps): {
     padding: string;
     opacity: number;
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -101,4 +101,4 @@ interface InputMethods {
 declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
 //#endregion
 export { Input as t };
-//# sourceMappingURL=index-DqpXxYBu.d.ts.map
+//# sourceMappingURL=index-y5WY0xGq.d.ts.map

package/dist/index.d.ts

@@ -4,11 +4,11 @@ import { t as IconButton } from "./index-BnNahlXB.js";
 import { n as types_d_exports$1, t as ColorPicker } from "./index-kc3NqscD.js";
 import { n as types_d_exports$3, t as DatePicker } from "./index-CsubfLNp.js";
 import { n as Locale, r as MaskType, t as MaskModule } from "./index-ftKfqd7S.js";
-import { t as Input } from "./index-DqpXxYBu.js";
+import { t as Input } from "./index-y5WY0xGq.js";
 import { t as SearchInput } from "./index-CHvftTxv.js";
-import { n as types_d_exports$5, t as Select } from "./index-CkqVNQbq.js";
+import { n as types_d_exports$5, t as Select } from "./index-Cg9O1rrv.js";
 import { n as types_d_exports$4 } from "./types-1ZNOd7Tt.js";
-import { t as TextArea } from "./index-EallwVqf.js";
+import { t as TextArea } from "./index-2hmoLtaJ.js";
 import { t as Popover } from "./index-ClRmImX5.js";
 import { t as BasePopover } from "./index-WFi4Q5f-.js";
 import { t as Breadcrumb } from "./index-DHTU_QTw.js";
@@ -21,7 +21,7 @@ import { t as ChipList } from "./index-CRG-GDQG.js";
 import { n as types_d_exports$2, t as ContextMenu } from "./index-Bxm90oSp.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
 import { t as Switch } from "./index-JY4VS1B7.js";
-import { n as types_d_exports$6, t as TabSwitch } from "./index-zAtU6zIM.js";
+import { n as types_d_exports$6, t as TabSwitch } from "./index-Csc5gk4F.js";
 import { Typography } from "./typography.js";
 import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-vh_aAfJM.js";
 import { useDismiss } from "./use-dismiss.js";

package/dist/index.js

@@ -8,7 +8,7 @@ import { t as Typography } from "./Typography-DOmGYHd6.js";
 import { t as Checkbox } from "./Checkbox-Dn8CtTOP.js";
 import { n as types_exports$3, t as DatePicker } from "./DatePicker-Bl7pIrHR.js";
 import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CeJlZRoI.js";
-import { n as types_exports$6, t as TabSwitch } from "./TabSwitch-BOwilTyF.js";
+import { n as types_exports$6, t as TabSwitch } from "./TabSwitch-BrX5uJnO.js";
 import { t as CheckItem } from "./CheckItem-DzRbPRpC.js";
 import { t as InfoSummary } from "./InfoSummary-CKymtoj5.js";
 import { t as BasePopover } from "./BasePopover-BvMT9rNx.js";

package/dist/input.d.ts

@@ -1,2 +1,2 @@
-import { t as Input } from "./index-DqpXxYBu.js";
+import { t as Input } from "./index-y5WY0xGq.js";
 export { Input };

package/dist/select.d.ts

@@ -1,3 +1,3 @@
-import { n as types_d_exports, t as Select } from "./index-CkqVNQbq.js";
+import { n as types_d_exports, t as Select } from "./index-Cg9O1rrv.js";
 import "./types-1ZNOd7Tt.js";
 export { Select, types_d_exports as SelectTypes };

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as TabSwitch } from "./index-zAtU6zIM.js";
+import { n as types_d_exports, t as TabSwitch } from "./index-Csc5gk4F.js";
 export { TabSwitch, types_d_exports as TabSwitchTypes };

package/dist/tab-switch.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-B1E0m8Ih.js";
 import "./Typography-DOmGYHd6.js";
-import { n as types_exports, t as TabSwitch } from "./TabSwitch-BOwilTyF.js";
+import { n as types_exports, t as TabSwitch } from "./TabSwitch-BrX5uJnO.js";
 
 export { TabSwitch, types_exports as TabSwitchTypes };

package/dist/text-area.d.ts

@@ -1,2 +1,2 @@
-import { t as TextArea } from "./index-EallwVqf.js";
+import { t as TextArea } from "./index-2hmoLtaJ.js";
 export { TextArea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/TabSwitch-BOwilTyF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabSwitch-BOwilTyF.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/types.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      <Typography variant=\"b1\" fontWeight=\"bold\">\n        {option.label}\n      </Typography>\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent, backgroundColor, variant } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      padding: '3px',\n      flexDirection: 'row',\n      alignItems: 'center',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      backgroundColor: backgroundColor ?? 'transparent',\n      borderBottom:\n        variant === 'underline'\n          ? '1px solid var(--px-border-primary, #e5e7eb)'\n          : 'unset',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Types\nimport type { CommonStyleProps, TypeStyles } from '@hooks/useThemedStyles/types'\nimport type { ReactNode } from 'react'\nimport type { createTabSwitchStyles } from './styles'\n\nexport interface SwitchOption<T> {\n  value: T\n  label: string\n  disabled?: boolean\n\n  icon?: ReactNode\n}\n\nexport interface TabSwitchProps<T> extends CommonStyleProps {\n  currentValue: T\n  options: SwitchOption<T>[]\n\n  disabled?: boolean\n  fitContent?: boolean\n\n  layoutId?: string\n\n  selectedColor?: string\n  backgroundColor?: string\n  selectedLabelColor?: string\n\n  variant?: 'default' | 'underline'\n\n  styles?: TypeStyles<typeof createTabSwitchStyles>\n\n  onChange: (value: T) => void\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * as TabSwitchTypes from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,YAAY,iBAAiB,YAAY;AAEjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,iBAAiB,mBAAmB;EACpC,cACE,YAAY,cACR,gDACA;EACN,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;;;;;AETJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}