@dnanpm/ui-components 0.9.0 → 0.10.0

package/dist/components/ButtonCard/ButtonCard.css

@@ -1,4 +1,11 @@
-@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._button-card_14hpp_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._button-card-container_je3cs_1 {
+    display: block;
+    width: 100%;
+    container-name: button-card;
+    container-type: inline-size;
+}
+
+._button-card_je3cs_1 {
     --_button-card-padding: var(--spacing-space-16);
     --_button-card-gap: var(--spacing-space-16);
     --_button-card-content-gap: var(--spacing-space-16);
@@ -28,18 +35,19 @@
     appearance: none;
 }
 
-._button-card_14hpp_1:where(:hover, :focus-visible) {
+._button-card_je3cs_1:where(:hover, :focus-visible) {
     border-color: var(--color-semantic-border-neutral-mid);
 }
 
 /* === Size variants (base holds the medium/default values) === */
 
-._button-card--large_14hpp_37 {
+._button-card--large_je3cs_44 {
     --_button-card-title-font: var(--typography-heading-xs);
     --_button-card-subtitle-font: var(--typography-label-lg);
 }
 
-._button-card--small_14hpp_42 {
+._button-card--small_je3cs_49,
+._button-card--dynamic_je3cs_50 {
     flex-direction: column;
     align-items: stretch;
     --_button-card-padding: var(--spacing-space-8);
@@ -54,9 +62,33 @@
     --_button-card-subtitle-font: var(--typography-label-sm);
 }
 
+@container button-card (min-width: 16rem) {
+    ._button-card--dynamic_je3cs_50 {
+        flex-direction: row;
+        align-items: center;
+        --_button-card-padding: var(--spacing-space-16);
+        --_button-card-gap: var(--spacing-space-16);
+        --_button-card-content-gap: var(--spacing-space-16);
+        --_button-card-text-gap: var(--spacing-space-4);
+        --_button-card-line-clamp: 2;
+        --_button-card-media-box: 56px;
+        --_button-card-media-icon: 40px;
+        --_button-card-indicator: 24px;
+        --_button-card-title-font: var(--typography-label-lg-bold);
+        --_button-card-subtitle-font: var(--typography-label-md);
+    }
+}
+
+@container button-card (min-width: 23rem) {
+    ._button-card--dynamic_je3cs_50 {
+        --_button-card-title-font: var(--typography-heading-xs);
+        --_button-card-subtitle-font: var(--typography-label-lg);
+    }
+}
+
 /* === Media === */
 
-._button-card__media_14hpp_59 {
+._button-card__media_je3cs_91 {
     display: inline-flex;
     flex-shrink: 0;
     align-self: center;
@@ -65,30 +97,37 @@
     overflow: hidden;
 }
 
-._button-card--small_14hpp_42 ._button-card__media_14hpp_59 {
+._button-card--small_je3cs_49 ._button-card__media_je3cs_91,
+._button-card--dynamic_je3cs_50 ._button-card__media_je3cs_91 {
     align-self: flex-start;
 }
 
-._button-card__media--icon_14hpp_72 {
+@container button-card (min-width: 16rem) {
+    ._button-card--dynamic_je3cs_50 ._button-card__media_je3cs_91 {
+        align-self: center;
+    }
+}
+
+._button-card__media--icon_je3cs_111 {
     width: var(--_button-card-media-box);
     height: var(--_button-card-media-box);
     background-color: var(--color-semantic-surface-neutral-mid);
     border-radius: var(--radius-semantic-md);
 }
 
-._button-card__media--icon_14hpp_72 svg {
+._button-card__media--icon_je3cs_111 svg {
     display: block;
     width: var(--_button-card-media-icon);
     height: var(--_button-card-media-icon);
 }
 
-._button-card__media--image_14hpp_85 {
+._button-card__media--image_je3cs_124 {
     position: relative;
     width: var(--_button-card-media-box);
     height: var(--_button-card-media-box);
 }
 
-._button-card__media--image_14hpp_85 :where(img, picture, video, svg, canvas) {
+._button-card__media--image_je3cs_124 :where(img, picture, video, svg, canvas) {
     display: block;
     width: 100%;
     height: 100%;
@@ -97,7 +136,7 @@
 
 /* === Text === */
 
-._button-card__content_14hpp_100 {
+._button-card__content_je3cs_139 {
     display: flex;
     flex: 1 1 0;
     min-width: 0;
@@ -105,7 +144,7 @@
     gap: var(--_button-card-content-gap);
 }
 
-._button-card__text_14hpp_108 {
+._button-card__text_je3cs_147 {
     display: flex;
     flex: 1 1 0;
     min-width: 0;
@@ -114,8 +153,8 @@
     gap: var(--_button-card-text-gap);
 }
 
-._button-card__title_14hpp_117,
-._button-card__subtitle_14hpp_118 {
+._button-card__title_je3cs_156,
+._button-card__subtitle_je3cs_157 {
     display: -webkit-box;
     margin: 0;
     overflow: hidden;
@@ -125,19 +164,19 @@
     line-clamp: var(--_button-card-line-clamp);
 }
 
-._button-card__title_14hpp_117 {
+._button-card__title_je3cs_156 {
     color: var(--color-semantic-foreground-default);
     font: var(--_button-card-title-font);
 }
 
-._button-card__subtitle_14hpp_118 {
+._button-card__subtitle_je3cs_157 {
     color: var(--color-semantic-foreground-muted);
     font: var(--_button-card-subtitle-font);
 }
 
 /* === Indicator === */
 
-._button-card__indicator_14hpp_140 {
+._button-card__indicator_je3cs_179 {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -145,7 +184,7 @@
     color: var(--color-semantic-foreground-primary-strong);
 }
 
-._button-card__indicator_14hpp_140 svg {
+._button-card__indicator_je3cs_179 svg {
     display: block;
     width: var(--_button-card-indicator);
     height: var(--_button-card-indicator);
@@ -153,7 +192,7 @@
 
 /* === Visually hidden === */
 
-._button-card__sr-only_14hpp_156 {
+._button-card__sr-only_je3cs_195 {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -163,4 +202,8 @@
     white-space: nowrap;
     border: 0;
     clip: rect(0, 0, 0, 0);
-} }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/ButtonCard/ButtonCard.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ButtonCardProps } from './ButtonCard.types';
-export declare const ButtonCard: ({ title, subtitle, size, icon, image, isExternal, externalLinkAriaLabel, className, ref, ...props }: ButtonCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonCard: ({ title, subtitle, size, icon, image, isExternal, externalLinkAriaLabel, className, ref, ...props }: ButtonCardProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=ButtonCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE/E,eAAO,MAAM,UAAU,GAAI,qGAWxB,eAAe,4CAgIjB,CAAC"}
+{"version":3,"file":"ButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAyB,SAAS,EAAO,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE/E,eAAO,MAAM,UAAU,GAAI,qGAWxB,eAAe,4UA4IjB,CAAC"}

package/dist/components/ButtonCard/ButtonCard.js

@@ -1,7 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Open, ChevronRight } from "@dnanpm/icons";
-import focusStyles from "../../styles/utils/focus.module.css.js";
-import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import { elevationStyles, focusStyles } from "../../styles/utils/index.js";
 import styles from "./ButtonCard.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const ButtonCard = ({
@@ -24,6 +23,7 @@ const ButtonCard = ({
     elevationStyles.elevationLow,
     className
   );
+  const withContainer = (element) => size === "dynamic" ? /* @__PURE__ */ jsx("span", { className: styles["button-card-container"], children: element }) : element;
   const IconComponent = icon;
   const media = IconComponent != null ? /* @__PURE__ */ jsx(
     "span",
@@ -76,9 +76,12 @@ const ButtonCard = ({
       children: content
     };
     if (renderLink) {
+      if (size === "dynamic") {
+        return /* @__PURE__ */ jsx("span", { className: styles["button-card-container"], children: renderLink(linkProps) });
+      }
       return /* @__PURE__ */ jsx(Fragment, { children: renderLink(linkProps) });
     }
-    return /* @__PURE__ */ jsx("a", { ...linkProps });
+    return withContainer(/* @__PURE__ */ jsx("a", { ...linkProps }));
   }
   const {
     type = "button",
@@ -88,15 +91,17 @@ const ButtonCard = ({
     renderLink: _renderLink,
     ...buttonProps
   } = props;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type,
-      className: classes,
-      ...buttonProps,
-      children: content
-    }
+  return withContainer(
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: classes,
+        ...buttonProps,
+        children: content
+      }
+    )
   );
 };
 export {

package/dist/components/ButtonCard/ButtonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonCard.js","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\nimport { ChevronRight, Open } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './ButtonCard.module.css';\nimport type { ButtonCardLinkProps, ButtonCardProps } from './ButtonCard.types';\n\nexport const ButtonCard = ({\n    title,\n    subtitle,\n    size = 'medium',\n    icon,\n    image,\n    isExternal = false,\n    externalLinkAriaLabel = 'avautuu uuteen välilehteen',\n    className,\n    ref,\n    ...props\n}: ButtonCardProps) => {\n    const isAnchor = 'href' in props && (props as { href?: string }).href != null;\n\n    const classes = cn(\n        styles['button-card'],\n        styles[`button-card--${size}`],\n        focusStyles.focusable,\n        elevationStyles.elevationLow,\n        className,\n    );\n\n    const IconComponent = icon;\n\n    const media =\n        IconComponent != null ? (\n            <span\n                className={cn(styles['button-card__media'], styles['button-card__media--icon'])}\n                aria-hidden=\"true\"\n            >\n                <IconComponent aria-hidden=\"true\" />\n            </span>\n        ) : image ? (\n            <span className={cn(styles['button-card__media'], styles['button-card__media--image'])}>\n                {image}\n            </span>\n        ) : null;\n\n    const explicitTarget = isAnchor\n        ? (props as { target?: string }).target?.toLowerCase()\n        : undefined;\n    // The link opens a new tab when isExternal is set or the target is _blank.\n    const opensInNewTab = isExternal || explicitTarget === '_blank';\n    const Indicator = opensInNewTab ? Open : ChevronRight;\n\n    const content = (\n        <>\n            {media}\n            <span className={styles['button-card__content']}>\n                <span className={styles['button-card__text']}>\n                    <span className={styles['button-card__title']}>{title}</span>\n                    {subtitle != null && (\n                        <span className={styles['button-card__subtitle']}>{subtitle}</span>\n                    )}\n                </span>\n                <span className={styles['button-card__indicator']} aria-hidden=\"true\">\n                    <Indicator aria-hidden=\"true\" />\n                </span>\n            </span>\n            {opensInNewTab && externalLinkAriaLabel && (\n                <span className={styles['button-card__sr-only']}>\n                    {` (${externalLinkAriaLabel})`}\n                </span>\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const {\n            href,\n            renderLink,\n            target: targetProp,\n            rel,\n            disabled: _disabled,\n            ...safeAnchorProps\n        } = props as unknown as ComponentPropsWithRef<'a'> & {\n            href: string;\n            renderLink?: (props: ButtonCardLinkProps) => ReactNode;\n            disabled?: boolean;\n        };\n\n        // isExternal is authoritative and forces a new tab; an explicit _blank is preserved.\n        const target = isExternal ? '_blank' : targetProp;\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            target,\n            rel: hardenedRel,\n            className: classes,\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        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as unknown as ComponentPropsWithRef<'button'> & {\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            className={classes}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ButtonCard.js","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\nimport { ChevronRight, Open } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { elevationStyles, focusStyles } from '../../styles/utils';\nimport styles from './ButtonCard.module.css';\nimport type { ButtonCardLinkProps, ButtonCardProps } from './ButtonCard.types';\n\nexport const ButtonCard = ({\n    title,\n    subtitle,\n    size = 'medium',\n    icon,\n    image,\n    isExternal = false,\n    externalLinkAriaLabel = 'avautuu uuteen välilehteen',\n    className,\n    ref,\n    ...props\n}: ButtonCardProps) => {\n    const isAnchor = 'href' in props && (props as { href?: string }).href != null;\n\n    const classes = cn(\n        styles['button-card'],\n        styles[`button-card--${size}`],\n        focusStyles.focusable,\n        elevationStyles.elevationLow,\n        className,\n    );\n    const withContainer = (element: ReactNode) =>\n        size === 'dynamic' ? (\n            <span className={styles['button-card-container']}>{element}</span>\n        ) : (\n            element\n        );\n\n    const IconComponent = icon;\n\n    const media =\n        IconComponent != null ? (\n            <span\n                className={cn(styles['button-card__media'], styles['button-card__media--icon'])}\n                aria-hidden=\"true\"\n            >\n                <IconComponent aria-hidden=\"true\" />\n            </span>\n        ) : image ? (\n            <span className={cn(styles['button-card__media'], styles['button-card__media--image'])}>\n                {image}\n            </span>\n        ) : null;\n\n    const explicitTarget = isAnchor\n        ? (props as { target?: string }).target?.toLowerCase()\n        : undefined;\n    // The link opens a new tab when isExternal is set or the target is _blank.\n    const opensInNewTab = isExternal || explicitTarget === '_blank';\n    const Indicator = opensInNewTab ? Open : ChevronRight;\n\n    const content = (\n        <>\n            {media}\n            <span className={styles['button-card__content']}>\n                <span className={styles['button-card__text']}>\n                    <span className={styles['button-card__title']}>{title}</span>\n                    {subtitle != null && (\n                        <span className={styles['button-card__subtitle']}>{subtitle}</span>\n                    )}\n                </span>\n                <span className={styles['button-card__indicator']} aria-hidden=\"true\">\n                    <Indicator aria-hidden=\"true\" />\n                </span>\n            </span>\n            {opensInNewTab && externalLinkAriaLabel && (\n                <span className={styles['button-card__sr-only']}>\n                    {` (${externalLinkAriaLabel})`}\n                </span>\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const {\n            href,\n            renderLink,\n            target: targetProp,\n            rel,\n            disabled: _disabled,\n            ...safeAnchorProps\n        } = props as unknown as ComponentPropsWithRef<'a'> & {\n            href: string;\n            renderLink?: (props: ButtonCardLinkProps) => ReactNode;\n            disabled?: boolean;\n        };\n\n        // isExternal is authoritative and forces a new tab; an explicit _blank is preserved.\n        const target = isExternal ? '_blank' : targetProp;\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            target,\n            rel: hardenedRel,\n            className: classes,\n            children: content,\n        };\n\n        if (renderLink) {\n            if (size === 'dynamic') {\n                return (\n                    <span className={styles['button-card-container']}>{renderLink(linkProps)}</span>\n                );\n            }\n\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return withContainer(<a {...linkProps} />);\n    }\n\n    const {\n        type = 'button',\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as unknown as ComponentPropsWithRef<'button'> & {\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return withContainer(\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            className={classes}\n            {...buttonProps}\n        >\n            {content}\n        </button>,\n    );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,18 +1,20 @@
 require('./ButtonCard.css');
 "use strict";
 const styles = {
-  "button-card": "_button-card_14hpp_1",
-  "button-card--large": "_button-card--large_14hpp_37",
-  "button-card--small": "_button-card--small_14hpp_42",
-  "button-card__media": "_button-card__media_14hpp_59",
-  "button-card__media--icon": "_button-card__media--icon_14hpp_72",
-  "button-card__media--image": "_button-card__media--image_14hpp_85",
-  "button-card__content": "_button-card__content_14hpp_100",
-  "button-card__text": "_button-card__text_14hpp_108",
-  "button-card__title": "_button-card__title_14hpp_117",
-  "button-card__subtitle": "_button-card__subtitle_14hpp_118",
-  "button-card__indicator": "_button-card__indicator_14hpp_140",
-  "button-card__sr-only": "_button-card__sr-only_14hpp_156"
+  "button-card-container": "_button-card-container_je3cs_1",
+  "button-card": "_button-card_je3cs_1",
+  "button-card--large": "_button-card--large_je3cs_44",
+  "button-card--small": "_button-card--small_je3cs_49",
+  "button-card--dynamic": "_button-card--dynamic_je3cs_50",
+  "button-card__media": "_button-card__media_je3cs_91",
+  "button-card__media--icon": "_button-card__media--icon_je3cs_111",
+  "button-card__media--image": "_button-card__media--image_je3cs_124",
+  "button-card__content": "_button-card__content_je3cs_139",
+  "button-card__text": "_button-card__text_je3cs_147",
+  "button-card__title": "_button-card__title_je3cs_156",
+  "button-card__subtitle": "_button-card__subtitle_je3cs_157",
+  "button-card__indicator": "_button-card__indicator_je3cs_179",
+  "button-card__sr-only": "_button-card__sr-only_je3cs_195"
 };
 module.exports = styles;
 //# sourceMappingURL=ButtonCard.module.css.cjs.map

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

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

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

@@ -1,17 +1,19 @@
 import './ButtonCard.css';
 const styles = {
-  "button-card": "_button-card_14hpp_1",
-  "button-card--large": "_button-card--large_14hpp_37",
-  "button-card--small": "_button-card--small_14hpp_42",
-  "button-card__media": "_button-card__media_14hpp_59",
-  "button-card__media--icon": "_button-card__media--icon_14hpp_72",
-  "button-card__media--image": "_button-card__media--image_14hpp_85",
-  "button-card__content": "_button-card__content_14hpp_100",
-  "button-card__text": "_button-card__text_14hpp_108",
-  "button-card__title": "_button-card__title_14hpp_117",
-  "button-card__subtitle": "_button-card__subtitle_14hpp_118",
-  "button-card__indicator": "_button-card__indicator_14hpp_140",
-  "button-card__sr-only": "_button-card__sr-only_14hpp_156"
+  "button-card-container": "_button-card-container_je3cs_1",
+  "button-card": "_button-card_je3cs_1",
+  "button-card--large": "_button-card--large_je3cs_44",
+  "button-card--small": "_button-card--small_je3cs_49",
+  "button-card--dynamic": "_button-card--dynamic_je3cs_50",
+  "button-card__media": "_button-card__media_je3cs_91",
+  "button-card__media--icon": "_button-card__media--icon_je3cs_111",
+  "button-card__media--image": "_button-card__media--image_je3cs_124",
+  "button-card__content": "_button-card__content_je3cs_139",
+  "button-card__text": "_button-card__text_je3cs_147",
+  "button-card__title": "_button-card__title_je3cs_156",
+  "button-card__subtitle": "_button-card__subtitle_je3cs_157",
+  "button-card__indicator": "_button-card__indicator_je3cs_179",
+  "button-card__sr-only": "_button-card__sr-only_je3cs_195"
 };
 export {
   styles as default

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

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

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

@@ -5,8 +5,9 @@ import { ComponentPropsWithRef, ComponentType, ReactNode, SVGProps } from 'react
  * - `large`  — Large text title (Heading XS).
  * - `medium` — Default title (Label LG Bold).
  * - `small`  — Compact vertical layout (Label MD title).
+ * - `dynamic` — Size changes between small, medium, and large based on the container width.
  */
-export type ButtonCardSize = 'large' | 'medium' | 'small';
+export type ButtonCardSize = 'large' | 'medium' | 'small' | 'dynamic';
 /** SVG icon component, for example `ChevronRight` from `@dnanpm/icons`. */
 export type ButtonCardIcon = ComponentType<SVGProps<SVGSVGElement>>;
 export interface ButtonCardLinkProps extends ComponentPropsWithRef<'a'> {
@@ -27,7 +28,7 @@ interface ButtonCardBaseProps {
      */
     readonly subtitle?: ReactNode;
     /**
-     * Size variant controlling layout and typography.
+     * Size variant controlling layout and typography. `dynamic` responds to the available container width.
      * @default 'medium'
      */
     readonly size?: ButtonCardSize;

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/ButtonCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvF;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpE,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;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAC3C;AAED;;;GAGG;AACH,KAAK,oBAAoB,GACnB;IACI,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CAC1B,GACD;IACI,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC9B,CAAC;AAER,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,oBAAoB,GACpB,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,sDAAsD;IACtD,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;IAC5B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAC7B,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,oBAAoB,GACpB,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,mBAAmB,GAAG,UAAU,CAAC,GAAG;IACvE,mDAAmD;IACnD,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;;;;;;;;OAQG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;CACnE,CAAC;AAEN;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"ButtonCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/ButtonCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvF;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpE,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;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAC3C;AAED;;;GAGG;AACH,KAAK,oBAAoB,GACnB;IACI,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CAC1B,GACD;IACI,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC9B,CAAC;AAER,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,oBAAoB,GACpB,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,sDAAsD;IACtD,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;IAC5B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAC7B,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,oBAAoB,GACpB,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,mBAAmB,GAAG,UAAU,CAAC,GAAG;IACvE,mDAAmD;IACnD,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;;;;;;;;OAQG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;CACnE,CAAC;AAEN;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

package/dist/components/Checkbox/Checkbox.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const icons = require("@dnanpm/icons");
+const react = require("react");
+const index = require("../../styles/utils/index.cjs");
+const Checkbox_module = require("./Checkbox.module.css.cjs");
+const isRenderable = require("../../utils/isRenderable/isRenderable.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Checkbox = ({
+  label,
+  showLabel = true,
+  description,
+  indeterminate = false,
+  error = false,
+  errorMessage,
+  onCheckedChange,
+  onChange,
+  id,
+  className,
+  style,
+  disabled,
+  required,
+  ref,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) => {
+  const generatedId = react.useId();
+  const descriptionId = react.useId();
+  const errorId = react.useId();
+  const inputId = id ?? generatedId;
+  const hasDescription = isRenderable.isRenderable(description);
+  const hasErrorMessage = error && isRenderable.isRenderable(errorMessage);
+  const describedBy = [
+    hasDescription ? descriptionId : void 0,
+    hasErrorMessage ? errorId : void 0,
+    ariaDescribedBy
+  ].filter(Boolean).join(" ") || void 0;
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.target.checked);
+    event.target.indeterminate = indeterminate;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn.cn(Checkbox_module.default["checkbox"], error && Checkbox_module.default["checkbox--error"], className),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Checkbox_module.default["checkbox__control"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...props,
+              ref: (node) => {
+                if (node) node.indeterminate = indeterminate;
+                if (typeof ref === "function") return ref(node);
+                if (ref) ref.current = node;
+                return void 0;
+              },
+              type: "checkbox",
+              id: inputId,
+              className: cn.cn(Checkbox_module.default["checkbox__input"], index.focusStyles.focusable),
+              disabled,
+              required,
+              "aria-describedby": describedBy,
+              "aria-invalid": ariaInvalid ?? (error || void 0),
+              onChange: handleChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            icons.CheckFilled,
+            {
+              "aria-hidden": "true",
+              className: cn.cn(Checkbox_module.default["checkbox__icon"], Checkbox_module.default["checkbox__icon--check"])
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            icons.MinusFilled,
+            {
+              "aria-hidden": "true",
+              className: cn.cn(Checkbox_module.default["checkbox__icon"], Checkbox_module.default["checkbox__icon--minus"])
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn.cn(Checkbox_module.default["checkbox__label"], !showLabel && Checkbox_module.default["checkbox__sr-only"]),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Checkbox_module.default["checkbox__required"], "aria-hidden": "true", children: "*" })
+            ]
+          }
+        ),
+        hasDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: Checkbox_module.default["checkbox__description"], children: description }),
+        hasErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: Checkbox_module.default["checkbox__error"], children: errorMessage })
+      ]
+    }
+  );
+};
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckFilled, MinusFilled } from '@dnanpm/icons';\nimport { useId } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { focusStyles } from '../../styles/utils';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport type { CheckboxProps } from './Checkbox.types';\nimport styles from './Checkbox.module.css';\n\nexport const Checkbox = ({\n    label,\n    showLabel = true,\n    description,\n    indeterminate = false,\n    error = false,\n    errorMessage,\n    onCheckedChange,\n    onChange,\n    id,\n    className,\n    style,\n    disabled,\n    required,\n    ref,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    ...props\n}: CheckboxProps) => {\n    const generatedId = useId();\n    const descriptionId = useId();\n    const errorId = useId();\n    const inputId = id ?? generatedId;\n\n    const hasDescription = isRenderable(description);\n    const hasErrorMessage = error && isRenderable(errorMessage);\n\n    const describedBy =\n        [\n            hasDescription ? descriptionId : undefined,\n            hasErrorMessage ? errorId : undefined,\n            ariaDescribedBy,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined;\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event);\n        onCheckedChange?.(event.target.checked);\n        // The browser clears `indeterminate` on click. Restore it from the prop, so it stays\n        // until the consumer sets the prop to false, even when nothing re-renders.\n        event.target.indeterminate = indeterminate;\n    };\n\n    return (\n        <div\n            className={cn(styles['checkbox'], error && styles['checkbox--error'], className)}\n            style={style}\n        >\n            <span className={styles['checkbox__control']}>\n                <input\n                    {...props}\n                    ref={(node) => {\n                        // `indeterminate` has no HTML attribute, so it is set on the DOM node.\n                        // The inline callback runs on every render, so a changed prop is applied.\n                        // A cleanup function returned by a callback ref is passed on to React.\n                        if (node) node.indeterminate = indeterminate;\n                        if (typeof ref === 'function') return ref(node);\n                        if (ref) ref.current = node;\n                        return undefined;\n                    }}\n                    type=\"checkbox\"\n                    id={inputId}\n                    className={cn(styles['checkbox__input'], focusStyles.focusable)}\n                    disabled={disabled}\n                    required={required}\n                    aria-describedby={describedBy}\n                    aria-invalid={ariaInvalid ?? (error || undefined)}\n                    onChange={handleChange}\n                />\n                <CheckFilled\n                    aria-hidden=\"true\"\n                    className={cn(styles['checkbox__icon'], styles['checkbox__icon--check'])}\n                />\n                <MinusFilled\n                    aria-hidden=\"true\"\n                    className={cn(styles['checkbox__icon'], styles['checkbox__icon--minus'])}\n                />\n            </span>\n            <label\n                htmlFor={inputId}\n                className={cn(styles['checkbox__label'], !showLabel && styles['checkbox__sr-only'])}\n            >\n                {label}\n                {required && (\n                    <span className={styles['checkbox__required']} aria-hidden=\"true\">\n                        *\n                    </span>\n                )}\n            </label>\n            {hasDescription && (\n                <div id={descriptionId} className={styles['checkbox__description']}>\n                    {description}\n                </div>\n            )}\n            {hasErrorMessage && (\n                <div id={errorId} className={styles['checkbox__error']}>\n                    {errorMessage}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["useId","isRenderable","jsxs","cn","styles","jsx","focusStyles","CheckFilled","MinusFilled"],"mappings":"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"}