@scaleflex/ui-tw 0.0.1

package/core/switcher/switcher.utils.js

@@ -0,0 +1,37 @@
+import { SwitcherSize } from './switcher-size';
+export var getSwitcherSize = function getSwitcherSize(sizeName) {
+  switch (sizeName) {
+    case SwitcherSize.Lg:
+      return 30;
+    case SwitcherSize.Md:
+      return 20;
+    case SwitcherSize.Sm:
+      return 16;
+    default:
+      return 16;
+  }
+};
+export var getSwitcherFont = function getSwitcherFont(sizeName) {
+  switch (sizeName) {
+    case SwitcherSize.Lg:
+      return 14;
+    case SwitcherSize.Md:
+      return 10;
+    case SwitcherSize.Sm:
+      return 8;
+    default:
+      return 14;
+  }
+};
+export var getSwitcherIconSize = function getSwitcherIconSize(sizeName) {
+  switch (sizeName) {
+    case SwitcherSize.Lg:
+      return 24;
+    case SwitcherSize.Md:
+      return 16;
+    case SwitcherSize.Sm:
+      return 12;
+    default:
+      return 12;
+  }
+};

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

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

package/core/switcher-group/index.js

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

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

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

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "label", "switcherProps", "SwitcherProps", "checked", "onChange", "readOnly", "disabled", "ref"];
+import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
+import React from 'react';
+import Switcher from '../switcher';
+import { SwitcherSize } from '../switcher/switcher-size';
+var SwitcherGroup = function SwitcherGroup(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SwitcherSize.Sm : _ref$size,
+    label = _ref.label,
+    switcherProps = _ref.switcherProps,
+    SwitcherProps = _ref.SwitcherProps,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    onChange = _ref.onChange,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cursorStyleClasses = disabled ? 'cursor-default' : 'cursor-pointer';
+  var switcherGroupLabelClasses = cn('relative inline-flex items-center', cursorStyleClasses);
+  var switcherGroupLabelTextClasses = cn('flex items-center ml-2', "".concat(disabled ? 'text-icons-muted' : 'text-textprimary'),
+  // TODO: add styles from ${fontSizeSwitcherMixin[size]}
+  cursorStyleClasses);
+  return /*#__PURE__*/React.createElement("label", _extends({
+    className: switcherGroupLabelClasses,
+    ref: ref
+  }, rest), /*#__PURE__*/React.createElement(Switcher, {
+    size: size,
+    SwitcherPropsData: SwitcherProps,
+    switcherProps: switcherProps,
+    readOnly: readOnly,
+    disabled: disabled,
+    onChange: onChange,
+    checked: checked
+  }), /*#__PURE__*/React.createElement("span", {
+    className: switcherGroupLabelTextClasses
+  }, label));
+};
+export default SwitcherGroup;

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

@@ -0,0 +1,13 @@
+import { ChangeEvent, Ref } from 'react';
+import { SwitcherSizeType } from '../switcher/switcher.props';
+export interface SwitcherGroupProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange'> {
+    label?: string;
+    switcherProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+    SwitcherProps?: React.HTMLAttributes<HTMLDivElement>;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    readOnly?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    size?: SwitcherSizeType;
+    ref?: Ref<HTMLLabelElement>;
+}

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

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

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

@@ -0,0 +1,10 @@
+import type { SwitcherGroupProps } from './switcher-group.props';
+declare const Styled: {
+    SwitcherGroup: 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>, SwitcherGroupProps>> & 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>, SwitcherGroupProps>> & string;
+};
+export default Styled;

package/core/switcher-group/switcher-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 { SwitcherSize } from '../switcher/switcher-size';
+import { fontSizeSwitcherMixin } from '../switcher/switcher.mixin';
+var baseClassName = 'SwitcherGroup';
+var Label = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'Label')
+}).withConfig({
+  componentId: "sc-15hhrwc-0"
+})(function (_ref) {
+  var disabled = _ref.disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SwitcherSize.Sm : _ref$size,
+    theme = _ref.theme;
+  return css(["display:flex;align-items:center;margin-left:8px;color:", ";cursor:", ";", ";"], disabled ? theme.palette[PColor.ButtonDisabledText] : theme.palette[PColor.TextPrimary], disabled ? 'default' : 'pointer', fontSizeSwitcherMixin[size]);
+});
+var SwitcherGroup = /*#__PURE__*/styled.label.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-15hhrwc-1"
+})(function (_ref2) {
+  var disabled = _ref2.disabled;
+  return css(["position:relative;display:inline-flex;cursor:", ";"], disabled ? 'default' : 'pointer');
+});
+var Styled = applyDisplayNames({
+  SwitcherGroup: SwitcherGroup,
+  Label: Label
+});
+export default Styled;

package/core/tab/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './tab.component';
+export type { TabProps } from './tab.props';

package/core/tab/index.js

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

package/core/tab/tab.component.d.ts

@@ -0,0 +1,6 @@
+import type { TabProps } from './tab.props';
+declare const Tab: {
+    ({ icon, label, active, disabled, notification, className, size, ref, ...rest }: TabProps): JSX.Element;
+    displayName: string;
+};
+export default Tab;

package/core/tab/tab.component.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "label", "active", "disabled", "notification", "className", "size", "ref"];
+import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
+import React from 'react';
+import { Size } from './types';
+var Tab = function Tab(_ref) {
+  var _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? false : _ref$icon,
+    label = _ref.label,
+    active = _ref.active,
+    disabled = _ref.disabled,
+    notification = _ref.notification,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Md : _ref$size,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var transitionClasses = 'transition-all duration-100 ease-out';
+  var fontClasses = '';
+  var svgSizeClasses = '';
+  if (size === Size.Lg) {
+    fontClasses = 'text-lg';
+    svgSizeClasses = '[&_svg]:h-5 [&_svg]:w-5';
+  }
+  if (size === Size.Md) {
+    fontClasses = 'text-base';
+    svgSizeClasses = '[&_svg]:h-4 [&_svg]:w-4';
+  }
+  if (size === Size.Sm) {
+    fontClasses = 'text-sm';
+    svgSizeClasses = '[&_svg]:h-3.5 [&_svg]:w-3.5';
+  }
+  var tabClasses = cn(className, 'group/tab relative inline-flex items-center text-center py-2', disabled ? 'text-icons-muted' : 'text-textprimary', active ? 'active text-primary-active' : '', !disabled ? 'cursor-pointer hover:text-primary-hover active:text-primary-active hover:border-b-2 hover:border-accent-1-8-Opacity active:border-b-2 active:border-primary-active' : '', transitionClasses, fontClasses);
+  var groupChildrenColorClasses = !disabled ? 'group-hover/tab:text-primary-hover group-active/tab:text-primary-active' : '';
+  var iconClasses = "".concat(disabled ? 'text-icons-muted' : active ? 'text-accent-primary' : 'text-icons-primary', " ").concat(groupChildrenColorClasses, " ").concat(transitionClasses, " ").concat(fontClasses, " ").concat(svgSizeClasses);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, rest, {
+    className: tabClasses
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "relative"
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: iconClasses /*size={size}*/
+  }, icon), notification && !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "bg-icons-free absolute -top-0.5 -right-1 box-content h-1.5 w-1.5 rounded-full border-1 border-solid border-white group-active/tab:hidden ".concat(active ? 'hidden' : '')
+  })), label && /*#__PURE__*/React.createElement("div", {
+    className: "ml-2 ".concat(transitionClasses, " ").concat(active ? 'text-accent-primary' : '')
+  }, label));
+};
+Tab.displayName = 'Tab';
+export default Tab;

package/core/tab/tab.mixin.d.ts

@@ -0,0 +1,11 @@
+import type { WithTheme } from '../../theme/entity';
+export declare const tabSizeMixin: {
+    lg: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
+};
+export declare const iconSizeMixin: {
+    sm: import("styled-components").RuleSet<object>;
+    md: import("styled-components").RuleSet<object>;
+    lg: import("styled-components").RuleSet<object>;
+};

package/core/tab/tab.mixin.js

@@ -0,0 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from 'styled-components';
+import { FontVariant as FV } from '../../utils/types/typography/font-variant';
+import { Size } from './types';
+export var tabSizeMixin = _defineProperty(_defineProperty(_defineProperty({}, Size.Lg, function (_ref) {
+  var font = _ref.theme.typography.font;
+  return css(["", " padding:8px 0px;"], font[FV.LabelLargeUp]);
+}), Size.Md, function (_ref2) {
+  var font = _ref2.theme.typography.font;
+  return css(["", " padding:8px 0px;"], font[FV.LabelMedium]);
+}), Size.Sm, function (_ref3) {
+  var font = _ref3.theme.typography.font;
+  return css(["", " padding:8px 0px;"], font[FV.LabelSmall]);
+});
+export var iconSizeMixin = _defineProperty(_defineProperty(_defineProperty({}, Size.Sm, css(["width:14px;height:14px;"])), Size.Md, css(["width:16px;height:16px;"])), Size.Lg, css(["width:20px;height:20px;"]));

package/core/tab/tab.props.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'react';
+import type { Values } from '../../utils/types';
+import { Size } from './types';
+export type TabSizeType = Values<typeof Size>;
+export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: TabSizeType;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    badge?: React.ReactNode;
+    value?: string | number;
+    active?: boolean;
+    notification?: string;
+    disabled?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}

package/core/tab/tab.props.js

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

package/core/tab/tab.styles.d.ts

@@ -0,0 +1,26 @@
+import type { TabProps } from './tab.props';
+declare const Styled: {
+    Tab: 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>, TabProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Icons: 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").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>, never>> & string;
+    Icon: 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>, TabProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    Dot: 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").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>, never>> & string;
+    Label: 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").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>, never>> & string;
+    Badge: 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").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>, never>> & string;
+};
+export default Styled;

package/core/tab/tab.styles.js

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+import { Color as PColor } from '../../utils/types/palette';
+import { iconSizeMixin, tabSizeMixin } from './tab.mixin';
+import { Size } from './types';
+var baseClassName = 'Tab';
+var Dot = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'Dot')
+}).withConfig({
+  componentId: "sc-se8mpx-0"
+})(["position:absolute;display:flex;top:-5%;right:15%;border:1px solid white;border-radius:50%;"]);
+var Icon = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'Icon')
+}).withConfig({
+  componentId: "sc-se8mpx-1"
+})(function (_ref) {
+  var palette = _ref.theme.palette,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Md : _ref$size;
+  return css(["margin-right:8px;color:", ";transition:all 100ms ease-out;svg{", "}"], disabled ? palette[PColor.IconsMuted] : palette[PColor.IconsPrimary], iconSizeMixin[size]);
+});
+var Label = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'Label')
+}).withConfig({
+  componentId: "sc-se8mpx-2"
+})(["transition:all 100ms ease-out;"]);
+var Tab = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-se8mpx-3"
+})(function (_ref2) {
+  var palette = _ref2.theme.palette,
+    _ref2$icon = _ref2.icon,
+    icon = _ref2$icon === void 0 ? false : _ref2$icon,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? Size.Md : _ref2$size;
+  return css(["", " position:relative;display:inline-flex;align-items:center;text-align:center;color:", ";transition:all 100ms ease-out;", ""], tabSizeMixin[size], disabled ? palette[PColor.ButtonDisabledText] : palette[PColor.TextPrimary], !disabled && css(["cursor:pointer;&:hover{", "{color:", ";}", "{color:", ";}box-shadow:", ";}&:active{", "{display:none;}", "{color:", ";}", "{color:", ";}box-shadow:", ";}&.active{", "{display:none;}", "{color:", ";}", "{color:", ";}box-shadow:inset 0px -2px 0px ", ";}"], Icon, palette[PColor.AccentPrimaryHover], Label, palette[PColor.AccentPrimaryHover], icon ? "inset 0px -2px 0px ".concat(palette[PColor.BorderHoverBottom]) : '', Dot, Icon, palette[PColor.AccentPrimaryActive], Label, palette[PColor.AccentPrimaryActive], icon ? "inset 0px -2px 0px ".concat(palette[PColor.BorderActiveBottom]) : '', Dot, Icon, palette[PColor.AccentPrimary], Label, palette[PColor.AccentPrimary], palette[PColor.AccentPrimary]));
+});
+var Icons = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'Icons')
+}).withConfig({
+  componentId: "sc-se8mpx-4"
+})(["position:relative;"]);
+var Badge = /*#__PURE__*/styled.span.attrs({
+  className: generateClassNames(baseClassName, 'Badge')
+}).withConfig({
+  componentId: "sc-se8mpx-5"
+})(["display:flex;margin-left:5px;"]);
+var Styled = applyDisplayNames({
+  Tab: Tab,
+  Icons: Icons,
+  Icon: Icon,
+  Dot: Dot,
+  Label: Label,
+  Badge: Badge
+});
+export default Styled;

package/core/tab/types/index.d.ts

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

package/core/tab/types/index.js

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

package/core/tab/types/size.d.ts

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

package/core/tab/types/size.js

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

package/core/tab-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './tab-panel.component';
+export type { TabPanelProps } from './tab-panel.props';

package/core/tab-panel/index.js

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

package/core/tab-panel/tab-panel.component.d.ts

@@ -0,0 +1,3 @@
+import type { TabPanelProps } from './tab-panel.props';
+declare const TabPanel: ({ value, index, ref, ...rest }: TabPanelProps) => JSX.Element | null;
+export default TabPanel;

package/core/tab-panel/tab-panel.component.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "index", "ref"];
+import React from 'react';
+var TabPanel = function TabPanel(_ref) {
+  var value = _ref.value,
+    index = _ref.index,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (value !== index) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "mt-4",
+    ref: ref
+  }, rest));
+};
+export default TabPanel;

package/core/tab-panel/tab-panel.props.d.ts

@@ -0,0 +1,6 @@
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string | number;
+    index: string | number;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}

package/core/tab-panel/tab-panel.props.js

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

package/core/tab-panel/tab-panel.styles.d.ts

@@ -0,0 +1,6 @@
+declare const Styled: {
+    TabPanel: 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").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>, never>> & string;
+};
+export default Styled;

package/core/tab-panel/tab-panel.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+var baseClassName = 'TabPanel';
+var TabPanel = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-olkkoz-0"
+})(["margin-top:20px;"]);
+var Styled = applyDisplayNames({
+  TabPanel: TabPanel
+});
+export default Styled;

package/core/upload-input/index.d.ts

@@ -0,0 +1,2 @@
+export type { UploadInputProps } from './upload-input.props';
+export { default } from './upload-input.component';

package/core/upload-input/index.js

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

package/core/upload-input/upload-input.component.d.ts

@@ -0,0 +1,3 @@
+import type { UploadInputProps } from './upload-input.props';
+declare const UploadInput: ({ error, buttonLabel, buttonVariant, placeholder, onChange, ref, ...rest }: UploadInputProps) => JSX.Element;
+export default UploadInput;

package/core/upload-input/upload-input.component.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["error", "buttonLabel", "buttonVariant", "placeholder", "onChange", "ref"];
+import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
+import React, { useState } from 'react';
+import Button, { ButtonVariant } from '../button';
+var UploadInput = function UploadInput(_ref) {
+  var error = _ref.error,
+    _ref$buttonLabel = _ref.buttonLabel,
+    buttonLabel = _ref$buttonLabel === void 0 ? 'Choose file' : _ref$buttonLabel,
+    _ref$buttonVariant = _ref.buttonVariant,
+    buttonVariant = _ref$buttonVariant === void 0 ? ButtonVariant.Primary : _ref$buttonVariant,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'No file chosen' : _ref$placeholder,
+    _onChange = _ref.onChange,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    valueState = _useState2[0],
+    setValueState = _useState2[1];
+  var uploadInputWrapClasses = cn('upload-input-wrap relative border-1 border-solid w-75 flex items-center pl-2 justify-end rounded-sm overflow-hidden', 'transition-all duration-100 ease-out', 'hover:border-borders-primary-hover', 'active:border-accent-primary', "".concat(error ? 'bg-background-secondary border-error' : 'border-borders-primary-stateless'));
+  return /*#__PURE__*/React.createElement("div", {
+    className: uploadInputWrapClasses,
+    ref: ref,
+    onClick: function onClick(_ref2) {
+      var currentTarget = _ref2.currentTarget;
+      var fileInputElem = currentTarget.querySelector('input[type=file]');
+      if (fileInputElem) {
+        fileInputElem.click();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pointer-events-none absolute left-3 ".concat(valueState ? 'text-textprimary' : 'text-textplaceholder')
+  }, valueState ? valueState : placeholder), /*#__PURE__*/React.createElement(Button, {
+    variant: buttonVariant
+    // border left added to simulate button hover event and change it's color
+    // margin-right is to hide white gap between button and wraper div border
+    ,
+    className: "my-0 -mr-1 ml-0 rounded-tl-none rounded-bl-none border-l-230 pr-5",
+    style: {
+      borderColor: 'unset'
+    }
+  }, buttonLabel), /*#__PURE__*/React.createElement("input", _extends({
+    className: "file-input-field hidden"
+  }, rest, {
+    type: "file",
+    onChange: function onChange(event) {
+      var files = event.target.files;
+      if (files) {
+        if (files.length === 0) {
+          setValueState('');
+        } else if (files.length === 1) {
+          setValueState(files[0].name);
+        } else if (files.length > 1) {
+          setValueState("".concat(files.length, " files"));
+        } else {
+          setValueState(event.target.value);
+        }
+      }
+      if (typeof _onChange === 'function') {
+        _onChange(event);
+      }
+    }
+  })));
+};
+export default UploadInput;

package/core/upload-input/upload-input.props.d.ts

@@ -0,0 +1,9 @@
+import { ButtonVariantType } from '@scaleflex/ui-tw/core/button/button.types';
+import { HTMLAttributes, Ref } from 'react';
+export interface UploadInputProps extends HTMLAttributes<HTMLInputElement> {
+    buttonLabel?: string;
+    placeholder?: string;
+    buttonVariant?: ButtonVariantType;
+    error?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}

package/core/upload-input/upload-input.props.js

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

package/core/upload-input/upload-input.styles.d.ts

@@ -0,0 +1,11 @@
+declare const Styled: {
+    UploadInput: 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>, {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
+    FileInput: 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;
+};
+export default Styled;

package/core/upload-input/upload-input.styles.js

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+import { applyDisplayNames, generateClassNames } from '../../utils/functions';
+import IStyled from '../input/input.styles';
+var baseClassName = 'UploadInput';
+var FileInput = /*#__PURE__*/styled.input.attrs({
+  className: generateClassNames(baseClassName, 'FileInput')
+}).withConfig({
+  componentId: "sc-hwl9p2-0"
+})(["display:none;"]);
+
+// const UploadInput = styled.div.attrs({
+//   className: generateClassNames(baseClassName, 'root'),
+// })<WithTheme>(
+//   ({ theme }) => css`
+//     position: relative;
+//
+//     ${IStyled.Input} {
+//       padding: unset;
+//       width: 299px;
+//       column-gap: 0;
+//       transition: all 100ms ease-out;
+//
+//       &:hover {
+//         ${BStyled.Button} {
+//           background-color: ${theme.palette[PaletteColor.AccentPrimaryHover]};
+//           transition: all 100ms ease-out;
+//           border: none;
+//         }
+//       }
+//     }
+//
+//     ${IStyled.Base} {
+//       padding: 12px 8px 12px 12px;
+//     }
+//
+//     ${BStyled.Button} {
+//       border-radius: 0 4px 4px 0;
+//     }
+//   `,
+// )
+
+var UploadInput = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'root')
+}).withConfig({
+  componentId: "sc-hwl9p2-1"
+})(function () {
+  return css(["position:relative;", "{padding:unset;width:299px;column-gap:0;transition:all 100ms ease-out;}", "{padding:12px 8px 12px 12px;}"], IStyled.Input, IStyled.Base);
+});
+var Styled = applyDisplayNames({
+  UploadInput: UploadInput,
+  FileInput: FileInput
+});
+export default Styled;