@dnanpm/ui-components 0.1.0 → 0.3.0

package/dist/components/Notification/Notification.css

@@ -1,11 +1,11 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * Notification Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).
  * These variables come from @dnanpm/design-tokens package.
  */
 
-._notification_1glup_8 {
+._notification_5h3rs_8 {
     display: flex;
     align-items: center;
     gap: var(--spacing-ui-md);
@@ -16,24 +16,24 @@
 }
 
 /* Variant colors */
-._notification--info_1glup_19 {
-    --notification-color: var(--colors-semantic-status-info);
+._notification--info_5h3rs_19 {
+    --notification-color: var(--color-semantic-status-info);
 }
 
-._notification--success_1glup_23 {
-    --notification-color: var(--colors-semantic-status-success);
+._notification--success_5h3rs_23 {
+    --notification-color: var(--color-semantic-status-success);
 }
 
-._notification--warning_1glup_27 {
-    --notification-color: var(--colors-semantic-status-warning);
+._notification--warning_5h3rs_27 {
+    --notification-color: var(--color-semantic-status-warning);
 }
 
-._notification--error_1glup_31 {
-    --notification-color: var(--colors-semantic-status-error);
+._notification--error_5h3rs_31 {
+    --notification-color: var(--color-semantic-status-error);
 }
 
 /* Icon container */
-._notification__icon-container_1glup_36 {
+._notification__icon-container_5h3rs_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;
@@ -46,28 +46,27 @@
     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);
+    color: var(--color-semantic-foreground-inverse);
 }
 
-._notification__icon_1glup_36 {
+._notification__icon_5h3rs_36 {
     width: 24px;
     height: 24px;
     flex: 0 0 auto;
 }
 
 /* Content */
-._notification__content_1glup_59 {
+._notification__content_5h3rs_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);
+    font: var(--typography-body-md);
+    color: var(--color-semantic-foreground-default);
     text-wrap: pretty;
 }
 
 /* Close button */
-._notification__close_1glup_70 {
+._notification__close_5h3rs_69 {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -80,11 +79,11 @@
     border: none;
     border-radius: var(--radius-semantic-sm);
     background: none;
-    color: var(--colors-semantic-foreground-default);
+    color: var(--color-semantic-foreground-default);
     cursor: pointer;
 }
 
-._notification__close_1glup_70 svg {
+._notification__close_5h3rs_69 svg {
     width: 24px;
     height: 24px;
 }

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

@@ -1,3 +1,3 @@
 import { NotificationProps } from './Notification.types';
-export declare const Notification: import('react').ForwardRefExoticComponent<NotificationProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Notification: ({ variant, children, closable, onClose, closeLabel, className, ref, ...props }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Notification.d.ts.map

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

@@ -1 +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"}
+{"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,GAAI,gFAS1B,iBAAiB,4CA2BnB,CAAC"}

package/dist/components/Notification/Notification.js

@@ -1,5 +1,4 @@
 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";
@@ -16,24 +15,25 @@ const variantRoles = {
   warning: "alert",
   error: "alert"
 };
-const Notification = forwardRef(function Notification2({
+const Notification = ({
   variant,
   children,
   closable = false,
   onClose,
   closeLabel = "Sulje ilmoitus",
   className,
+  ref,
   ...props
-}, ref) {
+}) => {
   const Icon = variantIcons[variant];
   const role = variantRoles[variant];
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       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 }),
@@ -50,8 +50,7 @@ const Notification = forwardRef(function Notification2({
       ]
     }
   );
-});
-Notification.displayName = "Notification";
+};
 export {
   Notification
 };

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

@@ -1 +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;"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, 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 = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\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"],"names":["ErrorIcon"],"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,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,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;"}

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

@@ -1,17 +1,17 @@
 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 notification = "_notification_5h3rs_8";
+const notification__icon = "_notification__icon_5h3rs_36";
+const notification__content = "_notification__content_5h3rs_59";
+const notification__close = "_notification__close_5h3rs_69";
 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--info": "_notification--info_5h3rs_19",
+  "notification--success": "_notification--success_5h3rs_23",
+  "notification--warning": "_notification--warning_5h3rs_27",
+  "notification--error": "_notification--error_5h3rs_31",
+  "notification__icon-container": "_notification__icon-container_5h3rs_36",
   notification__icon,
   notification__content,
   notification__close

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

@@ -1,15 +1,15 @@
 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 notification = "_notification_5h3rs_8";
+const notification__icon = "_notification__icon_5h3rs_36";
+const notification__content = "_notification__content_5h3rs_59";
+const notification__close = "_notification__close_5h3rs_69";
 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--info": "_notification--info_5h3rs_19",
+  "notification--success": "_notification--success_5h3rs_23",
+  "notification--warning": "_notification--warning_5h3rs_27",
+  "notification--error": "_notification--error_5h3rs_31",
+  "notification__icon-container": "_notification__icon-container_5h3rs_36",
   notification__icon,
   notification__content,
   notification__close

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

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 export type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
-interface NotificationBaseProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+interface NotificationBaseProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
     /**
      * Visual variant determining the color and icon.
      */

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

@@ -1 +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"}
+{"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,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxF;;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/Pictograph/Pictograph.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Pictograph_module = require("./Pictograph.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Pictograph = ({
+  iconSize = "small",
+  alignment = "center",
+  mode = "horizontal",
+  columns = 3,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn.cn(
+        Pictograph_module.default.pictograph,
+        Pictograph_module.default[`pictograph--${mode}`],
+        alignment === "center" && Pictograph_module.default["pictograph--centered"],
+        Pictograph_module.default[`pictograph--icon-${iconSize}`],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn.cn(Pictograph_module.default.pictograph__list, Pictograph_module.default[`pictograph__list--${columns}`]), children })
+    }
+  );
+};
+exports.Pictograph = Pictograph;
+//# sourceMappingURL=Pictograph.cjs.map

package/dist/components/Pictograph/Pictograph.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pictograph.cjs","sources":["../../../src/components/Pictograph/Pictograph.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Pictograph.module.css';\nimport type { PictographProps } from './Pictograph.types';\n\nexport const Pictograph = ({\n    iconSize = 'small',\n    alignment = 'center',\n    mode = 'horizontal',\n    columns = 3,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographProps) => {\n    return (\n        <div\n            ref={ref}\n            className={cn(\n                styles.pictograph,\n                styles[`pictograph--${mode}`],\n                alignment === 'center' && styles['pictograph--centered'],\n                styles[`pictograph--icon-${iconSize}`],\n                className,\n            )}\n            {...props}\n        >\n            <ul className={cn(styles.pictograph__list, styles[`pictograph__list--${columns}`])}>\n                {children}\n            </ul>\n        </div>\n    );\n};\n"],"names":["jsx","cn","styles"],"mappings":";;;;;AAIO,MAAM,aAAa,CAAC;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,kBAAAA,QAAO;AAAA,QACPA,kBAAAA,QAAO,eAAe,IAAI,EAAE;AAAA,QAC5B,cAAc,YAAYA,kBAAAA,QAAO,sBAAsB;AAAA,QACvDA,kBAAAA,QAAO,oBAAoB,QAAQ,EAAE;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAAF,2BAAAA,IAAC,MAAA,EAAG,WAAWC,GAAAA,GAAGC,kBAAAA,QAAO,kBAAkBA,kBAAAA,QAAO,qBAAqB,OAAO,EAAE,CAAC,GAC5E,SAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

package/dist/components/Pictograph/Pictograph.css

@@ -0,0 +1,190 @@
+@layer dds-components {/**
+ * Pictograph Component Styles
+ *
+ * Grid-based layout for pictograph items with responsive columns,
+ * alignment variants, and dark color scheme support.
+ *
+ * Uses container queries for responsive behavior and CSS custom properties
+ * to communicate layout settings to child items.
+ *
+ * Container breakpoints (matching reference):
+ *   440px  — large mobile
+ *   688px  — tablet
+ *   944px  — desktop
+ */
+
+._pictograph_11vg9_16 {
+    --pictograph-icon-size: 40px;
+    --pictograph-direction: row;
+    --pictograph-align: flex-start;
+    --pictograph-text-align: left;
+    --pictograph-item-gap: 20px;
+    --pictograph-text-color: inherit;
+    --pictograph-icon-color: var(--color-semantic-foreground-primary-strong);
+
+    margin: 0;
+    container-name: pictograph;
+    container-type: inline-size;
+}
+
+/* ─── Mode: vertical (icon above text) ─── */
+
+._pictograph--vertical_11vg9_32 {
+    --pictograph-direction: column;
+    --pictograph-item-gap: 10px;
+}
+
+/* ─── List layout ─── */
+
+._pictograph__list_11vg9_39 {
+    display: grid;
+    gap: 30px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* ─── Column variants (container queries) ─── */
+
+@container pictograph (min-width: 440px) {
+    ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph__list--2_11vg9_56,
+    ._pictograph__list--3_11vg9_57,
+    ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@container pictograph (min-width: 944px) {
+    ._pictograph__list--3_11vg9_57 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+/* ─── Mode: horizontal (icon beside text) ─── */
+
+._pictograph--horizontal_11vg9_83 {
+    --pictograph-direction: row;
+    --pictograph-item-gap: 20px;
+}
+
+._pictograph--horizontal_11vg9_83 ._pictograph__list_11vg9_39 {
+    gap: 20px 30px;
+}
+
+/* Horizontal mode: column overrides */
+._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
+._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    grid-template-columns: 1fr;
+}
+
+@container pictograph (min-width: 440px) {
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@container pictograph (min-width: 944px) {
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+/* ─── Alignment: centered ─── */
+
+._pictograph--centered_11vg9_123 {
+    --pictograph-align: center;
+}
+
+._pictograph--vertical_11vg9_32._pictograph--centered_11vg9_123 {
+    --pictograph-text-align: center;
+}
+
+/* ─── Icon size: small ─── */
+
+._pictograph--icon-small_11vg9_133 {
+    --pictograph-icon-size: 40px;
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--icon-small_11vg9_133 {
+        --pictograph-icon-size: 52px;
+    }
+}
+
+/* ─── Icon size: large ─── */
+
+._pictograph--icon-large_11vg9_145 {
+    --pictograph-icon-size: 52px;
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--icon-large_11vg9_145 {
+        --pictograph-icon-size: 72px;
+    }
+}
+
+/* ─── Vertical + short text: items are compact, allow more columns earlier ─── */
+/* Note: :has(li > div:last-child > p:only-child) depends on PictographItem DOM structure:
+   <li> → <span>(icon) + <div>(text). If PictographItem markup changes, update these selectors. */
+
+@container pictograph (min-width: 440px) {
+    ._pictograph--vertical_11vg9_32:has(li > div:last-child > p:only-child) ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* ─── Horizontal + long text: stack items vertically at small sizes ─── */
+
+@container pictograph (max-width: 439px) {
+    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
+        --pictograph-direction: column;
+        --pictograph-align: flex-start;
+        --pictograph-item-gap: 10px;
+    }
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
+        gap: 30px;
+    }
+}
+
+/* ─── Dark color scheme ─── */
+/* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._pictograph_11vg9_16 {
+        --pictograph-text-color: var(--color-semantic-foreground-inverse);
+        --pictograph-icon-color: var(--color-semantic-foreground-inverse);
+    }
+}
+}

package/dist/components/Pictograph/Pictograph.d.ts

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

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

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

package/dist/components/Pictograph/Pictograph.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import styles from "./Pictograph.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const Pictograph = ({
+  iconSize = "small",
+  alignment = "center",
+  mode = "horizontal",
+  columns = 3,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        styles.pictograph,
+        styles[`pictograph--${mode}`],
+        alignment === "center" && styles["pictograph--centered"],
+        styles[`pictograph--icon-${iconSize}`],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("ul", { className: cn(styles.pictograph__list, styles[`pictograph__list--${columns}`]), children })
+    }
+  );
+};
+export {
+  Pictograph
+};
+//# sourceMappingURL=Pictograph.js.map

package/dist/components/Pictograph/Pictograph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pictograph.js","sources":["../../../src/components/Pictograph/Pictograph.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Pictograph.module.css';\nimport type { PictographProps } from './Pictograph.types';\n\nexport const Pictograph = ({\n    iconSize = 'small',\n    alignment = 'center',\n    mode = 'horizontal',\n    columns = 3,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographProps) => {\n    return (\n        <div\n            ref={ref}\n            className={cn(\n                styles.pictograph,\n                styles[`pictograph--${mode}`],\n                alignment === 'center' && styles['pictograph--centered'],\n                styles[`pictograph--icon-${iconSize}`],\n                className,\n            )}\n            {...props}\n        >\n            <ul className={cn(styles.pictograph__list, styles[`pictograph__list--${columns}`])}>\n                {children}\n            </ul>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,aAAa,CAAC;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP,OAAO;AAAA,QACP,OAAO,eAAe,IAAI,EAAE;AAAA,QAC5B,cAAc,YAAY,OAAO,sBAAsB;AAAA,QACvD,OAAO,oBAAoB,QAAQ,EAAE;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAA,oBAAC,MAAA,EAAG,WAAW,GAAG,OAAO,kBAAkB,OAAO,qBAAqB,OAAO,EAAE,CAAC,GAC5E,SAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,22 @@
+require('./Pictograph.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const pictograph = "_pictograph_11vg9_16";
+const pictograph__list = "_pictograph__list_11vg9_39";
+const styles = {
+  pictograph,
+  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  pictograph__list,
+  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
+  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
+  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
+  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
+  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
+  "pictograph--centered": "_pictograph--centered_11vg9_123",
+  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
+  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+};
+exports.default = styles;
+exports.pictograph = pictograph;
+exports.pictograph__list = pictograph__list;
+//# sourceMappingURL=Pictograph.module.css.cjs.map

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

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

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

@@ -0,0 +1,22 @@
+import './Pictograph.css';
+const pictograph = "_pictograph_11vg9_16";
+const pictograph__list = "_pictograph__list_11vg9_39";
+const styles = {
+  pictograph,
+  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  pictograph__list,
+  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
+  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
+  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
+  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
+  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
+  "pictograph--centered": "_pictograph--centered_11vg9_123",
+  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
+  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+};
+export {
+  styles as default,
+  pictograph,
+  pictograph__list
+};
+//# sourceMappingURL=Pictograph.module.css.js.map

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

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

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

@@ -0,0 +1,46 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface PictographProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Size of the icon area in each item.
+     * - `small`: 40px (52px on tablet and above)
+     * - `large`: 52px (72px on tablet and above)
+     * @default 'small'
+     */
+    readonly iconSize?: 'small' | 'large';
+    /**
+     * Alignment of icon and text within items.
+     * - In horizontal mode: controls vertical alignment between icon and text
+     *   (`start` = tops aligned, `center` = vertically centered). Text is always left-aligned.
+     * - In vertical mode: controls horizontal alignment of icon and text
+     *   (`start` = left-aligned, `center` = centered with centered text).
+     * @default 'center'
+     */
+    readonly alignment?: 'start' | 'center';
+    /**
+     * Layout direction of icon relative to text within each item.
+     * - `horizontal`: icon and text side by side
+     * - `vertical`: icon above text
+     * @default 'horizontal'
+     */
+    readonly mode?: 'horizontal' | 'vertical';
+    /**
+     * Number of columns in the grid layout (1–5) in desktop view. Columns are automatically adjusted based on available layout width.
+     * @default 3
+     */
+    readonly columns?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * PictographItem elements to render.
+     */
+    readonly children: ReactNode;
+}
+export interface PictographItemProps extends ComponentPropsWithRef<'li'> {
+    /**
+     * SVG icon element. Rendered as decorative with aria-hidden="true".
+     */
+    readonly icon: ReactNode;
+    /**
+     * Text content for the pictograph item.
+     */
+    readonly children: ReactNode;
+}
+//# sourceMappingURL=Pictograph.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pictograph.types.d.ts","sourceRoot":"","sources":["../../../src/components/Pictograph/Pictograph.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACjE;;;;;OAKG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACtC;;;;;;;OAOG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC"}

package/dist/components/Pictograph/PictographItem.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const PictographItem_module = require("./PictographItem.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const PictographItem = ({
+  icon,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ref, className: cn.cn(PictographItem_module["pictograph-item"], className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: PictographItem_module["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: PictographItem_module["pictograph-item__text"], children })
+  ] });
+};
+exports.PictographItem = PictographItem;
+//# sourceMappingURL=PictographItem.cjs.map

package/dist/components/Pictograph/PictographItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictographItem.cjs","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    return (\n        <li ref={ref} className={cn(styles['pictograph-item'], className)} {...props}>\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":["jsxs","cn","styles","jsx"],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACIA,2BAAAA,KAAC,MAAA,EAAG,KAAU,WAAWC,GAAAA,GAAGC,sBAAO,iBAAiB,GAAG,SAAS,GAAI,GAAG,OACnE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,UAAK,WAAWD,sBAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,mCACC,OAAA,EAAI,WAAWA,sBAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,EAAA,GAC/D;AAER;;"}