@dnanpm/ui-components 0.0.5 → 0.1.0

package/dist/styles/utils/elevation.css

@@ -0,0 +1,28 @@
+@layer dna-design-system {/* 
+ * TODO: Replace local variables (_elevation-semantic-low, high and extra-high) 
+ * with official design tokens once elevation tokens are added to the design token set
+ */
+
+._elevationLow_1rmn9_6 {
+    --_elevation-semantic-low: 0px 2px 16px 0px rgba(18, 18, 18, 0.06);
+    --_elevation-style: var(--_elevation-semantic-low);
+}
+
+._elevationHigh_1rmn9_11 {
+    --_elevation-semantic-high: 0px 4px 24px 0px rgba(18, 18, 18, 0.08);
+    --_elevation-style: var(--_elevation-semantic-high);
+}
+
+._elevationExtraHigh_1rmn9_16 {
+    --_elevation-semantic-extra-high: 0px 8px 64px 0px rgba(18, 18, 18, 0.16);
+    --_elevation-style: var(--_elevation-semantic-extra-high);
+}
+
+._elevationLow_1rmn9_6,
+._elevationHigh_1rmn9_11,
+._elevationExtraHigh_1rmn9_16 {
+    border: var(--borderwidth-semantic-xs) solid var(--colors-semantic-border-neutral-base);
+    box-shadow: var(--_elevation-style);
+    border-radius: var(--radius-semantic-md);
+}
+}

package/dist/styles/utils/elevation.module.css.cjs

@@ -0,0 +1,10 @@
+require('./elevation.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const elevationLow = "_elevationLow_1rmn9_6";
+const elevationStyles = {
+  elevationLow
+};
+exports.default = elevationStyles;
+exports.elevationLow = elevationLow;
+//# sourceMappingURL=elevation.module.css.cjs.map

package/dist/styles/utils/elevation.module.css.cjs.map

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

package/dist/styles/utils/elevation.module.css.js

@@ -0,0 +1,10 @@
+import './elevation.css';
+const elevationLow = "_elevationLow_1rmn9_6";
+const elevationStyles = {
+  elevationLow
+};
+export {
+  elevationStyles as default,
+  elevationLow
+};
+//# sourceMappingURL=elevation.module.css.js.map

package/dist/styles/utils/elevation.module.css.js.map

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

package/dist/styles/utils/focus.css

@@ -0,0 +1,59 @@
+@layer dna-design-system {._focusable_1cr46_1 {
+    /* Marker class for shared focus treatment */
+}
+
+._focusable_1cr46_1:focus {
+    outline-color: transparent;
+}
+
+._focusable_1cr46_1:focus-visible {
+    /* Transparent outline ensures a visible ring fallback in forced colors. */
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow:
+        0 0 0 2px var(--colors-semantic-utility-focus-soft),
+        0 0 0 4px var(--colors-semantic-utility-focus-strong);
+}
+
+@media (forced-colors: active) {
+    ._focusable_1cr46_1:focus-visible {
+        outline-color: Highlight;
+        box-shadow: none;
+    }
+}
+
+._focusableInset_1cr46_25 {
+    /* Marker class for inset focus treatment (ring stays inside the element boundary) */
+}
+
+._focusableInset_1cr46_25:focus {
+    outline-color: transparent;
+}
+
+._focusableInset_1cr46_25:focus-visible {
+    outline: 2px solid transparent;
+    box-shadow:
+        inset 0 0 0 2px var(--colors-semantic-utility-focus-strong),
+        inset 0 0 0 4px var(--colors-semantic-utility-focus-soft);
+}
+
+@media (forced-colors: active) {
+    ._focusableInset_1cr46_25:focus-visible {
+        outline-color: Highlight;
+        box-shadow: none;
+    }
+}
+
+._focusClipGuard_1cr46_47 {
+    /*
+     * Prevents focus rings from being clipped when the container uses overflow: hidden.
+     *
+     * Usage:
+     * - Apply this class to the clipping container.
+     * - Override --focus-clip-guard-bleed-inline when a component needs a custom bleed amount.
+     */
+    --focus-clip-guard-bleed-inline: var(--spacing-ui-xxs);
+    margin-inline: calc(var(--focus-clip-guard-bleed-inline) * -1);
+    padding-inline: var(--focus-clip-guard-bleed-inline);
+}
+}

package/dist/styles/utils/focus.module.css.cjs

@@ -0,0 +1,16 @@
+require('./focus.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const focusable = "_focusable_1cr46_1";
+const focusableInset = "_focusableInset_1cr46_25";
+const focusClipGuard = "_focusClipGuard_1cr46_47";
+const focusStyles = {
+  focusable,
+  focusableInset,
+  focusClipGuard
+};
+exports.default = focusStyles;
+exports.focusClipGuard = focusClipGuard;
+exports.focusable = focusable;
+exports.focusableInset = focusableInset;
+//# sourceMappingURL=focus.module.css.cjs.map

package/dist/styles/utils/focus.module.css.cjs.map

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

package/dist/styles/utils/focus.module.css.js

@@ -0,0 +1,16 @@
+import './focus.css';
+const focusable = "_focusable_1cr46_1";
+const focusableInset = "_focusableInset_1cr46_25";
+const focusClipGuard = "_focusClipGuard_1cr46_47";
+const focusStyles = {
+  focusable,
+  focusableInset,
+  focusClipGuard
+};
+export {
+  focusStyles as default,
+  focusClipGuard,
+  focusable,
+  focusableInset
+};
+//# sourceMappingURL=focus.module.css.js.map

package/dist/styles/utils/focus.module.css.js.map

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

package/dist/styles/utils/text-decoration.css

@@ -0,0 +1,7 @@
+@layer dna-design-system {._underlineLink_1nw3t_1 {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: from-font;
+}
+}

package/dist/styles/utils/text-decoration.module.css.cjs

@@ -0,0 +1,10 @@
+require('./text-decoration.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const underlineLink = "_underlineLink_1nw3t_1";
+const textDecorationStyles = {
+  underlineLink
+};
+exports.default = textDecorationStyles;
+exports.underlineLink = underlineLink;
+//# sourceMappingURL=text-decoration.module.css.cjs.map

package/dist/styles/utils/text-decoration.module.css.cjs.map

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

package/dist/styles/utils/text-decoration.module.css.js

@@ -0,0 +1,10 @@
+import './text-decoration.css';
+const underlineLink = "_underlineLink_1nw3t_1";
+const textDecorationStyles = {
+  underlineLink
+};
+export {
+  textDecorationStyles as default,
+  underlineLink
+};
+//# sourceMappingURL=text-decoration.module.css.js.map

package/dist/styles/utils/text-decoration.module.css.js.map

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

package/dist/styles.css

@@ -1,3 +1,5 @@
+@layer dna-design-system {
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -181,6 +183,15 @@
   --borderwidth-primitive-size5: 5px;
   --borderwidth-primitive-size6: 6px;
 }
+}
+
+@layer dna-design-system {
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
 
 html {
     font-synthesis: none;
@@ -191,366 +202,57 @@ html {
 
     scroll-behavior: smooth;
 }
-._box_1wdiz_1 {
-    display: block;
-    padding: var(--spacing-ui-md, 1rem);
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    transition: box-shadow 0.2s ease-in-out;
-}
-
-/* Elevation Variants */
-._box--none_1wdiz_10 {
-    box-shadow: none;
-}
-
-._box--low_1wdiz_14 {
-    box-shadow: 0 2px 16px rgba(18, 18, 18, 0.06);
-}
-
-._box--high_1wdiz_18 {
-    box-shadow: 0 6px 24px rgba(18, 18, 18, 0.08);
-}
-
-._box--extraHigh_1wdiz_22 {
-    box-shadow: 0 8px 64px rgba(18, 18, 18, 0.16);
-}
-/**
- * Button Component Styles
- *
- * Design tokens are consumed via CSS custom properties (variables).
- * These variables come from @dnanpm/design-tokens package.
- *
- * Examples:
- * - Colors: var(--colors-primitive-pink-500)
- * - Spacing: var(--spacing-ui-md)
- * - Border radius: var(--radius-semantic-md)
- *
- * Fallback values are defined in src/styles/base.css
- */
-
-._button_1p878_15 {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 2.5rem;
-    padding: 0 var(--spacing-ui-md, 1rem);
-    font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-        sans-serif;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    border: 1px solid transparent;
-    cursor: pointer;
-    transition: all 0.15s ease-in-out;
-    text-decoration: none;
-    white-space: nowrap;
-}
-
-._button_1p878_15:focus-visible {
-    outline: 2px solid var(--colors-primitive-utility-focusstrong, #1d4ed8);
-    outline-offset: 2px;
-}
-
-._button_1p878_15:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-/* Button Variants */
-._button--primary_1p878_45 {
-    background-color: var(--colors-primitive-pink-500, #ec4899);
-    color: white;
-}
-
-._button--primary_1p878_45:hover:not(:disabled) {
-    background-color: var(--colors-primitive-pink-600, #db2777);
-}
-
-._button--primary_1p878_45:active:not(:disabled) {
-    background-color: var(--colors-primitive-pink-400, #f472b6);
-}
-
-._button--secondary_1p878_58 {
-    background-color: var(--colors-primitive-neutral-100, #f5f5f5);
-    color: var(--colors-primitive-neutral-900, #171717);
-    border-color: var(--colors-primitive-neutral-300, #d4d4d4);
-}
-
-._button--secondary_1p878_58:hover:not(:disabled) {
-    background-color: var(--colors-primitive-neutral-200, #e5e5e5);
-}
-
-._button--secondary_1p878_58:active:not(:disabled) {
-    background-color: var(--colors-primitive-neutral-300, #d4d4d4);
-}
-
-/* Size Variants */
-._button--default_1p878_73 {
-    /* Default size (already set in base styles) */
-}
-
-._button--small_1p878_77 {
-    height: 2rem;
-    padding: 0 var(--spacing-ui-sm, 0.75rem);
-    font-size: 0.75rem;
-}
-
-/* Layout Modifiers */
-._button--fullWidth_1p878_84 {
-    width: 100%;
-}
-
-/* State Modifiers */
-._button--loading_1p878_89 {
-    opacity: 0.7;
-    cursor: wait;
-}
-
-._button--loading_1p878_89:hover {
-    /* Prevent hover effects when loading */
-    background-color: inherit;
-}
-._dialog__backdrop_p6ll3_1 {
-    position: fixed;
-    inset: 0;
-    min-height: 100dvh;
-    background: rgb(23 23 23 / 0.5);
-    backdrop-filter: blur(2px);
-    transition:
-        opacity 180ms ease,
-        backdrop-filter 180ms ease;
-
-    @supports (-webkit-touch-callout: none) {
-        position: absolute;
-    }
-}
-
-._dialog__backdrop_p6ll3_1[data-starting-style],
-._dialog__backdrop_p6ll3_1[data-ending-style] {
-    opacity: 0;
-    backdrop-filter: blur(0);
-}
-
-._dialog__viewport_p6ll3_22 {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
-}
-
-._dialog__popup_p6ll3_31 {
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: min(100%, 36rem);
-    max-height: min(80vh, 44rem);
-    min-height: 0;
-    overflow: hidden;
-    border-radius: var(--radius-semantic-lg, 0.75rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    color: var(--colors-primitive-neutral-900, #171717);
-    outline: 1px solid var(--colors-primitive-neutral-200, #e5e5e5);
-    box-shadow:
-        0 24px 48px rgb(23 23 23 / 0.18),
-        0 12px 24px rgb(23 23 23 / 0.08);
-    transition:
-        opacity 180ms ease,
-        transform 180ms ease;
-}
-
-._dialog__popup_p6ll3_31[data-starting-style],
-._dialog__popup_p6ll3_31[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.98) translateY(0.5rem);
-}
-
-._dialog__popup--sm_p6ll3_58 {
-    width: min(100%, 28rem);
-}
-
-._dialog__popup--md_p6ll3_62 {
-    width: min(100%, 36rem);
-}
-
-._dialog__popup--lg_p6ll3_66 {
-    width: min(100%, 44rem);
-}
-
-._dialog__header_p6ll3_70 {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1.5rem 1.5rem 0;
-}
-
-._dialog__titleGroup_p6ll3_78 {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-._dialog__title_p6ll3_78 {
-    margin: 0;
-    font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-        sans-serif;
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.75rem;
-}
-
-._dialog__description_p6ll3_95 {
+html,
+body {
     margin: 0;
-    color: var(--colors-primitive-neutral-600, #525252);
-    font-size: 0.95rem;
-    line-height: 1.5rem;
-}
-
-._dialog__close_p6ll3_102 {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    border: 1px solid var(--colors-primitive-neutral-200, #e5e5e5);
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    color: var(--colors-primitive-neutral-600, #525252);
-    transition:
-        background-color 120ms ease,
-        color 120ms ease,
-        border-color 120ms ease;
-}
-
-._dialog__close_p6ll3_102:focus-visible {
-    outline: 2px solid var(--colors-primitive-utility-focusstrong, #1d4ed8);
-    outline-offset: 2px;
+    padding: 0;
 }
 
-._dialog__close_p6ll3_102:hover {
-    background-color: var(--colors-primitive-neutral-100, #f5f5f5);
-    color: var(--colors-primitive-neutral-900, #171717);
-}
-
-._dialog__closeIcon_p6ll3_129 {
-    width: 1.125rem;
-    height: 1.125rem;
-}
-
-._dialog__body_p6ll3_134 {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: auto;
-    padding: 1.25rem 1.5rem;
-    color: var(--colors-primitive-neutral-700, #404040);
-    font-size: 0.95rem;
-    line-height: 1.6rem;
-}
-
-._dialog__footer_p6ll3_144 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    padding: 0 1.5rem 1.5rem;
-}
-._tooltip__positioner_1h5uw_1 {
-    height: var(--positioner-height);
-    width: var(--positioner-width);
-    max-width: var(--available-width);
-}
-
-._tooltip_1h5uw_1 {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    min-height: 2.25rem;
-    max-width: min(20rem, calc(100vw - 1.5rem));
-    padding: 0.5rem 0.75rem;
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    color: var(--colors-primitive-neutral-900, #171717);
-    font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-        sans-serif;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    transform-origin: var(--transform-origin);
-    transition:
-        opacity 150ms ease,
-        transform 150ms ease;
-
-    @media (prefers-color-scheme: light) {
-        outline: 1px solid var(--colors-primitive-neutral-200, #e5e5e5);
-        box-shadow:
-            0 12px 24px -12px rgb(23 23 23 / 0.22),
-            0 6px 12px -8px rgb(23 23 23 / 0.14);
-    }
-
-    @media (prefers-color-scheme: dark) {
-        outline: 1px solid var(--colors-primitive-neutral-300, #d4d4d4);
-        outline-offset: -1px;
-    }
-}
-
-._tooltip_1h5uw_1[data-starting-style],
-._tooltip_1h5uw_1[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.92);
-}
-
-._tooltip_1h5uw_1[data-instant] {
-    transition: none;
+img,
+picture,
+svg,
+video {
+    display: block;
+    max-width: 100%;
 }
-
-._tooltip__content_1h5uw_50 {
-    display: inline-flex;
-    align-items: center;
 }
 
-._tooltip__arrow_1h5uw_55 {
-    display: flex;
-}
+@layer dna-design-system {
 
-._tooltip__arrow_1h5uw_55[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-}
+:root {
+    /* Example variables for fonts, these will be replaced with actual design tokens */
+    --font-family-text: 'DNA Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --font-family-heading: 'DNA Heading', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
-._tooltip__arrow_1h5uw_55[data-side='bottom'] {
-    top: -8px;
-}
+    --font-size-xxs: 0.625rem; /* 10px */
+    --font-size-xs: 0.75rem; /* 12px */
+    --font-size-sm: 0.875rem; /* 14px */
+    --font-size-default: 1rem;
+    --font-size-lg: 1.125rem; /* 18px */
+    --font-size-xl: 1.25rem; /* 20px */
 
-._tooltip__arrow_1h5uw_55[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-}
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semi-bold: 600;
+    --font-weight-bold: 700;
+    --font-weight-black: 900;
 
-._tooltip__arrow_1h5uw_55[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
+    --line-height-default: 1.25;
+    --line-height-text: 1.5;
 }
 
-._tooltip__arrowFill_1h5uw_78 {
-    fill: var(--colors-primitive-neutral-0, #ffffff);
+html {
+    font-family: var(--font-family-text);
+    font-size: var(--font-size-default);
+    line-height: var(--line-height-default);
 }
 
-._tooltip__arrowOuterStroke_1h5uw_82 {
-    @media (prefers-color-scheme: light) {
-        fill: var(--colors-primitive-neutral-200, #e5e5e5);
-    }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
 }
-
-._tooltip__arrowInnerStroke_1h5uw_88 {
-    @media (prefers-color-scheme: dark) {
-        fill: var(--colors-primitive-neutral-300, #d4d4d4);
-    }
 }

package/dist/utils/cn/cn.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+function cn(...inputs) {
+  return clsx(...inputs);
+}
+exports.cn = cn;
+//# sourceMappingURL=cn.cjs.map

package/dist/utils/cn/cn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.cjs","sources":["../../../src/utils/cn/cn.ts"],"sourcesContent":["import clsx from 'clsx';\n\nexport type CnDictionary = Record<string, boolean | null | undefined>;\n\nexport type CnInput = string | false | null | undefined | CnDictionary | ReadonlyArray<CnInput>;\n\n/**\n * Composes CSS Module class names, optional consumer className values, and conditional maps.\n *\n * Supported inputs:\n * - string class names\n * - object maps where truthy values include the key\n * - nested arrays of supported inputs\n * - falsy values, which are ignored\n *\n * Prefer this utility over direct clsx imports so class name composition stays consistent across\n * the package and can be updated in one place.\n */\nexport function cn(...inputs: CnInput[]): string {\n    return clsx(...inputs);\n}\n"],"names":[],"mappings":";;;AAkBO,SAAS,MAAM,QAA2B;AAC7C,SAAO,KAAK,GAAG,MAAM;AACzB;;"}

package/dist/utils/cn/cn.js

@@ -0,0 +1,8 @@
+import clsx from "clsx";
+function cn(...inputs) {
+  return clsx(...inputs);
+}
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/utils/cn/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sources":["../../../src/utils/cn/cn.ts"],"sourcesContent":["import clsx from 'clsx';\n\nexport type CnDictionary = Record<string, boolean | null | undefined>;\n\nexport type CnInput = string | false | null | undefined | CnDictionary | ReadonlyArray<CnInput>;\n\n/**\n * Composes CSS Module class names, optional consumer className values, and conditional maps.\n *\n * Supported inputs:\n * - string class names\n * - object maps where truthy values include the key\n * - nested arrays of supported inputs\n * - falsy values, which are ignored\n *\n * Prefer this utility over direct clsx imports so class name composition stays consistent across\n * the package and can be updated in one place.\n */\nexport function cn(...inputs: CnInput[]): string {\n    return clsx(...inputs);\n}\n"],"names":[],"mappings":";AAkBO,SAAS,MAAM,QAA2B;AAC7C,SAAO,KAAK,GAAG,MAAM;AACzB;"}