@hyddenlabs/hydn-ui 0.3.0-alpha.164 → 0.3.0-alpha.166

package/dist/index.cjs

@@ -262,6 +262,11 @@ var colorVariants = {
     error: "bg-destructive/20 text-foreground border-destructive/50 backdrop-blur-sm"
   }
 };
+var inputAlignClasses = {
+  left: "mr-auto",
+  center: "mx-auto",
+  right: "ml-auto"
+};
 
 // src/theme/size-tokens.ts
 var visualSizes = {
@@ -410,8 +415,10 @@ var inputWidthSizes = {
   // 50% of container
   "3/4": "w-3/4",
   // 75% of container
-  full: "w-full"
+  full: "w-full",
   // 100% of container
+  auto: "w-auto"
+  // width based on content
 };
 var badgeSizes = {
   sm: {
@@ -1005,7 +1012,7 @@ function Container({
   minHeight = "none",
   maxHeight = "none"
 }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "mr-auto",
     center: "mx-auto",
     end: "ml-auto"
@@ -1025,7 +1032,7 @@ function Container({
   const minHeightClass = minHeight !== "none" ? containerMinHeights[minHeight] : "";
   const maxHeightClass = maxHeight !== "none" ? containerMaxHeights[maxHeight] : "";
   const dimensionClasses = [widthClass, heightClass, minWidthClass, minHeightClass, maxWidthClass, maxHeightClass].join(" ").trim();
-  const alignClass = mX === "none" || mX === "auto" ? alignClasses3[align] : "";
+  const alignClass = mX === "none" || mX === "auto" ? alignClasses2[align] : "";
   const alignItemsClass = alignItems ? alignItemsClasses[alignItems] : "";
   const inlineStyles = {};
   if (minWidth && !containerMinWidths[minWidth]) {
@@ -1179,7 +1186,7 @@ function Text({
     bold: "font-bold",
     extrabold: "font-extrabold"
   };
-  const alignClasses3 = {
+  const alignClasses2 = {
     left: "text-left",
     center: "text-center",
     right: "text-right",
@@ -1257,7 +1264,7 @@ function Text({
     sizeClasses[finalSize],
     weightClasses[weight],
     margin,
-    align && alignClasses3[align],
+    align && alignClasses2[align],
     leading && leadingClasses[leading],
     tracking && trackingClasses[tracking],
     transform && transformClasses[transform],
@@ -1333,13 +1340,13 @@ function Stack({
   margin = "none"
 }) {
   const spacingClasses = gapSizes[spacing];
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "items-start",
     center: "items-center",
     end: "items-end",
     stretch: "items-stretch"
   };
-  const justifyClasses3 = {
+  const justifyClasses2 = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end",
@@ -1347,7 +1354,7 @@ function Stack({
     around: "justify-around"
   };
   const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
-  const justifyClass = justify ? justifyClasses3[justify] : "";
+  const justifyClass = justify ? justifyClasses2[justify] : "";
   const paddingClass = padding ? cardPadding[padding] : "";
   const marginClass = margin ? cardMargin[margin] : "";
   const minWidthClass = minWidth !== "none" ? containerMinWidths[minWidth] : "";
@@ -1358,7 +1365,7 @@ function Stack({
     "div",
     {
       "data-component": "Stack",
-      className: `flex flex-wrap ${directionClass} ${spacingClasses} ${alignClasses3[align]} ${justifyClass} ${paddingClass} ${minWidthClass} ${maxWidthClass} ${widthClass} ${heightClass} ${marginClass} ${className}`,
+      className: `flex flex-wrap ${directionClass} ${spacingClasses} ${alignClasses2[align]} ${justifyClass} ${paddingClass} ${minWidthClass} ${maxWidthClass} ${widthClass} ${heightClass} ${marginClass} ${className}`,
       children
     }
   );
@@ -1760,7 +1767,7 @@ function CardFooter({
     md: "p-6",
     lg: "p-8"
   };
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end"
@@ -1773,7 +1780,7 @@ function CardFooter({
         flex items-center gap-1
         ${paddingClasses[padding]}
         ${bordered ? "border-t border-border" : ""}
-        ${alignClasses3[align]}
+        ${alignClasses2[align]}
         ${className}
       `.trim().replace(/\s+/g, " "),
       children
@@ -1783,7 +1790,7 @@ function CardFooter({
 CardFooter.displayName = "CardFooter";
 var card_footer_default = CardFooter;
 function CardActions({ children, className = "", align = "end", direction = "row" }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end",
@@ -1799,7 +1806,7 @@ function CardActions({ children, className = "", align = "end", direction = "row
       className: `
         flex gap-2 px-6 pb-6 pt-2
         ${directionClasses[direction]}
-        ${alignClasses3[align]}
+        ${alignClasses2[align]}
         ${className}
       `.trim().replace(/\s+/g, " "),
       children
@@ -2265,8 +2272,8 @@ var Button = React4__default.default.forwardRef(
     size = "md",
     rounded = "default",
     loading = false,
-    fullWidth = false,
-    wide = false,
+    width = "auto",
+    align,
     active = false
   }, ref) => {
     const isIconOnly = icon && !children;
@@ -2309,7 +2316,8 @@ var Button = React4__default.default.forwardRef(
       )
     ] }) : icon;
     const styleClasses = getStyleClasses();
-    const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
+    const widthClasses = inputWidthSizes[width];
+    const alignmentClass = align ? inputAlignClasses[align] : "";
     const activeClasses = active ? "active:scale-95" : "";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -2319,7 +2327,7 @@ var Button = React4__default.default.forwardRef(
         onClick,
         "aria-label": ariaLabel,
         disabled: disabled || loading,
-        className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
+        className: `inline-flex items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
         children: [
           displayIcon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
           children,
@@ -2802,7 +2810,7 @@ function Nav({
     lg: "gap-7 sm:gap-6",
     xl: "gap-10 sm:gap-8"
   };
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "items-start",
     center: "items-center",
     end: "items-end",
@@ -2810,7 +2818,7 @@ function Nav({
   };
   const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
   const spacingClass = spacingClasses[spacing];
-  const alignClass = alignClasses3[align];
+  const alignClass = alignClasses2[align];
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: `flex ${directionClass} ${spacingClass} ${alignClass} ${className}`, children });
 }
 Nav.displayName = "Nav";
@@ -3499,20 +3507,20 @@ function TableHeadCell({
   scope = "col",
   ...props
 }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses3[align]} ${className}`, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses2[align]} ${className}`, ...props, children });
 }
 function TableCell({ children, className = "", align = "left", ...props }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses3[align]} ${className}`, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses2[align]} ${className}`, ...props, children });
 }
 var table_default = Table;
 function Checkbox({
@@ -4842,19 +4850,6 @@ function Fieldset({
 }
 Fieldset.displayName = "Fieldset";
 var fieldset_default = Fieldset;
-var alignClasses2 = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch"
-};
-var justifyClasses2 = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around"
-};
 function Form({
   children,
   onSubmit,
@@ -4863,11 +4858,7 @@ function Form({
   noValidate = false,
   id,
   ariaLabel,
-  direction = "vertical",
-  spacing = "md",
-  align = "stretch",
-  justify,
-  fullWidth = true
+  spacing = "md"
 }) {
   const handleSubmit = (e) => {
     if (onSubmit) {
@@ -4875,17 +4866,6 @@ function Form({
       onSubmit(e);
     }
   };
-  let spacingClass;
-  if (spacing in formSpacing) {
-    spacingClass = formSpacing[spacing];
-  } else if (spacing in gapSizes) {
-    spacingClass = gapSizes[spacing];
-  } else {
-    spacingClass = formSpacing["md"];
-  }
-  const directionClass = direction === "horizontal" ? "flex-row flex-wrap" : "flex-col";
-  const justifyClass = justify ? justifyClasses2[justify] : "";
-  const widthClass = fullWidth ? "w-full" : "";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "form",
     {
@@ -4895,7 +4875,7 @@ function Form({
       noValidate,
       id,
       "aria-label": ariaLabel,
-      className: `flex ${directionClass} ${spacingClass} ${alignClasses2[align]} ${justifyClass} ${widthClass}`.trim(),
+      className: `flex flex-col ${formSpacing[spacing]}`,
       children
     }
   );
@@ -4910,7 +4890,10 @@ function FormField({
   required = false,
   spacing = "sm",
   disabled = false,
-  id: providedId
+  id: providedId,
+  width = "full",
+  align = "center",
+  reserveMessageSpace = false
 }) {
   const autoId = React4.useId();
   const inputId = providedId ?? autoId;
@@ -4925,18 +4908,22 @@ function FormField({
       ...hasMessage ? { "aria-describedby": `${inputId}-message` } : {}
     }
   ) : children;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col ${formSpacing[spacing]}`, children: [
+  const widthClass = inputWidthSizes[width];
+  const alignmentClass = inputAlignClasses[align];
+  const shouldReserveSpace = reserveMessageSpace && !helperText;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col ${widthClass} ${alignmentClass} ${formSpacing[spacing]}`, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: "text-sm font-semibold text-foreground", children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
     ] }),
     enhancedChild,
-    (error || helperText) && /* @__PURE__ */ jsxRuntime.jsx(
+    (helperText || error || shouldReserveSpace) && /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
         id: `${inputId}-message`,
         className: `text-sm ${error ? validationTextClasses.error : validationTextClasses.default}`,
-        children: error || helperText
+        "aria-live": "polite",
+        children: error || helperText || "\xA0"
       }
     )
   ] });
@@ -5009,7 +4996,9 @@ function FormInput({
   id,
   pattern,
   title,
-  // Input props
+  width,
+  align = "center",
+  reserveMessageSpace = false,
   ...inputProps
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5022,6 +5011,9 @@ function FormInput({
       required,
       disabled,
       id,
+      width,
+      align,
+      reserveMessageSpace,
       children: /* @__PURE__ */ jsxRuntime.jsx(input_default, { ...inputProps, required, disabled, id, pattern, title })
     }
   );