@dnanpm/ui-components 0.4.0 → 0.5.0

package/dist/components/IconButton/IconButton.cjs

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const IconButton_module = require("./IconButton.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Spinner = require("../Spinner/Spinner.cjs");
+const IconButton = ({
+  variant = "default",
+  icon,
+  iconPosition = "start",
+  size = "normal",
+  loading = false,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const isDisabled = "disabled" in props && props.disabled;
+  const isAnchor = "href" in props && props.href != null;
+  const classes = cn.cn(
+    IconButton_module["icon-button"],
+    IconButton_module[`icon-button--${variant}`],
+    IconButton_module[`icon-button--${size}`],
+    focus_module.default.focusable,
+    { [IconButton_module["icon-button--disabled"]]: isDisabled },
+    { [IconButton_module["icon-button--loading"]]: loading },
+    className
+  );
+  const Icon = icon;
+  const iconSlot = loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__spinner"], "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Spinner.Spinner,
+    {
+      size: size === "small" ? "xs" : "s",
+      color: "inherit",
+      "aria-hidden": "true",
+      role: "presentation"
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true" }) });
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconPosition === "start" && iconSlot,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_module["icon-button__label"], children }),
+    iconPosition === "end" && iconSlot
+  ] });
+  if (isAnchor) {
+    const { href, renderLink, ...anchorProps } = props;
+    const {
+      disabled: _disabled,
+      type: _type,
+      name: _name,
+      ...safeAnchorProps
+    } = anchorProps;
+    const target = safeAnchorProps.target;
+    const rel = safeAnchorProps.rel;
+    const shouldHardenRel = target?.toLowerCase() === "_blank";
+    const relTokens = new Set(
+      (rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
+    );
+    if (shouldHardenRel) {
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+    }
+    const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
+    const linkProps = {
+      ...safeAnchorProps,
+      ref,
+      href,
+      rel: hardenedRel,
+      className: classes,
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || void 0,
+      tabIndex: loading ? -1 : void 0,
+      onClick: loading ? (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      } : safeAnchorProps.onClick,
+      children: content
+    };
+    if (renderLink) {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink(linkProps) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps });
+  }
+  const {
+    type = "button",
+    disabled,
+    href: _href,
+    target: _target,
+    rel: _rel,
+    renderLink: _renderLink,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      className: classes,
+      "aria-busy": loading || void 0,
+      ...buttonProps,
+      children: content
+    }
+  );
+};
+exports.IconButton = IconButton;
+//# sourceMappingURL=IconButton.cjs.map

package/dist/components/IconButton/IconButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.cjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n    variant = 'default',\n    icon,\n    iconPosition = 'start',\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: IconButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles['icon-button'],\n        styles[`icon-button--${variant}`],\n        styles[`icon-button--${size}`],\n        focusStyles.focusable,\n        { [styles['icon-button--disabled']]: isDisabled },\n        { [styles['icon-button--loading']]: loading },\n        className,\n    );\n\n    const Icon = icon;\n\n    const iconSlot = loading ? (\n        <span className={styles['icon-button__spinner']} aria-hidden=\"true\">\n            <Spinner\n                size={size === 'small' ? 'xs' : 's'}\n                color=\"inherit\"\n                aria-hidden=\"true\"\n                role=\"presentation\"\n            />\n        </span>\n    ) : (\n        <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n            <Icon aria-hidden=\"true\" />\n        </span>\n    );\n\n    const content = (\n        <>\n            {iconPosition === 'start' && iconSlot}\n            <span className={styles['icon-button__label']}>{children}</span>\n            {iconPosition === 'end' && iconSlot}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'icon' | 'iconPosition' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target?.toLowerCase() === '_blank';\n        const relTokens = new Set(\n            (rel ?? '')\n                .split(/\\s+/)\n                .filter(Boolean)\n                .map((token) => token.toLowerCase()),\n        );\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<\n        typeof props,\n        'variant' | 'icon' | 'iconPosition' | 'size' | 'loading' | 'href'\n    > & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":["cn","styles","focusStyles","jsx","Spinner","jsxs","Fragment"],"mappings":"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"}

package/dist/components/IconButton/IconButton.css

@@ -0,0 +1,177 @@
+@layer dds-components {._icon-button_1dpxf_1 {
+    --_button-icon-size: 24px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-ui-xs);
+    max-width: 100%;
+    min-width: 0;
+    border: none;
+    border-radius: var(--radius-semantic-sm);
+    padding: 0;
+    background: transparent;
+    font: var(--typography-label-lg-bold);
+    color: var(--color-semantic-foreground-default);
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        color 0.2s ease-in-out,
+        text-decoration-color 0.2s ease-in-out;
+}
+
+._icon-button--normal_1dpxf_23 {
+    font: var(--typography-label-lg-bold);
+    --_button-icon-size: 24px;
+}
+
+._icon-button--small_1dpxf_28 {
+    font: var(--typography-label-md-bold);
+    --_button-icon-size: 20px;
+}
+
+._icon-button__label_1dpxf_33 {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+._icon-button__icon_1dpxf_41,
+._icon-button__spinner_1dpxf_42 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: var(--_button-icon-size);
+    height: var(--_button-icon-size);
+    color: var(--color-semantic-interactive-primary-default);
+}
+
+._icon-button__icon_1dpxf_41 > svg {
+    width: var(--_button-icon-size);
+    height: var(--_button-icon-size);
+}
+
+._icon-button_1dpxf_1:hover ._icon-button__label_1dpxf_33,
+._icon-button_1dpxf_1:focus-visible ._icon-button__label_1dpxf_33 {
+    text-decoration: underline;
+}
+
+._icon-button_1dpxf_1:hover ._icon-button__icon_1dpxf_41,
+._icon-button_1dpxf_1:hover ._icon-button__spinner_1dpxf_42,
+._icon-button_1dpxf_1:focus-visible ._icon-button__icon_1dpxf_41,
+._icon-button_1dpxf_1:focus-visible ._icon-button__spinner_1dpxf_42 {
+    color: var(--color-semantic-interactive-primary-hover);
+}
+
+._icon-button_1dpxf_1:active ._icon-button__icon_1dpxf_41,
+._icon-button_1dpxf_1:active ._icon-button__spinner_1dpxf_42 {
+    color: var(--color-semantic-interactive-primary-active);
+}
+
+._icon-button--default_1dpxf_74 {
+    color: var(--color-semantic-foreground-default);
+}
+
+._icon-button--link_1dpxf_78 {
+    color: var(--color-semantic-foreground-link);
+}
+
+._icon-button--link_1dpxf_78 ._icon-button__icon_1dpxf_41,
+._icon-button--link_1dpxf_78 ._icon-button__spinner_1dpxf_42 {
+    color: var(--color-semantic-foreground-link);
+}
+
+._icon-button--link_1dpxf_78:hover,
+._icon-button--link_1dpxf_78:focus-visible {
+    color: var(--color-semantic-foreground-link-hover);
+}
+
+._icon-button--link_1dpxf_78:hover ._icon-button__icon_1dpxf_41,
+._icon-button--link_1dpxf_78:hover ._icon-button__spinner_1dpxf_42,
+._icon-button--link_1dpxf_78:focus-visible ._icon-button__icon_1dpxf_41,
+._icon-button--link_1dpxf_78:focus-visible ._icon-button__spinner_1dpxf_42 {
+    color: var(--color-semantic-foreground-link-hover);
+}
+
+._icon-button--link_1dpxf_78:active ._icon-button__icon_1dpxf_41,
+._icon-button--link_1dpxf_78:active ._icon-button__spinner_1dpxf_42 {
+    color: var(--color-semantic-interactive-primary-active);
+}
+
+._icon-button--disabled_1dpxf_104,
+._icon-button--loading_1dpxf_105 {
+    pointer-events: none;
+}
+
+._icon-button--disabled_1dpxf_104 {
+    color: var(--color-semantic-foreground-muted);
+}
+
+._icon-button--disabled_1dpxf_104 ._icon-button__icon_1dpxf_41,
+._icon-button--disabled_1dpxf_104 ._icon-button__spinner_1dpxf_42 {
+    color: var(--color-semantic-interactive-primary-disabled);
+}
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._icon-button_1dpxf_1 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._icon-button__icon_1dpxf_41,
+    ._icon-button__spinner_1dpxf_42 {
+        color: var(--color-semantic-interactive-inverse-default);
+    }
+
+    ._icon-button_1dpxf_1:hover ._icon-button__icon_1dpxf_41,
+    ._icon-button_1dpxf_1:hover ._icon-button__spinner_1dpxf_42,
+    ._icon-button_1dpxf_1:focus-visible ._icon-button__icon_1dpxf_41,
+    ._icon-button_1dpxf_1:focus-visible ._icon-button__spinner_1dpxf_42 {
+        color: var(--color-semantic-interactive-inverse-hover);
+    }
+
+    ._icon-button_1dpxf_1:active ._icon-button__icon_1dpxf_41,
+    ._icon-button_1dpxf_1:active ._icon-button__spinner_1dpxf_42 {
+        color: var(--color-semantic-interactive-inverse-active);
+    }
+
+    ._icon-button--default_1dpxf_74 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._icon-button--link_1dpxf_78 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._icon-button--link_1dpxf_78 ._icon-button__icon_1dpxf_41,
+    ._icon-button--link_1dpxf_78 ._icon-button__spinner_1dpxf_42 {
+        color: var(--color-semantic-interactive-inverse-default);
+    }
+
+    ._icon-button--link_1dpxf_78:hover,
+    ._icon-button--link_1dpxf_78:focus-visible {
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._icon-button--link_1dpxf_78:hover ._icon-button__icon_1dpxf_41,
+    ._icon-button--link_1dpxf_78:hover ._icon-button__spinner_1dpxf_42,
+    ._icon-button--link_1dpxf_78:focus-visible ._icon-button__icon_1dpxf_41,
+    ._icon-button--link_1dpxf_78:focus-visible ._icon-button__spinner_1dpxf_42 {
+        color: var(--color-semantic-interactive-inverse-hover);
+    }
+
+    ._icon-button--disabled_1dpxf_104 ._icon-button__icon_1dpxf_41,
+    ._icon-button--disabled_1dpxf_104 ._icon-button__spinner_1dpxf_42 {
+        color: var(--color-semantic-interactive-inverse-disabled);
+    }
+}
+
+@media (forced-colors: active) {
+    ._icon-button--small_1dpxf_28:focus-visible {
+        outline-color: Highlight;
+        box-shadow: none;
+    }
+}
+}

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from './IconButton.types';
+export declare const IconButton: ({ variant, icon, iconPosition, size, loading, className, children, ref, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,GAAI,oFAUxB,eAAe,4CA0IjB,CAAC"}

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,107 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./IconButton.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+import { Spinner } from "../Spinner/Spinner.js";
+const IconButton = ({
+  variant = "default",
+  icon,
+  iconPosition = "start",
+  size = "normal",
+  loading = false,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const isDisabled = "disabled" in props && props.disabled;
+  const isAnchor = "href" in props && props.href != null;
+  const classes = cn(
+    styles["icon-button"],
+    styles[`icon-button--${variant}`],
+    styles[`icon-button--${size}`],
+    focusStyles.focusable,
+    { [styles["icon-button--disabled"]]: isDisabled },
+    { [styles["icon-button--loading"]]: loading },
+    className
+  );
+  const Icon = icon;
+  const iconSlot = loading ? /* @__PURE__ */ jsx("span", { className: styles["icon-button__spinner"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    Spinner,
+    {
+      size: size === "small" ? "xs" : "s",
+      color: "inherit",
+      "aria-hidden": "true",
+      role: "presentation"
+    }
+  ) }) : /* @__PURE__ */ jsx("span", { className: styles["icon-button__icon"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconPosition === "start" && iconSlot,
+    /* @__PURE__ */ jsx("span", { className: styles["icon-button__label"], children }),
+    iconPosition === "end" && iconSlot
+  ] });
+  if (isAnchor) {
+    const { href, renderLink, ...anchorProps } = props;
+    const {
+      disabled: _disabled,
+      type: _type,
+      name: _name,
+      ...safeAnchorProps
+    } = anchorProps;
+    const target = safeAnchorProps.target;
+    const rel = safeAnchorProps.rel;
+    const shouldHardenRel = target?.toLowerCase() === "_blank";
+    const relTokens = new Set(
+      (rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
+    );
+    if (shouldHardenRel) {
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+    }
+    const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
+    const linkProps = {
+      ...safeAnchorProps,
+      ref,
+      href,
+      rel: hardenedRel,
+      className: classes,
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || void 0,
+      tabIndex: loading ? -1 : void 0,
+      onClick: loading ? (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      } : safeAnchorProps.onClick,
+      children: content
+    };
+    if (renderLink) {
+      return /* @__PURE__ */ jsx(Fragment, { children: renderLink(linkProps) });
+    }
+    return /* @__PURE__ */ jsx("a", { ...linkProps });
+  }
+  const {
+    type = "button",
+    disabled,
+    href: _href,
+    target: _target,
+    rel: _rel,
+    renderLink: _renderLink,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      className: classes,
+      "aria-busy": loading || void 0,
+      ...buttonProps,
+      children: content
+    }
+  );
+};
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n    variant = 'default',\n    icon,\n    iconPosition = 'start',\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: IconButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles['icon-button'],\n        styles[`icon-button--${variant}`],\n        styles[`icon-button--${size}`],\n        focusStyles.focusable,\n        { [styles['icon-button--disabled']]: isDisabled },\n        { [styles['icon-button--loading']]: loading },\n        className,\n    );\n\n    const Icon = icon;\n\n    const iconSlot = loading ? (\n        <span className={styles['icon-button__spinner']} aria-hidden=\"true\">\n            <Spinner\n                size={size === 'small' ? 'xs' : 's'}\n                color=\"inherit\"\n                aria-hidden=\"true\"\n                role=\"presentation\"\n            />\n        </span>\n    ) : (\n        <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n            <Icon aria-hidden=\"true\" />\n        </span>\n    );\n\n    const content = (\n        <>\n            {iconPosition === 'start' && iconSlot}\n            <span className={styles['icon-button__label']}>{children}</span>\n            {iconPosition === 'end' && iconSlot}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'icon' | 'iconPosition' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target?.toLowerCase() === '_blank';\n        const relTokens = new Set(\n            (rel ?? '')\n                .split(/\\s+/)\n                .filter(Boolean)\n                .map((token) => token.toLowerCase()),\n        );\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<\n        typeof props,\n        'variant' | 'icon' | 'iconPosition' | 'size' | 'loading' | 'href'\n    > & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/IconButton/IconButton.module.css.cjs

@@ -0,0 +1,16 @@
+require('./IconButton.css');
+"use strict";
+const styles = {
+  "icon-button": "_icon-button_1dpxf_1",
+  "icon-button--normal": "_icon-button--normal_1dpxf_23",
+  "icon-button--small": "_icon-button--small_1dpxf_28",
+  "icon-button__label": "_icon-button__label_1dpxf_33",
+  "icon-button__icon": "_icon-button__icon_1dpxf_41",
+  "icon-button__spinner": "_icon-button__spinner_1dpxf_42",
+  "icon-button--default": "_icon-button--default_1dpxf_74",
+  "icon-button--link": "_icon-button--link_1dpxf_78",
+  "icon-button--disabled": "_icon-button--disabled_1dpxf_104",
+  "icon-button--loading": "_icon-button--loading_1dpxf_105"
+};
+module.exports = styles;
+//# sourceMappingURL=IconButton.module.css.cjs.map

package/dist/components/IconButton/IconButton.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/IconButton/IconButton.module.css.js

@@ -0,0 +1,17 @@
+import './IconButton.css';
+const styles = {
+  "icon-button": "_icon-button_1dpxf_1",
+  "icon-button--normal": "_icon-button--normal_1dpxf_23",
+  "icon-button--small": "_icon-button--small_1dpxf_28",
+  "icon-button__label": "_icon-button__label_1dpxf_33",
+  "icon-button__icon": "_icon-button__icon_1dpxf_41",
+  "icon-button__spinner": "_icon-button__spinner_1dpxf_42",
+  "icon-button--default": "_icon-button--default_1dpxf_74",
+  "icon-button--link": "_icon-button--link_1dpxf_78",
+  "icon-button--disabled": "_icon-button--disabled_1dpxf_104",
+  "icon-button--loading": "_icon-button--loading_1dpxf_105"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=IconButton.module.css.js.map

package/dist/components/IconButton/IconButton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/IconButton/IconButton.types.d.ts

@@ -0,0 +1,52 @@
+import { ComponentPropsWithRef, ComponentType, ReactNode, SVGProps } from 'react';
+export type IconButtonVariant = 'default' | 'link';
+export type IconPosition = 'start' | 'end';
+export type IconButtonSize = 'normal' | 'small';
+export type Icon = ComponentType<SVGProps<SVGSVGElement>>;
+export interface IconButtonLinkProps extends ComponentPropsWithRef<'a'> {
+    readonly href: string;
+    readonly children: ReactNode;
+}
+interface IconButtonBaseProps {
+    /**
+     * Visual variant for text/icon coloring.
+     * @default 'default'
+     */
+    readonly variant?: IconButtonVariant;
+    /** Icon component (for example, `ChevronRight` from `@dnanpm/icons`). */
+    readonly icon: Icon;
+    /** Visible label content used as the button/link accessible name. */
+    readonly children: ReactNode;
+    /**
+     * Position of the icon relative to label text.
+     * @default 'start'
+     */
+    readonly iconPosition?: IconPosition;
+    /**
+     * Size variant controlling typography and icon size.
+     * @default 'normal'
+     */
+    readonly size?: IconButtonSize;
+    /**
+     * Whether the button is in a loading state.
+     * Label stays visible while icon slot shows a spinner.
+     * @default false
+     */
+    readonly loading?: boolean;
+}
+export type IconButtonAsButton = IconButtonBaseProps & Omit<ComponentPropsWithRef<'button'>, keyof IconButtonBaseProps> & {
+    readonly href?: never;
+    readonly target?: never;
+    readonly rel?: never;
+    readonly renderLink?: never;
+};
+export type IconButtonAsAnchor = IconButtonBaseProps & Omit<ComponentPropsWithRef<'a'>, keyof IconButtonBaseProps> & {
+    readonly href: string;
+    readonly disabled?: never;
+    readonly type?: never;
+    readonly name?: never;
+    readonly renderLink?: (props: IconButtonLinkProps) => ReactNode;
+};
+export type IconButtonProps = IconButtonAsButton | IconButtonAsAnchor;
+export {};
+//# sourceMappingURL=IconButton.types.d.ts.map

package/dist/components/IconButton/IconButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,MAAM,MAAM,IAAI,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IACnE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,UAAU,mBAAmB;IACzB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACrC,yEAAyE;IACzE,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC/D,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,mBAAmB,CAAC,GAAG;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;CACnE,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

package/dist/components/IconButton/index.d.ts

@@ -0,0 +1,3 @@
+export { IconButton } from './IconButton';
+export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, IconButtonVariant, } from './IconButton.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/IconButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,iBAAiB,GACpB,MAAM,oBAAoB,CAAC"}

package/dist/index.cjs

@@ -7,6 +7,7 @@ const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
 const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
 const Hero = require("./components/Hero/Hero.cjs");
+const IconButton = require("./components/IconButton/IconButton.cjs");
 const Label = require("./components/Label/Label.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
 const Pictograph = require("./components/Pictograph/Pictograph.cjs");
@@ -19,6 +20,7 @@ exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.Button = Button.Button;
 exports.ColorScheme = ColorScheme.ColorScheme;
 exports.Hero = Hero.Hero;
+exports.IconButton = IconButton.IconButton;
 exports.Label = Label.Label;
 exports.Notification = Notification.Notification;
 exports.Pictograph = Pictograph.Pictograph;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { Notification } from './components/Notification';
 export { Label } from './components/Label';
 export { Pictograph, PictographItem } from './components/Pictograph';
 export { Spinner } from './components/Spinner';
+export { IconButton } from './components/IconButton';
 export type { AccordionProps } from './components/Accordion';
 export type { AccordionItemProps } from './components/AccordionItem';
 export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
@@ -18,6 +19,7 @@ export type { NotificationProps, NotificationVariant } from './components/Notifi
 export type { LabelProps, LabelVariant } from './components/Label';
 export type { PictographItemProps, PictographProps } from './components/Pictograph';
 export type { SpinnerColor, SpinnerProps, SpinnerSize } from './components/Spinner';
+export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, IconButtonVariant, } from './components/IconButton';
 export { cn } from './utils';
 export type { CnDictionary, CnInput } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACpF,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,iBAAiB,GACpB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -5,6 +5,7 @@ import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button } from "./components/Button/Button.js";
 import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
 import { Hero } from "./components/Hero/Hero.js";
+import { IconButton } from "./components/IconButton/IconButton.js";
 import { Label } from "./components/Label/Label.js";
 import { Notification } from "./components/Notification/Notification.js";
 import { Pictograph } from "./components/Pictograph/Pictograph.js";
@@ -18,6 +19,7 @@ export {
   Button,
   ColorScheme,
   Hero,
+  IconButton,
   Label,
   Notification,
   Pictograph,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",