@lunar-js/lunar 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/README.md +6 -5
- package/dist/components/composite/Dialog/Dialog.d.ts +1 -2
- package/dist/components/composite/Dialog/Dialog.d.ts.map +1 -1
- package/dist/components/composite/Dialog/Dialog.js +7 -2
- package/dist/components/composite/Dialog/Dialog.js.map +1 -1
- package/package.json +11 -2
- package/src/components/composite/Dialog/Dialog.tsx +15 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @lunar-js/lunar
|
|
2
2
|
|
|
3
|
+
## 0.0.3 (2025-11-30)
|
|
4
|
+
|
|
5
|
+
### Changed
|
|
6
|
+
|
|
7
|
+
- README updates - [`e116830`](https://github.com/lunar-js/lunar/commit/e116830d1d3905588285a209d2ca017c2fc0db43) Thanks
|
|
8
|
+
astronaut [@prests](https://github.com/prests)!
|
|
9
|
+
|
|
10
|
+
## 0.0.2 (2025-11-29)
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- expose API for dialog `renderTrigger` to open dialog -
|
|
15
|
+
[`5900869`](https://github.com/lunar-js/lunar/commit/590086958e18e2106c5cb62abc7ba12b566f4a5e) Thanks astronaut
|
|
16
|
+
[@prests](https://github.com/prests)!
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
|
|
20
|
+
- remove dialog side effect -
|
|
21
|
+
[`5900869`](https://github.com/lunar-js/lunar/commit/590086958e18e2106c5cb62abc7ba12b566f4a5e) Thanks astronaut
|
|
22
|
+
[@prests](https://github.com/prests)!
|
|
23
|
+
|
|
3
24
|
## 0.0.1 (2025-11-29)
|
|
4
25
|
|
|
5
26
|
### Added
|
package/README.md
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
# Lunar
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
CSS-in-JS styling.
|
|
3
|
+
> Designing at the frontier
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
- 🔒 CSP Safe Components (In progress)
|
|
6
|
+
- 🧱 Highly Composable Components
|
|
7
|
+
- 🎨 Rich Design Systems (or bring your own!)
|
|
7
8
|
|
|
8
|
-
Lunar
|
|
9
|
-
|
|
9
|
+
Lunar, components designed to be out of this world, aims to use the latest web standards for creating modern,
|
|
10
|
+
composable, acessible, and CSP safe components.
|
|
10
11
|
|
|
11
12
|
## Installation
|
|
12
13
|
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { ButtonProps } from "../../primitives/Button/Button.js";
|
|
2
2
|
import { ComponentProps, FC, ReactNode } from "react";
|
|
3
|
-
import "dialog-closedby-polyfill";
|
|
4
3
|
|
|
5
4
|
//#region src/components/composite/Dialog/Dialog.d.ts
|
|
6
5
|
interface DialogProps extends ComponentProps<'dialog'> {
|
|
@@ -8,7 +7,7 @@ interface DialogProps extends ComponentProps<'dialog'> {
|
|
|
8
7
|
* Optional function that renders the trigger element for the dialog.
|
|
9
8
|
* This allows custom trigger components while maintaining dialog functionality.
|
|
10
9
|
*/
|
|
11
|
-
renderTrigger?: () => ReactNode;
|
|
10
|
+
renderTrigger?: (openDialog: () => void) => ReactNode;
|
|
12
11
|
}
|
|
13
12
|
/**
|
|
14
13
|
* Main Dialog component that renders a modal dialog element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","names":[],"sources":["../../../../src/components/composite/Dialog/Dialog.tsx"],"sourcesContent":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","names":[],"sources":["../../../../src/components/composite/Dialog/Dialog.tsx"],"sourcesContent":[],"mappings":";;;;UAkBU,WAAA,SAAoB;;AAH+C;;;eAG/C,CAAA,EAAA,CAAA,UAAA,EAAA,GAAA,GAAA,IAAA,EAAA,GAKgB,SALhB;;AAAc;;;;cAYtC,MAAU,EAAF,EAAE,CAAC,WAAD,CAAA;AAAA;;;;cA8CV,aAAiB,EAAF,EAAE,CAAC,WAAD,CAAA;AAAA;;;;cA6CjB,WAAe,EAAF,EAAE,CAAC,WAAD,CAAA;AAAA;;;;cAmBf,aAAiB,EAAF,EAAE,CAAC,cAAD,CAAA,KAAA,CAAA,CAAA;AAAA;;;;cAQjB,YAAgB,EAAF,EAAE,CAAC,cAAD,CAAA,KAAA,CAAA,CAAA;AAAA;;;;cAQhB,YAAgB,EAAF,EAAE,CAAC,cAAD,CAAA,KAAA,CAAA,CAAA"}
|
|
@@ -6,7 +6,6 @@ import { dialog, dialogContent, dialogFooter, dialogHeader } from "./dialog.css.
|
|
|
6
6
|
import { useEffect, useEffectEvent, useRef, useState } from "react";
|
|
7
7
|
import clsx from "clsx";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import "dialog-closedby-polyfill";
|
|
10
9
|
|
|
11
10
|
//#region src/components/composite/Dialog/Dialog.tsx
|
|
12
11
|
/**
|
|
@@ -16,10 +15,16 @@ import "dialog-closedby-polyfill";
|
|
|
16
15
|
const Dialog = ({ className, open = false, closedby = "any", renderTrigger, ref: forwardedRef, ...props }) => {
|
|
17
16
|
const internalDialogRef = useRef(null);
|
|
18
17
|
const mergedRef = useMergedRef(internalDialogRef, forwardedRef);
|
|
18
|
+
const openDialog = () => {
|
|
19
|
+
internalDialogRef.current?.showModal();
|
|
20
|
+
};
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (typeof document !== "undefined") import("dialog-closedby-polyfill");
|
|
23
|
+
}, []);
|
|
19
24
|
return /* @__PURE__ */ jsxs(DialogProvider_default, {
|
|
20
25
|
isOpen: open,
|
|
21
26
|
dialogRef: internalDialogRef,
|
|
22
|
-
children: [renderTrigger?.(), /* @__PURE__ */ jsx("dialog", {
|
|
27
|
+
children: [renderTrigger?.(openDialog), /* @__PURE__ */ jsx("dialog", {
|
|
23
28
|
ref: mergedRef,
|
|
24
29
|
open,
|
|
25
30
|
closedby,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","names":["Dialog: FC<DialogProps>","DialogProvider","DialogTrigger: FC<ButtonProps>","dialog","Button","DialogClose: FC<ButtonProps>","DialogContent: FC<ComponentProps<'div'>>","DialogHeader: FC<ComponentProps<'div'>>","DialogFooter: FC<ComponentProps<'div'>>"],"sources":["../../../../src/components/composite/Dialog/Dialog.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type FC,\n type MouseEvent,\n type ReactNode,\n useEffect,\n useEffectEvent,\n useRef,\n useState,\n} from 'react';\nimport clsx from 'clsx';\n
|
|
1
|
+
{"version":3,"file":"Dialog.js","names":["Dialog: FC<DialogProps>","DialogProvider","DialogTrigger: FC<ButtonProps>","dialog","Button","DialogClose: FC<ButtonProps>","DialogContent: FC<ComponentProps<'div'>>","DialogHeader: FC<ComponentProps<'div'>>","DialogFooter: FC<ComponentProps<'div'>>"],"sources":["../../../../src/components/composite/Dialog/Dialog.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type FC,\n type MouseEvent,\n type ReactNode,\n useEffect,\n useEffectEvent,\n useRef,\n useState,\n} from 'react';\nimport clsx from 'clsx';\n\nimport DialogProvider from './DialogProvider.js';\nimport { useDialog } from '../../../hooks/dialog.js';\nimport { useMergedRef } from '../../../hooks/refs.js';\nimport Button, { type ButtonProps } from '../../primitives/Button/Button.js';\nimport { dialog, dialogContent, dialogFooter, dialogHeader } from './dialog.css.js';\n\ninterface DialogProps extends ComponentProps<'dialog'> {\n /**\n * Optional function that renders the trigger element for the dialog.\n * This allows custom trigger components while maintaining dialog functionality.\n */\n renderTrigger?: (openDialog: () => void) => ReactNode;\n}\n\n/**\n * Main Dialog component that renders a modal dialog element.\n * Handles dialog state management and provides context for child components.\n */\nconst Dialog: FC<DialogProps> = ({\n className,\n open = false,\n closedby = 'any',\n renderTrigger,\n ref: forwardedRef,\n ...props\n}) => {\n const internalDialogRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergedRef(internalDialogRef, forwardedRef);\n\n const openDialog = () => {\n internalDialogRef.current?.showModal();\n };\n\n // Load polyfill only in browser environment to support closedby attribute\n useEffect(() => {\n if (typeof document !== 'undefined') {\n // TODO: Remove once there's full browser support for Dialog's closedby attribute.\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n import('dialog-closedby-polyfill');\n }\n }, []);\n\n return (\n <DialogProvider isOpen={open} dialogRef={internalDialogRef}>\n {renderTrigger?.(openDialog)}\n\n <dialog\n ref={mergedRef}\n open={open}\n // eslint-disable-next-line react/no-unknown-property\n closedby={closedby}\n data-slot=\"dialog\"\n className={clsx(dialog, className)}\n aria-modal=\"true\"\n {...props}\n />\n </DialogProvider>\n );\n};\n\n/**\n * Button component that triggers the dialog to open.\n * Automatically handles aria attributes and dialog state management.\n */\nconst DialogTrigger: FC<ButtonProps> = ({ onClick, ...props }) => {\n const { dialogRef, isOpen } = useDialog();\n\n const [isAriaExpanded, setIsAriaExpanded] = useState(isOpen);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n if (event.defaultPrevented || event.isPropagationStopped()) {\n return;\n }\n\n setIsAriaExpanded(true);\n dialogRef.current?.showModal();\n };\n\n const handleClose = useEffectEvent(() => {\n setIsAriaExpanded(false);\n });\n\n useEffect(() => {\n const dialog = dialogRef.current;\n if (!dialog) return;\n\n dialog.addEventListener('close', handleClose);\n\n return () => {\n dialog.removeEventListener('close', handleClose);\n };\n }, [dialogRef]);\n\n return (\n <Button\n aria-expanded={isAriaExpanded}\n aria-haspopup=\"dialog\"\n data-slot=\"dialog-trigger\"\n onClick={handleClick}\n {...props}\n />\n );\n};\n\n/**\n * Button component that closes the dialog when clicked.\n * Handles dialog close functionality while preserving custom onClick handlers.\n */\nconst DialogClose: FC<ButtonProps> = ({ onClick, ...props }) => {\n const { dialogRef } = useDialog();\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n if (event.defaultPrevented || event.isPropagationStopped()) {\n return;\n }\n\n dialogRef.current?.close();\n };\n\n return <Button onClick={handleClick} {...props} />;\n};\n\n/**\n * Container component for the main content area of the dialog.\n * Provides semantic structure and consistent styling for dialog content.\n */\nconst DialogContent: FC<ComponentProps<'div'>> = ({ className, ...props }) => {\n return <div data-slot=\"dialog-content\" className={clsx(dialogContent, className)} {...props} />;\n};\n\n/**\n * Header component for the dialog, typically containing the dialog title.\n * Provides consistent spacing and styling for the dialog header area.\n */\nconst DialogHeader: FC<ComponentProps<'div'>> = ({ className, ...props }) => {\n return <div data-slot=\"dialog-header\" className={clsx(dialogHeader, className)} {...props} />;\n};\n\n/**\n * Footer component for the dialog, typically containing action buttons.\n * Provides consistent spacing and styling for the dialog footer area.\n */\nconst DialogFooter: FC<ComponentProps<'div'>> = ({ className, ...props }) => {\n return <div data-slot=\"dialog-footer\" className={clsx(dialogFooter, className)} {...props} />;\n};\n\nexport { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter };\n"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAMA,UAA2B,EAC/B,WACA,OAAO,OACP,WAAW,OACX,eACA,KAAK,cACL,GAAG,YACC;CACJ,MAAM,oBAAoB,OAA0B,KAAK;CACzD,MAAM,YAAY,aAAa,mBAAmB,aAAa;CAE/D,MAAM,mBAAmB;AACvB,oBAAkB,SAAS,WAAW;;AAIxC,iBAAgB;AACd,MAAI,OAAO,aAAa,YAGtB,QAAO;IAER,EAAE,CAAC;AAEN,QACE,qBAACC;EAAe,QAAQ;EAAM,WAAW;aACtC,gBAAgB,WAAW,EAE5B,oBAAC;GACC,KAAK;GACC;GAEI;GACV,aAAU;GACV,WAAW,KAAK,QAAQ,UAAU;GAClC,cAAW;GACX,GAAI;IACJ;GACa;;;;;;AAQrB,MAAMC,iBAAkC,EAAE,SAAS,GAAG,YAAY;CAChE,MAAM,EAAE,WAAW,WAAW,WAAW;CAEzC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,OAAO;CAE5D,MAAM,eAAe,UAAyC;AAC5D,YAAU,MAAM;AAChB,MAAI,MAAM,oBAAoB,MAAM,sBAAsB,CACxD;AAGF,oBAAkB,KAAK;AACvB,YAAU,SAAS,WAAW;;CAGhC,MAAM,cAAc,qBAAqB;AACvC,oBAAkB,MAAM;GACxB;AAEF,iBAAgB;EACd,MAAMC,WAAS,UAAU;AACzB,MAAI,CAACA,SAAQ;AAEb,WAAO,iBAAiB,SAAS,YAAY;AAE7C,eAAa;AACX,YAAO,oBAAoB,SAAS,YAAY;;IAEjD,CAAC,UAAU,CAAC;AAEf,QACE,oBAACC;EACC,iBAAe;EACf,iBAAc;EACd,aAAU;EACV,SAAS;EACT,GAAI;GACJ;;;;;;AAQN,MAAMC,eAAgC,EAAE,SAAS,GAAG,YAAY;CAC9D,MAAM,EAAE,cAAc,WAAW;CAEjC,MAAM,eAAe,UAAyC;AAC5D,YAAU,MAAM;AAChB,MAAI,MAAM,oBAAoB,MAAM,sBAAsB,CACxD;AAGF,YAAU,SAAS,OAAO;;AAG5B,QAAO,oBAACD;EAAO,SAAS;EAAa,GAAI;GAAS;;;;;;AAOpD,MAAME,iBAA4C,EAAE,WAAW,GAAG,YAAY;AAC5E,QAAO,oBAAC;EAAI,aAAU;EAAiB,WAAW,KAAK,eAAe,UAAU;EAAE,GAAI;GAAS;;;;;;AAOjG,MAAMC,gBAA2C,EAAE,WAAW,GAAG,YAAY;AAC3E,QAAO,oBAAC;EAAI,aAAU;EAAgB,WAAW,KAAK,cAAc,UAAU;EAAE,GAAI;GAAS;;;;;;AAO/F,MAAMC,gBAA2C,EAAE,WAAW,GAAG,YAAY;AAC3E,QAAO,oBAAC;EAAI,aAAU;EAAgB,WAAW,KAAK,cAAc,UAAU;EAAE,GAAI;GAAS"}
|
package/package.json
CHANGED
|
@@ -2,17 +2,26 @@
|
|
|
2
2
|
"$schema": "https://json.schemastore.org/package.json",
|
|
3
3
|
"name": "@lunar-js/lunar",
|
|
4
4
|
"description": "Lunar is a radix/shadcn inspired component/design library",
|
|
5
|
+
"author": "Shayne Preston",
|
|
5
6
|
"repository": {
|
|
6
7
|
"type": "git",
|
|
7
8
|
"url": "https://github.com/lunar-js/lunar.git",
|
|
8
9
|
"directory": "packages/lunar"
|
|
9
10
|
},
|
|
10
11
|
"homepage": "https://github.com/lunar-js/lunar/tree/main/packages/lunar#readme",
|
|
11
|
-
"version": "0.0.
|
|
12
|
+
"version": "0.0.3",
|
|
12
13
|
"type": "module",
|
|
13
14
|
"types": "./dist/index.d.ts",
|
|
14
15
|
"module": "./dist/index.js",
|
|
15
16
|
"sideEffects": false,
|
|
17
|
+
"keywords": [
|
|
18
|
+
"react",
|
|
19
|
+
"design-system",
|
|
20
|
+
"components",
|
|
21
|
+
"typescript",
|
|
22
|
+
"csp",
|
|
23
|
+
"theming"
|
|
24
|
+
],
|
|
16
25
|
"exports": {
|
|
17
26
|
".": {
|
|
18
27
|
"import": {
|
|
@@ -58,7 +67,7 @@
|
|
|
58
67
|
{
|
|
59
68
|
"path": "./dist/index.js",
|
|
60
69
|
"import": "{}",
|
|
61
|
-
"limit": "
|
|
70
|
+
"limit": "0 B"
|
|
62
71
|
}
|
|
63
72
|
],
|
|
64
73
|
"license": "MIT",
|
|
@@ -9,8 +9,6 @@ import {
|
|
|
9
9
|
useState,
|
|
10
10
|
} from 'react';
|
|
11
11
|
import clsx from 'clsx';
|
|
12
|
-
// TODO: Remove once there's full browser support for Dialog's closedby attribute.
|
|
13
|
-
import 'dialog-closedby-polyfill';
|
|
14
12
|
|
|
15
13
|
import DialogProvider from './DialogProvider.js';
|
|
16
14
|
import { useDialog } from '../../../hooks/dialog.js';
|
|
@@ -23,7 +21,7 @@ interface DialogProps extends ComponentProps<'dialog'> {
|
|
|
23
21
|
* Optional function that renders the trigger element for the dialog.
|
|
24
22
|
* This allows custom trigger components while maintaining dialog functionality.
|
|
25
23
|
*/
|
|
26
|
-
renderTrigger?: () => ReactNode;
|
|
24
|
+
renderTrigger?: (openDialog: () => void) => ReactNode;
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
/**
|
|
@@ -41,9 +39,22 @@ const Dialog: FC<DialogProps> = ({
|
|
|
41
39
|
const internalDialogRef = useRef<HTMLDialogElement>(null);
|
|
42
40
|
const mergedRef = useMergedRef(internalDialogRef, forwardedRef);
|
|
43
41
|
|
|
42
|
+
const openDialog = () => {
|
|
43
|
+
internalDialogRef.current?.showModal();
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
// Load polyfill only in browser environment to support closedby attribute
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (typeof document !== 'undefined') {
|
|
49
|
+
// TODO: Remove once there's full browser support for Dialog's closedby attribute.
|
|
50
|
+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
51
|
+
import('dialog-closedby-polyfill');
|
|
52
|
+
}
|
|
53
|
+
}, []);
|
|
54
|
+
|
|
44
55
|
return (
|
|
45
56
|
<DialogProvider isOpen={open} dialogRef={internalDialogRef}>
|
|
46
|
-
{renderTrigger?.()}
|
|
57
|
+
{renderTrigger?.(openDialog)}
|
|
47
58
|
|
|
48
59
|
<dialog
|
|
49
60
|
ref={mergedRef}
|