@scaleflex/ui-tw 0.0.1

package/core/popper/types/position.js

@@ -0,0 +1,17 @@
+export var Position = {
+  AutoStart: 'auto-start',
+  Auto: 'auto',
+  AutoEnd: 'auto-end',
+  TopStart: 'top-start',
+  Top: 'top',
+  TopEnd: 'top-end',
+  BottomStart: 'bottom-start',
+  Bottom: 'bottom',
+  BottomEnd: 'bottom-end',
+  LeftStart: 'left-start',
+  Left: 'left',
+  LeftEnd: 'left-end',
+  RightStart: 'right-start',
+  Right: 'right',
+  RightEnd: 'right-end'
+};

package/core/popper/types/strategy.d.ts

@@ -0,0 +1,4 @@
+export declare const Strategy: {
+    readonly Absloute: "absolute";
+    readonly Fixed: "fixed";
+};

package/core/popper/types/strategy.js

@@ -0,0 +1,4 @@
+export var Strategy = {
+  Absloute: 'absolute',
+  Fixed: 'fixed'
+};

package/core/radio/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './radio.component';
+export type { RadioProps } from './radio.props';
+export * from './size';

package/core/radio/index.js

@@ -0,0 +1,2 @@
+export { default } from './radio.component';
+export * from './size';

package/core/radio/radio.component.d.ts

@@ -0,0 +1,3 @@
+import type { RadioProps } from './radio.props';
+declare const Radio: ({ size, checked, onChange, radioProps, readOnly, disabled, ref, ...rest }: RadioProps) => JSX.Element;
+export default Radio;

package/core/radio/radio.component.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "checked", "onChange", "radioProps", "readOnly", "disabled", "ref"];
+import React from 'react';
+import { cn } from '../../utils/functions/shadcn-utils';
+import { RadioSize } from './size';
+var Radio = function Radio(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? RadioSize.Sm : _ref$size,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    onChange = _ref.onChange,
+    radioProps = _ref.radioProps,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cursorStyleClasses = disabled ? 'cursor-default' : 'cursor-pointer';
+  var radioInputClasses = cn('peer border-borders-primary-stateless absolute z-50 m-0 rounded-full border-1 border-solid opacity-0', cursorStyleClasses, "".concat(size == RadioSize.Sm && 'w-4 h-4'), "".concat(size == RadioSize.Md && 'w-5 h-5'));
+  var radioBoxTransitionClasses = cn('peer-hover:before:transition-all peer-hover:before:duration-100 peer-hover:before:ease-out', 'peer-checked:before:transition-all peer-checked:before:duration-100 peer-checked:before:ease-out', 'peer-checked:after:transition-all peer-checked:after:duration-100 peer-checked:after:ease-out');
+  var radioBoxClasses = cn('rounded-full border-1 border-solid box-content relative', "".concat(disabled ? 'border-borders-secondary' : 'border-borders-primary-stateless'), "".concat(size == RadioSize.Sm ? 'w-4 h-4' : ''), "".concat(size == RadioSize.Md ? 'w-5 h-5' : ''), 'before:bg-accent-stateless-0-4-opacity before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:block before:rounded-full before:opacity-0 before:content-[""] before:z-10', "".concat(size == RadioSize.Sm ? 'before:w-1.5 before:h-1.5' : ''), "".concat(size == RadioSize.Md ? 'before:w-2 before:h-2' : ''), "".concat(disabled ? 'before:cursor-default' : 'before:cursor-pointer'), 'after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:block after:rounded-full after:opacity-0 after:content-[""]', "".concat(size == RadioSize.Sm ? 'after:w-4 after:h-4' : ''), "".concat(size == RadioSize.Md ? 'after:w-5 after:h-5' : ''), "".concat(disabled ? 'after:cursor-default' : 'after:cursor-pointer'), "".concat(disabled ? 'after:bg-background-active' : 'after:bg-accent-primary'), "".concat(disabled ? 'after:opacity-100' : 'after:opacity-0'), 'peer-checked:before:opacity-100 peer-checked:before:bg-icons-invert peer-checked:after:opacity-100', "".concat(disabled ? 'peer-checked:after:bg-background-grey' : 'peer-checked:after:bg-accent-primary'), radioBoxTransitionClasses, 'peer-hover:before:opacity-100 ');
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('items-[inherit] justify-[inherit] relative inline-flex', cursorStyleClasses)
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("input", _extends({
+    className: radioInputClasses,
+    type: "radio",
+    checked: checked,
+    onChange: readOnly || disabled ? undefined : onChange,
+    disabled: disabled
+  }, radioProps)), /*#__PURE__*/React.createElement("span", {
+    className: "peer-checked:before:bg-icons-invert -order-1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: radioBoxClasses
+  }));
+};
+export default Radio;

package/core/radio/radio.mixin.d.ts

@@ -0,0 +1,13 @@
+import { WithTheme } from '../../theme/entity';
+export declare const sizeRadioMixin: {
+    sm: import("styled-components").RuleSet<object>;
+    md: import("styled-components").RuleSet<object>;
+};
+export declare const sizeInnerRadioMixin: {
+    sm: import("styled-components").RuleSet<object>;
+    md: import("styled-components").RuleSet<object>;
+};
+export declare const fontSizeRadioLabelMixin: {
+    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+};

package/core/radio/radio.mixin.js

@@ -0,0 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from 'styled-components';
+import { FontVariant } from '../../utils/types/typography';
+import { RadioSize } from './size';
+export var sizeRadioMixin = _defineProperty(_defineProperty({}, RadioSize.Sm, css(["width:16px;height:16px;"])), RadioSize.Md, css(["width:20px;height:20px;"]));
+export var sizeInnerRadioMixin = _defineProperty(_defineProperty({}, RadioSize.Sm, css(["width:6px;height:6px;"])), RadioSize.Md, css(["width:8px;height:8px;"]));
+export var fontSizeRadioLabelMixin = _defineProperty(_defineProperty({}, RadioSize.Sm, function (_ref) {
+  var font = _ref.theme.typography.font;
+  return css(font[FontVariant.LabelMedium]);
+}), RadioSize.Md, function (_ref2) {
+  var font = _ref2.theme.typography.font;
+  return css(font[FontVariant.LabelLarge]);
+});

package/core/radio/radio.props.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEvent, Ref } from 'react';
+import { Values } from '../../utils/types';
+import { RadioSize } from './size';
+export type RadioSizeType = Values<typeof RadioSize>;
+export interface RadioProps extends React.HTMLAttributes<HTMLInputElement> {
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    radioProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: RadioSizeType;
+    ref?: Ref<HTMLDivElement>;
+}

package/core/radio/radio.props.js

@@ -0,0 +1 @@
+export {};

package/core/radio/radio.styles.d.ts

@@ -0,0 +1,19 @@
+import type { RadioProps } from './radio.props';
+declare const Styled: {
+    Radio: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, RadioProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+    }>, never>, RadioProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    RadioBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, RadioProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+};
+export default Styled;

package/core/radio/radio.styles.js

@@ -0,0 +1,44 @@
+import styled, { css } from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+import { Color as PColor } from '../../utils/types/palette';
+import { sizeInnerRadioMixin, sizeRadioMixin } from './radio.mixin';
+import { RadioSize } from './size';
+var baseClassName = 'Radio';
+var Radio = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-1hf30ri-0"
+})(function (_ref) {
+  var disabled = _ref.disabled,
+    theme = _ref.theme;
+  return css(["position:relative;display:inline-flex;align-items:inherit;justify-content:inherit;cursor:", ";color:", ";"], disabled ? 'default' : 'pointer', theme.palette[PColor.AccentPrimary]);
+});
+var RadioBox = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'radio')
+}).withConfig({
+  componentId: "sc-1hf30ri-1"
+})(function (_ref2) {
+  var disabled = _ref2.disabled,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? RadioSize.Sm : _ref2$size,
+    theme = _ref2.theme;
+  return css(["border-radius:50%;border:1px solid ", ";", " &::before{position:absolute;content:'';top:50%;left:50%;display:block;background:", ";border-radius:50%;cursor:", ";transform:translate(-50%,-50%);opacity:0;", "}&::after{content:'';width:100%;height:100%;display:block;background:", ";border-radius:50%;cursor:", ";opacity:", ";}"], disabled ? theme.palette[PColor.BordersSecondary] : theme.palette[PColor.BorderPrimaryStateless], sizeRadioMixin[size], theme.palette[PColor.AccentStateless_0_4_Opacity], disabled ? 'default' : 'pointer', sizeInnerRadioMixin[size], disabled ? theme.palette[PColor.BackgroundActive] : theme.palette[PColor.AccentStateless], disabled ? 'default' : 'pointer', disabled ? 1 : 0);
+});
+var Input = /*#__PURE__*/styled.input.attrs({
+  className: generateClassNames(baseClassName, 'Input'),
+  type: 'radio'
+}).withConfig({
+  componentId: "sc-1hf30ri-2"
+})(function (_ref3) {
+  var disabled = _ref3.disabled,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? RadioSize.Sm : _ref3$size,
+    theme = _ref3.theme;
+  return css(["position:absolute;opacity:0;border:1px solid ", ";border-radius:50%;cursor:", ";margin:0;z-index:99;", " &:hover + ", "{&::before{opacity:", ";transition:all 100ms ease-out;}}&:checked + ", "{&::before{opacity:1;background:", ";transition:all 100ms ease-out;}&::after{opacity:1;background:", ";transition:all 100ms ease-out;}}"], theme.palette[PColor.BorderPrimaryStateless], disabled ? 'default' : 'pointer', sizeRadioMixin[size], RadioBox, disabled ? 0 : 1, RadioBox, theme.palette[PColor.IconsInvert], disabled ? theme.palette[PColor.BackgroundGrey] : theme.palette[PColor.AccentStateless]);
+});
+var Styled = applyDisplayNames({
+  Radio: Radio,
+  Input: Input,
+  RadioBox: RadioBox
+});
+export default Styled;

package/core/radio/size.d.ts

@@ -0,0 +1,4 @@
+export declare const RadioSize: {
+    readonly Sm: "sm";
+    readonly Md: "md";
+};

package/core/radio/size.js

@@ -0,0 +1,4 @@
+export var RadioSize = {
+  Sm: 'sm',
+  Md: 'md'
+};

package/core/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './radio-group.component';
+export type { RadioGroupProps } from './radio-group.props';

package/core/radio-group/index.js

@@ -0,0 +1 @@
+export { default } from './radio-group.component';

package/core/radio-group/radio-group.component.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupProps } from './radio-group.props';
+declare const RadioGroup: ({ label, radioProps, readOnly, disabled, radioStyles, labelStyles, onChange, size, checked, labelReverseOrder, ref, ...rest }: RadioGroupProps) => JSX.Element;
+export default RadioGroup;

package/core/radio-group/radio-group.component.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "radioProps", "readOnly", "disabled", "radioStyles", "labelStyles", "onChange", "size", "checked", "labelReverseOrder", "ref"];
+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; }
+import React from 'react';
+import { cn } from '../../utils/functions/shadcn-utils';
+import Radio, { RadioSize } from '../radio';
+var RadioGroup = function RadioGroup(_ref) {
+  var label = _ref.label,
+    radioProps = _ref.radioProps,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    radioStyles = _ref.radioStyles,
+    labelStyles = _ref.labelStyles,
+    onChange = _ref.onChange,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? RadioSize.Sm : _ref$size,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    _ref$labelReverseOrde = _ref.labelReverseOrder,
+    labelReverseOrder = _ref$labelReverseOrde === void 0 ? false : _ref$labelReverseOrde,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cursorStyleClasses = disabled ? 'cursor-default' : 'cursor-pointer';
+  var labelClasses = cn("flex items-center gap-2 ".concat(disabled ? 'text-textplaceholder' : 'text-textprimary'), cursorStyleClasses);
+  var labelTextClasses = "".concat(labelReverseOrder ? 'order-2' : '');
+  var radioGroupWraperClasses = cn('relative box-content inline-flex items-center', cursorStyleClasses);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: radioGroupWraperClasses,
+    ref: ref
+  }, rest), /*#__PURE__*/React.createElement("label", {
+    className: labelClasses,
+    style: _objectSpread({}, labelStyles)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: labelTextClasses
+  }, label), /*#__PURE__*/React.createElement(Radio, {
+    radioProps: radioProps,
+    readOnly: readOnly,
+    disabled: disabled,
+    checked: checked,
+    onChange: onChange,
+    size: size,
+    style: _objectSpread({}, radioStyles)
+  })));
+};
+export default RadioGroup;

package/core/radio-group/radio-group.props.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'react';
+import { RadioSizeType } from '../radio/radio.props';
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLLabelElement> {
+    label?: React.ReactNode;
+    radioProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    radioStyles?: object;
+    labelStyles?: object;
+    readOnly?: boolean;
+    disabled?: boolean;
+    labelReverseOrder?: boolean;
+    checked?: boolean;
+    size?: RadioSizeType;
+    onChange?: (event: any) => void;
+    ref?: Ref<HTMLLabelElement>;
+}

package/core/radio-group/radio-group.props.js

@@ -0,0 +1 @@
+export {};

package/core/radio-group/radio-group.styles.d.ts

@@ -0,0 +1,14 @@
+import type { RadioGroupProps } from './radio-group.props';
+declare const Styled: {
+    RadioGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLabelElement> | null | undefined;
+    }>, never>, RadioGroupProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, RadioGroupProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+};
+export default Styled;

package/core/radio-group/radio-group.styles.js

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+import { Color as PColor } from '../../utils/types/palette';
+import { fontSizeRadioLabelMixin } from '../radio/radio.mixin';
+import { RadioSize } from '../radio/size';
+var baseClassName = 'RadioGroup';
+var Label = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'Label')
+}).withConfig({
+  componentId: "sc-r0r6y0-0"
+})(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? RadioSize.Sm : _ref$size,
+    disabled = _ref.disabled,
+    theme = _ref.theme;
+  return css(["display:flex;align-items:center;margin-left:8px;cursor:", ";color:", ";", ""], disabled ? 'default' : 'pointer', disabled ? theme.palette[PColor.ButtonDisabledText] : theme.palette[PColor.TextPrimary], fontSizeRadioLabelMixin[size]);
+});
+var RadioGroup = /*#__PURE__*/styled.label.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-r0r6y0-1"
+})(function (_ref2) {
+  var disabled = _ref2.disabled;
+  return css(["position:relative;display:inline-flex;cursor:", ";"], disabled ? 'default' : 'pointer');
+});
+var Styled = applyDisplayNames({
+  RadioGroup: RadioGroup,
+  Label: Label
+});
+export default Styled;

package/core/switcher/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './switcher.component';
+export type { SwitcherProps } from './switcher.props';
+export * from './switcher-size';

package/core/switcher/index.js

@@ -0,0 +1,2 @@
+export { default } from './switcher.component';
+export * from './switcher-size';

package/core/switcher/switcher-size.d.ts

@@ -0,0 +1,5 @@
+export declare const SwitcherSize: {
+    readonly Sm: "sm";
+    readonly Md: "md";
+    readonly Lg: "lg";
+};

package/core/switcher/switcher-size.js

@@ -0,0 +1,5 @@
+export var SwitcherSize = {
+  Sm: 'sm',
+  Md: 'md',
+  Lg: 'lg'
+};

package/core/switcher/switcher.component.d.ts

@@ -0,0 +1,3 @@
+import type { SwitcherProps } from './switcher.props';
+declare const Switcher: ({ size, checked, onChange, SwitcherPropsData, switcherProps, readOnly, disabled, children, ref, ...rest }: SwitcherProps) => JSX.Element;
+export default Switcher;

package/core/switcher/switcher.component.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "checked", "onChange", "SwitcherPropsData", "switcherProps", "readOnly", "disabled", "children", "ref"];
+import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
+import React from 'react';
+import { ignoreEvent } from '../../utils/functions';
+import { SwitcherSize } from './switcher-size';
+var Switcher = function Switcher(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SwitcherSize.Sm : _ref$size,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    onChange = _ref.onChange,
+    SwitcherPropsData = _ref.SwitcherPropsData,
+    switcherProps = _ref.switcherProps,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cursorStyleClasses = disabled ? 'cursor-default' : 'cursor-pointer';
+  var switcherWrapperClasses = "switcher-wrapper relative inline-flex ".concat(cursorStyleClasses);
+  var switcherSize = size === SwitcherSize.Lg ? 'w-15 h-7.5' : size === SwitcherSize.Md ? 'w-10 h-5' : size === SwitcherSize.Sm ? 'w-8 h-4' : 'w-8 h-4';
+  var switcherIconSize = size === SwitcherSize.Lg ? 'before:w-6 before:h-6' : size === SwitcherSize.Md ? 'before:w-4 before:h-4' : size === SwitcherSize.Sm ? 'before:w-3 before:h-3' : 'before:w-3 before:h-3';
+  var inputClasses = cn('peer opacity-0 absolute z-50 ', cursorStyleClasses, switcherSize);
+  var switcherIconClasses = cn('before:content-[""] before:absolute before:rounded-3xl before:top-1/2 before:-translate-y-1/2 peer-not-checked:before:translate-x-1/2', // `${size === SwitcherSize.Lg ? 'before:left-0.75' : 'before:left-0.5'}`,
+  // `${size === SwitcherSize.Lg ? 'peer-not-checked:before:left-0.75 peer-checked:before:right-0.75' : 'peer-not-checked:before:left-0.5 peer-checked:before:right-0.5'}`,
+  "".concat(size === SwitcherSize.Lg ? 'peer-not-checked:before:right-3/4 peer-checked:before:right-0.75' : ''), "".concat(size === SwitcherSize.Md ? 'peer-not-checked:before:right-3/4 peer-checked:before:right-0.5' : ''), "".concat(size === SwitcherSize.Sm ? 'peer-not-checked:before:right-3/4 peer-checked:before:right-0.5' : ''), "".concat(disabled ? 'before:bg-background-grey' : 'before:bg-icons-muted'), 'peer-checked:before:bg-background-stateless', 'before:transition-[right,opacity] before:duration-[300ms,500ms] before:ease-[ease,ease] before:delay-[0s,0s]', switcherIconSize);
+  var switcherIconInnerSize = size === SwitcherSize.Lg ? 'after:w-2 after:h-2' : size === SwitcherSize.Md ? 'after:w-1.5 after:h-1.5' : size === SwitcherSize.Sm ? 'after:w-1 after:h-1' : 'after:w-1 after:h-1';
+  var switcherIconInnerCircleClasses = cn('after:content-[""] after:absolute after:rounded-2xl after:top-1/2 after:bg-icons-invert after:-translate-y-1/2 peer-not-checked:after:translate-x-1/2 after:opacity-0', // `${size === SwitcherSize.Lg ? 'peer-not-checked:after:left-[6px] peer-checked:after:right-[9.5px]' : ''}`,
+  // `${size === SwitcherSize.Md ? 'peer-not-checked:after:left-[3.5px] peer-checked:after:right-[6px]' : ''}`,
+  // `${size === SwitcherSize.Sm ? 'peer-not-checked:after:left-[3.5px] peer-checked:after:right-[5px]' : ''}`,
+  "".concat(size === SwitcherSize.Lg ? 'peer-not-checked:after:right-3/4 peer-checked:after:right-[9.5px]' : ''), "".concat(size === SwitcherSize.Md ? 'peer-not-checked:after:right-3/4 peer-checked:after:right-[6px]' : ''), "".concat(size === SwitcherSize.Sm ? 'peer-not-checked:after:right-3/4 peer-checked:after:right-[5px]' : ''), 'after:transition-[right,opacity] after:duration-[300ms,500ms] after:ease-[ease,ease] after:delay-[0s,0s]', "".concat(disabled ? '' : 'peer-hover:after:opacity-100'), "".concat(disabled ? 'peer-checked:bg-accent-2-8-Opacity' : 'peer-checked:bg-accent-primary'), 'peer-checked:after:bg-accent-2-8-Opacity', switcherIconInnerSize);
+  var switcherClasses = cn('switcher relative rounded-2xl', switcherSize, switcherIconClasses, switcherIconInnerCircleClasses, "".concat(disabled ? 'bg-background-active' : 'bg-background-grey'));
+  var switcherContentWrapperFontSize = size === SwitcherSize.Lg ? 'text-sm' : size === SwitcherSize.Md ? 'text-[10px]' : size === SwitcherSize.Sm ? 'text-[8px]' : 'text-sm';
+  var switcherContentMaxWidth = size === SwitcherSize.Lg ? 'max-w-6' : size === SwitcherSize.Md ? 'max-w-4' : size === SwitcherSize.Sm ? 'max-w-3' : 'max-w-3';
+  var switcherContentWrapperClasses = cn('inline-flex absolute top-1/2 -translate-y-1/2 -translate-x-1/2 duration-100 overflow-hidden', "".concat(checked ? 'left-[30%]' : 'left-[65%]'), switcherContentWrapperFontSize, switcherContentMaxWidth);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: switcherWrapperClasses,
+    ref: ref
+  }, SwitcherPropsData, rest), /*#__PURE__*/React.createElement("input", _extends({
+    checked: checked,
+    type: "checkbox",
+    className: inputClasses,
+    onChange: readOnly || disabled ? ignoreEvent : onChange,
+    readOnly: readOnly,
+    disabled: disabled
+  }, switcherProps)), /*#__PURE__*/React.createElement("div", {
+    className: switcherClasses
+  }, children && /*#__PURE__*/React.createElement("span", {
+    className: switcherContentWrapperClasses
+  }, children)));
+};
+export default Switcher;

package/core/switcher/switcher.mixin.d.ts

@@ -0,0 +1,21 @@
+import { WithTheme } from '../../theme/entity';
+export declare const fontSizeSwitcherMixin: {
+    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").CSSObject;
+    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").CSSObject;
+    lg: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").CSSObject;
+};
+export declare const translateSwitcherMixin: {
+    sm: import("styled-components").RuleSet<object>;
+    md: import("styled-components").RuleSet<object>;
+    lg: import("styled-components").RuleSet<object>;
+};
+export declare const translateInnerSwitcherMixin: {
+    sm: import("styled-components").RuleSet<object>;
+    md: import("styled-components").RuleSet<object>;
+    lg: import("styled-components").RuleSet<object>;
+};
+export declare const sizeInnerSwitcherMixin: {
+    sm: import("styled-components").RuleSet<object>;
+    md: import("styled-components").RuleSet<object>;
+    lg: import("styled-components").RuleSet<object>;
+};

package/core/switcher/switcher.mixin.js

@@ -0,0 +1,17 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from 'styled-components';
+import { FontVariant as FV } from '../../utils/types/typography';
+import { SwitcherSize } from './switcher-size';
+export var fontSizeSwitcherMixin = _defineProperty(_defineProperty(_defineProperty({}, SwitcherSize.Sm, function (_ref) {
+  var font = _ref.theme.typography.font;
+  return font[FV.LabelMedium];
+}), SwitcherSize.Md, function (_ref2) {
+  var font = _ref2.theme.typography.font;
+  return font[FV.InputLg];
+}), SwitcherSize.Lg, function (_ref3) {
+  var font = _ref3.theme.typography.font;
+  return font[FV.InputLg];
+});
+export var translateSwitcherMixin = _defineProperty(_defineProperty(_defineProperty({}, SwitcherSize.Sm, css(["transform:translate(16px,-50%);"])), SwitcherSize.Md, css(["transform:translate(19.5px,-50%);"])), SwitcherSize.Lg, css(["transform:translate(30.5px,-50%);"]));
+export var translateInnerSwitcherMixin = _defineProperty(_defineProperty(_defineProperty({}, SwitcherSize.Sm, css(["transform:translate(18.2px,-50%);"])), SwitcherSize.Md, css(["transform:translate(22.5px,-50%);"])), SwitcherSize.Lg, css(["transform:translate(34.7px,-50%);"]));
+export var sizeInnerSwitcherMixin = _defineProperty(_defineProperty(_defineProperty({}, SwitcherSize.Sm, css(["width:4px;height:4px;"])), SwitcherSize.Md, css(["width:6px;height:6px;"])), SwitcherSize.Lg, css(["width:8px;height:8px;"]));

package/core/switcher/switcher.props.d.ts

@@ -0,0 +1,14 @@
+import React, { ChangeEvent, Ref } from 'react';
+import { Values } from '../../utils/types';
+import { SwitcherSize } from './switcher-size';
+export type SwitcherSizeType = Values<typeof SwitcherSize>;
+export interface SwitcherProps extends React.HTMLAttributes<HTMLDivElement> {
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    switcherProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+    SwitcherPropsData?: React.HTMLAttributes<HTMLDivElement>;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: SwitcherSizeType;
+    ref?: Ref<HTMLDivElement>;
+}

package/core/switcher/switcher.props.js

@@ -0,0 +1 @@
+export {};

package/core/switcher/switcher.styles.d.ts

@@ -0,0 +1,27 @@
+import type { SwitcherProps, SwitcherSizeType } from './switcher.props';
+declare const Styled: {
+    Switcher: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, SwitcherProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+    }>, never>, {
+        $disabled?: boolean;
+        size: SwitcherSizeType;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    SwitcherWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, SwitcherProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    SwitcherContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }>, never>, SwitcherProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+};
+export default Styled;

package/core/switcher/switcher.styles.js

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+import { Color as PColor } from '../../utils/types/palette';
+import { SwitcherSize } from './switcher-size';
+import { sizeInnerSwitcherMixin, translateInnerSwitcherMixin, translateSwitcherMixin } from './switcher.mixin';
+import { getSwitcherFont, getSwitcherIconSize, getSwitcherSize } from './switcher.utils';
+var baseClassName = 'Switcher';
+var SwitcherWrapper = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-88wsgb-0"
+})(function (_ref) {
+  var disabled = _ref.disabled;
+  return css(["position:relative;display:inline-flex;cursor:", ";"], disabled ? 'default' : 'pointer');
+});
+var Switcher = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'switcher')
+}).withConfig({
+  componentId: "sc-88wsgb-1"
+})(function (_ref2) {
+  var disabled = _ref2.disabled,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? SwitcherSize.Sm : _ref2$size,
+    palette = _ref2.theme.palette;
+  return css(["position:relative;width:", "px;height:", "px;background:", ";border-radius:20px;&:before{content:'';position:absolute;width:", "px;height:", "px;border-radius:35px;top:50%;left:", "px;transition:transform 0.3s ease 0s,opacity 0.5s ease 0s;background:", ";transform:translate(0,-50%);}&:after{content:'';position:absolute;", " border-radius:20px;top:50%;left:", "px;background:", ";transform:translate(50%,-50%);transition:transform 0.3s ease 0s,opacity 0.3s ease 0s;opacity:0;}"], getSwitcherSize(size) * 2, getSwitcherSize(size), disabled ? palette[PColor.BackgroundActive] : palette[PColor.BackgroundGrey], getSwitcherIconSize(size), getSwitcherIconSize(size), size === SwitcherSize.Lg ? '3' : '2', disabled ? palette[PColor.BackgroundGrey] : palette[PColor.IconsMuted], sizeInnerSwitcherMixin[size], size === SwitcherSize.Lg ? '6.9' : '3.9', palette[PColor.IconsInvert]);
+});
+var Input = /*#__PURE__*/styled.input.attrs({
+  className: generateClassNames(baseClassName, 'Input'),
+  type: 'checkbox'
+}).withConfig({
+  componentId: "sc-88wsgb-2"
+})(function (_ref3) {
+  var $disabled = _ref3.$disabled,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? SwitcherSize.Sm : _ref3$size,
+    palette = _ref3.theme.palette;
+  return css(["opacity:0;position:absolute;z-index:99;width:", "px;height:", "px;cursor:", ";&:hover + ", ":after{opacity:", ";}&:checked{&:hover + ", "{background:", ";}}&:checked + ", "{background:", ";&:before{", ";background:", ";}&:after{", " background:", ";}}"], getSwitcherSize(size) * 2, getSwitcherSize(size), $disabled ? 'default' : 'pointer', Switcher, $disabled ? 0 : 1, Switcher, !$disabled && palette[PColor.AccentPrimaryHover], Switcher, $disabled ? palette[PColor.Accent_2_8_Opacity] : palette[PColor.AccentStateless], translateSwitcherMixin[size], palette[PColor.IconsInvert], translateInnerSwitcherMixin[size], palette[PColor.AccentStateless_0_4_Opacity]);
+});
+var SwitcherContentWrapper = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'content-Wrapper')
+}).withConfig({
+  componentId: "sc-88wsgb-3"
+})(function (_ref4) {
+  var checked = _ref4.checked,
+    size = _ref4.size;
+  return css(["display:inline-flex;position:absolute;top:50%;left:", ";transform:translate(-50%,-50%);transition:0.1s;font-size:", "px;overflow:hidden;max-width:", "px;"], checked ? '30%' : '65%', getSwitcherFont(size), getSwitcherSize(size) * 0.75);
+});
+var Styled = applyDisplayNames({
+  Switcher: Switcher,
+  Input: Input,
+  SwitcherWrapper: SwitcherWrapper,
+  SwitcherContentWrapper: SwitcherContentWrapper
+});
+export default Styled;

package/core/switcher/switcher.utils.d.ts

@@ -0,0 +1,4 @@
+import { SwitcherSizeType } from './switcher.props';
+export declare const getSwitcherSize: (sizeName?: SwitcherSizeType) => number;
+export declare const getSwitcherFont: (sizeName?: SwitcherSizeType) => number;
+export declare const getSwitcherIconSize: (sizeName?: SwitcherSizeType) => number;