@scaleflex/ui-tw 0.0.1 → 0.0.2

package/core/accordion-header/accordion-header.component.js

@@ -41,7 +41,7 @@ var AccordionHeader = function AccordionHeader(_ref) {
   }, /*#__PURE__*/React.createElement(ArrowTick, {
     type: expanded ? ArrowTickType.Top : ArrowTickType.Bottom,
     IconProps: _objectSpread({
-      size: 11
+      size: '0.6875rem'
     }, iconPropsData)
   })));
 };

package/core/arrow/arrow.component.js

@@ -1,21 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["type", "IconProps", "ref"];
 import ArrowIcon from '@scaleflex/icons-tw/arrow';
 import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
 import React from 'react';
 import { Position } from '../../utils/types';
+var arrowDirection = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Position.Bottom, 'rotate-90'), Position.Left, 'rotate-180'), Position.Right, ''), Position.Top, '-rotate-90');
 var Arrow = function Arrow(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? Position.Right : _ref$type,
     IconPropsData = _ref.IconProps,
     ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var arrowDirectionClasses = cn("".concat(type === Position.Bottom ? 'rotate-90' : ''), "".concat(type === Position.Left ? 'rotate-180' : ''), "".concat(type === Position.Right ? '' : ''), // don't need to rotate
-  "".concat(type === Position.Top ? '-rotate-90' : ''));
-  var ArrowClasses = cn('inline-flex transition-transform duration-150', arrowDirectionClasses);
   return /*#__PURE__*/React.createElement("span", _extends({
-    className: ArrowClasses
+    className: cn('inline-flex transition-transform duration-150', arrowDirection[type])
   }, rest, {
     ref: ref
   }), /*#__PURE__*/React.createElement(ArrowIcon, IconPropsData));

package/core/arrow-tick/arrow-tick.component.js

@@ -1,28 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["type", "IconProps", "ref"];
 import ArrowBottom from '@scaleflex/icons-tw/arrow-bottom';
-import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
 import React from 'react';
 import { Position } from '../../utils/types';
+var arrowTickDirection = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Position.Bottom, ''), Position.Left, 'rotate-90'), Position.Right, '-rotate-90'), Position.Top, 'rotate-180');
 var ArrowTick = function ArrowTick(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? Position.Bottom : _ref$type,
     IconPropsData = _ref.IconProps,
     ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var arrowDirectionClasses = cn("".concat(type === Position.Bottom ? '' : ''), // don't need to rotate
-  "".concat(type === Position.Left ? 'rotate-90' : ''), "".concat(type === Position.Right ? '-rotate-90' : ''), "".concat(type === Position.Top ? 'rotate-180' : ''));
-  var arrowClasses = cn(arrowDirectionClasses);
-
-  // TODO: structure this arrow using only CSS. create rules for IconPropsData?.size as TailwindCSS classes
-  // const arrowClasses = cn('inline-block w-2 h-2 border-solid border-secondary border-r-1 border-b-1 transition-transform duration-150 ease-out ', arrowDirectionClasses,)
-  // return <span className={arrowClasses} {...rest} ref={ref}></span>
-
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
     ref: ref
   }), /*#__PURE__*/React.createElement(ArrowBottom, _extends({
-    className: arrowClasses
+    className: arrowTickDirection[type]
   }, IconPropsData)));
 };
 export default ArrowTick;

package/core/button/button.component.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { type ButtonProps } from './button.types';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "link-primary" | "outline" | "link-secondary" | "link-basic-primary" | "link-basic-secondary" | "link-error" | "link-warning" | "error-primary" | "error-outline" | "warning-primary" | "warning-outline" | null | undefined;
-    size?: "sm" | "md" | "xs" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "outline" | "link-primary" | "link-secondary" | "link-basic-primary" | "link-basic-secondary" | "link-error" | "link-warning" | "error-primary" | "error-outline" | "warning-primary" | "warning-outline" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Button({ className, children, size, startIcon, endIcon, variant, loading, asChild, disabled, ...rest }: ButtonProps): React.JSX.Element;
 export { buttonVariants };

package/core/button/button.component.js

@@ -11,10 +11,10 @@ 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'));
+import { getIconSizeInRem } 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/80'), ButtonVariant.Secondary, 'border bg-background shadow-xs text-primary border-primary hover:bg-primary/80 hover:text-primary-foreground'), ButtonVariant.Outline, 'border bg-background text-secondary-foreground shadow-xs border-input hover:text-secondary-foreground/80 hover:border-input/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-input 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-input 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", {
+var buttonVariants = cva("group/button cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-30 [&_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
@@ -47,11 +47,12 @@ function Button(_ref) {
       variant: variant,
       size: size,
       className: className
-    }), loading && 'pointer-events-none opacity-50', isLinkBasicVariant(variant) && 'font-normal'),
+    }), loading && 'pointer-events-none opacity-30'),
     disabled: disabled
   }, rest), startIcon || endIcon || loading ? /*#__PURE__*/React.createElement("span", {
     className: "flex items-center"
   }, startIcon && /*#__PURE__*/React.createElement(StartIcon, {
+    variant: variant,
     size: size,
     loading: loading,
     icon: startIcon
@@ -60,9 +61,10 @@ function Button(_ref) {
       size: size
     })
   }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-    size: getIconSize(size),
+    size: getIconSizeInRem(size),
     className: "animate-spin"
   })), children, endIcon && /*#__PURE__*/React.createElement(EndIcon, {
+    variant: variant,
     size: size,
     icon: endIcon
   })) : children);

package/core/button/button.const.d.ts

@@ -0,0 +1,15 @@
+export declare const iconVariantOptions: {
+    primary: string;
+    secondary: string;
+    outline: string;
+    "link-primary": string;
+    "link-secondary": string;
+    "link-basic-primary": string;
+    "link-basic-secondary": string;
+    "link-error": string;
+    "link-warning": string;
+    "error-primary": string;
+    "error-outline": string;
+    "warning-primary": string;
+    "warning-outline": string;
+};

package/core/button/button.const.js

@@ -0,0 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _iconVariantOptions;
+import { ButtonVariant } from '@scaleflex/ui-tw/core/button/button.types';
+export var iconVariantOptions = (_iconVariantOptions = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconVariantOptions, ButtonVariant.Primary, ''), ButtonVariant.Secondary, ''), ButtonVariant.Outline, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.LinkPrimary, ''), ButtonVariant.LinkSecondary, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.LinkBasicPrimary, ''), ButtonVariant.LinkBasicSecondary, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.LinkError, ''), ButtonVariant.LinkWarning, ''), ButtonVariant.ErrorPrimary, ''), _defineProperty(_defineProperty(_defineProperty(_iconVariantOptions, ButtonVariant.ErrorOutline, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.WarningPrimary, ''), ButtonVariant.WarningOutline, 'text-muted-foreground group-hover/button:text-muted-foreground/80'));

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

@@ -1,7 +1,6 @@
-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';
+import { ComponentProps, ReactElement } from 'react';
 export declare const ButtonVariant: {
     readonly Primary: "primary";
     readonly Secondary: "secondary";
@@ -19,8 +18,8 @@ export declare const ButtonVariant: {
 };
 export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
-    startIcon?: ReactNode | ((props: IconProps) => ReactNode);
-    endIcon?: ReactNode | ((props: IconProps) => ReactNode);
+    startIcon?: ReactElement;
+    endIcon?: ReactElement;
     loading?: boolean;
     disabled?: boolean;
 }

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

@@ -1,3 +1,2 @@
-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;
+import { ButtonSizeType } from '@scaleflex/ui-tw/core/button/button.types';
+export declare const getIconSizeInRem: (sizeName?: ButtonSizeType | null) => string;

package/core/button/button.utils.js

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

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

@@ -1,12 +1,7 @@
-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);
+import { type ButtonProps } from '@scaleflex/ui-tw/core/button';
+import React, { ComponentProps, ReactElement } from 'react';
+interface EndIconProps extends ComponentProps<'span'>, Pick<ButtonProps, 'size' | 'variant'> {
+    icon?: ReactElement;
 }
-declare const EndIcon: (props: EndIconProps) => React.JSX.Element;
+declare const EndIcon: (props: EndIconProps) => React.JSX.Element | null;
 export default EndIcon;

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

@@ -1,33 +1,39 @@
 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"];
+var _excluded = ["size", "icon", "variant"];
 import { ButtonSize } from '@scaleflex/ui-tw/core/button';
-import { getIconSize } from '@scaleflex/ui-tw/core/button/button.utils';
+import { iconVariantOptions } from '@scaleflex/ui-tw/core/button/button.const';
+import { getIconSizeInRem } 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', {
+import React, { cloneElement, useMemo } from 'react';
+var endIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'ml-1.5'), ButtonSize.Sm, 'ml-1.5'), ButtonSize.Md, 'ml-2'), ButtonSize.Lg, 'ml-2');
+var endIconVariants = cva('', {
   variants: {
+    variant: iconVariantOptions,
     size: endIconSizes
-  },
-  defaultVariants: {
-    size: ButtonSize.Md
   }
 });
 var EndIcon = function EndIcon(props) {
   var size = props.size,
     icon = props.icon,
+    variant = props.variant,
     rest = _objectWithoutProperties(props, _excluded);
-  var iconSize = useMemo(function () {
-    return getIconSize(size);
+  var sizeInRem = useMemo(function () {
+    return getIconSizeInRem(size);
   }, [size]);
+  if (!icon) return null;
   return /*#__PURE__*/React.createElement("span", _extends({
     className: endIconVariants({
-      size: size
+      size: size,
+      variant: variant
     })
-  }, rest), typeof icon === 'function' ? icon({
-    size: iconSize
-  }) : icon);
+  }, rest), /*#__PURE__*/cloneElement(icon, {
+    size: sizeInRem,
+    style: {
+      width: sizeInRem,
+      height: sizeInRem
+    }
+  }));
 };
 export default EndIcon;

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

@@ -1,14 +1,13 @@
-import { type VariantProps } from 'class-variance-authority';
-import React, { ComponentProps, ReactNode } from 'react';
+import { type ButtonProps } from '@scaleflex/ui-tw/core/button';
+import React, { ComponentProps, ReactElement } from 'react';
 declare const startIconVariants: (props?: ({
-    size?: "sm" | "md" | "xs" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "outline" | "link-primary" | "link-secondary" | "link-basic-primary" | "link-basic-secondary" | "link-error" | "link-warning" | "error-primary" | "error-outline" | "warning-primary" | "warning-outline" | null | undefined;
+    size?: "xs" | "sm" | "md" | "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);
+interface StartIconProps extends ComponentProps<'span'>, Pick<ButtonProps, 'size' | 'variant'> {
+    icon?: ReactElement;
     loading?: boolean;
 }
-declare const StartIcon: (props: StartIconProps) => React.JSX.Element;
+declare const StartIcon: (props: StartIconProps) => React.JSX.Element | null;
 export { startIconVariants };
 export default StartIcon;

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

@@ -1,40 +1,53 @@
 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"];
+var _excluded = ["size", "variant", "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 { iconVariantOptions } from '@scaleflex/ui-tw/core/button/button.const';
+import { getIconSizeInRem } 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', {
+import React, { cloneElement, useMemo } from 'react';
+var startIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'mr-1.5'), ButtonSize.Sm, 'mr-1.5'), ButtonSize.Md, 'mr-2'), ButtonSize.Lg, 'mr-2');
+var startIconVariants = cva('', {
   variants: {
+    variant: iconVariantOptions,
     size: startIconSizes
-  },
-  defaultVariants: {
-    size: ButtonSize.Md
   }
 });
 var StartIcon = function StartIcon(props) {
   var size = props.size,
+    variant = props.variant,
     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);
+  var sizeInRem = useMemo(function () {
+    return getIconSizeInRem(size);
   }, [size]);
+  if (!icon) return null;
   return /*#__PURE__*/React.createElement("span", _extends({
     className: startIconVariants({
-      size: size
+      size: size,
+      className: 'flex'
     })
   }, rest), loading ? /*#__PURE__*/React.createElement(SpinnerIcon, {
-    size: iconSize,
-    className: "animate-spin"
-  }) : typeof icon === 'function' ? icon({
-    size: iconSize
-  }) : icon);
+    size: sizeInRem,
+    className: "animate-spin",
+    style: {
+      width: sizeInRem,
+      height: sizeInRem
+    }
+  }) : (/*#__PURE__*/cloneElement(icon, {
+    size: sizeInRem,
+    style: {
+      width: sizeInRem,
+      height: sizeInRem
+    },
+    className: startIconVariants({
+      variant: variant
+    })
+  })));
 };
 export { startIconVariants };
 export default StartIcon;

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

@@ -1,3 +0,0 @@
-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

@@ -1,62 +1,77 @@
-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;
+// 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 type { CheckBoxProps } from './check-box.props'
+// import { getCheckboxIconSize } from './check-box.utils'
+// import { Size, Type } from './types'
+//
+// const CheckBox = ({
+//   size = Size.Md,
+//   type = Type.Checkbox,
+//   checked = false,
+//   onChange,
+//   checkBoxProps,
+//   readOnly = false,
+//   disabled = false,
+//   ref,
+//   ...rest
+// }: CheckBoxProps): JSX.Element => {
+//   const getIcon = (props: any) => {
+//     switch (type) {
+//       case Type.Checkbox:
+//         return <Tick {...props} />
+//       case Type.Intermediate:
+//         return <Intermediate {...props} />
+//       default:
+//         return <Tick {...props} />
+//     }
+//   }
+//
+//   const cursorStyleClasses = disabled ? 'cursor-default' : 'cursor-pointer'
+//
+//   const ownTransitionClasses = 'transition-all duration-100 ease-out'
+//
+//   const checkBoxWrapperClasses = cn(
+//     'relative flex items-center justify-center border-1 border-solid border-borders-secondary',
+//     `${checked ? 'bg-accent-primary border-accent-primary' : 'bg-background-stateless border-borders-primary-stateless'}`,
+//     `${size === Size.Sm ? 'min-h-4 max-h-4 min-w-4 max-w-4' : ''}`,
+//     `${size === Size.Md ? 'min-h-5 max-h-5 min-w-5 max-w-5' : ''}`,
+//     `${disabled ? 'border-1 border-solid' : ''}`,
+//     `${disabled ? (checked ? 'bg-accent-2-8-Opacity border-transparent' : 'bg-background-active border-borders-secondary') : ''}`,
+//     cursorStyleClasses,
+//     ownTransitionClasses,
+//   )
+//
+//   const inputClasses = cn('peer absolute top-0 left-0 z-1 m-0 h-full w-full p-0 opacity-0', cursorStyleClasses)
+//
+//   const unCheckedIconClasses = cn('flex opacity-0', `${disabled ? '' : 'peer-hover:opacity-100'}`, ownTransitionClasses)
+//
+//   return (
+//     <span className={checkBoxWrapperClasses} ref={ref} {...rest}>
+//       <input
+//         type='checkbox'
+//         className={inputClasses}
+//         checked={checked}
+//         disabled={disabled}
+//         onChange={readOnly || disabled ? ignoreEvent : onChange}
+//         {...checkBoxProps}
+//       />
+//
+//       {checked ? (
+//         getIcon({ size: getCheckboxIconSize(size), color: lightPalette[Color.ButtonPrimaryText] })
+//       ) : (
+//         <span className={unCheckedIconClasses}>
+//           {getIcon({ size: getCheckboxIconSize(size), color: lightPalette[Color.Accent_4_0_Opacity] })}
+//         </span>
+//       )}
+//     </span>
+//   )
+// }
+//
+// export default CheckBox

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

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

package/core/check-box/index.js

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

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

@@ -1,3 +0,0 @@
-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;