@scaleflex/ui-tw 0.0.2 → 0.0.3

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/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 };

package/input/input.types.d.ts

@@ -0,0 +1,17 @@
+import type { Values } from 'packages/ui/src/types/values';
+import { ComponentProps } from 'react';
+export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
+    size?: InputSizeType;
+    '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

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

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

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

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

@@ -0,0 +1,30 @@
+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 _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '0.875rem' : _ref$size,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    ref: ref,
+    width: size,
+    height: size,
+    viewBox: "0 0 50 50",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, rest), /*#__PURE__*/React.createElement("path", {
+    d: "M25 50C11.2033 50 0 38.7967 0 25C0 11.2033 11.2033 0 25 0C38.7967 0 50 11.2033 50 25C50 38.7967 38.6929 50 25 50ZM25 3.52697C13.1743 3.52697 3.63071 13.1743 3.63071 24.8963C3.63071 36.6183 13.278 46.2656 25 46.2656C36.8257 46.2656 46.3693 36.6183 46.3693 24.8963C46.3693 13.1743 36.8257 3.52697 25 3.52697Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M28.3755 13.125C28.3755 11.3992 26.9765 10 25.2505 10C23.5245 10 22.1255 11.3992 22.1255 13.125C22.1255 14.8516 23.5245 16.25 25.2505 16.25C26.9765 16.25 28.3755 14.8516 28.3755 13.125Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20.563 38.5H29.938C30.8009 38.5 31.5005 37.8012 31.5005 36.9375C31.5005 36.0746 30.8009 35.375 29.938 35.375H28.3755V20.9375C28.3755 20.0746 27.6759 19.375 26.813 19.375H20.563C19.7001 19.375 19.0005 20.0746 19.0005 20.9375C19.0005 21.8012 19.7001 22.5 20.563 22.5H22.1255V35.375H20.563C19.7001 35.375 19.0005 36.0746 19.0005 36.9375C19.0005 37.8012 19.7001 38.5 20.563 38.5Z",
+    fill: color
+  }));
+};
+export default InfoOutlineIcon;

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

@@ -0,0 +1,7 @@
+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;
+}
+declare const LabelIcon: (props: LabelIconProps) => React.JSX.Element | null;
+export { LabelIcon };