@hyddenlabs/hydn-ui 0.3.0-alpha.210 → 0.3.0-alpha.211

package/dist/index.cjs

@@ -4947,7 +4947,8 @@ function Checkbox({
   ariaLabel,
   id,
   name,
-  validationState = "neutral"
+  validationState = "neutral",
+  "aria-describedby": ariaDescribedby
 }) {
   const validationClasses = {
     neutral: "border-input focus:ring-ring",
@@ -4964,6 +4965,7 @@ function Checkbox({
       disabled,
       "aria-label": ariaLabel,
       "aria-invalid": validationState === "error",
+      "aria-describedby": ariaDescribedby,
       id,
       name,
       className: `h-5 w-5 sm:h-4 sm:w-4 rounded border-2 bg-background text-primary-foreground transition-all duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary checked:hover:bg-primary/90 hover:border-primary/50 hover:shadow-sm cursor-pointer accent-primary ${validationClasses[validationState]} ${className}`
@@ -5224,8 +5226,15 @@ function DataTable({
       const badgeConfig = column.badgeMap[stringValue] || column.badgeMap["*"] || { variant: "neutral" };
       return /* @__PURE__ */ jsxRuntime.jsx(badge_default, { variant: badgeConfig.variant || "neutral", size: column.componentSize || "md", children: badgeConfig.label || stringValue });
     }
-    if (column.renderAsChips && Array.isArray(value)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(stack_default, { direction: "horizontal", spacing: "xs", wrap: true, children: value.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(chip_default, { variant: column.chipVariant || "neutral", size: column.componentSize || "md", children: String(item) }, idx)) });
+    if (column.renderAsBadges) {
+      if (Array.isArray(value)) {
+        if (value.length === 0 && column.fallback !== void 0) {
+          return column.fallback;
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(stack_default, { direction: "horizontal", spacing: "xs", wrap: true, children: value.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(badge_default, { variant: column.badgeVariant || "neutral", size: column.componentSize || "md", children: String(item) }, idx)) });
+      } else {
+        return /* @__PURE__ */ jsxRuntime.jsx(badge_default, { variant: column.badgeVariant || "neutral", size: column.componentSize || "md", children: String(value) });
+      }
     }
     if (column.format) {
       return formatValue(value, column);
@@ -5823,6 +5832,48 @@ function ProgressBar({ value, max = 100, showLabel, variant = "neutral", classNa
 }
 ProgressBar.displayName = "ProgressBar";
 var progress_bar_default = ProgressBar;
+function Spinner({ size = "xl", variant = "primary", className = "", speed, ...props }) {
+  const sizeConfig = spinnerSizes[size];
+  const variantTopBorder = {
+    primary: "border-t-primary",
+    accent: "border-t-accent",
+    neutral: "border-t-neutral"
+  }[variant];
+  const duration = speed ? `[animation-duration:${speed}]` : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      "data-variant": variant,
+      className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin box-border ${duration} ${sizeConfig.classes} ${sizeConfig.border} ${className}`,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+var spinner_default = Spinner;
+function LoadingContainer({
+  minHeight = "50vh",
+  containerProps,
+  stackProps,
+  spinnerProps
+}) {
+  const { style: stackStyle, ...restStackProps } = stackProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsx(container_default, { marginX: "md", paddingY: "sm", ...containerProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    stack_default,
+    {
+      direction: "vertical",
+      align: "center",
+      justify: "center",
+      spacing: "md",
+      style: { minHeight, ...stackStyle },
+      ...restStackProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(spinner_default, { ...spinnerProps })
+    }
+  ) });
+}
 function Skeleton({ variant = "text", width, height, className = "", ...props }) {
   const variantClasses = {
     text: "rounded h-4",
@@ -5931,28 +5982,6 @@ var smooth_transition_default = SmoothTransition;
 function useStaggeredTransition(count, baseDelay = 50) {
   return Array.from({ length: count }, (_, i) => i * baseDelay);
 }
-function Spinner({ size = "xl", variant = "primary", className = "", speed, ...props }) {
-  const sizeConfig = spinnerSizes[size];
-  const variantTopBorder = {
-    primary: "border-t-primary",
-    accent: "border-t-accent",
-    neutral: "border-t-neutral"
-  }[variant];
-  const duration = speed ? `[animation-duration:${speed}]` : "";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "status",
-      "aria-label": "Loading",
-      "data-variant": variant,
-      className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin box-border ${duration} ${sizeConfig.classes} ${sizeConfig.border} ${className}`,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
-    }
-  );
-}
-Spinner.displayName = "Spinner";
-var spinner_default = Spinner;
 function Toast({ message, children, type = "info", onClose, className = "", duration = 5e3 }) {
   const [isClosing, setIsClosing] = React.useState(false);
   const typeClasses = {
@@ -6666,6 +6695,57 @@ function Form({
 }
 Form.displayName = "Form";
 var form_default = Form;
+function FormCheckbox({
+  label,
+  helperText,
+  error,
+  required = false,
+  spacing = "xs",
+  id: providedId,
+  disabled,
+  validationState,
+  className,
+  "aria-describedby": userAriaDescribedby,
+  ...checkboxProps
+}) {
+  const autoId = React.useId();
+  const inputId = providedId ?? autoId;
+  const messageId = `${inputId}-message`;
+  const resolvedValidationState = error ? "error" : validationState;
+  const hasMessage = !!(error || helperText);
+  const ariaDescribedby = [hasMessage ? messageId : void 0, userAriaDescribedby].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col ${formSpacing[spacing]}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: "inline-flex items-center gap-2 text-sm text-foreground w-fit", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        checkbox_default,
+        {
+          ...checkboxProps,
+          id: inputId,
+          disabled,
+          validationState: resolvedValidationState,
+          className,
+          ariaLabel: label,
+          "aria-describedby": ariaDescribedby
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: disabled ? "text-muted-foreground" : "text-foreground", children: [
+        label,
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error ml-1", children: "*" })
+      ] })
+    ] }),
+    hasMessage && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        id: messageId,
+        className: `text-sm ${error ? validationTextClasses.error : validationTextClasses.neutral}`,
+        "aria-live": "polite",
+        children: error || helperText
+      }
+    )
+  ] });
+}
+FormCheckbox.displayName = "FormCheckbox";
+var form_checkbox_default = FormCheckbox;
 function FormField({
   children,
   label,
@@ -6714,6 +6794,73 @@ function FormField({
 }
 FormField.displayName = "FormField";
 var form_field_default = FormField;
+function CheckboxGroupField({
+  children,
+  itemSpacing,
+  orientation,
+  validationState,
+  disabled,
+  id,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const orientationClasses = orientation === "horizontal" ? "flex flex-row flex-wrap" : "flex flex-col";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    fieldset_default,
+    {
+      id,
+      disabled,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": validationState === "error" ? "true" : void 0,
+      bordered: false,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${orientationClasses} ${formSpacing[itemSpacing]}`, children })
+    }
+  );
+}
+function FormCheckboxGroup({
+  children,
+  label,
+  helperText,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  spacing = "sm",
+  itemSpacing = "sm",
+  orientation = "vertical",
+  width = "full",
+  align = "center",
+  reserveMessageSpace = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    form_field_default,
+    {
+      label,
+      helperText,
+      spacing,
+      error,
+      required,
+      disabled,
+      id,
+      width,
+      align,
+      reserveMessageSpace,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        CheckboxGroupField,
+        {
+          itemSpacing,
+          orientation,
+          validationState: error ? "error" : void 0,
+          disabled,
+          id,
+          "aria-describedby": id && (helperText || error) ? `${id}-helper-text` : void 0,
+          children
+        }
+      )
+    }
+  );
+}
+FormCheckboxGroup.displayName = "FormCheckboxGroup";
+var form_checkbox_group_default = FormCheckboxGroup;
 function FormInput({
   // FormField props
   label,
@@ -7540,6 +7687,8 @@ exports.FeatureSection = feature_section_default;
 exports.Fieldset = fieldset_default;
 exports.Footer = footer_default;
 exports.Form = form_default;
+exports.FormCheckbox = form_checkbox_default;
+exports.FormCheckboxGroup = form_checkbox_group_default;
 exports.FormInput = form_input_default;
 exports.FormSelect = form_select_default;
 exports.FormTextarea = form_textarea_default;
@@ -7559,6 +7708,7 @@ exports.LeftNavSection = left_nav_section_default;
 exports.Link = link_default;
 exports.List = list_default;
 exports.ListItem = ListItem;
+exports.LoadingContainer = LoadingContainer;
 exports.MicrosoftLogo = MicrosoftLogo;
 exports.Modal = modal_default;
 exports.MultiSelect = multi_select_default;