@ostack.tech/ui 0.7.0 → 0.8.0

package/dist/ostack-ui.js

@@ -139,20 +139,18 @@ const CardHeader = forwardRef(
     );
   }
 );
-const CardTitle = forwardRef(
-  function CardTitle2({ asChild, level = 2, className, ...otherProps }, forwardedRef) {
-    const prefix = usePrefix();
-    const As = asChild ? Slot : `h${level}`;
-    return /* @__PURE__ */ jsx(
-      As,
-      {
-        className: cx(prefix("card__title"), className),
-        ...otherProps,
-        ref: forwardedRef
-      }
-    );
-  }
-);
+const CardTitle = forwardRef(function CardTitle2({ as = "div", asChild, className, ...otherProps }, forwardedRef) {
+  const prefix = usePrefix();
+  const As = asChild ? Slot : as;
+  return /* @__PURE__ */ jsx(
+    As,
+    {
+      className: cx(prefix("card__title"), className),
+      ...otherProps,
+      ref: forwardedRef
+    }
+  );
+});
 const DialogBody = forwardRef(function DialogBody2({ className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   return /* @__PURE__ */ jsx(
@@ -1408,86 +1406,86 @@ const Tooltip = forwardRef(function Tooltip2({
 });
 const TooltipProvider = Tooltip$1.Provider;
 const VisuallyHidden = VisuallyHidden$1.Root;
-const IconButton = forwardRef(
-  function IconButton2({
-    asChild,
-    variant = "solid",
-    color = "neutral",
-    size = "md",
-    circle,
-    icon,
-    label,
-    active,
-    disabled,
-    loading,
-    loadingLabel,
-    showSpinner = loading,
-    disableTooltip,
-    iconProps,
-    spinnerProps,
-    tooltipProps,
-    type,
-    onClick,
-    className,
-    children,
-    ...otherProps
-  }, forwardedRef) {
-    const prefix = usePrefix();
-    const relevantLabel = loading ? loadingLabel || label : label;
-    const labelEl = relevantLabel && /* @__PURE__ */ jsx(VisuallyHidden, { children: relevantLabel });
-    const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(Slot, { className: cx(prefix("icon-button__icon"), iconProps?.className), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, fixedWidth: true, ...iconProps }) });
-    const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
-      Spinner,
-      {
-        ...spinnerProps,
-        className: cx(prefix("icon-button__spinner"), spinnerProps?.className)
-      }
-    );
-    let content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      spinnerEl,
-      iconEl,
-      labelEl
-    ] });
-    if (asChild) {
-      content = cloneElement(children, void 0, content);
+const IconButton = forwardRef(function IconButton2({
+  as = "button",
+  asChild,
+  variant = "solid",
+  color = "neutral",
+  size = "md",
+  circle,
+  icon,
+  label,
+  active,
+  disabled,
+  loading,
+  loadingLabel,
+  showSpinner = loading,
+  disableTooltip,
+  iconProps,
+  spinnerProps,
+  tooltipProps,
+  type,
+  onClick,
+  className,
+  children,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const relevantLabel = loading ? loadingLabel || label : label;
+  const labelEl = relevantLabel && /* @__PURE__ */ jsx(VisuallyHidden, { children: relevantLabel });
+  const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(Slot, { className: cx(prefix("icon-button__icon"), iconProps?.className), children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, fixedWidth: true, ...iconProps }) });
+  const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      ...spinnerProps,
+      className: cx(prefix("icon-button__spinner"), spinnerProps?.className)
     }
-    const handleClick = useCallback(
-      (evt) => {
-        if (disabled || loading) {
-          evt.preventDefault();
-          return;
-        }
-        onClick?.(evt);
-      },
-      [disabled, loading, onClick]
-    );
-    const As = asChild ? Slot : "button";
-    const button = /* @__PURE__ */ jsx(
-      As,
-      {
-        type: !asChild && !type ? "button" : type,
-        className: cx(
-          prefix("icon-button"),
-          prefix(`icon-button--${variant}`),
-          prefix(`icon-button--${size}`),
-          circle && prefix("icon-button--circle"),
-          className
-        ),
-        onClick: handleClick,
-        "data-accent": color,
-        disabled,
-        "data-disabled": boolDataAttr(loading || asChild && disabled),
-        "aria-disabled": loading || asChild && disabled || void 0,
-        "data-active": boolDataAttr(active),
-        tabIndex: asChild && disabled ? -1 : void 0,
-        ref: forwardedRef,
-        ...otherProps,
-        children: content
-      }
-    );
-    return relevantLabel && !disableTooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, content: relevantLabel, children: button }) : button;
+  );
+  let content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    spinnerEl,
+    iconEl,
+    labelEl
+  ] });
+  if (asChild) {
+    content = cloneElement(children, void 0, content);
   }
-);
+  const handleClick = useCallback(
+    (evt) => {
+      if (disabled || loading) {
+        evt.preventDefault();
+        return;
+      }
+      onClick?.(evt);
+    },
+    [disabled, loading, onClick]
+  );
+  const isButton = as === "button" && !asChild;
+  const As = asChild ? Slot : as;
+  const button = /* @__PURE__ */ jsx(
+    As,
+    {
+      type: type ?? (isButton ? "button" : void 0),
+      className: cx(
+        prefix("icon-button"),
+        prefix(`icon-button--${variant}`),
+        prefix(`icon-button--${size}`),
+        circle && prefix("icon-button--circle"),
+        className
+      ),
+      onClick: handleClick,
+      "data-accent": color,
+      disabled,
+      "data-disabled": boolDataAttr(loading || !isButton && disabled),
+      "aria-disabled": loading || !isButton && disabled || void 0,
+      "data-active": boolDataAttr(active),
+      tabIndex: !isButton && disabled ? -1 : void 0,
+      ref: forwardedRef,
+      ...otherProps,
+      children: content
+    }
+  );
+  return relevantLabel && !disableTooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, content: relevantLabel, children: button }) : button;
+});
 const CloseButton = forwardRef(
   function CloseIconButton({ icon, label, disableTooltip = true, className, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
@@ -1555,14 +1553,20 @@ const DialogHeader = forwardRef(function DialogHeader2({
     }
   );
 });
-const DialogTitle = forwardRef(function DialogTitle2({ className, ...otherProps }, forwardedRef) {
+const DialogTitle = forwardRef(function DialogTitle2({
+  as = "h2",
+  asChild,
+  className,
+  ...otherProps
+}, forwardedRef) {
   const prefix = usePrefix();
-  return /* @__PURE__ */ jsx(CardTitle, { asChild: true, children: /* @__PURE__ */ jsx(
-    Dialog$1.Title,
+  const As = asChild ? Slot : as;
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { asChild: true, children: /* @__PURE__ */ jsx(
+    As,
     {
       className: cx(prefix("dialog__title"), className),
-      ref: forwardedRef,
-      ...otherProps
+      ...otherProps,
+      ref: forwardedRef
     }
   ) });
 });
@@ -1652,108 +1656,114 @@ const AlertDialogHeader = forwardRef(function AlertDialogHeader2({ className, ..
     }
   );
 });
-const AlertDialogTitle = forwardRef(function AlertDialogTitle2({ className, ...otherProps }, forwardedRef) {
+const AlertDialogTitle = forwardRef(function AlertDialogTitle2({
+  as = "h2",
+  asChild,
+  className,
+  ...otherProps
+}, forwardedRef) {
   const prefix = usePrefix();
-  return /* @__PURE__ */ jsx(CardTitle, { asChild: true, children: /* @__PURE__ */ jsx(
-    AlertDialog$1.Title,
+  const As = asChild ? Slot : as;
+  return /* @__PURE__ */ jsx(AlertDialog$1.Title, { asChild: true, children: /* @__PURE__ */ jsx(
+    As,
     {
       className: cx(prefix("dialog__title"), className),
-      ref: forwardedRef,
-      ...otherProps
+      ...otherProps,
+      ref: forwardedRef
     }
   ) });
 });
 const AlertDialogTrigger = forwardRef(function AlertDialogTrigger2(props, forwardedRef) {
   return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { ...props, asChild: true, ref: forwardedRef });
 });
-const Button = forwardRef(
-  function Button2({
-    asChild,
-    variant = "solid",
-    color = "neutral",
-    size = "md",
-    vertical,
-    icon = null,
-    iconPlacement = "start",
-    active,
-    disabled,
-    loading,
-    loadingContent,
-    showSpinner = loading,
-    iconProps,
-    spinnerProps,
-    type,
-    onClick,
-    className,
-    children,
-    ...otherProps
-  }, forwardedRef) {
-    const prefix = usePrefix();
-    const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(
-      Slot,
-      {
-        className: cx(
-          prefix("button__icon"),
-          prefix(`button__icon--${iconPlacement}`),
-          iconProps?.className
-        ),
-        children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, ...iconProps })
-      }
-    );
-    const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
-      Spinner,
-      {
-        ...spinnerProps,
-        className: cx(
-          prefix("button__spinner"),
-          prefix(`button__spinner--${iconPlacement}`),
-          spinnerProps?.className
-        )
-      }
-    );
-    const content = loading && loadingContent ? asChild ? cloneElement(children, void 0, loadingContent) : loadingContent : children;
-    const handleClick = useCallback(
-      (evt) => {
-        if (disabled || loading) {
-          evt.preventDefault();
-          return;
-        }
-        onClick?.(evt);
-      },
-      [disabled, loading, onClick]
-    );
-    const As = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsxs(
-      As,
-      {
-        type: !asChild && !type ? "button" : type,
-        className: cx(
-          prefix("button"),
-          prefix(`button--${variant}`),
-          prefix(`button--${size}`),
-          vertical && prefix("button--vertical"),
-          className
-        ),
-        onClick: handleClick,
-        "data-accent": color,
-        disabled,
-        "data-disabled": boolDataAttr(loading || asChild && disabled),
-        "aria-disabled": loading || asChild && disabled || void 0,
-        "data-active": boolDataAttr(active),
-        tabIndex: asChild && disabled ? -1 : void 0,
-        ref: forwardedRef,
-        ...otherProps,
-        children: [
-          iconPlacement === "start" && spinnerEl,
-          iconPlacement === "start" && iconEl,
-          /* @__PURE__ */ jsx(Slottable, { children: content }),
-          iconPlacement === "end" && iconEl,
-          iconPlacement === "end" && spinnerEl
-        ]
+const Button = forwardRef(function Button2({
+  as = "button",
+  asChild,
+  variant = "solid",
+  color = "neutral",
+  size = "md",
+  vertical,
+  icon = null,
+  iconPlacement = "start",
+  active,
+  disabled,
+  loading,
+  loadingContent,
+  showSpinner = loading,
+  iconProps,
+  spinnerProps,
+  type,
+  onClick,
+  className,
+  children,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(
+    Slot,
+    {
+      className: cx(
+        prefix("button__icon"),
+        prefix(`button__icon--${iconPlacement}`),
+        iconProps?.className
+      ),
+      children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, ...iconProps })
+    }
+  );
+  const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      ...spinnerProps,
+      className: cx(
+        prefix("button__spinner"),
+        prefix(`button__spinner--${iconPlacement}`),
+        spinnerProps?.className
+      )
+    }
+  );
+  const content = loading && loadingContent ? asChild ? cloneElement(children, void 0, loadingContent) : loadingContent : children;
+  const handleClick = useCallback(
+    (evt) => {
+      if (disabled || loading) {
+        evt.preventDefault();
+        return;
       }
-    );
-  }
-);
+      onClick?.(evt);
+    },
+    [disabled, loading, onClick]
+  );
+  const isButton = as === "button" && !asChild;
+  const As = asChild ? Slot : as;
+  return /* @__PURE__ */ jsxs(
+    As,
+    {
+      type: type ?? (isButton ? "button" : void 0),
+      className: cx(
+        prefix("button"),
+        prefix(`button--${variant}`),
+        prefix(`button--${size}`),
+        vertical && prefix("button--vertical"),
+        className
+      ),
+      onClick: handleClick,
+      "data-accent": color,
+      disabled,
+      "data-disabled": boolDataAttr(loading || !isButton && disabled),
+      "aria-disabled": loading || !isButton && disabled || void 0,
+      "data-active": boolDataAttr(active),
+      tabIndex: !isButton && disabled ? -1 : void 0,
+      ref: forwardedRef,
+      ...otherProps,
+      children: [
+        iconPlacement === "start" && spinnerEl,
+        iconPlacement === "start" && iconEl,
+        /* @__PURE__ */ jsx(Slottable, { children: content }),
+        iconPlacement === "end" && iconEl,
+        iconPlacement === "end" && spinnerEl
+      ]
+    }
+  );
+});
 const AlertDialogProviderContext = createContext(void 0);
 function AlertDialogProvider({ children }) {
   const [locale7] = useLocale();
@@ -2529,20 +2539,23 @@ const Alert = forwardRef(function Alert2({
     }
   );
 });
-const AlertTitle = forwardRef(
-  function AlertTitle2({ asChild, className, ...otherProps }, forwardedRef) {
-    const prefix = usePrefix();
-    const As = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(
-      As,
-      {
-        className: cx(prefix("alert__title"), className),
-        ...otherProps,
-        ref: forwardedRef
-      }
-    );
-  }
-);
+const AlertTitle = forwardRef(function AlertTitle2({
+  as = "div",
+  asChild,
+  className,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const As = asChild ? Slot : as;
+  return /* @__PURE__ */ jsx(
+    As,
+    {
+      className: cx(prefix("alert__title"), className),
+      ...otherProps,
+      ref: forwardedRef
+    }
+  );
+});
 const Code = forwardRef(function Code2({ asChild, color = "neutral", className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const As = asChild ? Slot : "code";
@@ -9676,7 +9689,13 @@ const FieldGroupHeader = forwardRef(function FieldGroupHeader2({
     }
   );
 });
-const FieldGroupTitle = forwardRef(function FieldGroupTitle2({ asChild, level = 2, id, className, ...otherProps }, forwardedRef) {
+const FieldGroupTitle = forwardRef(function FieldGroupTitle2({
+  as = "div",
+  asChild,
+  id,
+  className,
+  ...otherProps
+}, forwardedRef) {
   const prefix = usePrefix();
   const generatedId = useId();
   const titleId = id ?? prefix(`field-group-title-${generatedId}`);
@@ -9684,7 +9703,7 @@ const FieldGroupTitle = forwardRef(function FieldGroupTitle2({ asChild, level =
   useEffect(() => {
     setTitleId(titleId);
   }, [setTitleId, titleId]);
-  const As = asChild ? Slot : `h${level}`;
+  const As = asChild ? Slot : as;
   return /* @__PURE__ */ jsx(
     As,
     {
@@ -9775,9 +9794,9 @@ const Grid = forwardRef(function Grid2({
     }
   ) });
 });
-const Heading = forwardRef(function Heading2({ asChild, level = 2, className, ...otherProps }, forwardedRef) {
+const Heading = forwardRef(function Heading2({ as, asChild, level = 2, className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
-  const As = asChild ? Slot : `h${level}`;
+  const As = asChild ? Slot : as ?? `h${level}`;
   return /* @__PURE__ */ jsx(
     As,
     {
@@ -9818,7 +9837,9 @@ const Keyboard = forwardRef(
   }
 );
 const Link = forwardRef(function Link2({
+  as = "a",
   asChild,
+  type,
   color,
   variant,
   external,
@@ -9832,18 +9853,20 @@ const Link = forwardRef(function Link2({
   const { defaultColor, defaultVariant } = useLinkContext();
   color ??= defaultColor;
   variant ??= defaultVariant;
-  const As = asChild ? Slot : "a";
+  const isLink = as === "a" && !asChild;
+  const As = asChild ? Slot : as;
   return /* @__PURE__ */ jsxs(
     As,
     {
+      type: type ?? (as === "button" ? "button" : void 0),
       className: cx(
         prefix("link"),
         variant !== "default" && prefix(`link--${variant}`),
         className
       ),
       "data-accent": color,
-      target: external ? "_blank" : void 0,
-      rel: external ? "noopener noreferrer" : void 0,
+      target: isLink && external ? "_blank" : void 0,
+      rel: isLink && external ? "noopener noreferrer" : void 0,
       ...otherProps,
       ref: forwardedRef,
       children: [