@remember-web/primitive 0.0.0-alpha.1

package/dist/primitive/src/Common/Typography/index.cjs

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var styles = require('./styles.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+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", "as", "color", "children", "ellipsis", "maxWidth"];
+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 Typography = function Typography(_ref, ref) {
+  var variant = _ref.variant,
+    as = _ref.as,
+    color = _ref.color,
+    children = _ref.children,
+    ellipsis = _ref.ellipsis,
+    maxWidth = _ref.maxWidth,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx(styles.StyledTypography, _objectSpread(_objectSpread({
+    ref: ref,
+    as: as,
+    $variant: variant,
+    $color: color,
+    $ellipsis: ellipsis,
+    $maxWidth: maxWidth
+  }, props), {}, {
+    children: children
+  }));
+};
+var Typography$1 = /*#__PURE__*/react.forwardRef(Typography);
+
+module.exports = Typography$1;
+//# sourceMappingURL=index.cjs.map

package/dist/primitive/src/Common/Typography/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\n\nimport { type TypographyStyle } from '@remember-web/mixin';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = <T extends ElementType>(\n  {\n    variant,\n    as,\n    color,\n    children,\n    ellipsis,\n    maxWidth,\n    ...props\n  }: TypographyProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <StyledTypography\n    ref={ref}\n    as={as}\n    $variant={variant}\n    $color={color}\n    $ellipsis={ellipsis}\n    $maxWidth={maxWidth}\n    {...props}\n  >\n    {children}\n  </StyledTypography>\n);\n\ntype TypographyProps<T extends ElementType> = {\n  variant: TypographyStyle;\n  as?: T;\n  color?: string;\n  children?: ReactNode;\n  ellipsis?: number;\n  maxWidth?: CSSProperties['maxWidth'];\n} & ComponentPropsWithoutRef<T>;\n\ntype TypographyComponentWithRef = <T extends ElementType = 'div'>(\n  props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }\n) => ReactElement | null;\n\nexport default forwardRef(Typography) as TypographyComponentWithRef;\n"],"names":["props","ref","as","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAgBb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}

package/dist/primitive/src/Common/Typography/index.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
+import { type TypographyStyle } from '@remember-web/mixin';
+type TypographyProps<T extends ElementType> = {
+    variant: TypographyStyle;
+    as?: T;
+    color?: string;
+    children?: ReactNode;
+    ellipsis?: number;
+    maxWidth?: CSSProperties['maxWidth'];
+} & ComponentPropsWithoutRef<T>;
+type TypographyComponentWithRef = <T extends ElementType = 'div'>(props: TypographyProps<T> & {
+    ref?: ComponentPropsWithRef<T>['ref'];
+}) => ReactElement | null;
+declare const _default: TypographyComponentWithRef;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/primitive/src/Common/Typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Typography/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA6B3D,KAAK,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI;IAC5C,OAAO,EAAE,eAAe,CAAC;IACzB,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEhC,KAAK,0BAA0B,GAAG,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC9D,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KAClE,YAAY,GAAG,IAAI,CAAC;;AAEzB,wBAAoE"}

package/dist/primitive/src/Common/Typography/index.js

@@ -0,0 +1,33 @@
+"use client";
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef } from 'react';
+import { StyledTypography } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["variant", "as", "color", "children", "ellipsis", "maxWidth"];
+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 Typography = function Typography(_ref, ref) {
+  var variant = _ref.variant,
+    as = _ref.as,
+    color = _ref.color,
+    children = _ref.children,
+    ellipsis = _ref.ellipsis,
+    maxWidth = _ref.maxWidth,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({
+    ref: ref,
+    as: as,
+    $variant: variant,
+    $color: color,
+    $ellipsis: ellipsis,
+    $maxWidth: maxWidth
+  }, props), {}, {
+    children: children
+  }));
+};
+var Typography$1 = /*#__PURE__*/forwardRef(Typography);
+
+export { Typography$1 as default };
+//# sourceMappingURL=index.js.map

package/dist/primitive/src/Common/Typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/Common/Typography/index.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport { forwardRef } from 'react';\n\nimport { type TypographyStyle } from '@remember-web/mixin';\n\nimport { StyledTypography } from './styles';\n\nconst Typography = <T extends ElementType>(\n  {\n    variant,\n    as,\n    color,\n    children,\n    ellipsis,\n    maxWidth,\n    ...props\n  }: TypographyProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <StyledTypography\n    ref={ref}\n    as={as}\n    $variant={variant}\n    $color={color}\n    $ellipsis={ellipsis}\n    $maxWidth={maxWidth}\n    {...props}\n  >\n    {children}\n  </StyledTypography>\n);\n\ntype TypographyProps<T extends ElementType> = {\n  variant: TypographyStyle;\n  as?: T;\n  color?: string;\n  children?: ReactNode;\n  ellipsis?: number;\n  maxWidth?: CSSProperties['maxWidth'];\n} & ComponentPropsWithoutRef<T>;\n\ntype TypographyComponentWithRef = <T extends ElementType = 'div'>(\n  props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }\n) => ReactElement | null;\n\nexport default forwardRef(Typography) as TypographyComponentWithRef;\n"],"names":["props","ref","as","$variant","$color","$ellipsis","$maxWidth","children"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAgBb;AAUsC;;;;;;AAF/BA;AAAK;AAKRC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAoB;AACXC;AAEA;AACQ;AAgBrB;;"}

package/dist/primitive/src/Common/Typography/styles.cjs

@@ -0,0 +1,26 @@
+"use client";
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var mixin = require('@remember-web/mixin');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject;
+var StyledTypography = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", ";\n"])), function (_ref) {
+  var $color = _ref.$color,
+    $variant = _ref.$variant,
+    $ellipsis = _ref.$ellipsis,
+    $maxWidth = _ref.$maxWidth;
+  return [mixin.getTypographyStyles($variant), $ellipsis && mixin.ellipsis($ellipsis), styled.css({
+    color: $color,
+    maxWidth: $maxWidth
+  })];
+});
+
+exports.StyledTypography = StyledTypography;
+//# sourceMappingURL=styles.cjs.map

package/dist/primitive/src/Common/Typography/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nimport {\n  ellipsis,\n  getTypographyStyles,\n  type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n  $variant: TypographyStyle;\n  $color?: string;\n  $ellipsis?: number;\n  $maxWidth?: CSSProperties['maxWidth'];\n}>`\n  ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n    getTypographyStyles($variant),\n    $ellipsis && ellipsis($ellipsis),\n    css({ color: $color, maxWidth: $maxWidth }),\n  ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;;;;;;;;AAAa;AAWAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}

package/dist/primitive/src/Common/Typography/styles.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+import { type TypographyStyle } from '@remember-web/mixin';
+export declare const StyledTypography: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: TypographyStyle;
+    $color?: string | undefined;
+    $ellipsis?: number | undefined;
+    $maxWidth?: CSSProperties['maxWidth'];
+}>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/primitive/src/Common/Typography/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Common/Typography/styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,gBAAgB;cACjB,eAAe;;;gBAGb,aAAa,CAAC,UAAU,CAAC;GAOtC,CAAC"}

package/dist/primitive/src/Common/Typography/styles.js

@@ -0,0 +1,19 @@
+"use client";
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled, { css } from 'styled-components';
+import { getTypographyStyles, ellipsis } from '@remember-web/mixin';
+
+var _templateObject;
+var StyledTypography = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+  var $color = _ref.$color,
+    $variant = _ref.$variant,
+    $ellipsis = _ref.$ellipsis,
+    $maxWidth = _ref.$maxWidth;
+  return [getTypographyStyles($variant), $ellipsis && ellipsis($ellipsis), css({
+    color: $color,
+    maxWidth: $maxWidth
+  })];
+});
+
+export { StyledTypography };
+//# sourceMappingURL=styles.js.map

package/dist/primitive/src/Common/Typography/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/Common/Typography/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\n\nimport {\n  ellipsis,\n  getTypographyStyles,\n  type TypographyStyle,\n} from '@remember-web/mixin';\n\nexport const StyledTypography = styled.div<{\n  $variant: TypographyStyle;\n  $color?: string;\n  $ellipsis?: number;\n  $maxWidth?: CSSProperties['maxWidth'];\n}>`\n  ${({ $color, $variant, $ellipsis, $maxWidth }) => [\n    getTypographyStyles($variant),\n    $ellipsis && ellipsis($ellipsis),\n    css({ color: $color, maxWidth: $maxWidth }),\n  ]};\n`;\n"],"names":["StyledTypography","color","maxWidth"],"mappings":";;;;;AAAa;AAWAA;AAMT;;;;AAAyC;AAGnCC;AAAeC;AAAoB;AAC1C;;"}

package/dist/primitive/src/Common/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Divider';
+export * from './Flex';
+export * from './Grid';
+export * from './Spinner';
+export { default as Typography } from './Typography';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitive/src/Common/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1,44 @@
+"use client";
+'use strict';
+
+var icon = require('@remember-web/icon');
+var util = require('@remember-web/icon/util');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ICON_NAME = {
+  check: {
+    on: icon.ControlCheckOn,
+    off: icon.ControlCheckOff
+  },
+  checkbox: {
+    on: icon.ControlCheckboxOn,
+    off: icon.ControlCheckboxOff
+  },
+  favorite: {
+    on: icon.ControlFavoriteOn,
+    off: icon.ControlFavoriteOff
+  },
+  bookmark: {
+    on: icon.ControlBookmarkOn,
+    off: icon.ControlBookmarkOff
+  },
+  radio: {
+    on: icon.ControlRadioOn,
+    off: icon.ControlRadioOff
+  }
+};
+function ToggleIcon(_ref) {
+  var size = _ref.size,
+    status = _ref.status,
+    variant = _ref.variant,
+    className = _ref.className;
+  var iconSize = typeof size === 'string' && util.isSvgRegularSize(size) ? util.SVG_SIZES[size] : size;
+  var Icon = ICON_NAME[variant][status];
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
+    className: className,
+    size: iconSize
+  });
+}
+
+exports.ToggleIcon = ToggleIcon;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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';\n\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":";;;;;;;AAwBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}

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

@@ -0,0 +1,8 @@
+import { type SvgSizeProps } from '@remember-web/icon/util';
+import type { ToggleStatusType, ToggleVariantType } from '../types';
+export declare function ToggleIcon({ size, status, variant, className, }: {
+    variant: ToggleVariantType;
+    status: ToggleStatusType;
+    className?: string;
+} & SvgSizeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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;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"}

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

@@ -0,0 +1,42 @@
+"use client";
+import { ControlCheckOn, ControlCheckOff, ControlCheckboxOn, 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,
+    off: ControlCheckOff
+  },
+  checkbox: {
+    on: ControlCheckboxOn,
+    off: ControlCheckboxOff
+  },
+  favorite: {
+    on: ControlFavoriteOn,
+    off: ControlFavoriteOff
+  },
+  bookmark: {
+    on: ControlBookmarkOn,
+    off: ControlBookmarkOff
+  },
+  radio: {
+    on: ControlRadioOn,
+    off: ControlRadioOff
+  }
+};
+function ToggleIcon(_ref) {
+  var size = _ref.size,
+    status = _ref.status,
+    variant = _ref.variant,
+    className = _ref.className;
+  var iconSize = typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;
+  var Icon = ICON_NAME[variant][status];
+  return /*#__PURE__*/jsx(Icon, {
+    className: className,
+    size: iconSize
+  });
+}
+
+export { ToggleIcon };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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';\n\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":";;;;;AAwBA;AACEA;AAASC;AAAoBC;;AAC7BC;AAAYF;AAAuBC;;AACnCE;AAAYH;AAAuBC;;AACnCG;AAAYJ;AAAuBC;;AACnCI;AAASL;AAAoBC;AAAqB;AACpD;AAKO;AASW;;;;AAChB;;;AAIaK;AAAsBC;AAAe;AACpD;;"}

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

@@ -0,0 +1,74 @@
+"use client";
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+require('../../Common/Divider/index.cjs');
+require('../../Common/Flex/index.cjs');
+require('../../Common/Grid/index.cjs');
+require('@remember-web/icon');
+require('../../Common/Spinner/styles.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var index$1 = require('../../Common/Typography/index.cjs');
+var index = require('./ToggleIcon/index.cjs');
+var styles = require('./styles.cjs');
+
+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"];
+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 variant = _ref.variant,
+    _label = _ref.label,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
+    className = _ref.className,
+    inputClassName = _ref.inputClassName,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$labelGap = _ref.labelGap,
+    labelGap = _ref$labelGap === void 0 ? size === 'small' ? 2 : 4 : _ref$labelGap,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'checkbox' : _ref$type,
+    onToggle = _ref.onToggle,
+    _onChange = _ref.onChange,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  var isStringLabel = typeof _label === 'string';
+  var label = isStringLabel ? /*#__PURE__*/jsxRuntime.jsx(index$1, {
+    variant: "Body1",
+    children: _label
+  }) : _label;
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.ToggleRoot, {
+    className: className,
+    $gap: labelGap,
+    children: [/*#__PURE__*/jsxRuntime.jsx(styles.ToggleInput, _objectSpread(_objectSpread({
+      ref: ref,
+      className: inputClassName,
+      type: type
+    }, props), {}, {
+      onChange: function onChange(e) {
+        _onChange === null || _onChange === void 0 || _onChange(e);
+        onToggle === null || onToggle === void 0 || onToggle(e.target.checked);
+      }
+    })), labelPosition === 'left' && label, /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
+      className: "onIcon",
+      size: size,
+      status: "on",
+      variant: variant
+    }), /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
+      className: "offIcon",
+      size: size,
+      status: "off",
+      variant: variant
+    }), labelPosition === 'right' && label]
+  });
+};
+var BaseToggle = /*#__PURE__*/react.forwardRef(_BaseToggle);
+
+exports.BaseToggle = BaseToggle;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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;;;"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const BaseToggle: import("react").ForwardRefExoticComponent<{
+    variant: import("./types").ToggleVariantType;
+    label?: import("react").ReactNode;
+    labelPosition?: "left" | "right" | undefined;
+    labelGap?: number | undefined;
+    inputClassName?: string | undefined;
+    onToggle?: ((checked: boolean) => void) | undefined;
+    size?: import("./types").ToggleIconSizeType | undefined;
+    type?: "checkbox" | "radio" | undefined;
+} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | `aria-${string}` | "size"> & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,67 @@
+"use client";
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef } from 'react';
+import '../../Common/Divider/index.js';
+import '../../Common/Flex/index.js';
+import '../../Common/Grid/index.js';
+import '@remember-web/icon';
+import '../../Common/Spinner/styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Typography from '../../Common/Typography/index.js';
+import { ToggleIcon } from './ToggleIcon/index.js';
+import { ToggleRoot, ToggleInput } from './styles.js';
+
+var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange"];
+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 variant = _ref.variant,
+    _label = _ref.label,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
+    className = _ref.className,
+    inputClassName = _ref.inputClassName,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$labelGap = _ref.labelGap,
+    labelGap = _ref$labelGap === void 0 ? size === 'small' ? 2 : 4 : _ref$labelGap,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'checkbox' : _ref$type,
+    onToggle = _ref.onToggle,
+    _onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isStringLabel = typeof _label === 'string';
+  var label = isStringLabel ? /*#__PURE__*/jsx(Typography, {
+    variant: "Body1",
+    children: _label
+  }) : _label;
+  return /*#__PURE__*/jsxs(ToggleRoot, {
+    className: className,
+    $gap: labelGap,
+    children: [/*#__PURE__*/jsx(ToggleInput, _objectSpread(_objectSpread({
+      ref: ref,
+      className: inputClassName,
+      type: type
+    }, props), {}, {
+      onChange: function onChange(e) {
+        _onChange === null || _onChange === void 0 || _onChange(e);
+        onToggle === null || onToggle === void 0 || onToggle(e.target.checked);
+      }
+    })), labelPosition === 'left' && label, /*#__PURE__*/jsx(ToggleIcon, {
+      className: "onIcon",
+      size: size,
+      status: "on",
+      variant: variant
+    }), /*#__PURE__*/jsx(ToggleIcon, {
+      className: "offIcon",
+      size: size,
+      status: "off",
+      variant: variant
+    }), labelPosition === 'right' && label]
+  });
+};
+var BaseToggle = /*#__PURE__*/forwardRef(_BaseToggle);
+
+export { BaseToggle };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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;;;"}

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

@@ -0,0 +1,22 @@
+"use client";
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var mixin = require('@remember-web/mixin');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2;
+var ToggleRoot = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ", "\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"])), function (_ref) {
+  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);
+
+exports.ToggleInput = ToggleInput;
+exports.ToggleRoot = ToggleRoot;
+//# sourceMappingURL=styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs","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;;;"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ToggleRoot: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $gap?: number | undefined;
+}>>;
+export declare const ToggleInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,14 @@
+"use client";
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { primary100 } from '@remember-web/mixin';
+
+var _templateObject, _templateObject2;
+var ToggleRoot = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ", "\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"])), function (_ref) {
+  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);
+
+export { ToggleInput, ToggleRoot };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.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;;"}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export type ToggleStatusType = 'on' | 'off';
+export type ToggleVariantType = 'check' | 'checkbox' | 'favorite' | 'bookmark' | 'radio';
+export type ToggleIconSizeType = 'small' | 'medium';
+export type BaseToggleProps = {
+    variant: ToggleVariantType;
+    label?: ReactNode;
+    /**
+     * @default right
+     * */
+    labelPosition?: 'left' | 'right';
+    /**
+     * @default 4
+     * */
+    labelGap?: number;
+    inputClassName?: string;
+    onToggle?: (checked: boolean) => void;
+    size?: ToggleIconSizeType;
+    type?: 'checkbox' | 'radio';
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | `aria-${string}` | 'size'>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/primitive/src/Control/Checkbox.cjs

@@ -0,0 +1,31 @@
+"use client";
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var Toggle = require('./Toggle.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+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"];
+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 _Checkbox = function _Checkbox(_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'checkbox' : _ref$variant,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx(Toggle.CircleBaseToggle, _objectSpread({
+    ref: ref,
+    variant: variant
+  }, props));
+};
+var Checkbox = /*#__PURE__*/react.forwardRef(_Checkbox);
+
+exports.Checkbox = Checkbox;
+exports._Checkbox = _Checkbox;
+//# sourceMappingURL=Checkbox.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","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;;;;"}