@scaleflex/ui-tw 0.0.5 → 0.0.7

package/button/button.component.js

@@ -1,19 +1,15 @@
 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/button/components/end-icon';
-import StartIcon, { startIconVariants } from '@scaleflex/ui-tw/button/components/start-icon';
+import { ButtonSize, ButtonVariant, buttonSizeOptions, buttonVariantOptions } from '@scaleflex/ui-tw/button/button.constants';
+import { EndIcon } from '@scaleflex/ui-tw/button/components/end-icon';
+import { StartIcon, startIconVariants } from '@scaleflex/ui-tw/button/components/start-icon';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React from 'react';
-import { ButtonSize, ButtonVariant } from './button.types';
 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-accent hover:border-primary/80'), ButtonVariant.Outline, 'border bg-background text-secondary-foreground shadow-xs border-input hover:bg-secondary 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 font-normal hover:text-primary/80'), 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.Error, 'bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/80'), _defineProperty(_buttonVariantOptions, ButtonVariant.Warning, 'bg-warning text-primary-foreground shadow-xs hover:bg-warning/80'));
-var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), 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('', {
   variants: {
     variant: buttonVariantOptions,

package/button/button.constants.d.ts

@@ -0,0 +1,63 @@
+export declare const ButtonSize: {
+    readonly Xs: "xs";
+    readonly Sm: "sm";
+    readonly Md: "md";
+    readonly Lg: "lg";
+};
+export declare const buttonSizeOptions: {
+    readonly xs: "h-6 px-2.5 py-1.5 text-xs";
+    readonly sm: "h-8 px-3 py-2 text-sm";
+    readonly md: "h-10 px-4 py-2.5 text-base";
+    readonly lg: "h-12 px-6 py-3.5 text-lg";
+};
+export declare const buttonEndIconSizes: {
+    readonly xs: "ml-1.5";
+    readonly sm: "ml-1.5";
+    readonly md: "ml-2";
+    readonly lg: "ml-2";
+};
+export declare const buttonStartIconSizes: {
+    readonly xs: "mr-1.5";
+    readonly sm: "mr-1.5";
+    readonly md: "mr-2";
+    readonly lg: "mr-2";
+};
+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 Error: "error-primary";
+    readonly Warning: "warning-primary";
+};
+export declare const iconVariantOptions: {
+    readonly primary: "";
+    readonly secondary: "";
+    readonly outline: "text-muted-foreground group-hover/button:text-muted-foreground/80";
+    readonly "link-primary": "";
+    readonly "link-secondary": "text-muted-foreground group-hover/button:text-muted-foreground/80";
+    readonly "link-basic-primary": "";
+    readonly "link-basic-secondary": "text-muted-foreground group-hover/button:text-muted-foreground/80";
+    readonly "link-error": "";
+    readonly "link-warning": "";
+    readonly "error-primary": "";
+    readonly "warning-primary": "";
+};
+export declare const buttonVariantOptions: {
+    readonly primary: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/80";
+    readonly secondary: "border bg-background shadow-xs text-primary border-primary hover:bg-accent hover:border-primary/80";
+    readonly outline: "border bg-background text-secondary-foreground shadow-xs border-input hover:bg-secondary hover:border-input/80";
+    readonly "link-primary": "text-primary hover:text-primary/80";
+    readonly "link-secondary": "text-secondary-foreground hover:text-secondary-foreground/80";
+    readonly "link-basic-primary": "text-primary font-normal hover:text-primary/80";
+    readonly "link-basic-secondary": "text-secondary-foreground font-normal hover:text-secondary-foreground/80";
+    readonly "link-error": "text-destructive hover:text-destructive/80";
+    readonly "link-warning": "text-warning hover:text-warning/80";
+    readonly "error-primary": "bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/80";
+    readonly "warning-primary": "bg-warning text-primary-foreground shadow-xs hover:bg-warning/80";
+};

package/button/button.constants.js

@@ -0,0 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _iconVariantOptions, _buttonVariantOptions;
+export var ButtonSize = {
+  Xs: 'xs',
+  Sm: 'sm',
+  Md: 'md',
+  Lg: 'lg'
+};
+export var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), 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');
+export var buttonEndIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'ml-1.5'), ButtonSize.Sm, 'ml-1.5'), ButtonSize.Md, 'ml-2'), ButtonSize.Lg, 'ml-2');
+export var buttonStartIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'mr-1.5'), ButtonSize.Sm, 'mr-1.5'), ButtonSize.Md, 'mr-2'), ButtonSize.Lg, 'mr-2');
+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',
+  Error: 'error-primary',
+  Warning: 'warning-primary'
+};
+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.Error, ''), _defineProperty(_iconVariantOptions, ButtonVariant.Warning, ''));
+export 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-accent hover:border-primary/80'), ButtonVariant.Outline, 'border bg-background text-secondary-foreground shadow-xs border-input hover:bg-secondary 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 font-normal hover:text-primary/80'), 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.Error, 'bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/80'), _defineProperty(_buttonVariantOptions, ButtonVariant.Warning, 'bg-warning text-primary-foreground shadow-xs hover:bg-warning/80'));

package/button/button.types.d.ts

@@ -1,19 +1,9 @@
 import { buttonVariants } from '@scaleflex/ui-tw/button/button.component';
+import { ButtonSize, ButtonVariant } from '@scaleflex/ui-tw/button/button.constants';
 import type { VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactElement } 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 Error: "error-primary";
-    readonly Warning: "warning-primary";
-};
+export type ButtonSizeType = (typeof ButtonSize)[keyof typeof ButtonSize];
+export type ButtonVariantType = (typeof ButtonVariant)[keyof typeof ButtonVariant];
 export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     startIcon?: ReactElement;
@@ -21,11 +11,10 @@ export interface ButtonProps extends ComponentProps<'button'>, VariantProps<type
     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];
+export interface EndIconProps extends ComponentProps<'span'>, Pick<ButtonProps, 'size' | 'variant'> {
+    icon?: ReactElement;
+}
+export interface StartIconProps extends ComponentProps<'span'>, Pick<ButtonProps, 'size' | 'variant'> {
+    icon?: ReactElement;
+    loading?: boolean;
+}

package/button/button.types.js

@@ -1,19 +1 @@
-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',
-  Error: 'error-primary',
-  Warning: 'warning-primary'
-};
-export var ButtonSize = {
-  Xs: 'xs',
-  Sm: 'sm',
-  Md: 'md',
-  Lg: 'lg'
-};
+export {};

package/button/button.utils.js

@@ -1,4 +1,4 @@
-import { ButtonSize } from '@scaleflex/ui-tw/button/button.types';
+import { ButtonSize } from '@scaleflex/ui-tw/button/button.constants';
 export var getIconSizeInRem = function getIconSizeInRem(sizeName) {
   switch (sizeName) {
     case ButtonSize.Lg:

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

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

package/button/components/end-icon.js

@@ -1,17 +1,14 @@
 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", "variant"];
-import { ButtonSize } from '@scaleflex/ui-tw/button';
-import { iconVariantOptions } from '@scaleflex/ui-tw/button/button.const';
+import { buttonEndIconSizes, iconVariantOptions } from '@scaleflex/ui-tw/button/button.constants';
 import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
 import { cva } from 'class-variance-authority';
 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
+    size: buttonEndIconSizes
   }
 });
 var EndIcon = function EndIcon(props) {
@@ -36,4 +33,4 @@ var EndIcon = function EndIcon(props) {
     }
   }));
 };
-export default EndIcon;
+export { EndIcon };

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

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

package/button/components/start-icon.js

@@ -1,18 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["size", "variant", "icon", "loading"];
 import SpinnerIcon from '@scaleflex/icons-tw/spinner';
-import { ButtonSize } from '@scaleflex/ui-tw/button';
-import { iconVariantOptions } from '@scaleflex/ui-tw/button/button.const';
+import { buttonStartIconSizes, iconVariantOptions } from '@scaleflex/ui-tw/button/button.constants';
 import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
 import { cva } from 'class-variance-authority';
 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
+    size: buttonStartIconSizes
   }
 });
 var StartIcon = function StartIcon(props) {
@@ -49,5 +46,4 @@ var StartIcon = function StartIcon(props) {
     })
   })));
 };
-export { startIconVariants };
-export default StartIcon;
+export { StartIcon, startIconVariants };

package/button/index.d.ts

@@ -1,3 +1,3 @@
 export { Button, buttonVariants } from './button.component';
 export type { ButtonProps } from './button.types';
-export { ButtonVariant, ButtonSize } from './button.types';
+export { ButtonVariant, ButtonSize } from './button.constants';

package/button/index.js

@@ -1,2 +1,2 @@
 export { Button, buttonVariants } from './button.component';
-export { ButtonVariant, ButtonSize } from './button.types';
+export { ButtonVariant, ButtonSize } from './button.constants';

package/form/components/form-field-group.component.d.ts

@@ -1,19 +1,5 @@
-import { InputSizeType } from '@scaleflex/ui-tw/input/input.types';
-import React, { ReactNode } from 'react';
-import { ControllerRenderProps, FieldValues, Path, UseControllerProps } from 'react-hook-form';
-export interface FormFieldArgs {
-    size?: InputSizeType;
-    readOnly?: boolean;
-    disabled?: boolean;
-}
-export interface FormFieldGroupProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> extends UseControllerProps<TFieldValues, TName> {
-    label?: string;
-    description?: string;
-    tooltip?: string;
-    size?: InputSizeType;
-    readOnly?: boolean;
-    highlight?: boolean;
-    children: (field: ControllerRenderProps<TFieldValues, TName>, args?: FormFieldArgs) => ReactNode;
-}
-declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, highlight, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
+import { FormFieldGroupProps } from '@scaleflex/ui-tw/form/form.types';
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, highlight, horizontal, horizontalLabelWidth, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
 export { FormFieldGroup };

package/form/components/form-field-group.component.js

@@ -1,4 +1,6 @@
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@scaleflex/ui-tw/form';
+import { labelHeightVariants } from '@scaleflex/ui-tw/form/form.constants';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
 import React from 'react';
 function FormFieldGroup(_ref) {
   var control = _ref.control,
@@ -13,6 +15,9 @@ function FormFieldGroup(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     tooltip = _ref.tooltip,
     highlight = _ref.highlight,
+    _ref$horizontal = _ref.horizontal,
+    horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
+    horizontalLabelWidth = _ref.horizontalLabelWidth,
     children = _ref.children;
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
@@ -21,12 +26,17 @@ function FormFieldGroup(_ref) {
       var field = _ref2.field;
       return /*#__PURE__*/React.createElement(FormItem, {
         className: "group",
+        horizontal: horizontal,
+        firstColumnWidth: horizontalLabelWidth,
         "data-disabled": disabled,
         "data-highlight": highlight
       }, label && /*#__PURE__*/React.createElement(FormLabel, {
+        className: cn(horizontal && 'self-start', horizontal && labelHeightVariants[size]),
         size: size,
         tooltip: tooltip
-      }, label), /*#__PURE__*/React.createElement(FormControl, null, children(field, {
+      }, label), /*#__PURE__*/React.createElement("div", {
+        className: "grid gap-1.5"
+      }, /*#__PURE__*/React.createElement(FormControl, null, children(field, {
         size: size,
         readOnly: readOnly,
         disabled: disabled
@@ -34,7 +44,7 @@ function FormFieldGroup(_ref) {
         size: size
       }, description), /*#__PURE__*/React.createElement(FormMessage, {
         size: size
-      }));
+      })));
     }
   });
 }

package/form/components/form-field-input.component.d.ts

@@ -0,0 +1,5 @@
+import { FormInputFieldProps } from '@scaleflex/ui-tw/form/form.types';
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+declare function FormInputField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ inputProps, ...rest }: FormInputFieldProps<TFieldValues, TName>): React.JSX.Element;
+export { FormInputField };

package/form/components/form-field-input.component.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["inputProps"];
+import { FormFieldGroup } from '@scaleflex/ui-tw/form';
+import { Input } from '@scaleflex/ui-tw/input';
+import React from 'react';
+function FormInputField(_ref) {
+  var inputProps = _ref.inputProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
+    return /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder
+    }, args, inputProps, field));
+  });
+}
+export { FormInputField };

package/form/components/form-switch-field.component.d.ts

@@ -0,0 +1,5 @@
+import { FormSwitchFieldProps } from '@scaleflex/ui-tw/form/form.types';
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+declare function FormSwitchField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, disabled, tooltip, size, layout, }: FormSwitchFieldProps<TFieldValues, TName>): React.JSX.Element;
+export { FormSwitchField };

package/form/components/form-switch-field.component.js

@@ -0,0 +1,64 @@
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@scaleflex/ui-tw/form';
+import { SwitchLayout, formSwitchFieldSizeOptions } from '@scaleflex/ui-tw/form/form.constants';
+import { Label } from '@scaleflex/ui-tw/label';
+import { Switch } from '@scaleflex/ui-tw/switch';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+var formSwitchFieldVariants = cva('', {
+  variants: {
+    size: formSwitchFieldSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function FormSwitchField(_ref) {
+  var control = _ref.control,
+    name = _ref.name,
+    label = _ref.label,
+    description = _ref.description,
+    disabled = _ref.disabled,
+    tooltip = _ref.tooltip,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? SwitchLayout.Inline : _ref$layout;
+  var isInlineLayout = layout === SwitchLayout.Inline;
+  return /*#__PURE__*/React.createElement(FormField, {
+    control: control,
+    name: name,
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      return /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement("div", {
+        className: cn('flex items-center', isInlineLayout ? formSwitchFieldVariants({
+          size: size
+        }) : 'w-full justify-between gap-2')
+      }, isInlineLayout ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(Switch, {
+        id: field.name,
+        checked: field.value,
+        onCheckedChange: field.onChange,
+        disabled: disabled,
+        size: size
+      })), /*#__PURE__*/React.createElement(Label, {
+        htmlFor: field.name,
+        tooltip: tooltip,
+        size: size
+      }, label)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
+        htmlFor: field.name,
+        tooltip: tooltip,
+        size: size
+      }, label), /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(Switch, {
+        id: field.name,
+        checked: field.value,
+        onCheckedChange: field.onChange,
+        disabled: disabled,
+        size: size
+      })))), description && /*#__PURE__*/React.createElement(FormDescription, {
+        size: size
+      }, description), /*#__PURE__*/React.createElement(FormMessage, null));
+    }
+  });
+}
+export { FormSwitchField };

package/form/form.component.d.ts

@@ -18,7 +18,10 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
 };
-declare function FormItem({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function FormItem({ className, horizontal, firstColumnWidth, ...props }: ComponentProps<'div'> & {
+    horizontal?: boolean;
+    firstColumnWidth?: string;
+}): React.JSX.Element;
 declare function FormLabel({ className, ...props }: LabelProps): React.JSX.Element;
 declare function FormControl({ ...props }: ComponentProps<typeof Slot>): React.JSX.Element;
 declare function FormDescription({ className, size, ...props }: ComponentProps<'p'> & {

package/form/form.component.js

@@ -2,14 +2,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["className"],
+var _excluded = ["className", "horizontal", "firstColumnWidth"],
   _excluded2 = ["className"],
   _excluded3 = ["className", "size"],
   _excluded4 = ["className", "size"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Slot } from '@radix-ui/react-slot';
-import { FormMessageSize } from '@scaleflex/ui-tw/form/form.types';
+import { FormMessageSize, formMessageSizeOptions } from '@scaleflex/ui-tw/form/form.constants';
 import { Label } from '@scaleflex/ui-tw/label';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import * as React from 'react';
@@ -49,6 +49,9 @@ var useFormField = function useFormField() {
 var FormItemContext = /*#__PURE__*/createContext({});
 function FormItem(_ref2) {
   var className = _ref2.className,
+    horizontal = _ref2.horizontal,
+    _ref2$firstColumnWidt = _ref2.firstColumnWidth,
+    firstColumnWidth = _ref2$firstColumnWidt === void 0 ? '11.25rem' : _ref2$firstColumnWidt,
     props = _objectWithoutProperties(_ref2, _excluded);
   var id = useId();
   return /*#__PURE__*/React.createElement(FormItemContext.Provider, {
@@ -57,7 +60,10 @@ function FormItem(_ref2) {
     }
   }, /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "form-item",
-    className: cn('grid gap-1.5', className)
+    className: cn('grid gap-1.5', horizontal && 'items-start gap-4', className),
+    style: horizontal ? {
+      gridTemplateColumns: "".concat(firstColumnWidth, " 1fr")
+    } : undefined
   }, props)));
 }
 function FormLabel(_ref3) {
@@ -69,7 +75,7 @@ function FormLabel(_ref3) {
   return /*#__PURE__*/React.createElement(Label, _extends({
     "data-slot": "form-label",
     "data-error": !!error,
-    className: cn('data-[error=true]:text-destructive', className),
+    className: cn('truncate', 'data-[error=true]:text-destructive-foreground', className),
     htmlFor: formItemId
   }, props));
 }
@@ -87,7 +93,6 @@ function FormControl(_ref4) {
     "aria-invalid": !!error
   }, props));
 }
-var formMessageSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormMessageSize.Sm, 'text-xs'), FormMessageSize.Md, 'text-xs'), FormMessageSize.Lg, 'text-sm');
 function FormDescription(_ref5) {
   var className = _ref5.className,
     _ref5$size = _ref5.size,
@@ -98,7 +103,7 @@ function FormDescription(_ref5) {
   return /*#__PURE__*/React.createElement("p", _extends({
     "data-slot": "form-description",
     id: formDescriptionId,
-    className: cn('text-muted-foreground', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning', formMessageSizeOptions[size], className)
+    className: cn('text-muted-foreground', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning-foreground', formMessageSizeOptions[size], className)
   }, props));
 }
 function FormMessage(_ref6) {
@@ -117,7 +122,7 @@ function FormMessage(_ref6) {
   return /*#__PURE__*/React.createElement("p", _extends({
     "data-slot": "form-message",
     id: formMessageId,
-    className: cn('text-destructive', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', formMessageSizeOptions[size], className)
+    className: cn('text-destructive-foreground', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', formMessageSizeOptions[size], className)
   }, props), body);
 }
 export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/form/form.constants.d.ts

@@ -0,0 +1,24 @@
+export declare const FormMessageSize: {
+    readonly Sm: "sm";
+    readonly Md: "md";
+    readonly Lg: "lg";
+};
+export declare const labelHeightVariants: {
+    readonly sm: "h-8";
+    readonly md: "h-10";
+    readonly lg: "h-12";
+};
+export declare const SwitchLayout: {
+    readonly Inline: "inline";
+    readonly Justified: "justified";
+};
+export declare const formMessageSizeOptions: {
+    readonly sm: "text-xs";
+    readonly md: "text-xs";
+    readonly lg: "text-sm";
+};
+export declare const formSwitchFieldSizeOptions: {
+    readonly sm: "space-x-2";
+    readonly md: "space-x-2.5";
+    readonly lg: "space-x-3";
+};

package/form/form.constants.js

@@ -0,0 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var FormMessageSize = {
+  Sm: 'sm',
+  Md: 'md',
+  Lg: 'lg'
+};
+export var labelHeightVariants = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-8'), FormSize.Md, 'h-10'), FormSize.Lg, 'h-12');
+export var SwitchLayout = {
+  Inline: 'inline',
+  Justified: 'justified'
+};
+export var formMessageSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormMessageSize.Sm, 'text-xs'), FormMessageSize.Md, 'text-xs'), FormMessageSize.Lg, 'text-sm');
+export var formSwitchFieldSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormMessageSize.Sm, 'space-x-2'), FormMessageSize.Md, 'space-x-2.5'), FormMessageSize.Lg, 'space-x-3');

package/form/form.types.d.ts

@@ -1,7 +1,41 @@
-import type { Values } from 'packages/ui/src/types/values';
-export declare const FormMessageSize: {
-    readonly Sm: "sm";
-    readonly Md: "md";
-    readonly Lg: "lg";
-};
+import { FormMessageSize, SwitchLayout } from '@scaleflex/ui-tw/form/form.constants';
+import { InputProps } from '@scaleflex/ui-tw/input';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import type { Values } from '@scaleflex/ui-tw/types/values';
+import { ReactNode } from 'react';
+import { ControllerRenderProps, type FieldPath, FieldValues, Path, UseControllerProps } from 'react-hook-form';
 export type FormMessageSizeType = Values<typeof FormMessageSize>;
+export type SwitchLayoutType = Values<typeof SwitchLayout>;
+export type FormItemContextValue = {
+    id: string;
+};
+export type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+};
+export interface FormFieldArgs {
+    size?: FormSizeType;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+export interface FormFieldGroupProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> extends UseControllerProps<TFieldValues, TName> {
+    label?: string;
+    description?: string;
+    tooltip?: string;
+    size?: FormSizeType;
+    readOnly?: boolean;
+    highlight?: boolean;
+    horizontal?: boolean;
+    horizontalLabelWidth?: string;
+    children: (field: ControllerRenderProps<TFieldValues, TName>, args?: FormFieldArgs) => ReactNode;
+}
+export interface FormSwitchFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> extends UseControllerProps<TFieldValues, TName> {
+    label: string;
+    size?: FormSizeType;
+    description?: string;
+    disabled?: boolean;
+    layout?: SwitchLayoutType;
+    tooltip?: string;
+}
+export type FormInputFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
+    inputProps?: InputProps;
+};

package/form/form.types.js

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

package/form/index.d.ts

@@ -1,2 +1,3 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField, } from './form.component';
 export { FormFieldGroup } from './components/form-field-group.component';
+export { FormSwitchField } from './components/form-switch-field.component';

package/form/index.js

@@ -1,2 +1,3 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField } from './form.component';
-export { FormFieldGroup } from './components/form-field-group.component';
+export { FormFieldGroup } from './components/form-field-group.component';
+export { FormSwitchField } from './components/form-switch-field.component';

package/input/index.d.ts

@@ -1,3 +1,3 @@
 export { Input, inputVariants } from './input.component';
 export type { InputProps } from './input.types';
-export { InputType, InputSize } from './input.types';
+export { InputType } from './input.constants';

package/input/index.js

@@ -1,2 +1,2 @@
 export { Input, inputVariants } from './input.component';
-export { InputType, InputSize } from './input.types';
+export { InputType } from './input.constants';

package/input/input.component.d.ts

@@ -1,5 +1,5 @@
+import { InputProps } from '@scaleflex/ui-tw/input/input.types';
 import React from 'react';
-import { InputProps } from './input.types';
 declare const inputVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/input/input.component.js

@@ -1,14 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["className", "type", "size", "disabled", "readOnly"];
 import { ButtonSize } from '@scaleflex/ui-tw/button';
+import { InputType, inputSizeOptions } from '@scaleflex/ui-tw/input/input.constants';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React from 'react';
-import { InputType } from './input.types';
-import { InputSize } from './input.types';
-var inputSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, InputSize.Sm, 'py-2 px-3 text-sm h-8'), InputSize.Md, 'py-3 px-4 h-10 text-base '), InputSize.Lg, 'py-3 px-4 h-12 text-lg ');
 var inputVariants = cva('', {
   variants: {
     size: inputSizeOptions
@@ -22,7 +20,7 @@ function Input(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? InputType.Text : _ref$type,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? InputSize.Md : _ref$size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$readOnly = _ref.readOnly,

package/input/input.constants.d.ts

@@ -0,0 +1,10 @@
+export declare const inputSizeOptions: {
+    readonly sm: "py-2 px-3 text-sm h-8";
+    readonly md: "py-3 px-4 h-10 text-base ";
+    readonly lg: "py-3 px-4 h-12 text-lg ";
+};
+export declare const InputType: {
+    readonly Text: "text";
+    readonly Email: "email";
+    readonly Number: "number";
+};

package/input/input.constants.js

@@ -0,0 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var inputSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 text-sm h-8'), FormSize.Md, 'py-3 px-4 h-10 text-base '), FormSize.Lg, 'py-3 px-4 h-12 text-lg ');
+export var InputType = {
+  Text: 'text',
+  Email: 'email',
+  Number: 'number'
+};

package/input/input.types.d.ts

@@ -1,17 +1,6 @@
-import type { Values } from 'packages/ui/src/types/values';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { ComponentProps } from 'react';
 export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
-    size?: InputSizeType;
+    size?: FormSizeType;
     'aria-invalid'?: boolean;
 }
-export declare const InputType: {
-    readonly Text: "text";
-    readonly Email: "email";
-    readonly Number: "number";
-};
-export declare const InputSize: {
-    readonly Sm: "sm";
-    readonly Md: "md";
-    readonly Lg: "lg";
-};
-export type InputSizeType = Values<typeof InputSize>;

package/input/input.types.js

@@ -1,10 +1 @@
-export var InputType = {
-  Text: 'text',
-  Email: 'email',
-  Number: 'number'
-};
-export var InputSize = {
-  Sm: 'sm',
-  Md: 'md',
-  Lg: 'lg'
-};
+export {};

package/label/components/info-outline-icon.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from '@scaleflex/icons-tw/icon.props';
-export declare const InfoOutlineIcon: ({ color, size, ref, ...rest }: IconProps) => JSX.Element;
-export default InfoOutlineIcon;
+declare const InfoOutlineIcon: ({ color, size, ref, ...rest }: IconProps) => JSX.Element;
+export { InfoOutlineIcon };

package/label/components/info-outline-icon.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["color", "size", "ref"];
 import React from 'react';
-export var InfoOutlineIcon = function InfoOutlineIcon(_ref) {
+var InfoOutlineIcon = function InfoOutlineIcon(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'currentColor' : _ref$color,
     _ref$size = _ref.size,
@@ -27,4 +27,4 @@ export var InfoOutlineIcon = function InfoOutlineIcon(_ref) {
     fill: color
   }));
 };
-export default InfoOutlineIcon;
+export { InfoOutlineIcon };

package/label/components/label-icon.d.ts

@@ -1,7 +1,4 @@
-import { LabelProps } from '@scaleflex/ui-tw/label/label.types';
-import React, { ComponentProps, ReactElement } from 'react';
-interface LabelIconProps extends ComponentProps<'span'>, Pick<LabelProps, 'size' | 'tooltip'> {
-    icon?: ReactElement;
-}
+import { LabelIconProps } from '@scaleflex/ui-tw/label/label.types';
+import React from 'react';
 declare const LabelIcon: (props: LabelIconProps) => React.JSX.Element | null;
 export { LabelIcon };

package/label/components/label-icon.js

@@ -1,15 +1,13 @@
 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", "tooltip"];
-import InfoOutlineIcon from '@scaleflex/ui-tw/label/components/info-outline-icon';
-import { LabelSize } from '@scaleflex/ui-tw/label/label.types';
+import { InfoOutlineIcon } from '@scaleflex/ui-tw/label/components/info-outline-icon';
+import { labelIconSizes } from '@scaleflex/ui-tw/label/label.constants';
 import { getLabelIconSizeInRem } from '@scaleflex/ui-tw/label/label.utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@scaleflex/ui-tw/tooltip';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import React, { cloneElement, useMemo } from 'react';
-var labelIconSizes = _defineProperty(_defineProperty(_defineProperty({}, LabelSize.Sm, 'ml-1'), LabelSize.Md, 'ml-1.5'), LabelSize.Lg, 'ml-1.5');
 var labelIconVariants = cva('', {
   variants: {
     size: labelIconSizes

package/label/label.component.js

@@ -1,44 +1,44 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["className", "size", "children", "icon", "tooltip"];
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { ButtonSize } from '@scaleflex/ui-tw/button';
-import { InputSize } from '@scaleflex/ui-tw/input';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
-import { LabelSize } from '@scaleflex/ui-tw/label/label.types';
+import { labelSizeOptions } from '@scaleflex/ui-tw/label/label.constants';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
-var labelSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, InputSize.Sm, 'text-xs'), InputSize.Md, 'text-sm'), InputSize.Lg, 'text-base');
 var labelVariants = cva('', {
   variants: {
     size: labelSizeOptions
   },
   defaultVariants: {
-    size: ButtonSize.Md
+    size: FormSize.Md
   }
 });
 function Label(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? LabelSize.Md : _ref$size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
     children = _ref.children,
     icon = _ref.icon,
     tooltip = _ref.tooltip,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(LabelPrimitive.Root, _extends({
     "data-slot": "label",
-    className: cn('text-secondary-foreground flex items-center gap-2 leading-none font-normal select-none', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-50', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning', labelVariants({
+    className: cn('text-secondary-foreground flex items-center leading-none font-normal select-none', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-50', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning-foreground', labelVariants({
       size: size,
       className: className
     }))
-  }, props), icon || tooltip ? /*#__PURE__*/React.createElement("span", {
-    className: "flex items-center"
-  }, children, /*#__PURE__*/React.createElement(LabelIcon, {
+  }, props), /*#__PURE__*/React.createElement("span", {
+    className: "truncate",
+    style: {
+      maxWidth: icon || tooltip ? 'calc(100% - 2rem)' : undefined
+    }
+  }, children), (icon || tooltip) && /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     icon: icon,
     tooltip: tooltip
-  })) : children);
+  }));
 }
 export { Label };

package/label/label.constants.d.ts

@@ -0,0 +1,10 @@
+export declare const labelSizeOptions: {
+    readonly sm: "text-xs";
+    readonly md: "text-sm";
+    readonly lg: "text-base";
+};
+export declare const labelIconSizes: {
+    readonly sm: "ml-1";
+    readonly md: "ml-1.5";
+    readonly lg: "ml-1.5";
+};

package/label/label.constants.js

@@ -0,0 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var labelSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'text-xs'), FormSize.Md, 'text-sm'), FormSize.Lg, 'text-base');
+export var labelIconSizes = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'ml-1'), FormSize.Md, 'ml-1.5'), FormSize.Lg, 'ml-1.5');

package/label/label.types.d.ts

@@ -1,14 +1,11 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
-import type { Values } from 'packages/ui/src/types/values';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { ComponentProps, ReactElement } from 'react';
-export declare const LabelSize: {
-    readonly Sm: "sm";
-    readonly Md: "md";
-    readonly Lg: "lg";
-};
-export type LabelSizeType = Values<typeof LabelSize>;
 export interface LabelProps extends Omit<ComponentProps<typeof LabelPrimitive.Root>, 'size'> {
-    size?: LabelSizeType;
+    size?: FormSizeType;
     icon?: ReactElement;
     tooltip?: string;
 }
+export interface LabelIconProps extends ComponentProps<'span'>, Pick<LabelProps, 'size' | 'tooltip'> {
+    icon?: ReactElement;
+}

package/label/label.types.js

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

package/label/label.utils.d.ts

@@ -1,2 +1,2 @@
-import { LabelSizeType } from '@scaleflex/ui-tw/label/label.types';
-export declare const getLabelIconSizeInRem: (sizeName?: LabelSizeType | null) => string;
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+export declare const getLabelIconSizeInRem: (sizeName?: FormSizeType | null) => string;

package/label/label.utils.js

@@ -1,13 +1,13 @@
-import { LabelSize } from '@scaleflex/ui-tw/label/label.types';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 export var getLabelIconSizeInRem = function getLabelIconSizeInRem(sizeName) {
   switch (sizeName) {
-    case LabelSize.Lg:
+    case FormSize.Lg:
       return '1rem';
     // 16px
-    case LabelSize.Md:
+    case FormSize.Md:
       return '0.875rem';
     // 14px
-    case LabelSize.Sm:
+    case FormSize.Sm:
       return '0.75rem';
     // 14px
     default:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -15,8 +15,9 @@
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.5",
+    "@scaleflex/icons-tw": "^0.0.7",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",

package/switch/index.d.ts

@@ -0,0 +1 @@
+export { Switch } from './switch.component';

package/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './switch.component';

package/switch/switch.component.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps } from '@scaleflex/ui-tw/switch/switch.types';
+import * as React from 'react';
+declare function Switch({ className, size, ...props }: SwitchProps): React.JSX.Element;
+export { Switch };

package/switch/switch.component.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size"];
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { switchSizeOptions, switchThumbSizeOptions } from '@scaleflex/ui-tw/switch/switch.constants';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+var switchVariants = cva('', {
+  variants: {
+    size: switchSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+var switchThumbVariants = cva('', {
+  variants: {
+    size: switchThumbSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function Switch(_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(SwitchPrimitive.Root, _extends({
+    "data-slot": "switch",
+    className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', switchVariants({
+      size: size
+    }), className)
+  }, props), /*#__PURE__*/React.createElement(SwitchPrimitive.Thumb, {
+    "data-slot": "switch-thumb",
+    className: cn('bg-background pointer-events-none block rounded-full ring-0 transition-transform', 'data-[state=checked]:translate-x-full data-[state=unchecked]:translate-x-0', switchThumbVariants({
+      size: size
+    }))
+  }));
+}
+export { Switch };

package/switch/switch.constants.d.ts

@@ -0,0 +1,10 @@
+export declare const switchSizeOptions: {
+    readonly sm: "h-4 w-7";
+    readonly md: "h-5 w-9";
+    readonly lg: "h-7 w-13";
+};
+export declare const switchThumbSizeOptions: {
+    readonly sm: "size-3";
+    readonly md: "size-4";
+    readonly lg: "size-6";
+};

package/switch/switch.constants.js

@@ -0,0 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var switchSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-4 w-7'), FormSize.Md, 'h-5 w-9'), FormSize.Lg, 'h-7 w-13');
+export var switchThumbSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-6');

package/switch/switch.types.d.ts

@@ -0,0 +1,6 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import { ComponentProps } from 'react';
+export interface SwitchProps extends ComponentProps<typeof SwitchPrimitive.Root> {
+    size?: FormSizeType;
+}

package/switch/switch.types.js

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

package/types/form-size.d.ts

@@ -0,0 +1,7 @@
+import type { Values } from '@scaleflex/ui-tw/types/values';
+export declare const FormSize: {
+    readonly Sm: "sm";
+    readonly Md: "md";
+    readonly Lg: "lg";
+};
+export type FormSizeType = Values<typeof FormSize>;

package/types/form-size.js

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

package/types/values.d.ts

@@ -1,4 +1,4 @@
 /**
  * Type-only Object.values
  */
-export type Values<E> = E extends Record<string, unknown> ? E[keyof E] : E extends unknown[] ? E[number] : unknown
+export type Values<E> = E extends Record<string, unknown> ? E[keyof E] : E extends unknown[] ? E[number] : unknown;

package/types/values.js

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

package/button/button.const.d.ts

@@ -1,13 +0,0 @@
-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;
-    "warning-primary": string;
-};

package/button/button.const.js

@@ -1,4 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _iconVariantOptions;
-import { ButtonVariant } from '@scaleflex/ui-tw/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.Error, ''), _defineProperty(_iconVariantOptions, ButtonVariant.Warning, ''));