@dnanpm/ui-components 0.7.0 → 0.8.0

package/dist/components/ButtonCard/ButtonCard.js

@@ -0,0 +1,105 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Open, ChevronRight } from "@dnanpm/icons";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import styles from "./ButtonCard.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const ButtonCard = ({
+  title,
+  subtitle,
+  size = "medium",
+  icon,
+  image,
+  isExternal = false,
+  externalLinkAriaLabel = "avautuu uuteen välilehteen",
+  className,
+  ref,
+  ...props
+}) => {
+  const isAnchor = "href" in props && props.href != null;
+  const classes = cn(
+    styles["button-card"],
+    styles[`button-card--${size}`],
+    focusStyles.focusable,
+    elevationStyles.elevationLow,
+    className
+  );
+  const IconComponent = icon;
+  const media = IconComponent != null ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(styles["button-card__media"], styles["button-card__media--icon"]),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true" })
+    }
+  ) : image ? /* @__PURE__ */ jsx("span", { className: cn(styles["button-card__media"], styles["button-card__media--image"]), children: image }) : null;
+  const explicitTarget = isAnchor ? props.target?.toLowerCase() : void 0;
+  const opensInNewTab = isExternal || explicitTarget === "_blank";
+  const Indicator = opensInNewTab ? Open : ChevronRight;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    media,
+    /* @__PURE__ */ jsxs("span", { className: styles["button-card__content"], children: [
+      /* @__PURE__ */ jsxs("span", { className: styles["button-card__text"], children: [
+        /* @__PURE__ */ jsx("span", { className: styles["button-card__title"], children: title }),
+        subtitle != null && /* @__PURE__ */ jsx("span", { className: styles["button-card__subtitle"], children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: styles["button-card__indicator"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(Indicator, { "aria-hidden": "true" }) })
+    ] }),
+    opensInNewTab && externalLinkAriaLabel && /* @__PURE__ */ jsx("span", { className: styles["button-card__sr-only"], children: ` (${externalLinkAriaLabel})` })
+  ] });
+  if (isAnchor) {
+    const {
+      href,
+      renderLink,
+      target: targetProp,
+      rel,
+      disabled: _disabled,
+      ...safeAnchorProps
+    } = props;
+    const target = isExternal ? "_blank" : targetProp;
+    const shouldHardenRel = target?.toLowerCase() === "_blank";
+    const relTokens = new Set(
+      (rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
+    );
+    if (shouldHardenRel) {
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+    }
+    const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
+    const linkProps = {
+      ...safeAnchorProps,
+      ref,
+      href,
+      target,
+      rel: hardenedRel,
+      className: classes,
+      children: content
+    };
+    if (renderLink) {
+      return /* @__PURE__ */ jsx(Fragment, { children: renderLink(linkProps) });
+    }
+    return /* @__PURE__ */ jsx("a", { ...linkProps });
+  }
+  const {
+    type = "button",
+    href: _href,
+    target: _target,
+    rel: _rel,
+    renderLink: _renderLink,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: classes,
+      ...buttonProps,
+      children: content
+    }
+  );
+};
+export {
+  ButtonCard
+};
+//# sourceMappingURL=ButtonCard.js.map

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

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

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

@@ -0,0 +1,18 @@
+require('./ButtonCard.css');
+"use strict";
+const styles = {
+  "button-card": "_button-card_14hpp_1",
+  "button-card--large": "_button-card--large_14hpp_37",
+  "button-card--small": "_button-card--small_14hpp_42",
+  "button-card__media": "_button-card__media_14hpp_59",
+  "button-card__media--icon": "_button-card__media--icon_14hpp_72",
+  "button-card__media--image": "_button-card__media--image_14hpp_85",
+  "button-card__content": "_button-card__content_14hpp_100",
+  "button-card__text": "_button-card__text_14hpp_108",
+  "button-card__title": "_button-card__title_14hpp_117",
+  "button-card__subtitle": "_button-card__subtitle_14hpp_118",
+  "button-card__indicator": "_button-card__indicator_14hpp_140",
+  "button-card__sr-only": "_button-card__sr-only_14hpp_156"
+};
+module.exports = styles;
+//# sourceMappingURL=ButtonCard.module.css.cjs.map

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

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

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

@@ -0,0 +1,19 @@
+import './ButtonCard.css';
+const styles = {
+  "button-card": "_button-card_14hpp_1",
+  "button-card--large": "_button-card--large_14hpp_37",
+  "button-card--small": "_button-card--small_14hpp_42",
+  "button-card__media": "_button-card__media_14hpp_59",
+  "button-card__media--icon": "_button-card__media--icon_14hpp_72",
+  "button-card__media--image": "_button-card__media--image_14hpp_85",
+  "button-card__content": "_button-card__content_14hpp_100",
+  "button-card__text": "_button-card__text_14hpp_108",
+  "button-card__title": "_button-card__title_14hpp_117",
+  "button-card__subtitle": "_button-card__subtitle_14hpp_118",
+  "button-card__indicator": "_button-card__indicator_14hpp_140",
+  "button-card__sr-only": "_button-card__sr-only_14hpp_156"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=ButtonCard.module.css.js.map

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

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

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

@@ -0,0 +1,103 @@
+import { ComponentPropsWithRef, ComponentType, ReactNode, SVGProps } from 'react';
+/**
+ * Size variant of the Button card.
+ *
+ * - `large`  — Large text title (Heading XS).
+ * - `medium` — Default title (Label LG Bold).
+ * - `small`  — Compact vertical layout (Label MD title).
+ */
+export type ButtonCardSize = 'large' | 'medium' | 'small';
+/** SVG icon component, for example `ChevronRight` from `@dnanpm/icons`. */
+export type ButtonCardIcon = ComponentType<SVGProps<SVGSVGElement>>;
+export interface ButtonCardLinkProps extends ComponentPropsWithRef<'a'> {
+    readonly href: string;
+    readonly children: ReactNode;
+}
+interface ButtonCardBaseProps {
+    /**
+     * Primary title. Keep it short; the card clamps it as a layout fallback
+     * (two lines, or one line in the small size) and is not designed for long
+     * titles.
+     */
+    readonly title: ReactNode;
+    /**
+     * Optional subtitle. Keep it short; the card clamps it as a layout fallback
+     * (two lines, or one line in the small size) and is not designed for long
+     * subtitles.
+     */
+    readonly subtitle?: ReactNode;
+    /**
+     * Size variant controlling layout and typography.
+     * @default 'medium'
+     */
+    readonly size?: ButtonCardSize;
+    /**
+     * Marks the action as opening in a new tab/window: shows the external-link
+     * indicator icon and appends the hidden `externalLinkAriaLabel` hint. In link
+     * mode (`href`) it is authoritative and forces `target="_blank"` with a
+     * hardened `rel`, overriding any explicit `target`; in button mode the
+     * consumer opens the new window (for example `window.open`).
+     * @default false
+     */
+    readonly isExternal?: boolean;
+    /**
+     * Visually hidden hint appended to the accessible name when `isExternal` is
+     * true. Defaults to Finnish per the design system aria-label policy.
+     * @default 'avautuu uuteen välilehteen'
+     */
+    readonly externalLinkAriaLabel?: string;
+}
+/**
+ * Media is optional and mutually exclusive: provide either `icon` or `image`,
+ * never both. Omitting both renders the card without a media area.
+ */
+type ButtonCardMediaProps = {
+    /** Decorative SVG icon rendered in a neutral media box. */
+    readonly icon?: ButtonCardIcon;
+    readonly image?: never;
+} | {
+    readonly icon?: never;
+    /**
+     * Image slot rendered inside the DS-sized, clipped media box. The
+     * client owns the rendering, so an optimized image component (for
+     * example `next/image` or an app's own `OptimizedImage`) can be dropped
+     * in. The box is `position: relative`, so `next/image` `fill` works.
+     * Mark decorative images with an empty `alt`.
+     */
+    readonly image?: ReactNode;
+};
+export type ButtonCardAsButton = ButtonCardBaseProps & ButtonCardMediaProps & Omit<ComponentPropsWithRef<'button'>, keyof ButtonCardBaseProps | 'children' | 'disabled'> & {
+    /** When omitted, the card renders as a `<button>`. */
+    readonly href?: never;
+    readonly target?: never;
+    readonly rel?: never;
+    readonly renderLink?: never;
+    /** ButtonCard has no disabled state by design; render it conditionally instead. */
+    readonly disabled?: never;
+};
+export type ButtonCardAsAnchor = ButtonCardBaseProps & ButtonCardMediaProps & Omit<ComponentPropsWithRef<'a'>, keyof ButtonCardBaseProps | 'children'> & {
+    /** When provided, the card renders as an `<a>`. */
+    readonly href: string;
+    readonly disabled?: never;
+    readonly type?: never;
+    readonly name?: never;
+    /**
+     * Custom render function for the link element. Use this to integrate with
+     * client-side routing libraries like Next.js or React Router.
+     *
+     * @example
+     * // Next.js
+     * import Link from 'next/link';
+     * <ButtonCard href="/page" title="Open" renderLink={(props) => <Link {...props} />} />
+     */
+    readonly renderLink?: (props: ButtonCardLinkProps) => ReactNode;
+};
+/**
+ * Props for the Button card component.
+ *
+ * When `href` is provided the component renders as an `<a>` element;
+ * otherwise it renders as a `<button>`.
+ */
+export type ButtonCardProps = ButtonCardAsButton | ButtonCardAsAnchor;
+export {};
+//# sourceMappingURL=ButtonCard.types.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { ButtonCard } from './ButtonCard';
+export type { ButtonCardIcon, ButtonCardLinkProps, ButtonCardProps, ButtonCardSize, } from './ButtonCard.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACR,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,oBAAoB,CAAC"}

package/dist/components/Drawer/Drawer.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const icons = require("@dnanpm/icons");
+const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const useDialogDismissal = require("../Modal/useDialogDismissal.cjs");
+const useNativeDialog = require("../Modal/useNativeDialog.cjs");
+const Drawer_module = require("./Drawer.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Drawer = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "small",
+  headerStyle = "light",
+  side = "right",
+  fixedTitle = false,
+  disableCloseOptions = false,
+  closeLabel = "Sulje dialogi",
+  keepMounted = false,
+  className,
+  ref,
+  onKeyDown,
+  onClick,
+  onPointerDown,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) => {
+  const titleId = react.useId();
+  const descriptionId = react.useId();
+  const { dialogRef, close, phase, isPresent } = useNativeDialog.useNativeDialog({
+    open: open ?? false,
+    keepMounted,
+    onOpenChange
+  });
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  const dialogDismissalProps = useDialogDismissal.useDialogDismissal({
+    close,
+    disableCloseOptions,
+    onClick,
+    onKeyDown,
+    onPointerDown
+  });
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "dialog",
+    {
+      ...props,
+      ref: (node) => {
+        dialogRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn.cn(
+        Drawer_module.default.drawer,
+        elevation_module.default.elevationHigh,
+        Drawer_module.default[`drawer--${size}`],
+        Drawer_module.default[`drawer--${headerStyle}`],
+        Drawer_module.default[`drawer--${side}`],
+        { [Drawer_module.default["drawer--fixed-title"]]: fixedTitle },
+        { [Drawer_module.default["drawer--opening"]]: phase !== "closing" },
+        { [Drawer_module.default["drawer--closing"]]: phase === "closing" },
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (!ariaLabel && title ? titleId : void 0),
+      "aria-describedby": describedBy,
+      ...dialogDismissalProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Drawer_module.default.drawer__container, children: [
+          !disableCloseOptions && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cn.cn(Drawer_module.default.drawer__close, focus_module.default.focusable),
+              "aria-label": closeLabel,
+              "data-dialog-autofocus": "true",
+              onClick: close,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })
+            }
+          ),
+          (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Drawer_module.default.drawer__title, children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: Drawer_module.default.drawer__heading, children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: Drawer_module.default.drawer__description, children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Drawer_module.default.drawer__content, children })
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Drawer_module.default["drawer__bottom-bar"], elevation_module.default.elevationMedium), children: footer })
+      ]
+    }
+  );
+};
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.cjs.map

package/dist/components/Drawer/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'small',\n    headerStyle = 'light',\n    side = 'right',\n    fixedTitle = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: DrawerProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.drawer,\n                elevationStyles.elevationHigh,\n                styles[`drawer--${size}`],\n                styles[`drawer--${headerStyle}`],\n                styles[`drawer--${side}`],\n                { [styles['drawer--fixed-title']]: fixedTitle },\n                { [styles['drawer--opening']]: phase !== 'closing' },\n                { [styles['drawer--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.drawer__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.drawer__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.drawer__title}>\n                        {title && (\n                            <h2 id={titleId} className={styles.drawer__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div id={descriptionId} className={styles.drawer__description}>\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.drawer__content}>{children}</div>\n            </div>\n            {footer && (\n                <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n                    {footer}\n                </div>\n            )}\n        </dialog>\n    );\n};\n"],"names":["useId","useNativeDialog","useDialogDismissal","jsxs","cn","styles","elevationStyles","jsx","focusStyles","Close"],"mappings":"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"}

package/dist/components/Drawer/Drawer.css

@@ -0,0 +1,219 @@
+@layer dds-components {._drawer_zzxde_1 {
+    --_drawer-transition-duration-open: 400ms;
+    --_drawer-transition-duration-close: 200ms;
+    position: fixed;
+    inset-block: 0;
+    left: 100%;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100vw - var(--spacing-space-40));
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: var(--color-semantic-surface-base);
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-md);
+    transition-property: transform;
+    transition-duration: var(--_drawer-transition-duration-close);
+    transition-timing-function: ease;
+    transition-behavior: allow-discrete;
+}
+
+._drawer_zzxde_1:not([open]) {
+    display: none;
+}
+._drawer--small_zzxde_29 {
+    width: 375px;
+}
+._drawer--medium_zzxde_32 {
+    width: 768px;
+}
+._drawer--large_zzxde_35 {
+    width: 1080px;
+}
+._drawer--opening_zzxde_38,
+._drawer--closing_zzxde_39 {
+    display: flex;
+    flex-direction: column;
+}
+._drawer--opening_zzxde_38 {
+    transition-duration: var(--_drawer-transition-duration-open);
+    transform: translateX(-100%);
+}
+._drawer--closing_zzxde_39 {
+    transform: translateX(0);
+}
+._drawer--left_zzxde_50 {
+    right: auto;
+    left: 0;
+    transform: translateX(-100%);
+}
+._drawer--left_zzxde_50._drawer--opening_zzxde_38 {
+    transform: translateX(0);
+}
+._drawer--left_zzxde_50._drawer--closing_zzxde_39 {
+    transform: translateX(-100%);
+}
+
+._drawer_zzxde_1::backdrop {
+    background: var(--color-semantic-utility-overlay-strong);
+    opacity: 0;
+    transition-property: opacity, overlay;
+    transition-duration: var(--_drawer-transition-duration-close);
+    transition-timing-function: ease;
+    transition-behavior: allow-discrete;
+}
+._drawer--opening_zzxde_38::backdrop {
+    opacity: 1;
+    transition-duration: var(--_drawer-transition-duration-open);
+}
+._drawer--closing_zzxde_39::backdrop {
+    opacity: 0;
+    transition-duration: var(--_drawer-transition-duration-close);
+}
+._drawer__container_zzxde_78 {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow: auto;
+}
+._drawer--fixed-title_zzxde_85 ._drawer__container_zzxde_78 {
+    overflow: hidden;
+}
+._drawer__title_zzxde_88 {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: var(--spacing-space-4);
+    padding: var(--spacing-space-20) var(--spacing-space-40) var(--spacing-space-20)
+        var(--spacing-space-20);
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+    background: var(--color-semantic-surface-base);
+}
+._drawer__heading_zzxde_98 {
+    margin: 0;
+    font: var(--typography-heading-md);
+}
+._drawer__description_zzxde_102 {
+    margin: 0;
+}
+._drawer__content_zzxde_105 {
+    flex: 1 1 auto;
+    padding: var(--spacing-space-20);
+    overflow-wrap: anywhere;
+}
+._drawer--fixed-title_zzxde_85 ._drawer__content_zzxde_105 {
+    overflow: auto;
+}
+._drawer__close_zzxde_113 {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    display: grid;
+    width: 40px;
+    height: 40px;
+    place-items: center;
+    padding: 0;
+    border: none;
+    border-bottom-left-radius: var(--radius-semantic-md);
+    background: var(--color-semantic-surface-neutral-mid);
+    color: var(--color-semantic-foreground-secondary-strong);
+    cursor: pointer;
+}
+._drawer__close_zzxde_113 svg {
+    width: 24px;
+    height: 24px;
+}
+._drawer__bottom-bar_zzxde_133 {
+    flex: 0 0 auto;
+    padding: var(--spacing-space-20) var(--spacing-space-20) var(--spacing-space-24);
+    border: none;
+    border-radius: 0;
+    border-top: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+}
+._drawer--dark_zzxde_140 ._drawer__title_zzxde_88 {
+    border-bottom-color: var(--color-semantic-border-secondary);
+    background: var(--color-semantic-surface-secondary-strong);
+    color: var(--color-semantic-foreground-inverse);
+}
+._drawer--dark_zzxde_140 ._drawer__close_zzxde_113 {
+    background: var(--color-semantic-surface-secondary-mid);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+@media (min-width: 768px) {
+    ._drawer--medium_zzxde_32 {
+        --_drawer-transition-duration-open: 500ms;
+        --_drawer-transition-duration-close: 300ms;
+    }
+    ._drawer--large_zzxde_35 {
+        --_drawer-transition-duration-open: 500ms;
+        --_drawer-transition-duration-close: 300ms;
+    }
+}
+@media (min-width: 1024px) {
+    ._drawer--large_zzxde_35 {
+        --_drawer-transition-duration-open: 600ms;
+        --_drawer-transition-duration-close: 400ms;
+    }
+}
+@media (max-width: 359px) {
+    ._drawer_zzxde_1 {
+        width: 100vw;
+        max-width: 100vw;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    ._drawer_zzxde_1,
+    ._drawer_zzxde_1::backdrop {
+        transition: none;
+    }
+}
+@media (forced-colors: active) {
+    ._drawer_zzxde_1 {
+        border: 2px solid CanvasText;
+        box-shadow: none;
+    }
+    ._drawer_zzxde_1::backdrop {
+        background: Canvas;
+        opacity: 0.7;
+    }
+    ._drawer__close_zzxde_113 {
+        border: 1px solid ButtonBorder;
+        background: ButtonFace;
+        color: ButtonText;
+    }
+}
+
+._drawer--opening_zzxde_38 {
+    @starting-style {
+        transform: translateX(0);
+    }
+}
+._drawer--opening_zzxde_38::backdrop {
+    @starting-style {
+        opacity: 0;
+    }
+}
+._drawer--closing_zzxde_39 {
+    @starting-style {
+        transform: translateX(-100%);
+    }
+}
+._drawer--left_zzxde_50._drawer--opening_zzxde_38 {
+    @starting-style {
+        transform: translateX(-100%);
+    }
+}
+._drawer--left_zzxde_50._drawer--closing_zzxde_39 {
+    @starting-style {
+        transform: translateX(0);
+    }
+}
+}

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,3 @@
+import { DrawerProps } from './Drawer.types';
+export declare const Drawer: ({ open, onOpenChange, title, description, children, footer, size, headerStyle, side, fixedTitle, disableCloseOptions, closeLabel, keepMounted, className, ref, onKeyDown, onClick, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,+SAuBpB,WAAW,mDAgFb,CAAC"}