@remember-web/primitive 0.1.11 → 0.1.12

package/dist/src/Control/BaseToggle/ToggleIcon/index.cjs.js

@@ -8,22 +8,27 @@ var jsxRuntime = require('react/jsx-runtime');
 var ICON_NAME = {
   check: {
     on: icon.ControlCheckOn,
+    indeterminate: icon.ControlCheckOn,
     off: icon.ControlCheckOff
   },
   checkbox: {
     on: icon.ControlCheckboxOn,
+    indeterminate: icon.ControlCheckboxIndeterminate,
     off: icon.ControlCheckboxOff
   },
   favorite: {
     on: icon.ControlFavoriteOn,
+    indeterminate: icon.ControlFavoriteOn,
     off: icon.ControlFavoriteOff
   },
   bookmark: {
     on: icon.ControlBookmarkOn,
+    indeterminate: icon.ControlBookmarkOn,
     off: icon.ControlBookmarkOff
   },
   radio: {
     on: icon.ControlRadioOn,
+    indeterminate: icon.ControlRadioOn,
     off: icon.ControlRadioOff
   }
 };

package/dist/src/Control/BaseToggle/ToggleIcon/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ControlBookmarkOff,\n  ControlBookmarkOn,\n  ControlCheckOff,\n  ControlCheckOn,\n  ControlCheckboxOff,\n  ControlCheckboxOn,\n  ControlFavoriteOff,\n  ControlFavoriteOn,\n  ControlRadioOff,\n  ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n  SVG_SIZES,\n  isSvgRegularSize,\n  type SvgSizeProps,\n  type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n  check: { on: ControlCheckOn, off: ControlCheckOff },\n  checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n  favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n  bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n  radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n  ToggleVariantType,\n  Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n  size,\n  status,\n  variant,\n  className,\n}: {\n  variant: ToggleVariantType;\n  status: ToggleStatusType;\n  className?: string;\n} & SvgSizeProps) {\n  const iconSize =\n    typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n  const Icon = ICON_NAME[variant][status];\n\n  return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;AAuBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ControlBookmarkOff,\n  ControlBookmarkOn,\n  ControlCheckOff,\n  ControlCheckOn,\n  ControlCheckboxIndeterminate,\n  ControlCheckboxOff,\n  ControlCheckboxOn,\n  ControlFavoriteOff,\n  ControlFavoriteOn,\n  ControlRadioOff,\n  ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n  SVG_SIZES,\n  isSvgRegularSize,\n  type SvgSizeProps,\n  type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n  check: {\n    on: ControlCheckOn,\n    indeterminate: ControlCheckOn,\n    off: ControlCheckOff,\n  },\n  checkbox: {\n    on: ControlCheckboxOn,\n    indeterminate: ControlCheckboxIndeterminate,\n    off: ControlCheckboxOff,\n  },\n  favorite: {\n    on: ControlFavoriteOn,\n    indeterminate: ControlFavoriteOn,\n    off: ControlFavoriteOff,\n  },\n  bookmark: {\n    on: ControlBookmarkOn,\n    indeterminate: ControlBookmarkOn,\n    off: ControlBookmarkOff,\n  },\n  radio: {\n    on: ControlRadioOn,\n    indeterminate: ControlRadioOn,\n    off: ControlRadioOff,\n  },\n} as const satisfies Record<\n  ToggleVariantType,\n  Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n  size,\n  status,\n  variant,\n  className,\n}: {\n  variant: ToggleVariantType;\n  status: ToggleStatusType;\n  className?: string;\n} & SvgSizeProps) {\n  const iconSize =\n    typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n  const Icon = ICON_NAME[variant][status];\n\n  return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;AAwBA;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAKaK;AAAsBC;AAAe;AACpD;;"}

package/dist/src/Control/BaseToggle/ToggleIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAapE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,2CAMf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAiCpE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,2CAOf"}

package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js

@@ -1,27 +1,32 @@
 "use client";
-import { ControlCheckOn, ControlCheckOff, ControlCheckboxOn, ControlCheckboxOff, ControlFavoriteOn, ControlFavoriteOff, ControlBookmarkOn, ControlBookmarkOff, ControlRadioOn, ControlRadioOff } from '@remember-web/icon';
+import { ControlCheckOn, ControlCheckOff, ControlCheckboxOn, ControlCheckboxIndeterminate, ControlCheckboxOff, ControlFavoriteOn, ControlFavoriteOff, ControlBookmarkOn, ControlBookmarkOff, ControlRadioOn, ControlRadioOff } from '@remember-web/icon';
 import { isSvgRegularSize, SVG_SIZES } from '@remember-web/icon/util';
 import { jsx } from 'react/jsx-runtime';
 
 var ICON_NAME = {
   check: {
     on: ControlCheckOn,
+    indeterminate: ControlCheckOn,
     off: ControlCheckOff
   },
   checkbox: {
     on: ControlCheckboxOn,
+    indeterminate: ControlCheckboxIndeterminate,
     off: ControlCheckboxOff
   },
   favorite: {
     on: ControlFavoriteOn,
+    indeterminate: ControlFavoriteOn,
     off: ControlFavoriteOff
   },
   bookmark: {
     on: ControlBookmarkOn,
+    indeterminate: ControlBookmarkOn,
     off: ControlBookmarkOff
   },
   radio: {
     on: ControlRadioOn,
+    indeterminate: ControlRadioOn,
     off: ControlRadioOff
   }
 };

package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ControlBookmarkOff,\n  ControlBookmarkOn,\n  ControlCheckOff,\n  ControlCheckOn,\n  ControlCheckboxOff,\n  ControlCheckboxOn,\n  ControlFavoriteOff,\n  ControlFavoriteOn,\n  ControlRadioOff,\n  ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n  SVG_SIZES,\n  isSvgRegularSize,\n  type SvgSizeProps,\n  type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n  check: { on: ControlCheckOn, off: ControlCheckOff },\n  checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },\n  favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },\n  bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },\n  radio: { on: ControlRadioOn, off: ControlRadioOff },\n} as const satisfies Record<\n  ToggleVariantType,\n  Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n  size,\n  status,\n  variant,\n  className,\n}: {\n  variant: ToggleVariantType;\n  status: ToggleStatusType;\n  className?: string;\n} & SvgSizeProps) {\n  const iconSize =\n    typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n  const Icon = ICON_NAME[variant][status];\n\n  return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;AAuBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Control/BaseToggle/ToggleIcon/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ControlBookmarkOff,\n  ControlBookmarkOn,\n  ControlCheckOff,\n  ControlCheckOn,\n  ControlCheckboxIndeterminate,\n  ControlCheckboxOff,\n  ControlCheckboxOn,\n  ControlFavoriteOff,\n  ControlFavoriteOn,\n  ControlRadioOff,\n  ControlRadioOn,\n} from '@remember-web/icon';\nimport {\n  SVG_SIZES,\n  isSvgRegularSize,\n  type SvgSizeProps,\n  type WithSvgSizeComponentType,\n} from '@remember-web/icon/util';\n\nimport type { ToggleStatusType, ToggleVariantType } from '../types';\n\nconst ICON_NAME = {\n  check: {\n    on: ControlCheckOn,\n    indeterminate: ControlCheckOn,\n    off: ControlCheckOff,\n  },\n  checkbox: {\n    on: ControlCheckboxOn,\n    indeterminate: ControlCheckboxIndeterminate,\n    off: ControlCheckboxOff,\n  },\n  favorite: {\n    on: ControlFavoriteOn,\n    indeterminate: ControlFavoriteOn,\n    off: ControlFavoriteOff,\n  },\n  bookmark: {\n    on: ControlBookmarkOn,\n    indeterminate: ControlBookmarkOn,\n    off: ControlBookmarkOff,\n  },\n  radio: {\n    on: ControlRadioOn,\n    indeterminate: ControlRadioOn,\n    off: ControlRadioOff,\n  },\n} as const satisfies Record<\n  ToggleVariantType,\n  Record<ToggleStatusType, WithSvgSizeComponentType>\n>;\n\nexport function ToggleIcon({\n  size,\n  status,\n  variant,\n  className,\n}: {\n  variant: ToggleVariantType;\n  status: ToggleStatusType;\n  className?: string;\n} & SvgSizeProps) {\n  const iconSize =\n    typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;\n\n  const Icon = ICON_NAME[variant][status];\n\n  return <Icon className={className} size={iconSize} />;\n}\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;AAwBA;AACEA;AACEC;AACAC;AACAC;;AAEFC;AACEH;AACAC;AACAC;;AAEFE;AACEJ;AACAC;AACAC;;AAEFG;AACEL;AACAC;AACAC;;AAEFI;AACEN;AACAC;AACAC;AACF;AACF;AAKO;AASW;;;;AAChB;;;AAKaK;AAAsBC;AAAe;AACpD;;"}

package/dist/src/Control/BaseToggle/index.cjs.js

@@ -20,10 +20,10 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 
-var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange"];
+var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange", "indeterminate"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var _BaseToggle = function _BaseToggle(_ref, ref) {
+var _BaseToggle = function _BaseToggle(_ref, _ref2) {
   var variant = _ref.variant,
     _label = _ref.label,
     _ref$labelPosition = _ref.labelPosition,
@@ -38,6 +38,7 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
     type = _ref$type === void 0 ? 'checkbox' : _ref$type,
     onToggle = _ref.onToggle,
     _onChange = _ref.onChange,
+    indeterminate = _ref.indeterminate,
     props = _objectWithoutProperties__default.default(_ref, _excluded);
   var isStringLabel = typeof _label === 'string';
   var label = isStringLabel ? /*#__PURE__*/jsxRuntime.jsx(index$1, {
@@ -48,7 +49,14 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
     className: className,
     $gap: labelGap,
     children: [/*#__PURE__*/jsxRuntime.jsx(styles.ToggleInput, _objectSpread(_objectSpread({
-      ref: ref,
+      ref: function ref(input) {
+        if (typeof _ref2 !== 'function' && _ref2) {
+          _ref2.current = input;
+        }
+        if (input) {
+          input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
+        }
+      },
       className: inputClassName,
       type: type
     }, props), {}, {
@@ -61,6 +69,11 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
       size: size,
       status: "on",
       variant: variant
+    }), /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
+      className: "indeterminateIcon",
+      size: size,
+      status: "indeterminate",
+      variant: variant
     }), /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
       className: "offIcon",
       size: size,

package/dist/src/Control/BaseToggle/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={ref}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAkBK;;;AAXDA;;;;AAGAC;;;;AAEAC;;;AAGGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    indeterminate,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={(input) => {\n          if (typeof ref !== 'function' && ref) {\n            ref.current = input;\n          }\n\n          if (input) {\n            input.indeterminate = indeterminate ?? false;\n          }\n        }}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"indeterminateIcon\"\n        size={size}\n        status=\"indeterminate\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACE;;AAEA;AAEA;;AAEA;;AAEFF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}

package/dist/src/Control/BaseToggle/index.d.ts

@@ -8,5 +8,6 @@ export declare const BaseToggle: import("react").ForwardRefExoticComponent<{
     onToggle?: ((checked: boolean) => void) | undefined;
     size?: import("./types").ToggleIconSizeType | undefined;
     type?: "checkbox" | "radio" | undefined;
+    indeterminate?: boolean | undefined;
 } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | `aria-${string}` | "size"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/Control/BaseToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/index.tsx"],"names":[],"mappings":";AAmEA,eAAO,MAAM,UAAU;;;;;;;;;sJAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/index.tsx"],"names":[],"mappings":";AAkFA,eAAO,MAAM,UAAU;;;;;;;;;;sJAA0B,CAAC"}

package/dist/src/Control/BaseToggle/index.esm.js

@@ -13,10 +13,10 @@ import '../../Common/Typography/styles.esm.js';
 import { ToggleIcon } from './ToggleIcon/index.esm.js';
 import { ToggleRoot, ToggleInput } from './styles.esm.js';
 
-var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange"];
+var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange", "indeterminate"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var _BaseToggle = function _BaseToggle(_ref, ref) {
+var _BaseToggle = function _BaseToggle(_ref, _ref2) {
   var variant = _ref.variant,
     _label = _ref.label,
     _ref$labelPosition = _ref.labelPosition,
@@ -31,6 +31,7 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
     type = _ref$type === void 0 ? 'checkbox' : _ref$type,
     onToggle = _ref.onToggle,
     _onChange = _ref.onChange,
+    indeterminate = _ref.indeterminate,
     props = _objectWithoutProperties(_ref, _excluded);
   var isStringLabel = typeof _label === 'string';
   var label = isStringLabel ? /*#__PURE__*/jsx(Typography, {
@@ -41,7 +42,14 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
     className: className,
     $gap: labelGap,
     children: [/*#__PURE__*/jsx(ToggleInput, _objectSpread(_objectSpread({
-      ref: ref,
+      ref: function ref(input) {
+        if (typeof _ref2 !== 'function' && _ref2) {
+          _ref2.current = input;
+        }
+        if (input) {
+          input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
+        }
+      },
       className: inputClassName,
       type: type
     }, props), {}, {
@@ -54,6 +62,11 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
       size: size,
       status: "on",
       variant: variant
+    }), /*#__PURE__*/jsx(ToggleIcon, {
+      className: "indeterminateIcon",
+      size: size,
+      status: "indeterminate",
+      variant: variant
     }), /*#__PURE__*/jsx(ToggleIcon, {
       className: "offIcon",
       size: size,

package/dist/src/Control/BaseToggle/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={ref}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAkBK;;;AAXDA;;;;AAGAC;;;;AAEAC;;;AAGGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    indeterminate,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={(input) => {\n          if (typeof ref !== 'function' && ref) {\n            ref.current = input;\n          }\n\n          if (input) {\n            input.indeterminate = indeterminate ?? false;\n          }\n        }}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"indeterminateIcon\"\n        size={size}\n        status=\"indeterminate\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACE;;AAEA;AAEA;;AAEA;;AAEFF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}

package/dist/src/Control/BaseToggle/styles.cjs.js

@@ -15,7 +15,7 @@ var ToggleRoot = styled__default.default.label(_templateObject || (_templateObje
   var $gap = _ref.$gap;
   return $gap && "gap: ".concat($gap, "px;");
 });
-var ToggleInput = styled__default.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), mixin.primary100);
+var ToggleInput = styled__default.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), mixin.primary100);
 
 exports.ToggleInput = ToggleInput;
 exports.ToggleRoot = ToggleRoot;

package/dist/src/Control/BaseToggle/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}

package/dist/src/Control/BaseToggle/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,UAAU;;GAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,yNA2BvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,UAAU;;GAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,yNAoCvB,CAAC"}

package/dist/src/Control/BaseToggle/styles.esm.js

@@ -8,7 +8,7 @@ var ToggleRoot = styled.label(_templateObject || (_templateObject = _taggedTempl
   var $gap = _ref.$gap;
   return $gap && "gap: ".concat($gap, "px;");
 });
-var ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), primary100);
+var ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), primary100);
 
 export { ToggleInput, ToggleRoot };
 //# sourceMappingURL=styles.esm.js.map

package/dist/src/Control/BaseToggle/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}

package/dist/src/Control/BaseToggle/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-export type ToggleStatusType = 'on' | 'off';
+export type ToggleStatusType = 'on' | 'off' | 'indeterminate';
 export type ToggleVariantType = 'check' | 'checkbox' | 'favorite' | 'bookmark' | 'radio';
 export type ToggleIconSizeType = 'small' | 'medium';
 export type BaseToggleProps = {
@@ -17,5 +17,6 @@ export type BaseToggleProps = {
     onToggle?: (checked: boolean) => void;
     size?: ToggleIconSizeType;
     type?: 'checkbox' | 'radio';
+    indeterminate?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | `aria-${string}` | 'size'>;
 //# sourceMappingURL=types.d.ts.map

package/dist/src/Control/BaseToggle/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,GACV,OAAO,CAAC;AACZ,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;SAEK;IACL,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC;;SAEK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CAC7B,GAAG,IAAI,CACN,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,MAAM,EAAE,GAAG,MAAM,CACnC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,GAAG,eAAe,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,GACV,OAAO,CAAC;AACZ,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;SAEK;IACL,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC;;SAEK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CACN,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,QAAQ,MAAM,EAAE,GAAG,MAAM,CACnC,CAAC"}

package/dist/src/Control/Checkbox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nexport const _Checkbox: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'type'> & {\n    variant?: 'checkbox' | 'check';\n  }\n> = ({ variant = 'checkbox', ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAON;AAKqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;;"}
+{"version":3,"file":"Checkbox.cjs.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n  HTMLInputElement,\n  | CheckboxProps<{\n      variant: 'checkbox';\n      indeterminate?: boolean;\n    }>\n  | CheckboxProps<{\n      variant: 'check';\n    }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;;"}

package/dist/src/Control/Checkbox.d.ts

@@ -1,9 +1,17 @@
 import { type ForwardRefRenderFunction } from 'react';
 import type { BaseToggleProps } from './BaseToggle/types';
-export declare const _Checkbox: ForwardRefRenderFunction<HTMLInputElement, Omit<BaseToggleProps, 'variant' | 'type'> & {
-    variant?: 'checkbox' | 'check';
-}>;
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant"> & {
-    variant?: "checkbox" | "check" | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
+type CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;
+export declare const _Checkbox: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps<{
+    variant: 'checkbox';
+    indeterminate?: boolean;
+}> | CheckboxProps<{
+    variant: 'check';
+}>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<(CheckboxProps<{
+    variant: 'checkbox';
+    indeterminate?: boolean | undefined;
+}> | CheckboxProps<{
+    variant: 'check';
+}>) & import("react").RefAttributes<HTMLInputElement>>;
+export {};
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/src/Control/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Control/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,SAAS,EAAE,wBAAwB,CAC9C,gBAAgB,EAChB,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IAC1C,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CAChC,CAGF,CAAC;AAEF,eAAO,MAAM,QAAQ;;oDAAwB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Control/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,KAAK,aAAa,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;AAE/E,eAAO,MAAM,SAAS,EAAE,wBAAwB,CAC9C,gBAAgB,EACd,aAAa,CAAC;IACZ,OAAO,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC,GACF,aAAa,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,CAGL,CAAC;AAEF,eAAO,MAAM,QAAQ;aAVN,UAAU;;;aAIV,OAAO;sDAMuB,CAAC"}

package/dist/src/Control/Checkbox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nexport const _Checkbox: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'type'> & {\n    variant?: 'checkbox' | 'check';\n  }\n> = ({ variant = 'checkbox', ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAON;AAKqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;"}
+{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/Control/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\ntype CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;\n\nexport const _Checkbox: ForwardRefRenderFunction<\n  HTMLInputElement,\n  | CheckboxProps<{\n      variant: 'checkbox';\n      indeterminate?: boolean;\n    }>\n  | CheckboxProps<{\n      variant: 'check';\n    }>\n> = ({ variant = 'checkbox', ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Checkbox = forwardRef(_Checkbox);\n"],"names":["variant","props","ref"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AASN;AASqC;AAArCA;AAAyBC;AAAK;AACjBC;AAAUF;;AAA+B;;;"}

package/dist/src/Control/Radio.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.cjs.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>\n> = ({ ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
+{"version":3,"file":"Radio.cjs.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}

package/dist/src/Control/Radio.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { BaseToggleProps } from './BaseToggle/types';
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant" | "onToggle"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant" | "onToggle" | "indeterminate"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/src/Control/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/Control/Radio.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAU1D,eAAO,MAAM,KAAK,qJAAqB,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/Control/Radio.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAU1D,eAAO,MAAM,KAAK,uKAAqB,CAAC"}

package/dist/src/Control/Radio.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.esm.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>\n> = ({ ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}
+{"version":3,"file":"Radio.esm.js","sources":["../../../src/Control/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\n\nimport type { BaseToggleProps } from './BaseToggle/types';\nimport { CircleBaseToggle } from './Toggle';\n\nconst _Radio: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>\n> = ({ ...props }, ref) => (\n  <CircleBaseToggle ref={ref} variant=\"radio\" type=\"radio\" {...props} />\n);\n\nexport const Radio = forwardRef(_Radio);\n"],"names":["ref","variant","type"],"mappings":";;;;;;;;AAAa;AAAA;AAOb;;AAGe;AACKA;AAAUC;AAAgBC;;AAA0B;;;"}

package/dist/src/Control/Toggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'type'> & {\n    variant: 'bookmark' | 'favorite';\n  }\n> = ({ variant, ...props }, ref) => (\n  <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n  & > svg {\n    border-radius: 50%;\n  }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;;;"}
+{"version":3,"file":"Toggle.cjs.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {\n    variant: 'bookmark' | 'favorite';\n  }\n> = ({ variant, ...props }, ref) => (\n  <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n  & > svg {\n    border-radius: 50%;\n  }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;;;"}

package/dist/src/Control/Toggle.d.ts

@@ -1,9 +1,9 @@
 import { type ForwardRefRenderFunction } from 'react';
 import type { BaseToggleProps } from './BaseToggle/types';
-export declare const _Toggle: ForwardRefRenderFunction<HTMLInputElement, Omit<BaseToggleProps, 'variant' | 'type'> & {
+export declare const _Toggle: ForwardRefRenderFunction<HTMLInputElement, Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {
     variant: 'bookmark' | 'favorite';
 }>;
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant"> & {
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<BaseToggleProps, "type" | "variant" | "indeterminate"> & {
     variant: 'bookmark' | 'favorite';
 } & import("react").RefAttributes<HTMLInputElement>>;
 export declare const CircleBaseToggle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<{
@@ -15,6 +15,7 @@ export declare const CircleBaseToggle: import("styled-components").IStyledCompon
     onToggle?: ((checked: boolean) => void) | undefined;
     size?: import("./BaseToggle/types").ToggleIconSizeType | undefined;
     type?: "checkbox" | "radio" | undefined;
+    indeterminate?: boolean | undefined;
 } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | `aria-${string}` | "size"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
 }, never>> & Omit<import("react").ForwardRefExoticComponent<{
@@ -26,5 +27,6 @@ export declare const CircleBaseToggle: import("styled-components").IStyledCompon
     onToggle?: ((checked: boolean) => void) | undefined;
     size?: import("./BaseToggle/types").ToggleIconSizeType | undefined;
     type?: "checkbox" | "radio" | undefined;
+    indeterminate?: boolean | undefined;
 } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | `aria-${string}` | "size"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/src/Control/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/Control/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,wBAAwB,CAC5C,gBAAgB,EAChB,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IAC1C,OAAO,EAAE,UAAU,GAAG,UAAU,CAAC;CAClC,CAGF,CAAC;AAEF,eAAO,MAAM,MAAM;aANN,UAAU,GAAG,UAAU;oDAMK,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;sMAI5B,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/Control/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,wBAAwB,CAC5C,gBAAgB,EAChB,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,eAAe,CAAC,GAAG;IAC5D,OAAO,EAAE,UAAU,GAAG,UAAU,CAAC;CAClC,CAGF,CAAC;AAEF,eAAO,MAAM,MAAM;aANN,UAAU,GAAG,UAAU;oDAMK,CAAC;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;sMAI5B,CAAC"}

package/dist/src/Control/Toggle.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.esm.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'type'> & {\n    variant: 'bookmark' | 'favorite';\n  }\n> = ({ variant, ...props }, ref) => (\n  <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n  & > svg {\n    border-radius: 50%;\n  }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;"}
+{"version":3,"file":"Toggle.esm.js","sources":["../../../src/Control/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ForwardRefRenderFunction } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseToggle } from './BaseToggle';\nimport type { BaseToggleProps } from './BaseToggle/types';\n\nexport const _Toggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {\n    variant: 'bookmark' | 'favorite';\n  }\n> = ({ variant, ...props }, ref) => (\n  <BaseToggle ref={ref} variant={variant} {...props} />\n);\n\nexport const Toggle = forwardRef(_Toggle);\n\nexport const CircleBaseToggle = styled(BaseToggle)`\n  & > svg {\n    border-radius: 50%;\n  }\n`;\n"],"names":["props","ref","variant","CircleBaseToggle"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAQN;AAKwB;AAAZA;AAAK;AACVC;AAAUC;;AAA+B;;AAK1CC;;"}

package/dist/src/stories/util.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as Icons from '@remember-web/icon';
 export type IconWithSizeNameType = Extract<keyof typeof Icons, `${string}${'S' | 'M' | 'L'}`>;
-export declare const iconNames: (IconWithSizeNameType | "none")[];
+export declare const iconNames: ("none" | IconWithSizeNameType)[];
 export declare const isIconName: (value: string) => value is IconWithSizeNameType;
 export declare function getIconComponentFromName(iconName: IconWithSizeNameType): import("react").FC<import("react").SVGProps<SVGSVGElement>>;
 //# sourceMappingURL=util.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -42,7 +42,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@remember-web/icon": "^0.1.6",
+    "@remember-web/icon": "^0.1.9",
     "@remember-web/mixin": "^0.1.14",
     "@remember-web/shared": "^0.1.0"
   },

package/src/Control/BaseToggle/ToggleIcon/index.tsx

@@ -5,6 +5,7 @@ import {
   ControlBookmarkOn,
   ControlCheckOff,
   ControlCheckOn,
+  ControlCheckboxIndeterminate,
   ControlCheckboxOff,
   ControlCheckboxOn,
   ControlFavoriteOff,
@@ -22,11 +23,31 @@ import {
 import type { ToggleStatusType, ToggleVariantType } from '../types';
 
 const ICON_NAME = {
-  check: { on: ControlCheckOn, off: ControlCheckOff },
-  checkbox: { on: ControlCheckboxOn, off: ControlCheckboxOff },
-  favorite: { on: ControlFavoriteOn, off: ControlFavoriteOff },
-  bookmark: { on: ControlBookmarkOn, off: ControlBookmarkOff },
-  radio: { on: ControlRadioOn, off: ControlRadioOff },
+  check: {
+    on: ControlCheckOn,
+    indeterminate: ControlCheckOn,
+    off: ControlCheckOff,
+  },
+  checkbox: {
+    on: ControlCheckboxOn,
+    indeterminate: ControlCheckboxIndeterminate,
+    off: ControlCheckboxOff,
+  },
+  favorite: {
+    on: ControlFavoriteOn,
+    indeterminate: ControlFavoriteOn,
+    off: ControlFavoriteOff,
+  },
+  bookmark: {
+    on: ControlBookmarkOn,
+    indeterminate: ControlBookmarkOn,
+    off: ControlBookmarkOff,
+  },
+  radio: {
+    on: ControlRadioOn,
+    indeterminate: ControlRadioOn,
+    off: ControlRadioOff,
+  },
 } as const satisfies Record<
   ToggleVariantType,
   Record<ToggleStatusType, WithSvgSizeComponentType>
@@ -44,6 +65,7 @@ export function ToggleIcon({
 } & SvgSizeProps) {
   const iconSize =
     typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;
+
   const Icon = ICON_NAME[variant][status];
 
   return <Icon className={className} size={iconSize} />;

package/src/Control/BaseToggle/index.tsx

@@ -24,6 +24,7 @@ const _BaseToggle: ForwardRefRenderFunction<
     type = 'checkbox',
     onToggle,
     onChange,
+    indeterminate,
     ...props
   },
   ref
@@ -38,7 +39,15 @@ const _BaseToggle: ForwardRefRenderFunction<
   return (
     <ToggleRoot className={className} $gap={labelGap}>
       <ToggleInput
-        ref={ref}
+        ref={(input) => {
+          if (typeof ref !== 'function' && ref) {
+            ref.current = input;
+          }
+
+          if (input) {
+            input.indeterminate = indeterminate ?? false;
+          }
+        }}
         className={inputClassName}
         type={type}
         {...props}
@@ -54,6 +63,12 @@ const _BaseToggle: ForwardRefRenderFunction<
         status="on"
         variant={variant}
       />
+      <ToggleIcon
+        className="indeterminateIcon"
+        size={size}
+        status="indeterminate"
+        variant={variant}
+      />
       <ToggleIcon
         className="offIcon"
         size={size}

package/src/Control/BaseToggle/styles.ts

@@ -44,6 +44,15 @@ export const ToggleInput = styled.input`
     display: none;
   }
 
+  &:indeterminate ~ svg.offIcon,
+  &:indeterminate ~ svg.onIcon {
+    display: none;
+  }
+
+  &:not(:indeterminate) ~ svg.indeterminateIcon {
+    display: none;
+  }
+
   &:disabled ~ svg {
     filter: grayscale(1) brightness(1.1);
   }

package/src/Control/BaseToggle/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-export type ToggleStatusType = 'on' | 'off';
+export type ToggleStatusType = 'on' | 'off' | 'indeterminate';
 export type ToggleVariantType =
   | 'check'
   | 'checkbox'
@@ -24,6 +24,7 @@ export type BaseToggleProps = {
   onToggle?: (checked: boolean) => void;
   size?: ToggleIconSizeType;
   type?: 'checkbox' | 'radio';
+  indeterminate?: boolean;
 } & Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'type' | `aria-${string}` | 'size'

package/src/Control/Checkbox.stories.tsx

@@ -19,10 +19,10 @@ export const Default: Story = {
     disabled: false,
     required: false,
     checked: false,
-    variant: 'checkbox',
     label: "I'm a Checkbox",
     size: 'medium',
     labelPosition: 'right',
+    indeterminate: false,
   },
   render: ({ ...args }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -30,6 +30,33 @@ export const Default: Story = {
     return (
       <Checkbox
         {...args}
+        variant="checkbox"
+        checked={checked}
+        onToggle={(v) => updateArgs({ checked: v })}
+      />
+    );
+  },
+};
+
+export const Check: Story = {
+  args: {
+    disabled: false,
+    required: false,
+    checked: false,
+    label: "I'm a Check",
+    size: 'medium',
+    labelPosition: 'right',
+  },
+  argTypes: {
+    indeterminate: { table: { disable: true } },
+  },
+  render: ({ ...args }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [{ checked }, updateArgs] = useArgs();
+    return (
+      <Checkbox
+        {...args}
+        variant="check"
         checked={checked}
         onToggle={(v) => updateArgs({ checked: v })}
       />

package/src/Control/Checkbox.tsx

@@ -5,11 +5,17 @@ import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import type { BaseToggleProps } from './BaseToggle/types';
 import { CircleBaseToggle } from './Toggle';
 
+type CheckboxProps<T> = Omit<BaseToggleProps, 'variant' | 'indeterminate'> & T;
+
 export const _Checkbox: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'type'> & {
-    variant?: 'checkbox' | 'check';
-  }
+  | CheckboxProps<{
+      variant: 'checkbox';
+      indeterminate?: boolean;
+    }>
+  | CheckboxProps<{
+      variant: 'check';
+    }>
 > = ({ variant = 'checkbox', ...props }, ref) => (
   <CircleBaseToggle ref={ref} variant={variant} {...props} />
 );

package/src/Control/Radio.tsx

@@ -7,7 +7,7 @@ import { CircleBaseToggle } from './Toggle';
 
 const _Radio: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type'>
+  Omit<BaseToggleProps, 'variant' | 'onToggle' | 'type' | 'indeterminate'>
 > = ({ ...props }, ref) => (
   <CircleBaseToggle ref={ref} variant="radio" type="radio" {...props} />
 );

package/src/Control/Toggle.tsx

@@ -8,7 +8,7 @@ import type { BaseToggleProps } from './BaseToggle/types';
 
 export const _Toggle: ForwardRefRenderFunction<
   HTMLInputElement,
-  Omit<BaseToggleProps, 'variant' | 'type'> & {
+  Omit<BaseToggleProps, 'variant' | 'type' | 'indeterminate'> & {
     variant: 'bookmark' | 'favorite';
   }
 > = ({ variant, ...props }, ref) => (