@deepfuture/dui-components 0.0.21 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "0.0.21",
-  "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
+  "version": "1.0.1",
+  "description": "DUI styled web components — extends dui-primitives with design tokens and variant CSS",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -10,57 +10,45 @@
     "directory": "packages/components"
   },
   "exports": {
-    "./button": {
-      "import": "./button/index.js",
-      "types": "./button/index.d.ts"
-    },
-    "./switch": {
-      "import": "./switch/index.js",
-      "types": "./switch/index.d.ts"
+    ".": {
+      "import": "./all.js",
+      "types": "./all.d.ts"
     },
     "./accordion": {
       "import": "./accordion/index.js",
       "types": "./accordion/index.d.ts"
     },
+    "./alert-dialog": {
+      "import": "./alert-dialog/index.js",
+      "types": "./alert-dialog/index.d.ts"
+    },
+    "./avatar": {
+      "import": "./avatar/index.js",
+      "types": "./avatar/index.d.ts"
+    },
     "./badge": {
       "import": "./badge/index.js",
       "types": "./badge/index.d.ts"
     },
-    "./icon": {
-      "import": "./icon/index.js",
-      "types": "./icon/index.d.ts"
-    },
-    "./scroll-area": {
-      "import": "./scroll-area/index.js",
-      "types": "./scroll-area/index.d.ts"
-    },
-    "./combobox": {
-      "import": "./combobox/index.js",
-      "types": "./combobox/index.d.ts"
-    },
-    "./menu": {
-      "import": "./menu/index.js",
-      "types": "./menu/index.d.ts"
-    },
-    "./popover": {
-      "import": "./popover/index.js",
-      "types": "./popover/index.d.ts"
+    "./breadcrumb": {
+      "import": "./breadcrumb/index.js",
+      "types": "./breadcrumb/index.d.ts"
     },
-    "./tooltip": {
-      "import": "./tooltip/index.js",
-      "types": "./tooltip/index.d.ts"
+    "./button": {
+      "import": "./button/index.js",
+      "types": "./button/index.d.ts"
     },
-    "./dialog": {
-      "import": "./dialog/index.js",
-      "types": "./dialog/index.d.ts"
+    "./calendar": {
+      "import": "./calendar/index.js",
+      "types": "./calendar/index.d.ts"
     },
-    "./alert-dialog": {
-      "import": "./alert-dialog/index.js",
-      "types": "./alert-dialog/index.d.ts"
+    "./card": {
+      "import": "./card/index.js",
+      "types": "./card/index.d.ts"
     },
-    "./breadcrumb": {
-      "import": "./breadcrumb/index.js",
-      "types": "./breadcrumb/index.d.ts"
+    "./card-grid": {
+      "import": "./card-grid/index.js",
+      "types": "./card-grid/index.d.ts"
     },
     "./checkbox": {
       "import": "./checkbox/index.js",
@@ -70,37 +58,25 @@
       "import": "./collapsible/index.js",
       "types": "./collapsible/index.d.ts"
     },
-    "./toolbar": {
-      "import": "./toolbar/index.js",
-      "types": "./toolbar/index.d.ts"
-    },
-    "./slider": {
-      "import": "./slider/index.js",
-      "types": "./slider/index.d.ts"
-    },
-    "./spinner": {
-      "import": "./spinner/index.js",
-      "types": "./spinner/index.d.ts"
-    },
-    "./tabs": {
-      "import": "./tabs/index.js",
-      "types": "./tabs/index.d.ts"
+    "./combobox": {
+      "import": "./combobox/index.js",
+      "types": "./combobox/index.d.ts"
     },
-    "./textarea": {
-      "import": "./textarea/index.js",
-      "types": "./textarea/index.d.ts"
+    "./command": {
+      "import": "./command/index.js",
+      "types": "./command/index.d.ts"
     },
-    "./trunc": {
-      "import": "./trunc/index.js",
-      "types": "./trunc/index.d.ts"
+    "./data-table": {
+      "import": "./data-table/index.js",
+      "types": "./data-table/index.d.ts"
     },
-    "./avatar": {
-      "import": "./avatar/index.js",
-      "types": "./avatar/index.d.ts"
+    "./dialog": {
+      "import": "./dialog/index.js",
+      "types": "./dialog/index.d.ts"
     },
-    "./portal": {
-      "import": "./portal/index.js",
-      "types": "./portal/index.d.ts"
+    "./dropzone": {
+      "import": "./dropzone/index.js",
+      "types": "./dropzone/index.d.ts"
     },
     "./field": {
       "import": "./field/index.js",
@@ -110,81 +86,117 @@
       "import": "./fieldset/index.js",
       "types": "./fieldset/index.d.ts"
     },
+    "./icon": {
+      "import": "./icon/index.js",
+      "types": "./icon/index.d.ts"
+    },
     "./input": {
       "import": "./input/index.js",
       "types": "./input/index.d.ts"
     },
-    "./radio": {
-      "import": "./radio/index.js",
-      "types": "./radio/index.d.ts"
+    "./menu": {
+      "import": "./menu/index.js",
+      "types": "./menu/index.d.ts"
     },
-    "./dropzone": {
-      "import": "./dropzone/index.js",
-      "types": "./dropzone/index.d.ts"
+    "./menubar": {
+      "import": "./menubar/index.js",
+      "types": "./menubar/index.d.ts"
     },
-    "./select": {
-      "import": "./select/index.js",
-      "types": "./select/index.d.ts"
+    "./number-field": {
+      "import": "./number-field/index.js",
+      "types": "./number-field/index.d.ts"
+    },
+    "./popover": {
+      "import": "./popover/index.js",
+      "types": "./popover/index.d.ts"
+    },
+    "./portal": {
+      "import": "./portal/index.js",
+      "types": "./portal/index.d.ts"
     },
     "./preview-card": {
       "import": "./preview-card/index.js",
       "types": "./preview-card/index.d.ts"
     },
-    "./data-table": {
-      "import": "./data-table/index.js",
-      "types": "./data-table/index.d.ts"
+    "./progress": {
+      "import": "./progress/index.js",
+      "types": "./progress/index.d.ts"
     },
-    "./command": {
-      "import": "./command/index.js",
-      "types": "./command/index.d.ts"
+    "./radio": {
+      "import": "./radio/index.js",
+      "types": "./radio/index.d.ts"
     },
-    "./sidebar": {
-      "import": "./sidebar/index.js",
-      "types": "./sidebar/index.d.ts"
+    "./scroll-area": {
+      "import": "./scroll-area/index.js",
+      "types": "./scroll-area/index.d.ts"
+    },
+    "./select": {
+      "import": "./select/index.js",
+      "types": "./select/index.d.ts"
     },
     "./separator": {
       "import": "./separator/index.js",
       "types": "./separator/index.d.ts"
     },
-    "./progress": {
-      "import": "./progress/index.js",
-      "types": "./progress/index.d.ts"
+    "./sidebar": {
+      "import": "./sidebar/index.js",
+      "types": "./sidebar/index.d.ts"
     },
-    "./toggle": {
-      "import": "./toggle/index.js",
-      "types": "./toggle/index.d.ts"
+    "./slider": {
+      "import": "./slider/index.js",
+      "types": "./slider/index.d.ts"
     },
-    "./number-field": {
-      "import": "./number-field/index.js",
-      "types": "./number-field/index.d.ts"
+    "./spinner": {
+      "import": "./spinner/index.js",
+      "types": "./spinner/index.d.ts"
+    },
+    "./split-button": {
+      "import": "./split-button/index.js",
+      "types": "./split-button/index.d.ts"
     },
     "./stepper": {
       "import": "./stepper/index.js",
       "types": "./stepper/index.d.ts"
     },
-    "./menubar": {
-      "import": "./menubar/index.js",
-      "types": "./menubar/index.d.ts"
+    "./switch": {
+      "import": "./switch/index.js",
+      "types": "./switch/index.d.ts"
     },
-    "./calendar": {
-      "import": "./calendar/index.js",
-      "types": "./calendar/index.d.ts"
+    "./tabs": {
+      "import": "./tabs/index.js",
+      "types": "./tabs/index.d.ts"
     },
-    "./split-button": {
-      "import": "./split-button/index.js",
-      "types": "./split-button/index.d.ts"
+    "./textarea": {
+      "import": "./textarea/index.js",
+      "types": "./textarea/index.d.ts"
     },
-    "./card": {
-      "import": "./card/index.js",
-      "types": "./card/index.d.ts"
+    "./toggle": {
+      "import": "./toggle/index.js",
+      "types": "./toggle/index.d.ts"
     },
-    "./card-grid": {
-      "import": "./card-grid/index.js",
-      "types": "./card-grid/index.d.ts"
+    "./toolbar": {
+      "import": "./toolbar/index.js",
+      "types": "./toolbar/index.d.ts"
     },
-    "./all": {
-      "import": "./all.js",
-      "types": "./all.d.ts"
+    "./tooltip": {
+      "import": "./tooltip/index.js",
+      "types": "./tooltip/index.d.ts"
+    },
+    "./tokens": {
+      "import": "./tokens/tokens.js",
+      "types": "./tokens/tokens.d.ts"
+    },
+    "./tokens-raw": {
+      "import": "./tokens/tokens-raw.js",
+      "types": "./tokens/tokens-raw.d.ts"
+    },
+    "./prose": {
+      "import": "./tokens/prose.js",
+      "types": "./tokens/prose.d.ts"
+    },
+    "./trunc": {
+      "import": "./trunc/index.js",
+      "types": "./trunc/index.d.ts"
     }
   },
   "files": [
@@ -194,7 +206,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.21",
+    "@deepfuture/dui-primitives": "1.1.0",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/popover/index.d.ts

@@ -1,11 +1,11 @@
-import { DuiPopover, openChangeEvent } from "./popover.js";
-export { DuiPopover, openChangeEvent };
-export type { PopoverOpenChangeDetail } from "./popover.js";
-import { DuiPopoverTrigger } from "./popover-trigger.js";
-export { DuiPopoverTrigger };
-import { DuiPopoverPopup } from "./popover-popup.js";
-export { DuiPopoverPopup };
-import { DuiPopoverClose } from "./popover-close.js";
-export { DuiPopoverClose };
-export type { PopoverContext, PopoverSide } from "./popover-context.js";
-export declare const popoverFamily: (typeof DuiPopover | typeof DuiPopoverTrigger | typeof DuiPopoverPopup | typeof DuiPopoverClose)[];
+import "./popover.js";
+import "./popover-close.js";
+import "./popover-popup.js";
+import "./popover-trigger.js";
+export { DuiPopover } from "./popover.js";
+export { DuiPopoverClose } from "./popover-close.js";
+export { DuiPopoverPopup } from "./popover-popup.js";
+export { DuiPopoverTrigger } from "./popover-trigger.js";
+export type { PopoverOpenChangeDetail } from "@deepfuture/dui-primitives/popover";
+export type { PopoverContext, PopoverSide } from "@deepfuture/dui-primitives/popover";
+export { openChangeEvent } from "@deepfuture/dui-primitives/popover";

package/popover/index.js

@@ -1,9 +1,9 @@
-import { DuiPopover, openChangeEvent } from "./popover.js";
-export { DuiPopover, openChangeEvent };
-import { DuiPopoverTrigger } from "./popover-trigger.js";
-export { DuiPopoverTrigger };
-import { DuiPopoverPopup } from "./popover-popup.js";
-export { DuiPopoverPopup };
-import { DuiPopoverClose } from "./popover-close.js";
-export { DuiPopoverClose };
-export const popoverFamily = [DuiPopover, DuiPopoverTrigger, DuiPopoverPopup, DuiPopoverClose];
+import "./popover.js";
+import "./popover-close.js";
+import "./popover-popup.js";
+import "./popover-trigger.js";
+export { DuiPopover } from "./popover.js";
+export { DuiPopoverClose } from "./popover-close.js";
+export { DuiPopoverPopup } from "./popover-popup.js";
+export { DuiPopoverTrigger } from "./popover-trigger.js";
+export { openChangeEvent } from "@deepfuture/dui-primitives/popover";

package/popover/popover-close.d.ts

@@ -1,13 +1,4 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
-import { LitElement, type TemplateResult } from "lit";
-/**
- * `<dui-popover-close>` — A close button wrapper for the popover.
- *
- * @slot - Content that closes the popover (usually a button or icon).
- */
-export declare class DuiPopoverClose extends LitElement {
-    #private;
-    static tagName: "dui-popover-close";
-    static styles: import("lit").CSSResult[];
-    render(): TemplateResult;
+import { DuiPopoverClosePrimitive } from "@deepfuture/dui-primitives/popover";
+import "../_install.js";
+export declare class DuiPopoverClose extends DuiPopoverClosePrimitive {
 }

package/popover/popover-close.js

@@ -1,33 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
-import { css, html, LitElement } from "lit";
-import { ContextConsumer } from "@lit/context";
-import { base } from "@deepfuture/dui-core/base";
-import { popoverContext } from "./popover-context.js";
-const hostStyles = css `
-  :host {
-    display: contents;
-  }
-`;
-/**
- * `<dui-popover-close>` — A close button wrapper for the popover.
- *
- * @slot - Content that closes the popover (usually a button or icon).
- */
-export class DuiPopoverClose extends LitElement {
-    static tagName = "dui-popover-close";
-    static styles = [base, hostStyles];
-    #ctx = new ContextConsumer(this, {
-        context: popoverContext,
-        subscribe: true,
-    });
-    #handleClick = () => {
-        this.#ctx.value?.closePopover();
-    };
-    render() {
-        return html `
-      <span @click="${this.#handleClick}">
-        <slot></slot>
-      </span>
-    `;
-    }
+import { DuiPopoverClosePrimitive } from "@deepfuture/dui-primitives/popover";
+import "../_install.js";
+export class DuiPopoverClose extends DuiPopoverClosePrimitive {
 }
+customElements.define(DuiPopoverClose.tagName, DuiPopoverClose);

package/popover/popover-popup.d.ts

@@ -1,20 +1,5 @@
-/** Ported from original DUI: deep-future-app/app/client/components/dui/popover */
-import { LitElement, type TemplateResult } from "lit";
-/**
- * `<dui-popover-popup>` — The popover popup content container.
- *
- * @slot - Popover content.
- */
-export declare class DuiPopoverPopup extends LitElement {
-    #private;
-    static tagName: "dui-popover-popup";
+import { DuiPopoverPopupPrimitive } from "@deepfuture/dui-primitives/popover";
+import "../_install.js";
+export declare class DuiPopoverPopup extends DuiPopoverPopupPrimitive {
     static styles: import("lit").CSSResult[];
-    /** Whether to show an arrow pointing to the trigger. */
-    accessor showArrow: boolean;
-    /** Close the popover when content inside the popup is clicked. */
-    accessor closeOnClick: boolean;
-    /** Check if an event path includes this popup's portal positioner. */
-    containsEventTarget(path: EventTarget[]): boolean;
-    updated(): void;
-    render(): TemplateResult;
 }