@dnanpm/ui-components 0.0.4 → 0.1.0

package/dist/components/Notification/Notification.css

@@ -0,0 +1,91 @@
+@layer dna-design-system {/**
+ * Notification Component Styles
+ *
+ * Design tokens are consumed via CSS custom properties (variables).
+ * These variables come from @dnanpm/design-tokens package.
+ */
+
+._notification_1glup_8 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-ui-md);
+    padding-right: var(--spacing-ui-lg);
+    border: 2px solid var(--notification-color);
+    border-radius: var(--radius-semantic-sm);
+    overflow: clip;
+}
+
+/* Variant colors */
+._notification--info_1glup_19 {
+    --notification-color: var(--colors-semantic-status-info);
+}
+
+._notification--success_1glup_23 {
+    --notification-color: var(--colors-semantic-status-success);
+}
+
+._notification--warning_1glup_27 {
+    --notification-color: var(--colors-semantic-status-warning);
+}
+
+._notification--error_1glup_31 {
+    --notification-color: var(--colors-semantic-status-error);
+}
+
+/* Icon container */
+._notification__icon-container_1glup_36 {
+    /* The colored area size should be 48x48px on one line content, so we adjust padding based on whether the border is present or not */
+    --_icon-padding-with-border: 10px;
+    --_icon-padding-without-border: 12px;
+
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    padding: var(--_icon-padding-with-border) var(--_icon-padding-without-border)
+        var(--_icon-padding-with-border) var(--_icon-padding-with-border);
+    background-color: var(--notification-color);
+    color: var(--colors-semantic-foreground-inverse);
+}
+
+._notification__icon_1glup_36 {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 auto;
+}
+
+/* Content */
+._notification__content_1glup_59 {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--spacing-ui-xs) 0;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--colors-semantic-foreground-default);
+    text-wrap: pretty;
+}
+
+/* Close button */
+._notification__close_1glup_70 {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    /* Negative margin to offset the button's size and maintain consistent spacing with the content */
+    margin: 0 calc(var(--spacing-ui-xxs) * -1);
+    border: none;
+    border-radius: var(--radius-semantic-sm);
+    background: none;
+    color: var(--colors-semantic-foreground-default);
+    cursor: pointer;
+}
+
+._notification__close_1glup_70 svg {
+    width: 24px;
+    height: 24px;
+}
+}

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,3 @@
+import { NotificationProps } from './Notification.types';
+export declare const Notification: import('react').ForwardRefExoticComponent<NotificationProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Notification.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,8GAsCvB,CAAC"}

package/dist/components/Notification/Notification.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Error, Warning, Check, Info, Close } from "@dnanpm/icons";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./Notification.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const variantIcons = {
+  info: Info,
+  success: Check,
+  warning: Warning,
+  error: Error
+};
+const variantRoles = {
+  info: "status",
+  success: "status",
+  warning: "alert",
+  error: "alert"
+};
+const Notification = forwardRef(function Notification2({
+  variant,
+  children,
+  closable = false,
+  onClose,
+  closeLabel = "Sulje ilmoitus",
+  className,
+  ...props
+}, ref) {
+  const Icon = variantIcons[variant];
+  const role = variantRoles[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role,
+      className: cn(styles.notification, styles[`notification--${variant}`], className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles["notification__icon-container"], children: /* @__PURE__ */ jsx(Icon, { className: styles.notification__icon, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx("div", { className: styles.notification__content, children }),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(styles.notification__close, focusStyles.focusable),
+            onClick: onClose,
+            "aria-label": closeLabel,
+            children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+Notification.displayName = "Notification";
+export {
+  Notification
+};
+//# sourceMappingURL=Notification.js.map

package/dist/components/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef, type ComponentType, type SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(function Notification(\n    {\n        variant,\n        children,\n        closable = false,\n        onClose,\n        closeLabel = 'Sulje ilmoitus',\n        className,\n        ...props\n    },\n    ref,\n) {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n            {...props}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n});\n\nNotification.displayName = 'Notification';\n"],"names":["ErrorIcon","Notification"],"mappings":";;;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAOA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,WAA8C,SAASC,cAC/E;AAAA,EACI;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACP,GACA,KACF;AACE,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAC/E,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,8BAA8B,GACjD,UAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACA,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAwB,UAAS;AAAA,QACvD,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAW,GAAG,OAAO,qBAAqB,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAED,aAAa,cAAc;"}

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

@@ -0,0 +1,24 @@
+require('./Notification.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const notification = "_notification_1glup_8";
+const notification__icon = "_notification__icon_1glup_36";
+const notification__content = "_notification__content_1glup_59";
+const notification__close = "_notification__close_1glup_70";
+const styles = {
+  notification,
+  "notification--info": "_notification--info_1glup_19",
+  "notification--success": "_notification--success_1glup_23",
+  "notification--warning": "_notification--warning_1glup_27",
+  "notification--error": "_notification--error_1glup_31",
+  "notification__icon-container": "_notification__icon-container_1glup_36",
+  notification__icon,
+  notification__content,
+  notification__close
+};
+exports.default = styles;
+exports.notification = notification;
+exports.notification__close = notification__close;
+exports.notification__content = notification__content;
+exports.notification__icon = notification__icon;
+//# sourceMappingURL=Notification.module.css.cjs.map

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

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

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

@@ -0,0 +1,24 @@
+import './Notification.css';
+const notification = "_notification_1glup_8";
+const notification__icon = "_notification__icon_1glup_36";
+const notification__content = "_notification__content_1glup_59";
+const notification__close = "_notification__close_1glup_70";
+const styles = {
+  notification,
+  "notification--info": "_notification--info_1glup_19",
+  "notification--success": "_notification--success_1glup_23",
+  "notification--warning": "_notification--warning_1glup_27",
+  "notification--error": "_notification--error_1glup_31",
+  "notification__icon-container": "_notification__icon-container_1glup_36",
+  notification__icon,
+  notification__content,
+  notification__close
+};
+export {
+  styles as default,
+  notification,
+  notification__close,
+  notification__content,
+  notification__icon
+};
+//# sourceMappingURL=Notification.module.css.js.map

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

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

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

@@ -0,0 +1,40 @@
+import type * as React from 'react';
+export type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
+interface NotificationBaseProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * Visual variant determining the color and icon.
+     */
+    readonly variant: NotificationVariant;
+    /**
+     * Notification message content.
+     */
+    readonly children: React.ReactNode;
+}
+interface NotificationClosableProps extends NotificationBaseProps {
+    /**
+     * Whether to show the close button.
+     */
+    readonly closable: true;
+    /**
+     * Callback fired when the close button is clicked.
+     * Required when `closable` is true.
+     * The consuming application is responsible for handling dismiss logic.
+     */
+    readonly onClose: () => void;
+    /**
+     * Accessible label for the close button.
+     */
+    readonly closeLabel?: string;
+}
+interface NotificationStaticProps extends NotificationBaseProps {
+    /**
+     * Whether to show the close button.
+     * @default false
+     */
+    readonly closable?: false;
+    readonly onClose?: never;
+    readonly closeLabel?: never;
+}
+export type NotificationProps = NotificationClosableProps | NotificationStaticProps;
+export {};
+//# sourceMappingURL=Notification.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E,UAAU,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3F;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC7D;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,UAAU,uBAAwB,SAAQ,qBAAqB;IAC3D;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,GAAG,uBAAuB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/font-definitions.css

@@ -0,0 +1,61 @@
+/* DNA Text font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* DNA Heading font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}

package/dist/index.cjs

@@ -1,97 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-function cn(...inputs) {
-  const classes = [];
-  for (const input of inputs) {
-    if (!input) continue;
-    if (typeof input === "string") {
-      classes.push(input);
-    } else if (typeof input === "object") {
-      for (const [key, value] of Object.entries(input)) {
-        if (value) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-  return classes.join(" ");
-}
-const box = "_box_5e7g9_14";
-const styles$1 = {
-  box,
-  "box--none": "_box--none_5e7g9_23",
-  "box--low": "_box--low_5e7g9_27",
-  "box--high": "_box--high_5e7g9_31",
-  "box--extraHigh": "_box--extraHigh_5e7g9_35"
-};
-const Box = react.forwardRef(
-  ({ as: Component = "div", elevation = "none", children, className, ...props }, ref) => {
-    const classes = cn(styles$1.box, styles$1[`box--${elevation}`], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classes, ...props, children });
-  }
-);
-Box.displayName = "Box";
-const button = "_button_1p878_15";
-const styles = {
-  button,
-  "button--primary": "_button--primary_1p878_45",
-  "button--secondary": "_button--secondary_1p878_58",
-  "button--default": "_button--default_1p878_73",
-  "button--small": "_button--small_1p878_77",
-  "button--fullWidth": "_button--fullWidth_1p878_84",
-  "button--loading": "_button--loading_1p878_89"
-};
-const Button = react.forwardRef(
-  (props, ref) => {
-    const {
-      as = "button",
-      variant = "primary",
-      size = "default",
-      fullWidth = false,
-      loading = false,
-      children,
-      className,
-      ...restProps
-    } = props;
-    const classes = cn(
-      styles.button,
-      styles[`button--${variant}`],
-      styles[`button--${size}`],
-      {
-        [styles["button--fullWidth"]]: fullWidth,
-        [styles["button--loading"]]: loading
-      },
-      className
-    );
-    const content = loading ? "Loading..." : children;
-    if (as === "a") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          ref,
-          className: classes,
-          ...restProps,
-          children: content
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        className: classes,
-        ...restProps,
-        disabled: loading || restProps.disabled,
-        children: content
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-exports.Box = Box;
-exports.Button = Button;
-exports.cn = cn;
+;/* empty css                   */
+const Accordion = require("./components/Accordion/Accordion.cjs");
+const AccordionItem = require("./components/AccordionItem/AccordionItem.cjs");
+const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
+const Label = require("./components/Label/Label.cjs");
+const Notification = require("./components/Notification/Notification.cjs");
+const cn = require("./utils/cn/cn.cjs");
+exports.Accordion = Accordion.Accordion;
+exports.AccordionItem = AccordionItem.AccordionItem;
+exports.Breadcrumb = Breadcrumb.Breadcrumb;
+exports.Label = Label.Label;
+exports.Notification = Notification.Notification;
+exports.cn = cn.cn;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/utils/cn.ts","../src/components/Box/Box.tsx","../src/components/Button/Button.tsx"],"sourcesContent":["/**\n * Utility function to conditionally join class names.\n * A minimal alternative to clsx/classnames without external dependencies.\n */\nexport function cn(\n    ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n    const classes: string[] = [];\n\n    for (const input of inputs) {\n        if (!input) continue;\n\n        if (typeof input === 'string') {\n            classes.push(input);\n        } else if (typeof input === 'object') {\n            for (const [key, value] of Object.entries(input)) {\n                if (value) {\n                    classes.push(key);\n                }\n            }\n        }\n    }\n\n    return classes.join(' ');\n}\n","/**\n * Box Component\n *\n * A versatile container component with elevation (shadow) variants.\n * Can be rendered as any HTML element using the polymorphic `as` prop.\n *\n * Features:\n * - Polymorphic: Render as any element (div, section, article, etc.)\n * - Elevation: Four shadow depth levels (none, low, high, extraHigh)\n * - Ref forwarding supported\n * - Uses design tokens for consistent shadows\n *\n * @example\n * // Basic box with no elevation\n * <Box>Content</Box>\n *\n * // Box with elevation\n * <Box elevation=\"high\">Elevated content</Box>\n *\n * // Box as section element\n * <Box as=\"section\" elevation=\"low\">Section content</Box>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport { BoxProps } from './Box.types';\nimport styles from './Box.module.css';\n\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n    ({ as: Component = 'div', elevation = 'none', children, className, ...props }, ref) => {\n        const classes = cn(styles.box, styles[`box--${elevation}`], className);\n\n        return (\n            <Component ref={ref} className={classes} {...props}>\n                {children}\n            </Component>\n        );\n    },\n);\n\nBox.displayName = 'Box';\n","/**\n * Button Component\n *\n * This component demonstrates both approaches for using design tokens:\n * 1. CSS Variables: Used in Button.module.css (e.g., var(--colors-primitive-pink-500))\n * 2. JavaScript Imports: Available for programmatic use\n *\n * Features:\n * - Polymorphic: Can render as button or anchor (link)\n * - Variants: primary, secondary\n * - Sizes: default, small\n * - States: loading, disabled\n * - Layout: fullWidth option\n * - Ref forwarding supported\n *\n * @example\n * // Basic button\n * <Button variant=\"primary\">Click me</Button>\n *\n * // As link\n * <Button as=\"a\" href=\"/path\">Navigate</Button>\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport type { ButtonProps } from './Button.types';\nimport styles from './Button.module.css';\n\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n    (props, ref) => {\n        const {\n            as = 'button',\n            variant = 'primary',\n            size = 'default',\n            fullWidth = false,\n            loading = false,\n            children,\n            className,\n            ...restProps\n        } = props;\n\n        const classes = cn(\n            styles.button,\n            styles[`button--${variant}`],\n            styles[`button--${size}`],\n            {\n                [styles['button--fullWidth']]: fullWidth,\n                [styles['button--loading']]: loading,\n            },\n            className,\n        );\n\n        const content = loading ? 'Loading...' : children;\n\n        if (as === 'a') {\n            return (\n                <a\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    className={classes}\n                    {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n                >\n                    {content}\n                </a>\n            );\n        }\n\n        return (\n            <button\n                ref={ref as React.Ref<HTMLButtonElement>}\n                type=\"button\"\n                className={classes}\n                {...(restProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n                disabled={\n                    loading || (restProps as React.ButtonHTMLAttributes<HTMLButtonElement>).disabled\n                }\n            >\n                {content}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["forwardRef","styles","jsx"],"mappings":";;;;AAIO,SAAS,MACT,QACG;AACN,QAAM,UAAoB,CAAA;AAE1B,aAAW,SAAS,QAAQ;AACxB,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC3B,cAAQ,KAAK,KAAK;AAAA,IACtB,WAAW,OAAO,UAAU,UAAU;AAClC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC9C,YAAI,OAAO;AACP,kBAAQ,KAAK,GAAG;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO,QAAQ,KAAK,GAAG;AAC3B;;;;;;;;;ACIO,MAAM,MAAMA,MAAAA;AAAAA,EACf,CAAC,EAAE,IAAI,YAAY,OAAO,YAAY,QAAQ,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACnF,UAAM,UAAU,GAAGC,SAAO,KAAKA,SAAO,QAAQ,SAAS,EAAE,GAAG,SAAS;AAErE,0CACK,WAAA,EAAU,KAAU,WAAW,SAAU,GAAG,OACxC,UACL;AAAA,EAER;AACJ;AAEA,IAAI,cAAc;;;;;;;;;;;ACTX,MAAM,SAASD,MAAAA;AAAAA,EAClB,CAAC,OAAO,QAAQ;AACZ,UAAM;AAAA,MACF,KAAK;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACH;AAEJ,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,MACP,OAAO,WAAW,OAAO,EAAE;AAAA,MAC3B,OAAO,WAAW,IAAI,EAAE;AAAA,MACxB;AAAA,QACI,CAAC,OAAO,mBAAmB,CAAC,GAAG;AAAA,QAC/B,CAAC,OAAO,iBAAiB,CAAC,GAAG;AAAA,MAAA;AAAA,MAEjC;AAAA,IAAA;AAGJ,UAAM,UAAU,UAAU,eAAe;AAEzC,QAAI,OAAO,KAAK;AACZ,aACIE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA,WAAW;AAAA,UACV,GAAI;AAAA,UAEJ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGb;AAEA,WACIA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,QACV,GAAI;AAAA,QACL,UACI,WAAY,UAA4D;AAAA,QAG3E,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,OAAO,cAAc;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,6 +1,13 @@
-export { Box } from './components/Box';
-export { Button } from './components/Button';
-export type { BoxProps, BoxElevation } from './components/Box';
-export type { ButtonProps } from './components/Button';
-export { cn } from './utils/cn';
+export { Accordion } from './components/Accordion';
+export { AccordionItem } from './components/AccordionItem';
+export { Breadcrumb } from './components/Breadcrumb';
+export { Notification } from './components/Notification';
+export { Label } from './components/Label';
+export type { AccordionProps } from './components/Accordion';
+export type { AccordionItemProps } from './components/AccordionItem';
+export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
+export type { NotificationProps, NotificationVariant } from './components/Notification';
+export type { LabelProps, LabelVariant } from './components/Label';
+export { cn } from './utils';
+export type { CnDictionary, CnInput } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,97 +1,16 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-function cn(...inputs) {
-  const classes = [];
-  for (const input of inputs) {
-    if (!input) continue;
-    if (typeof input === "string") {
-      classes.push(input);
-    } else if (typeof input === "object") {
-      for (const [key, value] of Object.entries(input)) {
-        if (value) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-  return classes.join(" ");
-}
-const box = "_box_5e7g9_14";
-const styles$1 = {
-  box,
-  "box--none": "_box--none_5e7g9_23",
-  "box--low": "_box--low_5e7g9_27",
-  "box--high": "_box--high_5e7g9_31",
-  "box--extraHigh": "_box--extraHigh_5e7g9_35"
-};
-const Box = forwardRef(
-  ({ as: Component = "div", elevation = "none", children, className, ...props }, ref) => {
-    const classes = cn(styles$1.box, styles$1[`box--${elevation}`], className);
-    return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...props, children });
-  }
-);
-Box.displayName = "Box";
-const button = "_button_1p878_15";
-const styles = {
-  button,
-  "button--primary": "_button--primary_1p878_45",
-  "button--secondary": "_button--secondary_1p878_58",
-  "button--default": "_button--default_1p878_73",
-  "button--small": "_button--small_1p878_77",
-  "button--fullWidth": "_button--fullWidth_1p878_84",
-  "button--loading": "_button--loading_1p878_89"
-};
-const Button = forwardRef(
-  (props, ref) => {
-    const {
-      as = "button",
-      variant = "primary",
-      size = "default",
-      fullWidth = false,
-      loading = false,
-      children,
-      className,
-      ...restProps
-    } = props;
-    const classes = cn(
-      styles.button,
-      styles[`button--${variant}`],
-      styles[`button--${size}`],
-      {
-        [styles["button--fullWidth"]]: fullWidth,
-        [styles["button--loading"]]: loading
-      },
-      className
-    );
-    const content = loading ? "Loading..." : children;
-    if (as === "a") {
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          ref,
-          className: classes,
-          ...restProps,
-          children: content
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        className: classes,
-        ...restProps,
-        disabled: loading || restProps.disabled,
-        children: content
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+/* empty css                 */
+import { Accordion } from "./components/Accordion/Accordion.js";
+import { AccordionItem } from "./components/AccordionItem/AccordionItem.js";
+import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
+import { Label } from "./components/Label/Label.js";
+import { Notification } from "./components/Notification/Notification.js";
+import { cn } from "./utils/cn/cn.js";
 export {
-  Box,
-  Button,
+  Accordion,
+  AccordionItem,
+  Breadcrumb,
+  Label,
+  Notification,
   cn
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/utils/cn.ts","../src/components/Box/Box.tsx","../src/components/Button/Button.tsx"],"sourcesContent":["/**\n * Utility function to conditionally join class names.\n * A minimal alternative to clsx/classnames without external dependencies.\n */\nexport function cn(\n    ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n    const classes: string[] = [];\n\n    for (const input of inputs) {\n        if (!input) continue;\n\n        if (typeof input === 'string') {\n            classes.push(input);\n        } else if (typeof input === 'object') {\n            for (const [key, value] of Object.entries(input)) {\n                if (value) {\n                    classes.push(key);\n                }\n            }\n        }\n    }\n\n    return classes.join(' ');\n}\n","/**\n * Box Component\n *\n * A versatile container component with elevation (shadow) variants.\n * Can be rendered as any HTML element using the polymorphic `as` prop.\n *\n * Features:\n * - Polymorphic: Render as any element (div, section, article, etc.)\n * - Elevation: Four shadow depth levels (none, low, high, extraHigh)\n * - Ref forwarding supported\n * - Uses design tokens for consistent shadows\n *\n * @example\n * // Basic box with no elevation\n * <Box>Content</Box>\n *\n * // Box with elevation\n * <Box elevation=\"high\">Elevated content</Box>\n *\n * // Box as section element\n * <Box as=\"section\" elevation=\"low\">Section content</Box>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport { BoxProps } from './Box.types';\nimport styles from './Box.module.css';\n\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n    ({ as: Component = 'div', elevation = 'none', children, className, ...props }, ref) => {\n        const classes = cn(styles.box, styles[`box--${elevation}`], className);\n\n        return (\n            <Component ref={ref} className={classes} {...props}>\n                {children}\n            </Component>\n        );\n    },\n);\n\nBox.displayName = 'Box';\n","/**\n * Button Component\n *\n * This component demonstrates both approaches for using design tokens:\n * 1. CSS Variables: Used in Button.module.css (e.g., var(--colors-primitive-pink-500))\n * 2. JavaScript Imports: Available for programmatic use\n *\n * Features:\n * - Polymorphic: Can render as button or anchor (link)\n * - Variants: primary, secondary\n * - Sizes: default, small\n * - States: loading, disabled\n * - Layout: fullWidth option\n * - Ref forwarding supported\n *\n * @example\n * // Basic button\n * <Button variant=\"primary\">Click me</Button>\n *\n * // As link\n * <Button as=\"a\" href=\"/path\">Navigate</Button>\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\n\nimport { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport type { ButtonProps } from './Button.types';\nimport styles from './Button.module.css';\n\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n    (props, ref) => {\n        const {\n            as = 'button',\n            variant = 'primary',\n            size = 'default',\n            fullWidth = false,\n            loading = false,\n            children,\n            className,\n            ...restProps\n        } = props;\n\n        const classes = cn(\n            styles.button,\n            styles[`button--${variant}`],\n            styles[`button--${size}`],\n            {\n                [styles['button--fullWidth']]: fullWidth,\n                [styles['button--loading']]: loading,\n            },\n            className,\n        );\n\n        const content = loading ? 'Loading...' : children;\n\n        if (as === 'a') {\n            return (\n                <a\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    className={classes}\n                    {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n                >\n                    {content}\n                </a>\n            );\n        }\n\n        return (\n            <button\n                ref={ref as React.Ref<HTMLButtonElement>}\n                type=\"button\"\n                className={classes}\n                {...(restProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n                disabled={\n                    loading || (restProps as React.ButtonHTMLAttributes<HTMLButtonElement>).disabled\n                }\n            >\n                {content}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["styles"],"mappings":";;AAIO,SAAS,MACT,QACG;AACN,QAAM,UAAoB,CAAA;AAE1B,aAAW,SAAS,QAAQ;AACxB,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC3B,cAAQ,KAAK,KAAK;AAAA,IACtB,WAAW,OAAO,UAAU,UAAU;AAClC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC9C,YAAI,OAAO;AACP,kBAAQ,KAAK,GAAG;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO,QAAQ,KAAK,GAAG;AAC3B;;;;;;;;;ACIO,MAAM,MAAM;AAAA,EACf,CAAC,EAAE,IAAI,YAAY,OAAO,YAAY,QAAQ,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AACnF,UAAM,UAAU,GAAGA,SAAO,KAAKA,SAAO,QAAQ,SAAS,EAAE,GAAG,SAAS;AAErE,+BACK,WAAA,EAAU,KAAU,WAAW,SAAU,GAAG,OACxC,UACL;AAAA,EAER;AACJ;AAEA,IAAI,cAAc;;;;;;;;;;;ACTX,MAAM,SAAS;AAAA,EAClB,CAAC,OAAO,QAAQ;AACZ,UAAM;AAAA,MACF,KAAK;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACH;AAEJ,UAAM,UAAU;AAAA,MACZ,OAAO;AAAA,MACP,OAAO,WAAW,OAAO,EAAE;AAAA,MAC3B,OAAO,WAAW,IAAI,EAAE;AAAA,MACxB;AAAA,QACI,CAAC,OAAO,mBAAmB,CAAC,GAAG;AAAA,QAC/B,CAAC,OAAO,iBAAiB,CAAC,GAAG;AAAA,MAAA;AAAA,MAEjC;AAAA,IAAA;AAGJ,UAAM,UAAU,UAAU,eAAe;AAEzC,QAAI,OAAO,KAAK;AACZ,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA,WAAW;AAAA,UACV,GAAI;AAAA,UAEJ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGb;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,QACV,GAAI;AAAA,QACL,UACI,WAAY,UAA4D;AAAA,QAG3E,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,OAAO,cAAc;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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);
+}
+}