@tpc-mare/mare-ui-components-react 0.0.1

package/dist/input-text/FormField.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface FormFieldProperties {
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    children?: ReactNode;
+}
+export declare function FormField({ invalid, disabled, required, children, }: FormFieldProperties): import("react").JSX.Element;

package/dist/input-text/HelperText.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function HelperText({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/input-text/IconField.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface IconFieldProperties {
+    icon: ReactNode;
+    position?: 'left' | 'right';
+    /** Dims the icon to match a disabled sibling input. IconField can't see
+     * that prop on its own (it lives on the input, not on IconField) — pass
+     * it through explicitly when composing (see SearchField). @default false */
+    disabled?: boolean;
+    /** Makes the icon a real click target (a `<button>`, not a decorative
+     * `<span>`). @default undefined (decorative) */
+    onIconClick?: () => void;
+    /** Accessible name for the button, when `onIconClick` is set. */
+    iconLabel?: string;
+    children?: ReactNode;
+}
+export declare function IconField({ icon, position, disabled, onIconClick, iconLabel, children, }: IconFieldProperties): import("react").JSX.Element;

package/dist/input-text/InputText.d.ts

@@ -0,0 +1,2 @@
+import { InputTextProperties } from './InputText.types';
+export declare function InputText({ value, onValueChange, size, rounded, invalid, disabled, placeholder, ...native }: InputTextProperties): import("react").JSX.Element;

package/dist/input-text/InputText.types.d.ts

@@ -0,0 +1,14 @@
+import { InputHTMLAttributes } from 'react';
+import { InputTextSize } from '@tpc-development/mare-ui-components-core/input-text';
+export type { InputTextSize } from '@tpc-development/mare-ui-components-core/input-text';
+type ForwardedNativeProperties = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size' | 'className' | 'style'>;
+export interface InputTextProperties extends ForwardedNativeProperties {
+    /** Controlled value. */
+    value?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    size?: InputTextSize;
+    rounded?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+}

package/dist/input-text/field-layout.d.ts

@@ -0,0 +1,12 @@
+export interface FieldLayout {
+    hasFloatLabel: boolean;
+    iconSide: 'left' | 'right' | 'both' | null;
+}
+export declare const FieldLayoutContext: import('react').Context<FieldLayout | null>;
+export declare const useFieldLayout: () => FieldLayout | null;
+/** Combines a parent IconField's side (if any) with this one's — nesting two
+ * IconFields (one 'left', one 'right') around the same input, e.g.
+ * SearchField's search + clear icons, needs both padded, not just the
+ * nearest one. Two IconFields on the SAME side is a consumer error; last one
+ * wins rather than throwing. */
+export declare const mergeIconSide: (parentSide: FieldLayout["iconSide"], ownSide: "left" | "right") => FieldLayout["iconSide"];

package/dist/input-text/index.d.ts

@@ -0,0 +1,11 @@
+export { InputText } from './InputText';
+export { CharacterCount } from './CharacterCount';
+export { FormField } from './FormField';
+export { FloatLabel } from './FloatLabel';
+export { IconField } from './IconField';
+export { HelperText } from './HelperText';
+export type { InputTextProperties, InputTextSize } from './InputText.types';
+export type { CharacterCountProperties } from './CharacterCount';
+export type { FormFieldProperties } from './FormField';
+export type { FloatLabelProperties } from './FloatLabel';
+export type { IconFieldProperties } from './IconField';

package/dist/input-text/index.js

@@ -0,0 +1,10 @@
+import { I as o, a as r } from "../shared/IconField-Dh6j6SL1.js";
+import { C as s, F as l, a as F, H as p } from "../shared/HelperText-CVWWvLCI.js";
+export {
+  s as CharacterCount,
+  l as FloatLabel,
+  F as FormField,
+  p as HelperText,
+  o as IconField,
+  r as InputText
+};

package/dist/menu/Menu.d.ts

@@ -0,0 +1,2 @@
+import { MenuProperties } from './Menu.types';
+export declare function Menu({ trigger, items, onSelect, renderItem, portalContainer, }: MenuProperties): import("react").JSX.Element;

package/dist/menu/Menu.types.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, RefObject } from 'react';
+import { MenuEntry, MenuItemData } from '@tpc-development/mare-ui-components-core/menu';
+export type { MenuItemData, MenuSeparatorEntry, MenuGroupEntry, MenuEntry, } from '@tpc-development/mare-ui-components-core/menu';
+export interface MenuProperties {
+    /** The element that opens the menu on click — typically a `<Button>`. */
+    trigger: ReactNode;
+    items: MenuEntry[];
+    /** Called with the selected item's `value` when an item (or an item
+     * inside a group) is chosen. */
+    onSelect?: (value: string) => void;
+    /** Custom render for an item's content (icon + label). Defaults to
+     * `item.icon` (if any) + `item.label`. */
+    renderItem?: (item: MenuItemData) => ReactNode;
+    /** Where the menu portals to. Ark defaults to `document.body` — override
+     * this if your app scopes `data-theme` (or any other CSS custom property)
+     * to a sub-tree rather than the document root, otherwise the portaled
+     * menu renders outside that scope and loses the tokens. */
+    portalContainer?: RefObject<HTMLElement | null>;
+}

package/dist/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export type { MenuProperties, MenuItemData, MenuSeparatorEntry, MenuGroupEntry, MenuEntry, } from './Menu.types';

package/dist/menu/index.js

@@ -0,0 +1,4 @@
+import { M as r } from "../shared/Menu-Cv9dU1iA.js";
+export {
+  r as Menu
+};

package/dist/panel-menu/PanelMenu.d.ts

@@ -0,0 +1,2 @@
+import { PanelMenuProperties } from './PanelMenu.types';
+export declare function PanelMenu({ items, expandedValue, defaultExpandedValue, onExpandedChange, renderItem, }: PanelMenuProperties): import("react").JSX.Element;

package/dist/panel-menu/PanelMenu.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { PanelMenuItemData } from '@tpc-development/mare-ui-components-core/panel-menu';
+export type { PanelMenuItemData } from '@tpc-development/mare-ui-components-core/panel-menu';
+export interface PanelMenuProperties {
+    items: PanelMenuItemData[];
+    /** Controlled expanded branch values. Omit to let Ark manage it (uncontrolled). */
+    expandedValue?: string[];
+    defaultExpandedValue?: string[];
+    onExpandedChange?: (value: string[]) => void;
+    /** Override the default icon + label row entirely. */
+    renderItem?: (item: PanelMenuItemData) => ReactNode;
+}

package/dist/panel-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { PanelMenu } from './PanelMenu';
+export type { PanelMenuProperties, PanelMenuItemData } from './PanelMenu.types';

package/dist/panel-menu/index.js

@@ -0,0 +1,4 @@
+import { P as n } from "../shared/PanelMenu-5A9LgcGR.js";
+export {
+  n as PanelMenu
+};

package/dist/progress-spinner/ProgressSpinner.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Mare ProgressSpinner — React. Ark has no spinner (pure SVG + CSS), so it's
+ * Mare-owned. Identical markup to the Vue version. Dash keyframe in styles.css.
+ */
+export interface ProgressSpinnerProperties {
+    /** Extra classes for the <circle> (e.g. stroke color per Button severity). */
+    circleClass?: string;
+    className?: string;
+}
+export declare function ProgressSpinner({ circleClass, className, }: ProgressSpinnerProperties): import("react").JSX.Element;

package/dist/progress-spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressSpinner } from './ProgressSpinner';
+export type { ProgressSpinnerProperties } from './ProgressSpinner';

package/dist/progress-spinner/index.js

@@ -0,0 +1,4 @@
+import { P as o } from "../shared/ProgressSpinner-B-lrS-tu.js";
+export {
+  o as ProgressSpinner
+};

package/dist/radio-group/RadioGroup.d.ts

@@ -0,0 +1,2 @@
+import { RadioGroupProperties } from './RadioGroup.types';
+export declare function RadioGroup({ items, value, defaultValue, onValueChange, size, orientation, disabled, invalid, readOnly, required, name, form, id, }: RadioGroupProperties): import("react").JSX.Element;

package/dist/radio-group/RadioGroup.types.d.ts

@@ -0,0 +1,62 @@
+import { RadioGroupSize, RadioGroupOrientation, RadioOptionItem } from '@tpc-development/mare-ui-components-core/radio-group';
+export type { RadioGroupSize, RadioGroupOrientation, RadioOptionItem, } from '@tpc-development/mare-ui-components-core/radio-group';
+export interface RadioGroupProperties {
+    /**
+     * The available options.
+     */
+    items: RadioOptionItem[];
+    /**
+     * The controlled selected value.
+     */
+    value?: string | null;
+    /**
+     * Initial selected value (uncontrolled mode).
+     */
+    defaultValue?: string;
+    /**
+     * Handler called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Size variant.
+     * @default 'small'
+     */
+    size?: RadioGroupSize;
+    /**
+     * Layout direction of the items.
+     * @default 'vertical'
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * Disables the entire group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Marks the group as invalid (red styling).
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Makes the group read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the group as required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name attribute for form submission.
+     */
+    name?: string;
+    /**
+     * ID of an associated form element.
+     */
+    form?: string;
+    /**
+     * Unique identifier for the group.
+     */
+    id?: string;
+}

package/dist/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProperties, RadioGroupSize, RadioGroupOrientation, RadioOptionItem, } from './RadioGroup.types';

package/dist/radio-group/index.js

@@ -0,0 +1,4 @@
+import { R as a } from "../shared/RadioGroup-lw27DCoV.js";
+export {
+  a as RadioGroup
+};

package/dist/search-field/SearchField.d.ts

@@ -0,0 +1,2 @@
+import { SearchFieldProperties } from './SearchField.types';
+export declare function SearchField({ value, onValueChange, loading, clearable, disabled, leftIcon, clearIcon, rightIcon, onClear, ...native }: SearchFieldProperties): import("react").JSX.Element;

package/dist/search-field/SearchField.types.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { InputTextProperties } from '../InputText';
+/** Native passthrough same as InputText, minus what SearchField owns/reshapes. */
+type ForwardedInputProperties = Omit<InputTextProperties, 'value' | 'onValueChange' | 'rounded'>;
+export interface SearchFieldProperties extends ForwardedInputProperties {
+    /** Controlled value. */
+    value?: string;
+    /** Controlled change handler — receives the next string value. */
+    onValueChange?: (value: string) => void;
+    /** Shows a spinner instead of the clear icon. @default false */
+    loading?: boolean;
+    /** Shows a clear (X) button when there's a value. @default false */
+    clearable?: boolean;
+    /** Overrides the left icon. @default a search icon */
+    leftIcon?: ReactNode;
+    /** Overrides the clear button's icon. @default a close (X) icon */
+    clearIcon?: ReactNode;
+    /** Replaces the clear/spinner logic entirely with your own right-side
+     * content (matches the legacy: a custom right icon takes over from the
+     * built-in clear button). @default undefined */
+    rightIcon?: ReactNode;
+    /** Fires when the built-in clear button is clicked (clears `value` too).
+     * Does NOT fire for a custom `rightIcon` — wire that yourself. */
+    onClear?: () => void;
+}
+export {};

package/dist/search-field/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchField } from './SearchField';
+export type { SearchFieldProperties } from './SearchField.types';

package/dist/search-field/index.js

@@ -0,0 +1,4 @@
+import { S as a } from "../shared/SearchField-CuQ0cXOZ.js";
+export {
+  a as SearchField
+};

package/dist/select-field/SelectField.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { SelectFieldProperties, SelectOptionItem } from './SelectField.types';
+interface SelectFieldReactProperties extends SelectFieldProperties {
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+    leadingIcon?: ReactNode;
+    indicator?: ReactNode;
+    clearIcon?: ReactNode;
+    checkIcon?: ReactNode;
+    renderValue?: (item: SelectOptionItem) => ReactNode;
+    renderOption?: (option: SelectOptionItem) => ReactNode;
+}
+export declare function SelectField({ value, onValueChange, options, placeholder, size, disabled, invalid, clearable, label, leadingIcon, indicator, clearIcon, checkIcon, renderValue, renderOption, }: SelectFieldReactProperties): import("react").JSX.Element;
+export {};

package/dist/select-field/SelectField.types.d.ts

@@ -0,0 +1,11 @@
+import { SelectFieldSize, SelectOptionItem } from '@tpc-development/mare-ui-components-core/select-field';
+export type { SelectFieldSize, SelectOptionItem, } from '@tpc-development/mare-ui-components-core/select-field';
+export interface SelectFieldProperties {
+    options: SelectOptionItem[];
+    placeholder?: string;
+    size?: SelectFieldSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    label?: string;
+}

package/dist/select-field/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectField } from './SelectField';
+export type { SelectFieldProperties, SelectFieldSize, SelectOptionItem, } from './SelectField.types';

package/dist/select-field/index.js

@@ -0,0 +1,4 @@
+import { S as o } from "../shared/SelectField-D6OlgFYy.js";
+export {
+  o as SelectField
+};

package/dist/shared/Avatar-D3QlO3Tz.js

@@ -0,0 +1,59 @@
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import { Avatar as m } from "@ark-ui/react/avatar";
+const s = (a) => a.normalize("NFD").replaceAll(/[̀-ͯ]/g, ""), d = (a) => {
+  if (!a) return "";
+  const e = a.trim().split(/\s+/).filter(Boolean);
+  if (e.length === 1)
+    return s(e[0].slice(0, 2)).toUpperCase();
+  const t = s(e[0][0]), r = s(e.at(-1)?.[0] ?? "");
+  return (t + r).toUpperCase();
+}, n = `
+	mare:inline-flex mare:items-center mare:justify-center
+	mare:rounded-full mare:bg-accent-weak mare:text-accent
+
+	mare:data-size-small:h-8 mare:data-size-small:w-8 mare:data-size-small:text-base
+	mare:data-size-medium:h-10 mare:data-size-medium:w-10 mare:data-size-medium:text-base
+`, c = `
+	mare:h-full mare:w-full mare:rounded-full mare:object-cover
+`, u = `
+	mare:rounded-full
+	mare:data-size-small:tpc-typography-body-s
+	mare:data-size-medium:tpc-typography-body-m
+`;
+function z({
+  image: a,
+  alt: e = "",
+  label: t = "",
+  size: r = "small",
+  id: i
+}) {
+  return /* @__PURE__ */ o(
+    m.Root,
+    {
+      id: i,
+      className: n,
+      "data-size": r,
+      children: [
+        /* @__PURE__ */ l(
+          m.Fallback,
+          {
+            className: u,
+            "data-size": r,
+            children: d(t)
+          }
+        ),
+        a && /* @__PURE__ */ l(
+          m.Image,
+          {
+            className: c,
+            src: a,
+            alt: e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as A
+};

package/dist/shared/Badge-WC6my4Aw.js

@@ -0,0 +1,35 @@
+import { jsxs as i } from "react/jsx-runtime";
+const s = `
+	mare:rounded-full mare:inline-flex mare:justify-center mare:items-center
+	mare:text-center mare:py-0 mare:tpc-typography-label-xs
+	mare:h-2 mare:min-w-2 mare:has-value:h-4 mare:has-value:min-w-4
+	mare:has-icon:px-0 mare:px-1
+	mare:data-severity-accent:bg-accent mare:data-severity-accent:text-on-accent
+	mare:data-severity-danger:bg-danger mare:data-severity-danger:text-on-danger
+	mare:data-severity-warning:bg-warning mare:data-severity-warning:text-on-warning
+	mare:data-severity-highlight:bg-highlight mare:data-severity-highlight:text-on-accent
+	mare:data-severity-positive:bg-positive mare:data-severity-positive:text-on-positive
+`;
+function c({
+  severity: r = "accent",
+  icon: e,
+  children: a
+}) {
+  const t = !!e, n = t || a != null;
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      className: s,
+      "data-severity": r,
+      "data-has-value": n ? "true" : void 0,
+      "data-has-icon": t ? "true" : void 0,
+      children: [
+        e,
+        a
+      ]
+    }
+  );
+}
+export {
+  c as B
+};

package/dist/shared/Button-AfMqNCme.js

@@ -0,0 +1,177 @@
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import { P as z } from "./ProgressSpinner-B-lrS-tu.js";
+const x = {
+  left: "mare:-order-1",
+  right: "mare:order-1",
+  top: "mare:-order-1",
+  bottom: "mare:order-1"
+}, k = {
+  primary: "mare:stroke-on-accent",
+  secondary: "mare:stroke-default",
+  ghost: "mare:stroke-default",
+  danger: "mare:stroke-on-danger",
+  neutral: "mare:stroke-default"
+}, w = (e) => e === "bordered" ? `mare:data-severity-neutral:border mare:data-severity-neutral:border-strong
+			mare:data-severity-ghost:border mare:data-severity-ghost:border-strong mare:not-p-disabled:data-severity-ghost:hover:bg-transparent` : `
+			mare:not-p-disabled:not-data-link:[&[data-severity~='ghost']:active]:bg-active
+			mare:not-p-disabled:not-data-link:[&[data-severity~='danger']:active]:bg-danger-active`, $ = (e, a) => `
+	mare:group/button
+	mare:relative
+	mare:rounded-button mare:flex mare:items-center mare:justify-center
+	mare:cursor-pointer mare-p-button
+	mare:active:duration-150 mare:transition-[cubic-bezier(0.2,0,0,1)]
+
+	mare:data-severity-primary:bg-accent mare:data-severity-primary:text-on-accent mare:data-severity-primary:stroke-on-accent!
+	mare:data-severity-primary:border mare:data-severity-primary:border-transparent mare:not-p-disabled:data-severity-primary:hover:bg-accent-hover
+	mare:data-severity-secondary:bg-transparent mare:data-severity-secondary:text-default
+	mare:data-severity-secondary:border mare:data-severity-secondary:border-strong mare:not-p-disabled:data-severity-secondary:hover:bg-hover
+	mare:data-severity-secondary:not-data-link:active:bg-active!
+	mare:data-severity-ghost:bg-transparent mare:not-p-disabled:data-severity-ghost:hover:bg-hover
+	mare:data-severity-ghost:text-default
+	mare:data-severity-ghost:border mare:data-severity-ghost:border-transparent
+	mare:not-p-disabled:data-severity-ghost:not-data-link:active:bg-active
+	mare:data-severity-danger:bg-danger
+	mare:data-severity-danger:border mare:data-severity-danger:border-transparent
+	mare:data-severity-danger:text-on-accent
+	mare:not-p-disabled:data-severity-danger:hover:bg-danger-hover
+
+	mare:not-p-disabled:not-data-link:[&[data-severity~='primary']:active]:bg-accent-active
+	mare:not-p-disabled:not-data-link:[&[data-severity~='secondary']:active]:bg-active
+	mare:not-p-disabled:not-data-link:[&[data-severity~='danger']:active]:bg-danger-active
+
+	mare:data-severity-neutral:bg-default mare:data-severity-neutral:text-default
+	${w(e)}
+	mare:data-size-small:py-2.5 mare:data-size-small:px-3.5 mare:data-size-small:gap-1
+	mare:data-size-small:icon-only:rounded:p-2.5 mare:data-size-small:h-10 mare:data-size-small:icon-only:w-10  mare:data-size-small:icon-only:min-w-10
+
+	mare:data-size-xsmall:py-1.5 mare:data-size-xsmall:px-3 mare:data-size-xsmall:gap-1
+	mare:data-size-xsmall:icon-only:rounded:p-2.5 mare:data-size-xsmall:h-8 mare:data-size-xsmall:icon-only:w-8  mare:data-size-xsmall:icon-only:min-w-8
+
+	mare:data-size-medium:py-2.5 mare:data-size-medium:px-5.5
+	mare:data-size-medium:gap-1.5
+	mare:data-size-medium:icon-only:rounded:p-3.5 mare:data-size-medium:h-12 mare:data-size-medium:icon-only:w-12 mare:data-size-medium:icon-only:min-w-12
+
+	mare:data-size-large:py-4 mare:data-size-large:px-5.5
+	mare:data-size-large:gap-1.5
+	mare:data-size-large:icon-only:rounded:p-1.5 mare:data-size-large:h-14 mare:data-size-large:icon-only:w-14 mare:data-size-large:icon-only:min-w-14
+
+	mare:p-active:scale-95
+	mare:p-active:shadow-[0_2px_8px_0_rgba(0,0,0,0.16)]
+	mare:p-disabled:cursor-not-allowed
+	mare:not-p-loading:p-disabled:text-disabled
+	mare:not-p-loading:p-disabled:data-severity-primary:bg-disabled
+	mare:not-p-loading:p-disabled:data-severity-danger:bg-disabled
+	mare:not-p-loading:p-disabled:data-severity-secondary:border
+	mare:not-p-loading:p-disabled:data-severity-secondary:border-disabled-default
+	mare:p-loading:cursor-wait
+	mare:icon-only:rounded-full!
+	mare:rounded:rounded-full
+	mare:p-raised:shadow-[0_4px_16px_0_rgba(0,0,0,0.16)]
+
+	mare:data-link:bg-transparent
+	mare:data-link:border-0
+	mare:data-link:text-default
+	mare:data-link:hover:bg-transparent!
+	mare:data-link:hover:text-default
+	mare:data-link:p-0!
+	mare:data-link:p-disabled:border-none!
+	mare:data-link:h-auto
+	mare:p-disabled:data-link:bg-transparent!
+
+	${a ? "mare-p-link" : ""}
+
+	mare:data-link:data-size-xsmall:h-auto
+	mare:data-link:data-size-xsmall:gap-1.5
+
+	mare:data-link:data-size-small:h-auto
+	mare:data-link:data-size-small:gap-1.5
+
+	mare:data-link:data-size-medium:h-auto
+	mare:data-link:data-size-medium:gap-2
+
+	mare:data-link:data-size-large:h-auto
+	mare:data-link:data-size-large:gap-2
+`, _ = "mare:relative mare:inline-block mare:no-underline! mare:after:content-[''] mare:after:absolute mare:after:left-0 mare:after:-bottom-[4px] mare:after:h-[1px] mare:after:w-full mare:after:bg-inverse mare:after:origin-left mare:after:scale-x-[1] mare:after:transform-gpu mare:after:will-change-transform mare:after:transition-transform mare:after:duration-[500ms] mare:after:ease-[cubic-bezier(0.19,1,0.22,1)] mare:hover:after:scale-x-0 mare:hover:after:origin-right", L = (e) => {
+  const { isLink: a, animateLink: r, hiddenLabel: s, loading: d } = e;
+  return `mare:relative
+		${a ? "mare:data-size-xsmall:tpc-typography-label-s-underline" : "mare:data-size-xsmall:tpc-typography-label-s"}
+		${a ? "mare:data-size-small:tpc-typography-label-s-underline" : "mare:data-size-small:tpc-typography-label-s"}
+		${a ? "mare:data-size-medium:tpc-typography-label-m-underline" : "mare:data-size-medium:tpc-typography-label-m"}
+		${a ? "mare:data-size-large:tpc-typography-label-m-underline" : "mare:data-size-large:tpc-typography-label-m"}
+		${r && a ? _ : ""}
+		${s ? "mare:hidden" : ""} ${a ? "" : "mare:px-0.5"} ${d ? "mare:opacity-0" : ""}
+	`;
+}, j = (e, a, r) => a ? e === "xsmall" || e === "small" ? "small" : "medium" : e === "xsmall" ? r ? "medium" : "small" : "medium", N = {
+  small: 16,
+  medium: 20
+};
+function S({
+  label: e,
+  severity: a = "primary",
+  size: r = "medium",
+  variant: s = "solid",
+  iconOnly: d = !1,
+  disabled: l = !1,
+  loading: t = !1,
+  link: c = !1,
+  linkAnimation: y = !1,
+  icon: n,
+  iconPos: g = "left",
+  children: o,
+  type: b = "button",
+  ...u
+}) {
+  const i = c, v = !!e || !!o, h = d && !!n, p = N[j(r, i, d)];
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      type: b,
+      className: $(s, i),
+      "data-severity": a,
+      "data-size": r,
+      "data-icon-only": d ? "true" : void 0,
+      "data-disabled": l ? "true" : void 0,
+      "data-loading": t ? "true" : void 0,
+      "data-link": i ? "true" : void 0,
+      disabled: l || t,
+      "aria-busy": t || void 0,
+      ...u,
+      children: [
+        t && /* @__PURE__ */ m("span", { className: "mare:absolute mare:inset-0 mare:flex mare:items-center mare:justify-center", children: /* @__PURE__ */ m(
+          z,
+          {
+            circleClass: k[a],
+            className: "mare:size-5"
+          }
+        ) }),
+        n && /* @__PURE__ */ m(
+          "span",
+          {
+            className: `mare:inline-flex mare:shrink-0 mare:items-center mare:justify-center mare:[&>svg]:size-full! ${x[g]} ${t ? "mare:opacity-0" : ""}`,
+            style: {
+              width: `${p}px`,
+              height: `${p}px`
+            },
+            "aria-hidden": "true",
+            children: n
+          }
+        ),
+        v && /* @__PURE__ */ m(
+          "span",
+          {
+            className: L({
+              isLink: i,
+              animateLink: y,
+              hiddenLabel: h,
+              loading: t
+            }),
+            children: o ?? e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  S as B
+};