@dnanpm/ui-components 0.0.4 → 0.0.5

package/dist/styles.css

@@ -191,20 +191,7 @@ html {
 
     scroll-behavior: smooth;
 }
-/**
- * Box Component Styles
- *
- * Design tokens are consumed via CSS custom properties (variables).
- * These variables come from @dnanpm/design-tokens package.
- *
- * Elevation shadows based on DNA Design System specifications:
- * - None: No shadow
- * - Low: Subtle depth (0 2px 16px rgba(18, 18, 18, 0.06))
- * - High: Medium depth (0 6px 24px rgba(18, 18, 18, 0.08))
- * - Extra High: Maximum depth (0 8px 64px rgba(18, 18, 18, 0.16))
- */
-
-._box_5e7g9_14 {
+._box_1wdiz_1 {
     display: block;
     padding: var(--spacing-ui-md, 1rem);
     border-radius: var(--radius-semantic-md, 0.5rem);
@@ -213,19 +200,19 @@ html {
 }
 
 /* Elevation Variants */
-._box--none_5e7g9_23 {
+._box--none_1wdiz_10 {
     box-shadow: none;
 }
 
-._box--low_5e7g9_27 {
+._box--low_1wdiz_14 {
     box-shadow: 0 2px 16px rgba(18, 18, 18, 0.06);
 }
 
-._box--high_5e7g9_31 {
+._box--high_1wdiz_18 {
     box-shadow: 0 6px 24px rgba(18, 18, 18, 0.08);
 }
 
-._box--extraHigh_5e7g9_35 {
+._box--extraHigh_1wdiz_22 {
     box-shadow: 0 8px 64px rgba(18, 18, 18, 0.16);
 }
 /**
@@ -325,3 +312,245 @@ html {
     /* 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 {
+    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;
+}
+
+._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;
+}
+
+._tooltip__content_1h5uw_50 {
+    display: inline-flex;
+    align-items: center;
+}
+
+._tooltip__arrow_1h5uw_55 {
+    display: flex;
+}
+
+._tooltip__arrow_1h5uw_55[data-side='top'] {
+    bottom: -8px;
+    rotate: 180deg;
+}
+
+._tooltip__arrow_1h5uw_55[data-side='bottom'] {
+    top: -8px;
+}
+
+._tooltip__arrow_1h5uw_55[data-side='left'] {
+    right: -13px;
+    rotate: 90deg;
+}
+
+._tooltip__arrow_1h5uw_55[data-side='right'] {
+    left: -13px;
+    rotate: -90deg;
+}
+
+._tooltip__arrowFill_1h5uw_78 {
+    fill: var(--colors-primitive-neutral-0, #ffffff);
+}
+
+._tooltip__arrowOuterStroke_1h5uw_82 {
+    @media (prefers-color-scheme: light) {
+        fill: var(--colors-primitive-neutral-200, #e5e5e5);
+    }
+}
+
+._tooltip__arrowInnerStroke_1h5uw_88 {
+    @media (prefers-color-scheme: dark) {
+        fill: var(--colors-primitive-neutral-300, #d4d4d4);
+    }
+}

package/dist/utils/cn/cn.d.ts

@@ -0,0 +1,16 @@
+export type CnDictionary = Record<string, boolean | null | undefined>;
+export type CnInput = string | false | null | undefined | CnDictionary | ReadonlyArray<CnInput>;
+/**
+ * Composes CSS Module class names, optional consumer className values, and conditional maps.
+ *
+ * Supported inputs:
+ * - string class names
+ * - object maps where truthy values include the key
+ * - nested arrays of supported inputs
+ * - falsy values, which are ignored
+ *
+ * Prefer this utility over direct clsx imports so class name composition stays consistent across
+ * the package and can be updated in one place.
+ */
+export declare function cn(...inputs: CnInput[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../src/utils/cn/cn.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEtE,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;AAEhG;;;;;;;;;;;GAWG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAE/C"}

package/dist/utils/cn/index.d.ts

@@ -0,0 +1,3 @@
+export { cn } from './cn';
+export type { CnDictionary, CnInput } from './cn';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/cn/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/cn/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC"}

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { cn } from './cn';
+export type { CnDictionary, CnInput } from './cn/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",
@@ -16,13 +16,17 @@
         },
         "./styles.css": "./dist/styles.css"
     },
+    "sideEffects": [
+        "**/*.css"
+    ],
     "files": [
         "dist"
     ],
     "scripts": {
         "build": "tsc --project tsconfig.build.json && vite build",
         "dev": "vite build --watch",
-        "test": "vitest run",
+        "gen:component": "plop --plopfile ./scripts/template-generators/plopfile.mjs component",
+        "test": "vitest run --coverage",
         "test:watch": "vitest",
         "format": "prettier --write .",
         "format:check": "prettier --check .",
@@ -46,6 +50,10 @@
     "engines": {
         "node": ">=24"
     },
+    "dependencies": {
+        "clsx": "^2.1.1",
+        "@base-ui/react": "^1.3.0"
+    },
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0"
@@ -55,22 +63,23 @@
         "@repo/eslint-config": "workspace:*",
         "@repo/typescript-config": "workspace:*",
         "@storybook/react-vite": "^10.3.1",
-        "@storybook/addon-docs": "^10.3.1",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.4",
+        "@vitest/coverage-v8": "^4.1.1",
         "eslint": "^9.39.2",
         "jsdom": "^28.1.0",
+        "plop": "^4.0.5",
         "prettier": "^3.8.1",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "typescript": "^5.9.3",
         "vite": "^7.3.1",
         "vite-plugin-dts": "^4.5.4",
-        "vitest": "^4.0.18"
+        "vitest": "^4.1.1"
     },
     "repository": {
         "type": "git",

package/dist/utils/cn.d.ts

@@ -1,6 +0,0 @@
-/**
- * Utility function to conditionally join class names.
- * A minimal alternative to clsx/classnames without external dependencies.
- */
-export declare function cn(...inputs: (string | undefined | null | false | Record<string, boolean>)[]): string;
-//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,EAAE,CACd,GAAG,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,GAC3E,MAAM,CAkBR"}