@dnanpm/ui-components 0.0.5 → 0.2.0

package/dist/components/Button/Button.css

@@ -0,0 +1,182 @@
+@layer dna-design-system {._button_188fd_1 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-ui-xxs);
+    max-width: 100%;
+    border: none;
+    border-radius: var(--radius-semantic-full);
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    transition:
+        color 0.2s ease-in-out,
+        background-color 0.2s ease-in-out,
+        border-color 0.2s ease-in-out;
+}
+
+._button--full-width_188fd_18 {
+    width: 100%;
+    min-width: 0;
+}
+
+/* ─── Sizes ─── */
+
+._button--normal_188fd_25 {
+    font: var(--typography-label-lg-bold);
+    height: 40px;
+    min-width: 128px;
+    padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
+}
+
+._button--small_188fd_32 {
+    font: var(--typography-label-md-bold);
+    height: 32px;
+    min-width: 100px;
+    padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
+}
+
+/* ─── Primary variant ─── */
+
+._button--primary_188fd_41 {
+    background-color: var(--color-semantic-interactive-primary-default);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._button--primary_188fd_41:hover {
+    background-color: var(--color-semantic-interactive-primary-hover);
+}
+
+._button--primary_188fd_41:active {
+    background-color: var(--color-semantic-interactive-primary-active);
+}
+
+._button--primary_188fd_41:focus-visible {
+    background-color: var(--color-semantic-interactive-primary-focus);
+}
+
+/* ─── Secondary variant ─── */
+
+._button--secondary_188fd_60 {
+    background-color: transparent;
+    border: var(--borderwidth-semantic-sm) solid var(--color-semantic-interactive-secondary-default);
+    color: var(--color-semantic-foreground-secondary-strong);
+}
+
+._button--secondary_188fd_60:hover {
+    background-color: var(--color-semantic-interactive-secondary-hover);
+    border-color: var(--color-semantic-interactive-secondary-hover);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._button--secondary_188fd_60:active {
+    background-color: var(--color-semantic-interactive-secondary-active);
+    border-color: var(--color-semantic-interactive-secondary-active);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._button--secondary_188fd_60:focus-visible {
+    background-color: var(--color-semantic-interactive-secondary-focus);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+/* ─── Tertiary variant ─── */
+
+._button--tertiary_188fd_85 {
+    background-color: var(--color-semantic-interactive-neutral-default);
+    border: var(--borderwidth-semantic-sm) solid var(--color-semantic-border-neutral-mid);
+    color: var(--color-semantic-foreground-secondary-strong);
+}
+
+._button--tertiary_188fd_85:hover {
+    background-color: var(--color-semantic-interactive-neutral-hover);
+}
+
+._button--tertiary_188fd_85:active {
+    background-color: var(--color-semantic-interactive-neutral-active);
+}
+
+._button--tertiary_188fd_85:focus-visible {
+    background-color: var(--color-semantic-interactive-neutral-focus);
+}
+
+/* ─── Disabled state ─── */
+
+._button--disabled_188fd_105 {
+    pointer-events: none;
+}
+
+._button--primary_188fd_41._button--disabled_188fd_105 {
+    background-color: var(--color-semantic-interactive-primary-disabled);
+    color: var(--color-semantic-foreground-muted);
+}
+
+._button--secondary_188fd_60._button--disabled_188fd_105 {
+    border-color: var(--color-semantic-interactive-secondary-disabled);
+    color: var(--color-semantic-foreground-muted);
+}
+
+._button--tertiary_188fd_85._button--disabled_188fd_105 {
+    background-color: var(--color-semantic-interactive-neutral-disabled);
+    color: var(--color-semantic-foreground-muted);
+}
+
+/* ─── Dark color scheme ─── */
+/* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._button--primary_188fd_41._button--disabled_188fd_105 {
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    ._button--secondary_188fd_60 {
+        border-color: var(--color-semantic-interactive-inverse-default);
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    ._button--secondary_188fd_60:hover {
+        background-color: var(--color-semantic-interactive-inverse-hover);
+        border-color: var(--color-semantic-interactive-inverse-hover);
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+
+    ._button--secondary_188fd_60:active {
+        background-color: var(--color-semantic-interactive-inverse-active);
+        border-color: var(--color-semantic-interactive-inverse-active);
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+
+    ._button--secondary_188fd_60:focus-visible {
+        background-color: var(--color-semantic-interactive-inverse-focus);
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+
+    ._button--secondary_188fd_60._button--disabled_188fd_105 {
+        border-color: var(--color-semantic-interactive-inverse-disabled);
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+
+    ._button--tertiary_188fd_85._button--disabled_188fd_105 {
+        border-color: var(--color-semantic-interactive-neutral-disabled);
+        color: var(--color-semantic-foreground-inverse-muted);
+    }
+}
+
+/* ─── Loading state ─── */
+
+._button--loading_188fd_167 {
+    pointer-events: none;
+}
+
+._button__content_188fd_171 {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+._button__spinner_188fd_179 {
+    flex: 0 0 auto;
+}
+}

package/dist/components/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import { ButtonProps } from './Button.types';
-export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const Button: ({ variant, fullWidth, size, loading, className, children, ref, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,+HAoDlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,2EASpB,WAAW,4CA0Hb,CAAC"}

package/dist/components/Button/Button.js

@@ -0,0 +1,104 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./Button.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+import { Spinner } from "../Spinner/Spinner.js";
+const Button = ({
+  variant = "primary",
+  fullWidth = false,
+  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.button,
+    styles[`button--${variant}`],
+    { [styles["button--full-width"]]: fullWidth },
+    styles[`button--${size}`],
+    focusStyles.focusable,
+    { [styles["button--disabled"]]: isDisabled },
+    { [styles["button--loading"]]: loading },
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: styles.button__content, children }),
+    loading && /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        size: size === "small" ? "xs" : "s",
+        color: "inherit",
+        "aria-hidden": "true",
+        "aria-label": void 0,
+        role: "presentation",
+        className: styles.button__spinner
+      }
+    )
+  ] });
+  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 === "_blank";
+    const relTokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+    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 {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n    variant = 'primary',\n    fullWidth = false,\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: ButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles.button,\n        styles[`button--${variant}`],\n        { [styles['button--full-width']]: fullWidth },\n        styles[`button--${size}`],\n        focusStyles.focusable,\n        { [styles['button--disabled']]: isDisabled },\n        { [styles['button--loading']]: loading },\n        className,\n    );\n\n    const content = (\n        <>\n            <span className={styles.button__content}>{children}</span>\n            {loading && (\n                <Spinner\n                    size={size === 'small' ? 'xs' : 's'}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                    aria-label={undefined}\n                    role=\"presentation\"\n                    className={styles.button__spinner}\n                />\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | '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 === '_blank';\n        const relTokens = new Set((rel ?? '').split(/\\s+/).filter(Boolean));\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<typeof props, 'variant' | 'size' | 'loading' | 'href'> & {\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":";;;;;AAOO,MAAM,SAAS,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAmB;AACf,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;AAElD,QAAM,UAAU;AAAA,IACZ,OAAO;AAAA,IACP,OAAO,WAAW,OAAO,EAAE;AAAA,IAC3B,EAAE,CAAC,OAAO,oBAAoB,CAAC,GAAG,UAAA;AAAA,IAClC,OAAO,WAAW,IAAI,EAAE;AAAA,IACxB,YAAY;AAAA,IACZ,EAAE,CAAC,OAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,IAChC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,QAAA;AAAA,IAC/B;AAAA,EAAA;AAGJ,QAAM,UACF,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAkB,UAAS;AAAA,IAClD,WACG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM,SAAS,UAAU,OAAO;AAAA,QAChC,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,GAER;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,WAAW;AACnC,UAAM,YAAY,IAAI,KAAK,OAAO,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO,CAAC;AAElE,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK;AAAA,MACzB,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAO,oBAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAO,oBAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AASJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,aAAW,WAAW;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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

@@ -0,0 +1,24 @@
+require('./Button.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const button = "_button_188fd_1";
+const button__content = "_button__content_188fd_171";
+const button__spinner = "_button__spinner_188fd_179";
+const styles = {
+  button,
+  "button--full-width": "_button--full-width_188fd_18",
+  "button--normal": "_button--normal_188fd_25",
+  "button--small": "_button--small_188fd_32",
+  "button--primary": "_button--primary_188fd_41",
+  "button--secondary": "_button--secondary_188fd_60",
+  "button--tertiary": "_button--tertiary_188fd_85",
+  "button--disabled": "_button--disabled_188fd_105",
+  "button--loading": "_button--loading_188fd_167",
+  button__content,
+  button__spinner
+};
+exports.button = button;
+exports.button__content = button__content;
+exports.button__spinner = button__spinner;
+exports.default = styles;
+//# sourceMappingURL=Button.module.css.cjs.map

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

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

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

@@ -0,0 +1,24 @@
+import './Button.css';
+const button = "_button_188fd_1";
+const button__content = "_button__content_188fd_171";
+const button__spinner = "_button__spinner_188fd_179";
+const styles = {
+  button,
+  "button--full-width": "_button--full-width_188fd_18",
+  "button--normal": "_button--normal_188fd_25",
+  "button--small": "_button--small_188fd_32",
+  "button--primary": "_button--primary_188fd_41",
+  "button--secondary": "_button--secondary_188fd_60",
+  "button--tertiary": "_button--tertiary_188fd_85",
+  "button--disabled": "_button--disabled_188fd_105",
+  "button--loading": "_button--loading_188fd_167",
+  button__content,
+  button__spinner
+};
+export {
+  button,
+  button__content,
+  button__spinner,
+  styles as default
+};
+//# sourceMappingURL=Button.module.css.js.map

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

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

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

@@ -1,51 +1,84 @@
-import * as React from 'react';
-interface BaseButtonProps {
-    /**
-     * The visual style variant of the button
-     * @default "primary"
-     */
-    readonly variant?: 'primary' | 'secondary';
-    /**
-     * The size variant of the button
-     * @default "default"
-     */
-    readonly size?: 'default' | 'small';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * Visual variant of the Button.
+ *
+ * - `primary`   — Filled pink background. Main call-to-action.
+ * - `secondary` — Outlined with secondary (plum) border color.
+ * - `tertiary`  — Filled neutral background with a neutral border.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+/**
+ * Size variant of the Button.
+ *
+ * - `normal` — 40px height, 16px bold text.
+ * - `small`  — 32px height, 14px bold text.
+ */
+export type ButtonSize = 'normal' | 'small';
+export interface ButtonLinkProps extends ComponentPropsWithRef<'a'> {
+    readonly href: string;
+    readonly children: ReactNode;
+}
+interface ButtonBaseProps {
     /**
-     * The content of the button
+     * Visual variant determining colors and border style.
+     * @default 'primary'
      */
-    readonly children: React.ReactNode;
+    readonly variant?: ButtonVariant;
     /**
-     * Whether the button should take full width
+     * Whether the button should stretch to fill the available width.
      * @default false
      */
     readonly fullWidth?: boolean;
     /**
-     * Whether the button is in a loading state
-     * @default false
-     */
-    readonly loading?: boolean;
-    /**
-     * Custom className to apply to the button
+     * Size variant controlling height and font size.
+     * @default 'normal'
      */
-    readonly className?: string;
-}
-interface ButtonAsButton extends BaseButtonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className'> {
+    readonly size?: ButtonSize;
     /**
-     * Render as a different element (button or anchor)
-     * @default "button"
+     * Whether the button is in a loading state.
+     * When true, the button content remains visible and a spinner is shown.
+     * The button remains non-interactive during loading.
+     * @default false
      */
-    readonly as?: 'button';
+    readonly loading?: boolean;
 }
-interface ButtonAsAnchor extends BaseButtonProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'className'> {
-    /**
-     * Render as a different element (button or anchor)
-     */
-    readonly as: 'a';
+export type ButtonAsButton = ButtonBaseProps & Omit<ComponentPropsWithRef<'button'>, keyof ButtonBaseProps> & {
+    /** When omitted, the element renders as a `<button>`. */
+    readonly href?: never;
+    /** Anchor-only props are intentionally unsupported in button mode. */
+    readonly target?: never;
+    readonly rel?: never;
+    readonly renderLink?: never;
+};
+export type ButtonAsAnchor = ButtonBaseProps & Omit<ComponentPropsWithRef<'a'>, keyof ButtonBaseProps> & {
+    /** When `href` is provided, the element renders as an `<a>`. */
+    readonly href: string;
+    /** Button-only props are intentionally unsupported in anchor mode. */
+    readonly disabled?: never;
+    readonly type?: never;
+    readonly name?: never;
     /**
-     * The URL to link to (required when as="a")
+     * Custom render function for the link element. Use this to integrate with
+     * client-side routing libraries like Next.js or React Router.
+     *
+     * @example
+     * // Next.js
+     * import Link from 'next/link';
+     * <Button href="/page" renderLink={(props) => <Link {...props} />}>Navigate</Button>
+     *
+     * @example
+     * // React Router
+     * import { Link } from 'react-router-dom';
+     * <Button href="/page" renderLink={({ href, ...props }) => <Link to={href} {...props} />}>Navigate</Button>
      */
-    readonly href: string;
-}
+    readonly renderLink?: (props: ButtonLinkProps) => ReactNode;
+};
+/**
+ * Props for the Button component.
+ *
+ * When `href` is provided the component renders as an `<a>` element;
+ * otherwise it renders as a `<button>`.
+ */
 export type ButtonProps = ButtonAsButton | ButtonAsAnchor;
 export {};
 //# sourceMappingURL=Button.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,eAAe;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,UAAU,cACN,SACI,eAAe,EACf,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACjF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,UAAU,cACN,SACI,eAAe,EACf,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACjF;;OAEG;IACH,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC/D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,UAAU,eAAe;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IAC3D,yDAAyD;IACzD,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,sEAAsE;IACtE,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,cAAc,GAAG,eAAe,GACxC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IACtD,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/D,CAAC;AAEN;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC"}

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

@@ -1,3 +1,3 @@
 export { Button } from './Button';
-export type { ButtonProps } from './Button.types';
+export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './Button.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/ColorScheme/ColorScheme.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const cn = require("../../utils/cn/cn.cjs");
+const ColorScheme = ({ scheme, className, children, ref, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, "data-color-scheme": scheme, className: cn.cn(className), children });
+};
+exports.ColorScheme = ColorScheme;
+//# sourceMappingURL=ColorScheme.cjs.map

package/dist/components/ColorScheme/ColorScheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.cjs","sources":["../../../src/components/ColorScheme/ColorScheme.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport type { ColorSchemeProps } from './ColorScheme.types';\n\nexport const ColorScheme = ({ scheme, className, children, ref, ...props }: ColorSchemeProps) => {\n    return (\n        <div ref={ref} {...props} data-color-scheme={scheme} className={cn(className)}>\n            {children}\n        </div>\n    );\n};\n"],"names":["jsx","cn"],"mappings":";;;;AAGO,MAAM,cAAc,CAAC,EAAE,QAAQ,WAAW,UAAU,KAAK,GAAG,YAA8B;AAC7F,SACIA,2BAAAA,IAAC,OAAA,EAAI,KAAW,GAAG,OAAO,qBAAmB,QAAQ,WAAWC,GAAAA,GAAG,SAAS,GACvE,SAAA,CACL;AAER;;"}

package/dist/components/ColorScheme/ColorScheme.d.ts

@@ -0,0 +1,3 @@
+import { ColorSchemeProps } from './ColorScheme.types';
+export declare const ColorScheme: ({ scheme, className, children, ref, ...props }: ColorSchemeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorScheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.d.ts","sourceRoot":"","sources":["../../../src/components/ColorScheme/ColorScheme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,eAAO,MAAM,WAAW,GAAI,gDAAgD,gBAAgB,4CAM3F,CAAC"}

package/dist/components/ColorScheme/ColorScheme.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn/cn.js";
+const ColorScheme = ({ scheme, className, children, ref, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { ref, ...props, "data-color-scheme": scheme, className: cn(className), children });
+};
+export {
+  ColorScheme
+};
+//# sourceMappingURL=ColorScheme.js.map

package/dist/components/ColorScheme/ColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.js","sources":["../../../src/components/ColorScheme/ColorScheme.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport type { ColorSchemeProps } from './ColorScheme.types';\n\nexport const ColorScheme = ({ scheme, className, children, ref, ...props }: ColorSchemeProps) => {\n    return (\n        <div ref={ref} {...props} data-color-scheme={scheme} className={cn(className)}>\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;AAGO,MAAM,cAAc,CAAC,EAAE,QAAQ,WAAW,UAAU,KAAK,GAAG,YAA8B;AAC7F,SACI,oBAAC,OAAA,EAAI,KAAW,GAAG,OAAO,qBAAmB,QAAQ,WAAW,GAAG,SAAS,GACvE,SAAA,CACL;AAER;"}

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

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from 'react';
+export type ColorSchemeValue = 'light' | 'dark';
+export interface ColorSchemeProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * The color scheme to apply to children.
+     * Components within will adapt their colors accordingly.
+     */
+    readonly scheme: ColorSchemeValue;
+}
+//# sourceMappingURL=ColorScheme.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.types.d.ts","sourceRoot":"","sources":["../../../src/components/ColorScheme/ColorScheme.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAClE;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;CACrC"}

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

@@ -0,0 +1,3 @@
+export { ColorScheme } from './ColorScheme';
+export type { ColorSchemeProps, ColorSchemeValue } from './ColorScheme.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorScheme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Label/Label.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Label_module = require("./Label.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Label = ({ variant = "default", className, children, ref, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn.cn(Label_module.default.label, Label_module.default[`label--${variant}`], className),
+      ...props,
+      children
+    }
+  );
+};
+exports.Label = Label;
+//# sourceMappingURL=Label.cjs.map

package/dist/components/Label/Label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.cjs","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Label.module.css';\nimport type { LabelProps } from './Label.types';\n\nexport const Label = ({ variant = 'default', className, children, ref, ...props }: LabelProps) => {\n    return (\n        <span\n            ref={ref}\n            className={cn(styles.label, styles[`label--${variant}`], className)}\n            {...props}\n        >\n            {children}\n        </span>\n    );\n};\n"],"names":["jsx","cn","styles"],"mappings":";;;;;AAIO,MAAM,QAAQ,CAAC,EAAE,UAAU,WAAW,WAAW,UAAU,KAAK,GAAG,YAAwB;AAC9F,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA,GAAGC,aAAAA,QAAO,OAAOA,aAAAA,QAAO,UAAU,OAAO,EAAE,GAAG,SAAS;AAAA,MACjE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGb;;"}

package/dist/components/Label/Label.css

@@ -0,0 +1,38 @@
+@layer dna-design-system {._label_1bsev_1 {
+    display: inline-block;
+    max-width: 100%;
+    padding: var(--spacing-ui-xxs) var(--spacing-ui-lg);
+    border-radius: var(--radius-semantic-full);
+    font: var(--typography-label-md-bold);
+    text-align: center;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--color-semantic-foreground-default);
+}
+
+._label--default_1bsev_15 {
+    background-color: var(--color-semantic-surface-base);
+}
+
+._label--campaign_1bsev_19 {
+    background-color: var(--color-semantic-surface-primary-mid);
+}
+
+._label--new_1bsev_23 {
+    background-color: var(--color-semantic-accent-lemon-strong);
+}
+
+._label--presale_1bsev_27 {
+    background-color: var(--color-semantic-accent-orange-strong);
+}
+
+._label--soldout_1bsev_31 {
+    background-color: var(--color-semantic-surface-neutral-strong);
+}
+
+._label--other_1bsev_35 {
+    background-color: var(--color-semantic-accent-sky-strong);
+}
+}

package/dist/components/Label/Label.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,GAAI,iDAA6D,UAAU,4CAU5F,CAAC"}