@scaleflex/ui-tw 0.0.1

package/core/button/button.component.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "children", "size", "startIcon", "endIcon", "variant", "loading", "asChild", "disabled"];
+var _buttonVariantOptions;
+import { Slot } from '@radix-ui/react-slot';
+import SpinnerIcon from '@scaleflex/icons-tw/spinner';
+import EndIcon from '@scaleflex/ui-tw/core/button/components/end-icon';
+import StartIcon, { startIconVariants } from '@scaleflex/ui-tw/core/button/components/start-icon';
+import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { ButtonSize, ButtonVariant } from './button.types';
+import { getIconSize, isLinkBasicVariant } from './button.utils';
+var buttonVariantOptions = (_buttonVariantOptions = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_buttonVariantOptions, ButtonVariant.Primary, 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90'), ButtonVariant.Secondary, 'border bg-background shadow-xs text-primary border-primary hover:bg-primary/90 hover:text-primary-foreground'), ButtonVariant.Outline, 'border bg-background text-secondary-foreground shadow-xs border-secondary-foreground hover:text-secondary-foreground/80 hover:border-secondary-foreground/80'), ButtonVariant.LinkPrimary, 'text-primary hover:text-primary/80'), ButtonVariant.LinkSecondary, 'text-secondary-foreground hover:text-secondary-foreground/80'), ButtonVariant.LinkBasicPrimary, 'text-primary hover:text-primary/80 font-normal'), ButtonVariant.LinkBasicSecondary, 'text-secondary-foreground font-normal hover:text-secondary-foreground/80'), ButtonVariant.LinkError, 'text-destructive hover:text-destructive/80'), ButtonVariant.LinkWarning, 'text-warning hover:text-warning/80'), ButtonVariant.ErrorPrimary, 'bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/90'), _defineProperty(_defineProperty(_defineProperty(_buttonVariantOptions, ButtonVariant.ErrorOutline, 'border bg-background text-secondary-foreground shadow-xs border-secondary-foreground hover:bg-destructive hover:text-primary-foreground hover:border-transparent hover:border-destructive'), ButtonVariant.WarningPrimary, 'bg-warning text-primary-foreground shadow-xs hover:bg-warning/90'), ButtonVariant.WarningOutline, 'border bg-background text-secondary-foreground shadow-xs border-secondary-foreground hover:bg-warning hover:text-primary-foreground hover:border-transparent hover:border-warning'));
+var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-sm'), ButtonSize.Sm, 'h-8 px-3 py-2 text-sm'), ButtonSize.Md, 'h-10 px-4 py-2.5 text-base'), ButtonSize.Lg, 'h-12 px-6 py-3.5 text-lg');
+var buttonVariants = cva("cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: buttonVariantOptions,
+    size: buttonSizeOptions
+  },
+  defaultVariants: {
+    variant: ButtonVariant.Primary,
+    size: ButtonSize.Md
+  }
+});
+function Button(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? ButtonSize.Md : _ref$size,
+    startIcon = _ref.startIcon,
+    endIcon = _ref.endIcon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? ButtonVariant.Primary : _ref$variant,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$asChild = _ref.asChild,
+    asChild = _ref$asChild === void 0 ? false : _ref$asChild,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var Comp = asChild ? Slot : 'button';
+  return /*#__PURE__*/React.createElement(Comp, _extends({
+    "data-slot": "button",
+    className: cn(buttonVariants({
+      variant: variant,
+      size: size,
+      className: className
+    }), loading && 'pointer-events-none opacity-50', isLinkBasicVariant(variant) && 'font-normal'),
+    disabled: disabled
+  }, rest), startIcon || endIcon || loading ? /*#__PURE__*/React.createElement("span", {
+    className: "flex items-center"
+  }, startIcon && /*#__PURE__*/React.createElement(StartIcon, {
+    size: size,
+    loading: loading,
+    icon: startIcon
+  }), loading && !startIcon && /*#__PURE__*/React.createElement("span", {
+    className: startIconVariants({
+      size: size
+    })
+  }, /*#__PURE__*/React.createElement(SpinnerIcon, {
+    size: getIconSize(size),
+    className: "animate-spin"
+  })), children, endIcon && /*#__PURE__*/React.createElement(EndIcon, {
+    size: size,
+    icon: endIcon
+  })) : children);
+}
+export { buttonVariants };
+export default Button;

package/core/button/button.types.d.ts

@@ -0,0 +1,34 @@
+import type { IconProps } from '@scaleflex/icons-tw/icon.props';
+import { buttonVariants } from '@scaleflex/ui-tw/core/button/button.component';
+import type { VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
+export declare const ButtonVariant: {
+    readonly Primary: "primary";
+    readonly Secondary: "secondary";
+    readonly Outline: "outline";
+    readonly LinkPrimary: "link-primary";
+    readonly LinkSecondary: "link-secondary";
+    readonly LinkBasicPrimary: "link-basic-primary";
+    readonly LinkBasicSecondary: "link-basic-secondary";
+    readonly LinkError: "link-error";
+    readonly LinkWarning: "link-warning";
+    readonly ErrorPrimary: "error-primary";
+    readonly ErrorOutline: "error-outline";
+    readonly WarningPrimary: "warning-primary";
+    readonly WarningOutline: "warning-outline";
+};
+export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    startIcon?: ReactNode | ((props: IconProps) => ReactNode);
+    endIcon?: ReactNode | ((props: IconProps) => ReactNode);
+    loading?: boolean;
+    disabled?: boolean;
+}
+export declare const ButtonSize: {
+    readonly Xs: "xs";
+    readonly Sm: "sm";
+    readonly Md: "md";
+    readonly Lg: "lg";
+};
+export type ButtonSizeType = (typeof ButtonSize)[keyof typeof ButtonSize];
+export type ButtonVariantType = (typeof ButtonVariant)[keyof typeof ButtonVariant];

package/core/button/button.types.js

@@ -0,0 +1,21 @@
+export var ButtonVariant = {
+  Primary: 'primary',
+  Secondary: 'secondary',
+  Outline: 'outline',
+  LinkPrimary: 'link-primary',
+  LinkSecondary: 'link-secondary',
+  LinkBasicPrimary: 'link-basic-primary',
+  LinkBasicSecondary: 'link-basic-secondary',
+  LinkError: 'link-error',
+  LinkWarning: 'link-warning',
+  ErrorPrimary: 'error-primary',
+  ErrorOutline: 'error-outline',
+  WarningPrimary: 'warning-primary',
+  WarningOutline: 'warning-outline'
+};
+export var ButtonSize = {
+  Xs: 'xs',
+  Sm: 'sm',
+  Md: 'md',
+  Lg: 'lg'
+};

package/core/button/button.utils.d.ts

@@ -0,0 +1,3 @@
+import { ButtonSizeType, ButtonVariantType } from '@scaleflex/ui-tw/core/button/button.types';
+export declare const getIconSize: (sizeName?: ButtonSizeType | null) => number;
+export declare const isLinkBasicVariant: (variant: ButtonVariantType | null) => boolean;

package/core/button/button.utils.js

@@ -0,0 +1,18 @@
+import { ButtonSize, ButtonVariant } from '@scaleflex/ui-tw/core/button/button.types';
+export var getIconSize = function getIconSize(sizeName) {
+  switch (sizeName) {
+    case ButtonSize.Lg:
+      return 18;
+    case ButtonSize.Md:
+      return 16;
+    case ButtonSize.Sm:
+      return 14;
+    case ButtonSize.Xs:
+      return 12;
+    default:
+      return 16;
+  }
+};
+export var isLinkBasicVariant = function isLinkBasicVariant(variant) {
+  return variant === ButtonVariant.LinkBasicPrimary || variant === ButtonVariant.LinkBasicSecondary;
+};

package/core/button/components/end-icon.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from 'class-variance-authority';
+import React, { ComponentProps, ReactNode } from 'react';
+declare const endIconVariants: (props?: ({
+    size?: "sm" | "md" | "xs" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface EndIconProps extends ComponentProps<'span'>, VariantProps<typeof endIconVariants> {
+    icon?: ReactNode | ((props: {
+        size: number;
+    }) => ReactNode);
+}
+declare const EndIcon: (props: EndIconProps) => React.JSX.Element;
+export default EndIcon;

package/core/button/components/end-icon.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["size", "icon"];
+import { ButtonSize } from '@scaleflex/ui-tw/core/button';
+import { getIconSize } from '@scaleflex/ui-tw/core/button/button.utils';
+import { cva } from 'class-variance-authority';
+import React, { useMemo } from 'react';
+var endIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'ml-0.5'), ButtonSize.Sm, 'ml-1'), ButtonSize.Md, 'ml-1.5'), ButtonSize.Lg, 'ml-2');
+var endIconVariants = cva('flex', {
+  variants: {
+    size: endIconSizes
+  },
+  defaultVariants: {
+    size: ButtonSize.Md
+  }
+});
+var EndIcon = function EndIcon(props) {
+  var size = props.size,
+    icon = props.icon,
+    rest = _objectWithoutProperties(props, _excluded);
+  var iconSize = useMemo(function () {
+    return getIconSize(size);
+  }, [size]);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: endIconVariants({
+      size: size
+    })
+  }, rest), typeof icon === 'function' ? icon({
+    size: iconSize
+  }) : icon);
+};
+export default EndIcon;

package/core/button/components/start-icon.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+import React, { ComponentProps, ReactNode } from 'react';
+declare const startIconVariants: (props?: ({
+    size?: "sm" | "md" | "xs" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface StartIconProps extends ComponentProps<'span'>, VariantProps<typeof startIconVariants> {
+    icon?: ReactNode | ((props: {
+        size: number;
+    }) => ReactNode);
+    loading?: boolean;
+}
+declare const StartIcon: (props: StartIconProps) => React.JSX.Element;
+export { startIconVariants };
+export default StartIcon;

package/core/button/components/start-icon.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["size", "icon", "loading"];
+import SpinnerIcon from '@scaleflex/icons-tw/spinner';
+import { ButtonSize } from '@scaleflex/ui-tw/core/button';
+import { getIconSize } from '@scaleflex/ui-tw/core/button/button.utils';
+import { cva } from 'class-variance-authority';
+import React, { useMemo } from 'react';
+var startIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'mr-0.5'), ButtonSize.Sm, 'mr-1'), ButtonSize.Md, 'mr-1.5'), ButtonSize.Lg, 'mr-2');
+var startIconVariants = cva('flex', {
+  variants: {
+    size: startIconSizes
+  },
+  defaultVariants: {
+    size: ButtonSize.Md
+  }
+});
+var StartIcon = function StartIcon(props) {
+  var size = props.size,
+    icon = props.icon,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    rest = _objectWithoutProperties(props, _excluded);
+  var iconSize = useMemo(function () {
+    return getIconSize(size);
+  }, [size]);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: startIconVariants({
+      size: size
+    })
+  }, rest), loading ? /*#__PURE__*/React.createElement(SpinnerIcon, {
+    size: iconSize,
+    className: "animate-spin"
+  }) : typeof icon === 'function' ? icon({
+    size: iconSize
+  }) : icon);
+};
+export { startIconVariants };
+export default StartIcon;

package/core/button/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './button.component';
+export type { ButtonProps } from './button.types';
+export { ButtonVariant } from '@scaleflex/ui-tw/core/button/button.types';
+export { ButtonSize } from '@scaleflex/ui-tw/core/button/button.types';

package/core/button/index.js

@@ -0,0 +1,3 @@
+export { default } from './button.component';
+export { ButtonVariant } from '@scaleflex/ui-tw/core/button/button.types';
+export { ButtonSize } from '@scaleflex/ui-tw/core/button/button.types';

package/core/check-box/check-box.component.d.ts

@@ -0,0 +1,3 @@
+import type { CheckBoxProps } from './check-box.props';
+declare const CheckBox: ({ size, type, checked, onChange, checkBoxProps, readOnly, disabled, ref, ...rest }: CheckBoxProps) => JSX.Element;
+export default CheckBox;

package/core/check-box/check-box.component.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "type", "checked", "onChange", "checkBoxProps", "readOnly", "disabled", "ref"];
+import Intermediate from '@scaleflex/icons-tw/intermediate';
+import Tick from '@scaleflex/icons-tw/tick';
+import React from 'react';
+import { lightPalette } from '../../theme/roots/palette';
+import { ignoreEvent } from '../../utils/functions';
+import { cn } from '../../utils/functions/shadcn-utils';
+import { Color } from '../../utils/types/palette';
+import { getCheckboxIconSize } from './check-box.utils';
+import { Size, Type } from './types';
+var CheckBox = function CheckBox(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Md : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? Type.Checkbox : _ref$type,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    onChange = _ref.onChange,
+    checkBoxProps = _ref.checkBoxProps,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var getIcon = function getIcon(props) {
+    switch (type) {
+      case Type.Checkbox:
+        return /*#__PURE__*/React.createElement(Tick, props);
+      case Type.Intermediate:
+        return /*#__PURE__*/React.createElement(Intermediate, props);
+      default:
+        return /*#__PURE__*/React.createElement(Tick, props);
+    }
+  };
+  var cursorStyleClasses = disabled ? 'cursor-default' : 'cursor-pointer';
+  var ownTransitionClasses = 'transition-all duration-100 ease-out';
+  var checkBoxWrapperClasses = cn('relative flex items-center justify-center border-1 border-solid border-borders-secondary', "".concat(checked ? 'bg-accent-primary border-accent-primary' : 'bg-background-stateless border-borders-primary-stateless'), "".concat(size === Size.Sm ? 'min-h-4 max-h-4 min-w-4 max-w-4' : ''), "".concat(size === Size.Md ? 'min-h-5 max-h-5 min-w-5 max-w-5' : ''), "".concat(disabled ? 'border-1 border-solid' : ''), "".concat(disabled ? checked ? 'bg-accent-2-8-Opacity border-transparent' : 'bg-background-active border-borders-secondary' : ''), cursorStyleClasses, ownTransitionClasses);
+  var inputClasses = cn('peer absolute top-0 left-0 z-1 m-0 h-full w-full p-0 opacity-0', cursorStyleClasses);
+  var unCheckedIconClasses = cn('flex opacity-0', "".concat(disabled ? '' : 'peer-hover:opacity-100'), ownTransitionClasses);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: checkBoxWrapperClasses,
+    ref: ref
+  }, rest), /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    className: inputClasses,
+    checked: checked,
+    disabled: disabled,
+    onChange: readOnly || disabled ? ignoreEvent : onChange
+  }, checkBoxProps)), checked ? getIcon({
+    size: getCheckboxIconSize(size),
+    color: lightPalette[Color.ButtonPrimaryText]
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: unCheckedIconClasses
+  }, getIcon({
+    size: getCheckboxIconSize(size),
+    color: lightPalette[Color.Accent_4_0_Opacity]
+  })));
+};
+export default CheckBox;

package/core/check-box/check-box.mixin.d.ts

@@ -0,0 +1,4 @@
+export declare const sizeCheckboxMixin: {
+    sm: () => import("styled-components").RuleSet<object>;
+    md: () => import("styled-components").RuleSet<object>;
+};

package/core/check-box/check-box.mixin.js

@@ -0,0 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from 'styled-components';
+import { Size } from './types';
+export var sizeCheckboxMixin = _defineProperty(_defineProperty({}, Size.Sm, function () {
+  return css(["min-height:16px;max-height:16px;min-width:16px;max-width:16px;"]);
+}), Size.Md, function () {
+  return css(["min-height:20px;max-height:20px;min-width:20px;max-width:20px;"]);
+});

package/core/check-box/check-box.props.d.ts

@@ -0,0 +1,15 @@
+import { ChangeEvent, Ref } from 'react';
+import type { Values } from '../../utils/types';
+import { Size, Type } from './types';
+export type CheckBoxSizeType = Values<typeof Size>;
+export type CheckBoxType = Values<typeof Type>;
+export interface CheckBoxProps extends React.HTMLAttributes<HTMLSpanElement> {
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    checkBoxProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: CheckBoxSizeType;
+    type?: CheckBoxType;
+    ref?: Ref<HTMLSpanElement>;
+}

package/core/check-box/check-box.props.js

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

package/core/check-box/check-box.styles.d.ts

@@ -0,0 +1,19 @@
+import type { CheckBoxProps, CheckBoxSizeType } from './check-box.props';
+declare const Styled: {
+    CheckBox: 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>, {
+        $size: CheckBoxSizeType;
+        checked: boolean;
+        disabled: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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>, never>> & string;
+    UnCheckedIcon: 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>, CheckBoxProps>> & string;
+};
+export default Styled;

package/core/check-box/check-box.styles.js

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+import { Color as PColor } from '../../utils/types/palette';
+import { sizeCheckboxMixin } from './check-box.mixin';
+import { Size } from './types';
+var baseClassName = 'CheckBox';
+var Input = /*#__PURE__*/styled.input.attrs({
+  className: generateClassNames(baseClassName, 'Input'),
+  type: 'checkbox'
+}).withConfig({
+  componentId: "sc-1cs9pmq-0"
+})(function (_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return css(["position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;padding:0;cursor:", ";z-index:1;"], disabled ? 'default' : 'pointer');
+});
+var UnCheckedIcon = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'icon')
+}).withConfig({
+  componentId: "sc-1cs9pmq-1"
+})(function () {
+  return css(["display:flex;opacity:0;transition:all 100ms ease-out;"]);
+});
+var CheckBox = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-1cs9pmq-2"
+})(function (_ref2) {
+  var palette = _ref2.theme.palette,
+    _ref2$$size = _ref2.$size,
+    $size = _ref2$$size === void 0 ? Size.Sm : _ref2$$size,
+    checked = _ref2.checked,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+  return css(["position:relative;display:flex;align-items:center;justify-content:center;background:", ";border:1px solid ", ";border-radius:1px;outline:none;text-align:center;transition:all 100ms ease-out;cursor:", ";", " &:hover{", "{", "}}", ""], checked ? palette[PColor.AccentPrimary] : palette[PColor.BackgroundStateless], checked ? palette[PColor.AccentPrimary] : palette[PColor.BackgroundPrimaryStateless], disabled ? 'default' : 'pointer', sizeCheckboxMixin[$size], UnCheckedIcon, !disabled && css(["opacity:1;"]), disabled && css(["background:", ";border:1px solid ", ";"], checked ? palette[PColor.Accent_2_8_Opacity] : palette[PColor.BackgroundActive], checked ? 'transparent' : palette[PColor.BordersSecondary]));
+});
+var Styled = applyDisplayNames({
+  CheckBox: CheckBox,
+  Input: Input,
+  UnCheckedIcon: UnCheckedIcon
+});
+export default Styled;

package/core/check-box/check-box.utils.d.ts

@@ -0,0 +1,3 @@
+import { CheckBoxSizeType } from './check-box.props';
+export declare const getCheckboxIconSize: (size?: CheckBoxSizeType) => number;
+export declare const getCheckboxInfoIconSize: (size?: CheckBoxSizeType) => number;

package/core/check-box/check-box.utils.js

@@ -0,0 +1,21 @@
+import { Size } from './types';
+export var getCheckboxIconSize = function getCheckboxIconSize(size) {
+  switch (size) {
+    case Size.Md:
+      return 14;
+    case Size.Sm:
+      return 10;
+    default:
+      return 10;
+  }
+};
+export var getCheckboxInfoIconSize = function getCheckboxInfoIconSize(size) {
+  switch (size) {
+    case Size.Md:
+      return 14;
+    case Size.Sm:
+      return 12;
+    default:
+      return 12;
+  }
+};

package/core/check-box/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './check-box.component';
+export type { CheckBoxProps } from './check-box.props';

package/core/check-box/index.js

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

package/core/check-box/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './size';
+export * from './type';

package/core/check-box/types/index.js

@@ -0,0 +1,2 @@
+export * from './size';
+export * from './type';

package/core/check-box/types/size.d.ts

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

package/core/check-box/types/size.js

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

package/core/check-box/types/type.d.ts

@@ -0,0 +1,4 @@
+export declare const Type: {
+    readonly Checkbox: "checkbox";
+    readonly Intermediate: "intermediate";
+};

package/core/check-box/types/type.js

@@ -0,0 +1,4 @@
+export var Type = {
+  Checkbox: 'checkbox',
+  Intermediate: 'intermediate'
+};

package/core/check-box-group/check-box-group.component.d.ts

@@ -0,0 +1,3 @@
+import type { CheckBoxGroupProps } from './check-box-group.props';
+declare const CheckBoxGroup: ({ size, label, checkBoxProps, checkBoxGroupProps, readOnly, disabled, labelPosition, icon, checked, ref, ...rest }: CheckBoxGroupProps) => JSX.Element;
+export default CheckBoxGroup;

package/core/check-box-group/check-box-group.component.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "label", "checkBoxProps", "checkBoxGroupProps", "readOnly", "disabled", "labelPosition", "icon", "checked", "ref"];
+import React, { useRef, useState } from 'react';
+import { lightPalette } from '../../theme/roots/palette';
+import { cn } from '../../utils/functions/shadcn-utils';
+import { Color } from '../../utils/types/palette';
+import CheckBox from '../check-box';
+import { getCheckboxInfoIconSize } from '../check-box/check-box.utils';
+import { Size } from '../check-box/types';
+import { LabelPosition } from './types';
+var CheckBoxGroup = function CheckBoxGroup(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Sm : _ref$size,
+    label = _ref.label,
+    checkBoxProps = _ref.checkBoxProps,
+    checkBoxGroupProps = _ref.checkBoxGroupProps,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? LabelPosition.After : _ref$labelPosition,
+    icon = _ref.icon,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var textRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEllipsisActive = _useState2[0],
+    setIsEllipsisActive = _useState2[1];
+  var getTextTooltip = function getTextTooltip() {
+    if (typeof label === 'string' && isEllipsisActive) {
+      return label;
+    }
+  };
+  var handleTextTooltip = function handleTextTooltip() {
+    if (textRef.current !== null && textRef.current) {
+      var _textRef$current, _textRef$current2;
+      setIsEllipsisActive((textRef === null || textRef === void 0 || (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.offsetWidth) < (textRef === null || textRef === void 0 || (_textRef$current2 = textRef.current) === null || _textRef$current2 === void 0 ? void 0 : _textRef$current2.scrollWidth));
+    }
+  };
+  var cursorStyleClasses = disabled ? 'cursor-default' : 'cursor-pointer';
+  var checkBoxGroupClasses = cn('relative inline-flex max-w-full items-center gap-1', cursorStyleClasses);
+  var labelWrapClasses = cn('inline-block flex gap-2 items-center overflow-hidden text-ellipsis whitespace-nowrap text-textprimary',
+  //TODO: add data about fonts from ${sizeCheckboxGroupMixin[size]}
+  cursorStyleClasses);
+  var labelTextClasses = "label-text ".concat(labelPosition === 'before' ? '-order-1' : '');
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: checkBoxGroupClasses,
+    ref: ref
+  }, checkBoxGroupProps, rest), /*#__PURE__*/React.createElement("label", {
+    key: "label",
+    title: getTextTooltip(),
+    onMouseOver: handleTextTooltip,
+    ref: textRef,
+    className: labelWrapClasses
+  }, /*#__PURE__*/React.createElement(CheckBox, {
+    checkBoxProps: checkBoxProps,
+    readOnly: readOnly,
+    disabled: disabled,
+    checked: checked,
+    size: size
+  }), /*#__PURE__*/React.createElement("span", {
+    className: labelTextClasses
+  }, label)), typeof icon === 'function' ? icon({
+    size: getCheckboxInfoIconSize(size),
+    color: lightPalette[Color.IconsSecondary]
+  }) : icon);
+};
+export default CheckBoxGroup;

package/core/check-box-group/check-box-group.mixin.d.ts

@@ -0,0 +1,5 @@
+import { WithTheme } from '../../theme/entity';
+export declare const sizeCheckboxGroupMixin: {
+    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").CSSObject;
+    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").CSSObject;
+};

package/core/check-box-group/check-box-group.mixin.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FontVariant as FV } from '../../utils/types/typography';
+import { Size } from '../check-box/types';
+export var sizeCheckboxGroupMixin = _defineProperty(_defineProperty({}, Size.Sm, function (_ref) {
+  var font = _ref.theme.typography.font;
+  return font[FV.LabelMedium];
+}), Size.Md, function (_ref2) {
+  var font = _ref2.theme.typography.font;
+  return font[FV.LabelLarge];
+});

package/core/check-box-group/check-box-group.props.d.ts

@@ -0,0 +1,19 @@
+import { IconProps } from '@scaleflex/icons-tw/icon.props';
+import { Ref } from 'react';
+import type { Values } from '../../utils/types';
+import type { CheckBoxProps } from '../check-box';
+import { CheckBoxSizeType, CheckBoxType } from '../check-box/check-box.props';
+import { LabelPosition } from './types';
+export type LabelPositionType = Values<typeof LabelPosition>;
+export interface CheckBoxGroupProps extends CheckBoxProps {
+    label?: string;
+    checkBoxProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    checkBoxGroupProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+    readOnly?: boolean;
+    disabled?: boolean;
+    labelPosition?: LabelPositionType;
+    size?: CheckBoxSizeType;
+    type?: CheckBoxType;
+    icon?: React.ReactNode | ((props: IconProps) => React.ReactNode);
+    ref?: Ref<HTMLLabelElement>;
+}

package/core/check-box-group/check-box-group.props.js

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