@remember-web/primitive 0.1.17 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/Control/BaseToggle/ToggleIcon/index.cjs.js +14 -3
- package/dist/src/Control/BaseToggle/ToggleIcon/index.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.d.ts.map +1 -1
- package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js +9 -3
- package/dist/src/Control/BaseToggle/ToggleIcon/index.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/styles.cjs.js +2 -2
- package/dist/src/Control/BaseToggle/styles.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/styles.esm.js +2 -2
- package/dist/src/Control/BaseToggle/styles.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Control/BaseToggle/ToggleIcon/index.tsx +14 -1
- package/src/Control/BaseToggle/styles.ts +10 -10
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
4
5
|
var icon = require('@remember-web/icon');
|
|
5
6
|
var util = require('@remember-web/icon/util');
|
|
7
|
+
var styled = require('styled-components');
|
|
6
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
9
|
|
|
10
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
|
|
13
|
+
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
14
|
+
|
|
15
|
+
var _templateObject;
|
|
8
16
|
var ICON_NAME = {
|
|
9
17
|
check: {
|
|
10
18
|
on: icon.ControlCheckOn,
|
|
@@ -39,11 +47,14 @@ function ToggleIcon(_ref) {
|
|
|
39
47
|
className = _ref.className;
|
|
40
48
|
var iconSize = typeof size === 'string' && util.isSvgRegularSize(size) ? util.SVG_SIZES[size] : size;
|
|
41
49
|
var Icon = ICON_NAME[variant][status];
|
|
42
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
43
|
-
className: className,
|
|
44
|
-
|
|
50
|
+
return /*#__PURE__*/jsxRuntime.jsx(ToggleIconContainer, {
|
|
51
|
+
className: "toggleIcon ".concat(className),
|
|
52
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
|
|
53
|
+
size: iconSize
|
|
54
|
+
})
|
|
45
55
|
});
|
|
46
56
|
}
|
|
57
|
+
var ToggleIconContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n"])));
|
|
47
58
|
|
|
48
59
|
exports.ToggleIcon = ToggleIcon;
|
|
49
60
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +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 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: ControlRadioOff,\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 <
|
|
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 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';\nimport styled from 'styled-components';\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: ControlRadioOff,\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 (\n <ToggleIconContainer className={`toggleIcon ${className}`}>\n <Icon size={iconSize} />\n </ToggleIconContainer>\n );\n}\n\nconst ToggleIconContainer = styled.div`\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n`;\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;;;;;;;;AAAa;AAyBb;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;;;AAMuBK;;AACbC;;AAAkB;AAG9B;AAEA;;"}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAGjC,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,2CAWf"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
2
3
|
import { ControlCheckOn, ControlCheckOff, ControlCheckboxOn, ControlCheckboxIndeterminate, ControlCheckboxOff, ControlFavoriteOn, ControlFavoriteOff, ControlBookmarkOn, ControlBookmarkOff, ControlRadioOn, ControlRadioOff } from '@remember-web/icon';
|
|
3
4
|
import { isSvgRegularSize, SVG_SIZES } from '@remember-web/icon/util';
|
|
5
|
+
import styled from 'styled-components';
|
|
4
6
|
import { jsx } from 'react/jsx-runtime';
|
|
5
7
|
|
|
8
|
+
var _templateObject;
|
|
6
9
|
var ICON_NAME = {
|
|
7
10
|
check: {
|
|
8
11
|
on: ControlCheckOn,
|
|
@@ -37,11 +40,14 @@ function ToggleIcon(_ref) {
|
|
|
37
40
|
className = _ref.className;
|
|
38
41
|
var iconSize = typeof size === 'string' && isSvgRegularSize(size) ? SVG_SIZES[size] : size;
|
|
39
42
|
var Icon = ICON_NAME[variant][status];
|
|
40
|
-
return /*#__PURE__*/jsx(
|
|
41
|
-
className: className,
|
|
42
|
-
|
|
43
|
+
return /*#__PURE__*/jsx(ToggleIconContainer, {
|
|
44
|
+
className: "toggleIcon ".concat(className),
|
|
45
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
46
|
+
size: iconSize
|
|
47
|
+
})
|
|
43
48
|
});
|
|
44
49
|
}
|
|
50
|
+
var ToggleIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n"])));
|
|
45
51
|
|
|
46
52
|
export { ToggleIcon };
|
|
47
53
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -1 +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 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: ControlRadioOff,\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 <
|
|
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 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';\nimport styled from 'styled-components';\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: ControlRadioOff,\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 (\n <ToggleIconContainer className={`toggleIcon ${className}`}>\n <Icon size={iconSize} />\n </ToggleIconContainer>\n );\n}\n\nconst ToggleIconContainer = styled.div`\n border-radius: 50%;\n\n > svg {\n display: block;\n }\n`;\n"],"names":["check","on","indeterminate","off","checkbox","favorite","bookmark","radio","className","size"],"mappings":";;;;;;;AAAa;AAyBb;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;;;AAMuBK;;AACbC;;AAAkB;AAG9B;AAEA;;"}
|
|
@@ -11,11 +11,11 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
12
12
|
|
|
13
13
|
var _templateObject, _templateObject2;
|
|
14
|
-
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 & >
|
|
14
|
+
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 & > .toggleIcon {\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 > .toggleIcon {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n"])), function (_ref) {
|
|
15
15
|
var $gap = _ref.$gap;
|
|
16
16
|
return $gap && "gap: ".concat($gap, "px;");
|
|
17
17
|
});
|
|
18
|
-
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 ~
|
|
18
|
+
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 ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ", ";\n outline-offset: -1px;\n }\n"])), mixin.primary100);
|
|
19
19
|
|
|
20
20
|
exports.ToggleInput = ToggleInput;
|
|
21
21
|
exports.ToggleRoot = ToggleRoot;
|
|
@@ -1 +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 & >
|
|
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 & > .toggleIcon {\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 > .toggleIcon {\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 ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
|
|
@@ -4,11 +4,11 @@ import styled from 'styled-components';
|
|
|
4
4
|
import { primary100 } from '@remember-web/mixin';
|
|
5
5
|
|
|
6
6
|
var _templateObject, _templateObject2;
|
|
7
|
-
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 & >
|
|
7
|
+
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 & > .toggleIcon {\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 > .toggleIcon {\n filter: grayscale(0.05) brightness(0.95);\n }\n }\n"])), function (_ref) {
|
|
8
8
|
var $gap = _ref.$gap;
|
|
9
9
|
return $gap && "gap: ".concat($gap, "px;");
|
|
10
10
|
});
|
|
11
|
-
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 ~
|
|
11
|
+
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 ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ", ";\n outline-offset: -1px;\n }\n"])), primary100);
|
|
12
12
|
|
|
13
13
|
export { ToggleInput, ToggleRoot };
|
|
14
14
|
//# sourceMappingURL=styles.esm.js.map
|
|
@@ -1 +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 & >
|
|
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 & > .toggleIcon {\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 > .toggleIcon {\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 ~ .toggleIcon.offIcon {\n display: none;\n }\n\n &:not(:checked) ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,\n &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {\n display: none;\n }\n\n &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {\n display: none;\n }\n\n &:disabled ~ .toggleIcon {\n filter: grayscale(1) brightness(1.1);\n }\n\n &:not(:disabled):active ~ .toggleIcon {\n filter: grayscale(0.1) brightness(0.9);\n }\n\n &:focus-visible ~ .toggleIcon {\n outline: solid 2px ${primary100};\n outline-offset: -1px;\n }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
|
package/package.json
CHANGED
|
@@ -19,6 +19,7 @@ import {
|
|
|
19
19
|
type SvgSizeProps,
|
|
20
20
|
type WithSvgSizeComponentType,
|
|
21
21
|
} from '@remember-web/icon/util';
|
|
22
|
+
import styled from 'styled-components';
|
|
22
23
|
|
|
23
24
|
import type { ToggleStatusType, ToggleVariantType } from '../types';
|
|
24
25
|
|
|
@@ -68,5 +69,17 @@ export function ToggleIcon({
|
|
|
68
69
|
|
|
69
70
|
const Icon = ICON_NAME[variant][status];
|
|
70
71
|
|
|
71
|
-
return
|
|
72
|
+
return (
|
|
73
|
+
<ToggleIconContainer className={`toggleIcon ${className}`}>
|
|
74
|
+
<Icon size={iconSize} />
|
|
75
|
+
</ToggleIconContainer>
|
|
76
|
+
);
|
|
72
77
|
}
|
|
78
|
+
|
|
79
|
+
const ToggleIconContainer = styled.div`
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
|
|
82
|
+
> svg {
|
|
83
|
+
display: block;
|
|
84
|
+
}
|
|
85
|
+
`;
|
|
@@ -13,7 +13,7 @@ export const ToggleRoot = styled.label<{ $gap?: number }>`
|
|
|
13
13
|
user-select: none;
|
|
14
14
|
align-items: center;
|
|
15
15
|
|
|
16
|
-
& >
|
|
16
|
+
& > .toggleIcon {
|
|
17
17
|
transition: filter 0.2s ease-in-out;
|
|
18
18
|
flex-shrink: 0;
|
|
19
19
|
}
|
|
@@ -23,7 +23,7 @@ export const ToggleRoot = styled.label<{ $gap?: number }>`
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
@media (hover: hover) {
|
|
26
|
-
&:hover >
|
|
26
|
+
&:hover > .toggleIcon {
|
|
27
27
|
filter: grayscale(0.05) brightness(0.95);
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -36,32 +36,32 @@ export const ToggleInput = styled.input`
|
|
|
36
36
|
height: 0px;
|
|
37
37
|
margin-left: -1px;
|
|
38
38
|
|
|
39
|
-
&:checked ~
|
|
39
|
+
&:checked ~ .toggleIcon.offIcon {
|
|
40
40
|
display: none;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
&:not(:checked) ~
|
|
43
|
+
&:not(:checked) ~ .toggleIcon.onIcon {
|
|
44
44
|
display: none;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
&[type='checkbox']:indeterminate ~
|
|
48
|
-
&[type='checkbox']:indeterminate ~
|
|
47
|
+
&[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,
|
|
48
|
+
&[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {
|
|
49
49
|
display: none;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
&[type='checkbox']:not(:indeterminate) ~
|
|
52
|
+
&[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {
|
|
53
53
|
display: none;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
&:disabled ~
|
|
56
|
+
&:disabled ~ .toggleIcon {
|
|
57
57
|
filter: grayscale(1) brightness(1.1);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
&:not(:disabled):active ~
|
|
60
|
+
&:not(:disabled):active ~ .toggleIcon {
|
|
61
61
|
filter: grayscale(0.1) brightness(0.9);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
&:focus-visible ~
|
|
64
|
+
&:focus-visible ~ .toggleIcon {
|
|
65
65
|
outline: solid 2px ${primary100};
|
|
66
66
|
outline-offset: -1px;
|
|
67
67
|
}
|