@scaleflex/ui-tw 0.0.5 → 0.0.6

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

@@ -13,7 +13,9 @@ export interface FormFieldGroupProps<TFieldValues extends FieldValues, TName ext
     size?: InputSizeType;
     readOnly?: boolean;
     highlight?: boolean;
+    horizontal?: boolean;
+    horizontalLabelWidth?: string;
     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;
+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,5 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@scaleflex/ui-tw/form';
+import { InputSize } from '@scaleflex/ui-tw/input/input.types';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
 import React from 'react';
+var labelHeightVariants = _defineProperty(_defineProperty(_defineProperty({}, InputSize.Sm, 'h-8'), InputSize.Md, 'h-10'), InputSize.Lg, 'h-12');
 function FormFieldGroup(_ref) {
   var control = _ref.control,
     name = _ref.name,
@@ -13,6 +17,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 +28,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 +46,7 @@ function FormFieldGroup(_ref) {
         size: size
       }, description), /*#__PURE__*/React.createElement(FormMessage, {
         size: size
-      }));
+      })));
     }
   });
 }

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,7 +2,7 @@ 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"];
@@ -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));
 }
@@ -98,7 +104,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 +123,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/label/label.component.js

@@ -29,16 +29,19 @@ function Label(_ref) {
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -16,7 +16,7 @@
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.5",
+    "@scaleflex/icons-tw": "^0.0.6",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",