@scaleflex/ui-tw 0.0.2 → 0.0.5

package/LICENSE

@@ -1,33 +1 @@
-MIT License
-
-Copyright (c) 2022 SCALEFLEX SAS
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
-to use the Software without restriction for personal purposes only. If you intend to use, copy, modify, distribute, sell, or lease any part of our Software for
-commercial or corporate purposes,
-you are required to contact the Scaleflex Sales team (sales@scaleflex.com) to settle the payment of a yearly licensing subscription of five thousand euros.
-If you are proven to be in violation of this condition, you agree to pay a ten thousand euro penalty charge in addition to the yearly licensing subscription.
-
-By utilizing the "Software", you acknowledge and unconditionally agree to be bound by these Terms, which are associated with the Scaleflex Services Terms and Conditions,
-which can be found at www.scaleflex.com:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
----------------------------------------------------------------------------------
-
-Publicity
-
-You agree that Scaleflex may reference and use Your name, logos and trademarks in 
-Scaleflex marketing and promotional materials, including, but not limited to the 
-Scaleflex Websites, solely for purposes of identifying You as a customer of Scaleflex. 
-Otherwise, neither party may use the trade names, trademarks, service marks, or logos
-of the other party without the express written consent of the other party.
+TBD

package/README.md

@@ -1,6 +1,6 @@
 # @scaleflex/ui-tw
 
-React UI components library by Scaleflex
+React UI components library based on shadcn and tailwind by Scaleflex
 
 ---
 
@@ -9,20 +9,6 @@ TODO: Update doc
 ## Installation
 
 ```shell script
-npm i @scaleflex/ui # styled-components react react-dom
+yarn add @scaleflex/ui-tw
 ```
 
-```shell script
-yarn add @scaleflex/ui # styled-components react react-dom
-```
-
-> Make sure to have `react`, `react-dom` and `styled-components` installed in your package as they are included in our peer dependencies.
-
-## Usage
-
-Scaleflex UI includes several parts:
-
-- [`core`](src/core/README.md)
-- [`hooks`](src/hooks/README.md)
-- [`theme`](src/theme/README.md)
-- [`utils`](src/utils/README.md)

package/{core/button → button}/button.component.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { type ButtonProps } from './button.types';
 declare const buttonVariants: (props?: ({
-    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;
+    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;
 declare function Button({ className, children, size, startIcon, endIcon, variant, loading, asChild, disabled, ...rest }: ButtonProps): React.JSX.Element;
-export { buttonVariants };
-export default Button;
+export { Button, buttonVariants };

package/{core/button → button}/button.component.js

@@ -5,16 +5,16 @@ var _excluded = ["className", "children", "size", "startIcon", "endIcon", "varia
 var _buttonVariantOptions;
 import { Slot } from '@radix-ui/react-slot';
 import SpinnerIcon from '@scaleflex/icons-tw/spinner';
-import EndIcon from '@scaleflex/ui-tw/core/button/components/end-icon';
-import StartIcon, { startIconVariants } from '@scaleflex/ui-tw/core/button/components/start-icon';
-import { cn } from '@scaleflex/ui-tw/utils/functions/shadcn-utils';
+import 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-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("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", {
+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,
     size: buttonSizeOptions
@@ -43,7 +43,7 @@ function Button(_ref) {
   var Comp = asChild ? Slot : 'button';
   return /*#__PURE__*/React.createElement(Comp, _extends({
     "data-slot": "button",
-    className: cn(buttonVariants({
+    className: cn('group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium whitespace-nowrap transition-all outline-none', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", buttonVariants({
       variant: variant,
       size: size,
       className: className
@@ -69,5 +69,4 @@ function Button(_ref) {
     icon: endIcon
   })) : children);
 }
-export { buttonVariants };
-export default Button;
+export { Button, buttonVariants };

package/{core/button → button}/button.const.d.ts

@@ -9,7 +9,5 @@ export declare const iconVariantOptions: {
     "link-error": string;
     "link-warning": string;
     "error-primary": string;
-    "error-outline": string;
     "warning-primary": string;
-    "warning-outline": string;
 };

package/{core/button → button}/button.const.js

@@ -1,4 +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'));
+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, ''));

package/{core/button → button}/button.types.d.ts

@@ -1,4 +1,4 @@
-import { buttonVariants } from '@scaleflex/ui-tw/core/button/button.component';
+import { buttonVariants } from '@scaleflex/ui-tw/button/button.component';
 import type { VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactElement } from 'react';
 export declare const ButtonVariant: {
@@ -11,10 +11,8 @@ export declare const ButtonVariant: {
     readonly LinkBasicSecondary: "link-basic-secondary";
     readonly LinkError: "link-error";
     readonly LinkWarning: "link-warning";
-    readonly ErrorPrimary: "error-primary";
-    readonly ErrorOutline: "error-outline";
-    readonly WarningPrimary: "warning-primary";
-    readonly WarningOutline: "warning-outline";
+    readonly Error: "error-primary";
+    readonly Warning: "warning-primary";
 };
 export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/{core/button → button}/button.types.js

@@ -8,10 +8,8 @@ export var ButtonVariant = {
   LinkBasicSecondary: 'link-basic-secondary',
   LinkError: 'link-error',
   LinkWarning: 'link-warning',
-  ErrorPrimary: 'error-primary',
-  ErrorOutline: 'error-outline',
-  WarningPrimary: 'warning-primary',
-  WarningOutline: 'warning-outline'
+  Error: 'error-primary',
+  Warning: 'warning-primary'
 };
 export var ButtonSize = {
   Xs: 'xs',

package/{core/button → button}/button.utils.d.ts

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

package/{core/button → button}/button.utils.js

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

package/{core/button → button}/components/end-icon.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from '@scaleflex/ui-tw/core/button';
+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;

package/{core/button → button}/components/end-icon.js

@@ -2,9 +2,9 @@ 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/core/button';
-import { iconVariantOptions } from '@scaleflex/ui-tw/core/button/button.const';
-import { getIconSizeInRem } from '@scaleflex/ui-tw/core/button/button.utils';
+import { ButtonSize } from '@scaleflex/ui-tw/button';
+import { iconVariantOptions } from '@scaleflex/ui-tw/button/button.const';
+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');

package/{core/button → button}/components/start-icon.d.ts

@@ -1,7 +1,7 @@
-import { type ButtonProps } from '@scaleflex/ui-tw/core/button';
+import { type ButtonProps } from '@scaleflex/ui-tw/button';
 import React, { ComponentProps, ReactElement } 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" | "error-outline" | "warning-primary" | "warning-outline" | null | undefined;
+    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'> {

package/{core/button → button}/components/start-icon.js

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 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/core/button';
-import { iconVariantOptions } from '@scaleflex/ui-tw/core/button/button.const';
-import { getIconSizeInRem } from '@scaleflex/ui-tw/core/button/button.utils';
+import { ButtonSize } from '@scaleflex/ui-tw/button';
+import { iconVariantOptions } from '@scaleflex/ui-tw/button/button.const';
+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');

package/button/index.d.ts

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

package/button/index.js

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

package/card/card.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentProps } from 'react';
+declare function Card({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
+declare function CardHeader({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
+declare function CardTitle({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
+declare function CardDescription({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
+declare function CardContent({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
+declare function CardSetting({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardSetting };

package/card/card.component.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"],
+  _excluded2 = ["className"],
+  _excluded3 = ["className"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className"];
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React from 'react';
+function Card(_ref) {
+  var className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "card",
+    className: cn('bg-card lg:border-border border-y-border shadow-shadow mt-8 max-w-7xl border-y shadow-md lg:rounded-xl lg:border', className)
+  }, rest));
+}
+function CardHeader(_ref2) {
+  var className = _ref2.className,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "card-header",
+    className: cn('border-border flex flex-col gap-1 border-b px-6 py-6 text-xl font-medium lg:rounded-t-xl', className)
+  }, rest));
+}
+function CardTitle(_ref3) {
+  var className = _ref3.className,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "card-title",
+    className: cn(className)
+  }, rest));
+}
+function CardDescription(_ref4) {
+  var className = _ref4.className,
+    rest = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "card-description",
+    className: cn('text-secondary-foreground max-w-4xl text-sm font-normal', className)
+  }, rest));
+}
+function CardContent(_ref5) {
+  var className = _ref5.className,
+    rest = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "card-content",
+    className: cn('flex flex-col gap-6 rounded-b-xl p-6', className)
+  }, rest));
+}
+function CardSetting(_ref6) {
+  var className = _ref6.className,
+    rest = _objectWithoutProperties(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "card-setting",
+    className: cn('flex min-h-[2.5rem] items-center justify-between gap-4 text-base', className)
+  }, rest));
+}
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardSetting };

package/card/index.d.ts

@@ -0,0 +1 @@
+export { Card, CardHeader, CardContent, CardTitle, CardDescription, CardSetting } from './card.component';

package/card/index.js

@@ -0,0 +1 @@
+export { Card, CardHeader, CardContent, CardTitle, CardDescription, CardSetting } from './card.component';

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

@@ -0,0 +1,19 @@
+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;
+export { FormFieldGroup };

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

@@ -0,0 +1,41 @@
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@scaleflex/ui-tw/form';
+import React from 'react';
+function FormFieldGroup(_ref) {
+  var control = _ref.control,
+    name = _ref.name,
+    label = _ref.label,
+    description = _ref.description,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    tooltip = _ref.tooltip,
+    highlight = _ref.highlight,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(FormField, {
+    control: control,
+    name: name,
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      return /*#__PURE__*/React.createElement(FormItem, {
+        className: "group",
+        "data-disabled": disabled,
+        "data-highlight": highlight
+      }, label && /*#__PURE__*/React.createElement(FormLabel, {
+        size: size,
+        tooltip: tooltip
+      }, label), /*#__PURE__*/React.createElement(FormControl, null, children(field, {
+        size: size,
+        readOnly: readOnly,
+        disabled: disabled
+      })), description && /*#__PURE__*/React.createElement(FormDescription, {
+        size: size
+      }, description), /*#__PURE__*/React.createElement(FormMessage, {
+        size: size
+      }));
+    }
+  });
+}
+export { FormFieldGroup };

package/form/form.component.d.ts

@@ -0,0 +1,30 @@
+import { Slot } from '@radix-ui/react-slot';
+import { FormMessageSizeType } from '@scaleflex/ui-tw/form/form.types';
+import { LabelProps } from '@scaleflex/ui-tw/label/label.types';
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: ComponentProps<'div'>): 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'> & {
+    size?: FormMessageSizeType;
+}): React.JSX.Element;
+declare function FormMessage({ className, size, ...props }: ComponentProps<'p'> & {
+    size?: FormMessageSizeType;
+}): React.JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/form/form.component.js

@@ -0,0 +1,123 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["className"],
+  _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 { Label } from '@scaleflex/ui-tw/label';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import * as React from 'react';
+import { createContext, useContext, useId } from 'react';
+import { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form';
+var Form = FormProvider;
+var FormFieldContext = /*#__PURE__*/createContext({});
+var FormField = function FormField(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(FormFieldContext.Provider, {
+    value: {
+      name: props.name
+    }
+  }, /*#__PURE__*/React.createElement(Controller, props));
+};
+var useFormField = function useFormField() {
+  var fieldContext = useContext(FormFieldContext);
+  var itemContext = useContext(FormItemContext);
+  var _useFormContext = useFormContext(),
+    getFieldState = _useFormContext.getFieldState;
+  var formState = useFormState({
+    name: fieldContext.name
+  });
+  var fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+  var id = itemContext.id;
+  return _objectSpread({
+    id: id,
+    name: fieldContext.name,
+    formItemId: "".concat(id, "-form-item"),
+    formDescriptionId: "".concat(id, "-form-item-description"),
+    formMessageId: "".concat(id, "-form-item-message")
+  }, fieldState);
+};
+var FormItemContext = /*#__PURE__*/createContext({});
+function FormItem(_ref2) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var id = useId();
+  return /*#__PURE__*/React.createElement(FormItemContext.Provider, {
+    value: {
+      id: id
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "form-item",
+    className: cn('grid gap-1.5', className)
+  }, props)));
+}
+function FormLabel(_ref3) {
+  var className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  var _useFormField = useFormField(),
+    error = _useFormField.error,
+    formItemId = _useFormField.formItemId;
+  return /*#__PURE__*/React.createElement(Label, _extends({
+    "data-slot": "form-label",
+    "data-error": !!error,
+    className: cn('data-[error=true]:text-destructive', className),
+    htmlFor: formItemId
+  }, props));
+}
+function FormControl(_ref4) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  var _useFormField2 = useFormField(),
+    error = _useFormField2.error,
+    formItemId = _useFormField2.formItemId,
+    formDescriptionId = _useFormField2.formDescriptionId,
+    formMessageId = _useFormField2.formMessageId;
+  return /*#__PURE__*/React.createElement(Slot, _extends({
+    "data-slot": "form-control",
+    id: formItemId,
+    "aria-describedby": !error ? "".concat(formDescriptionId) : "".concat(formDescriptionId, " ").concat(formMessageId),
+    "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,
+    size = _ref5$size === void 0 ? FormMessageSize.Md : _ref5$size,
+    props = _objectWithoutProperties(_ref5, _excluded3);
+  var _useFormField3 = useFormField(),
+    formDescriptionId = _useFormField3.formDescriptionId;
+  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)
+  }, props));
+}
+function FormMessage(_ref6) {
+  var _error$message;
+  var className = _ref6.className,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? FormMessageSize.Md : _ref6$size,
+    props = _objectWithoutProperties(_ref6, _excluded4);
+  var _useFormField4 = useFormField(),
+    error = _useFormField4.error,
+    formMessageId = _useFormField4.formMessageId;
+  var body = error ? String((_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : '') : props.children;
+  if (!body) {
+    return null;
+  }
+  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)
+  }, props), body);
+}
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/form/form.types.d.ts

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

package/{core/switcher/switcher-size.js → form/form.types.js}

@@ -1,4 +1,4 @@
-export var SwitcherSize = {
+export var FormMessageSize = {
   Sm: 'sm',
   Md: 'md',
   Lg: 'lg'

package/form/index.d.ts

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

package/form/index.js

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

package/input/index.d.ts

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

package/input/index.js

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

package/input/input.component.d.ts

@@ -0,0 +1,7 @@
+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;
+declare function Input({ className, type, size, disabled, readOnly, ...props }: InputProps): React.JSX.Element;
+export { Input, inputVariants };

package/input/input.component.js

@@ -0,0 +1,42 @@
+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 { 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
+  },
+  defaultVariants: {
+    size: ButtonSize.Md
+  }
+});
+function Input(_ref) {
+  var className = _ref.className,
+    _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,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("input", _extends({
+    type: type,
+    "data-slot": "input",
+    disabled: disabled,
+    readOnly: readOnly,
+    className: cn('border-input text-foreground bg-background flex w-full min-w-0 rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', 'group-data-[highlight=true]:border-warning group-data-[highlight=true]:focus-visible:ring-warning/20', inputVariants({
+      size: size,
+      className: className
+    }))
+  }, props));
+}
+export { Input, inputVariants };