@cairntale/chimeling-react 1.0.0-alpha.4 → 1.0.0-alpha.6

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.
Files changed (35) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/components/index.d.ts +2 -2
  3. package/dist/components/playground/panel.js +143 -11
  4. package/dist/components/playground/panel.js.map +1 -1
  5. package/dist/components/playground/playground.d.ts +3 -1
  6. package/dist/components/playground/playground.js +42 -18
  7. package/dist/components/playground/playground.js.map +1 -1
  8. package/dist/components/playground/store.js +49 -8
  9. package/dist/components/playground/store.js.map +1 -1
  10. package/dist/components/popover.d.ts +9 -2
  11. package/dist/components/popover.js +117 -15
  12. package/dist/components/popover.js.map +1 -1
  13. package/dist/components/provider.d.ts +8 -1
  14. package/dist/components/provider.js +38 -8
  15. package/dist/components/provider.js.map +1 -1
  16. package/dist/components/root.js +8 -4
  17. package/dist/components/root.js.map +1 -1
  18. package/dist/components/trigger.d.ts +7 -2
  19. package/dist/components/trigger.js +67 -5
  20. package/dist/components/trigger.js.map +1 -1
  21. package/dist/index.d.ts +2 -2
  22. package/dist/lib/widget-context.d.ts +3 -1
  23. package/dist/lib/widget-context.js.map +1 -1
  24. package/dist/theme/color-system.d.ts +1 -0
  25. package/dist/theme/color-system.js +96 -0
  26. package/dist/theme/color-system.js.map +1 -0
  27. package/dist/theme/context.d.ts +2 -0
  28. package/dist/theme/context.js +15 -0
  29. package/dist/theme/context.js.map +1 -0
  30. package/dist/theme/index.d.ts +4 -0
  31. package/dist/theme/index.js +4 -0
  32. package/dist/theme/tokens.d.ts +6 -0
  33. package/dist/theme/tokens.js +69 -0
  34. package/dist/theme/tokens.js.map +1 -0
  35. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @cairntale/chimeling-react
2
2
 
3
+ ## 1.0.0-alpha.6
4
+
5
+ ### Minor Changes
6
+
7
+ - 72edfab: Add theme props to `ChimelingProvider` and `inline`/`pill` variants to `ChimelingTrigger`.
8
+ - 5f7b419: Style `ChimelingPopover`.
9
+ - 5f7b419: Add `ring`, `shadow`, `minWidth`, `gerundCapitalize`, and `gerundEllipsis` to `ChimelingPopover`.
10
+ - 922c4f8: Add optional `baseUrl` and `userId` props to `ChimelingPlayground` that hide the matching panel controls.
11
+ - 5f7b419: Add `--chl-ring`, `--chl-shadow-subtle`, and `--chl-shadow-elevated`, set `--chl-font-size-xs`, `--chl-font-size-sm`, and `--chl-font-size-md` to 12, 14, and 16, and remove `--chl-font-size-lg` and `--chl-font-size-xl`.
12
+
13
+ ### Patch Changes
14
+
15
+ - fbe014e: Make the pane of `ChimelingPlayground` a full-height sidebar instead of overlaying the top-right corner.
16
+
17
+ ## 1.0.0-alpha.5
18
+
19
+ ### Patch Changes
20
+
21
+ - ee2eeb3: Fix the invalid `display` value and make the pane of `ChimelingPlayground` positioned absolutely.
22
+
3
23
  ## 1.0.0-alpha.4
4
24
 
5
25
  ### Patch Changes
package/dist/components/index.d.ts CHANGED
@@ -3,5 +3,5 @@ import { ChimelingRoot, ChimelingRootProps } from "./root.js";
3
3
  import { ChimelingTrigger, ChimelingTriggerProps } from "./trigger.js";
4
4
  import { ChimelingPopover, ChimelingPopoverProps } from "./popover.js";
5
5
  import { Chimeling } from "./chimeling.js";
6
- import { ChimelingPlayground } from "./playground/playground.js";
7
- export { Chimeling, ChimelingPlayground, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, type ChimelingProviderProps, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps };
6
+ import { ChimelingPlayground, ChimelingPlaygroundProps } from "./playground/playground.js";
7
+ export { Chimeling, ChimelingPlayground, type ChimelingPlaygroundProps, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, type ChimelingProviderProps, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps };
package/dist/components/playground/panel.js CHANGED
@@ -3,25 +3,22 @@ import styles_default from "../../node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0
3
3
  import useTweaks from "./store.js";
4
4
  import { ClassNames, Global } from "@emotion/react";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
- import { ButtonGroup, Folder, SelectControl, Slider, TextControl, Toggle } from "dialkit";
6
+ import { ButtonGroup, ColorControl, Folder, SelectControl, Slider, TextControl, Toggle } from "dialkit";
7
7
  //#region src/components/playground/panel.tsx
8
- function PlaygroundPanel() {
8
+ function PlaygroundPanel({ lockBaseUrl = false, lockUserId = false }) {
9
9
  const tweaks = useTweaks();
10
10
  return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
11
11
  className: cx("dialkit-root", css({
12
12
  width: 320,
13
- display: "absolute",
13
+ overflowY: "auto",
14
+ display: "flex",
14
15
  flexDirection: "column",
15
16
  gap: "var(--dial-row-gap)",
16
- position: "fixed",
17
- top: "calc(var(--dial-row-gap) * 1.5)",
18
- right: "calc(var(--dial-row-gap) * 1.5)",
19
17
  boxShadow: "var(--dial-shadow)",
20
18
  background: "var(--dial-glass-bg)",
21
- border: "1px solid var(--dial-border)",
19
+ borderLeft: "1px solid var(--dial-border)",
22
20
  backdropFilter: "blur(var(--dial-backdrop-blur))",
23
- padding: "calc(var(--dial-row-gap) * 1.5)",
24
- borderRadius: 14
21
+ padding: "calc(var(--dial-row-gap) * 1.5)"
25
22
  })),
26
23
  "data-theme": "system",
27
24
  children: [
@@ -38,11 +35,11 @@ function PlaygroundPanel() {
38
35
  }],
39
36
  onChange: (v) => tweaks.set("mode", v)
40
37
  }),
41
- tweaks.mode === "live" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TextControl, {
38
+ tweaks.mode === "live" && /* @__PURE__ */ jsxs(Fragment, { children: [!lockBaseUrl && /* @__PURE__ */ jsx(TextControl, {
42
39
  label: "Base URL",
43
40
  value: tweaks.baseUrl,
44
41
  onChange: (v) => tweaks.set("baseUrl", v)
45
- }), /* @__PURE__ */ jsx(TextControl, {
42
+ }), !lockUserId && /* @__PURE__ */ jsx(TextControl, {
46
43
  label: "User ID",
47
44
  value: tweaks.userId,
48
45
  onChange: (v) => tweaks.set("userId", v)
@@ -85,6 +82,59 @@ function PlaygroundPanel() {
85
82
  })
86
83
  ] })]
87
84
  }),
85
+ /* @__PURE__ */ jsxs(Folder, {
86
+ title: "Theme",
87
+ children: [
88
+ /* @__PURE__ */ jsx(ColorControl, {
89
+ label: "Accent",
90
+ value: tweaks.theme.accentColor,
91
+ onChange: (v) => tweaks.set("theme.accentColor", v)
92
+ }),
93
+ /* @__PURE__ */ jsx(SelectControl, {
94
+ label: "Color Scheme",
95
+ value: tweaks.theme.colorScheme,
96
+ options: [
97
+ {
98
+ label: "Inherit",
99
+ value: "inherit"
100
+ },
101
+ {
102
+ label: "Light",
103
+ value: "light"
104
+ },
105
+ {
106
+ label: "Dark",
107
+ value: "dark"
108
+ }
109
+ ],
110
+ onChange: (v) => tweaks.set("theme.colorScheme", v)
111
+ }),
112
+ /* @__PURE__ */ jsx(Slider, {
113
+ label: "Spacing Scaling",
114
+ min: .8,
115
+ max: 2,
116
+ step: .1,
117
+ value: tweaks.theme.spacingScaling,
118
+ onChange: (v) => tweaks.set("theme.spacingScaling", v)
119
+ }),
120
+ /* @__PURE__ */ jsx(Slider, {
121
+ label: "Font Size Scaling",
122
+ min: .8,
123
+ max: 2,
124
+ step: .1,
125
+ value: tweaks.theme.fontSizeScaling,
126
+ onChange: (v) => tweaks.set("theme.fontSizeScaling", v)
127
+ }),
128
+ /* @__PURE__ */ jsx(Slider, {
129
+ label: "Border Radius Scaling",
130
+ min: 0,
131
+ max: 1.5,
132
+ step: .1,
133
+ value: tweaks.theme.borderRadiusScaling,
134
+ onChange: (v) => tweaks.set("theme.borderRadiusScaling", v)
135
+ })
136
+ ]
137
+ }),
88
138
  /* @__PURE__ */ jsxs(Folder, {
89
139
  title: "Behavior",
90
140
  children: [
@@ -138,6 +188,14 @@ function PlaygroundPanel() {
138
188
  ],
139
189
  onChange: (v) => tweaks.set("behavior.align", v)
140
190
  }),
191
+ /* @__PURE__ */ jsx(Slider, {
192
+ label: "Side Offset",
193
+ min: 0,
194
+ max: 16,
195
+ step: 2,
196
+ value: tweaks.behavior.sideOffset,
197
+ onChange: (v) => tweaks.set("behavior.sideOffset", v)
198
+ }),
141
199
  /* @__PURE__ */ jsx(Toggle, {
142
200
  label: "Open on Hover",
143
201
  checked: tweaks.behavior.openOnHover,
@@ -160,6 +218,80 @@ function PlaygroundPanel() {
160
218
  })] })
161
219
  ]
162
220
  }),
221
+ /* @__PURE__ */ jsxs(Folder, {
222
+ title: "Trigger",
223
+ children: [
224
+ /* @__PURE__ */ jsx(SelectControl, {
225
+ label: "Variant",
226
+ value: tweaks.trigger.variant,
227
+ options: [{
228
+ label: "Inline",
229
+ value: "inline"
230
+ }, {
231
+ label: "Pill",
232
+ value: "pill"
233
+ }],
234
+ onChange: (v) => tweaks.set("trigger.variant", v)
235
+ }),
236
+ tweaks.trigger.variant === "inline" && /* @__PURE__ */ jsx(Toggle, {
237
+ label: "Shimmer",
238
+ checked: tweaks.trigger.shimmer,
239
+ onChange: (v) => tweaks.set("trigger.shimmer", v)
240
+ }),
241
+ tweaks.trigger.variant === "pill" && /* @__PURE__ */ jsx(Toggle, {
242
+ label: "Gradient",
243
+ checked: tweaks.trigger.gradient,
244
+ onChange: (v) => tweaks.set("trigger.gradient", v)
245
+ })
246
+ ]
247
+ }),
248
+ /* @__PURE__ */ jsxs(Folder, {
249
+ title: "Popover",
250
+ children: [
251
+ /* @__PURE__ */ jsx(Toggle, {
252
+ label: "Ring",
253
+ checked: tweaks.popover.ring,
254
+ onChange: (v) => tweaks.set("popover.ring", v)
255
+ }),
256
+ /* @__PURE__ */ jsx(SelectControl, {
257
+ label: "Shadow",
258
+ value: tweaks.popover.shadow,
259
+ options: [
260
+ {
261
+ label: "Off",
262
+ value: "none"
263
+ },
264
+ {
265
+ label: "Subtle",
266
+ value: "subtle"
267
+ },
268
+ {
269
+ label: "Elevated",
270
+ value: "elevated"
271
+ }
272
+ ],
273
+ onChange: (v) => tweaks.set("popover.shadow", v)
274
+ }),
275
+ /* @__PURE__ */ jsx(Slider, {
276
+ label: "Min Width",
277
+ min: 200,
278
+ max: 320,
279
+ step: 10,
280
+ value: tweaks.popover.minWidth,
281
+ onChange: (v) => tweaks.set("popover.minWidth", v)
282
+ }),
283
+ /* @__PURE__ */ jsx(Toggle, {
284
+ label: "Gerund capitalize",
285
+ checked: tweaks.popover.gerundCapitalize,
286
+ onChange: (v) => tweaks.set("popover.gerundCapitalize", v)
287
+ }),
288
+ /* @__PURE__ */ jsx(Toggle, {
289
+ label: "Gerund ellipsis",
290
+ checked: tweaks.popover.gerundEllipsis,
291
+ onChange: (v) => tweaks.set("popover.gerundEllipsis", v)
292
+ })
293
+ ]
294
+ }),
163
295
  /* @__PURE__ */ jsx(ButtonGroup, { buttons: [{
164
296
  label: "Reset",
165
297
  onClick: tweaks.reset
package/dist/components/playground/panel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"panel.js","names":["dialkitStyles"],"sources":["../../../src/components/playground/panel.tsx"],"sourcesContent":["'use client'\n\nimport dialkitStyles from 'dialkit/styles.css?raw'\nimport { Global, ClassNames } from '@emotion/react'\nimport { TextControl, SelectControl, Folder, Toggle, Slider, ButtonGroup } from 'dialkit'\nimport useTweaks from './store'\n\nexport function PlaygroundPanel() {\n const tweaks = useTweaks()\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n 'dialkit-root',\n css({\n width: 320,\n display: 'absolute',\n flexDirection: 'column',\n gap: 'var(--dial-row-gap)',\n position: 'fixed',\n top: 'calc(var(--dial-row-gap) * 1.5)',\n right: 'calc(var(--dial-row-gap) * 1.5)',\n boxShadow: 'var(--dial-shadow)',\n background: 'var(--dial-glass-bg)',\n border: '1px solid var(--dial-border)',\n backdropFilter: 'blur(var(--dial-backdrop-blur))',\n padding: 'calc(var(--dial-row-gap) * 1.5)',\n borderRadius: 14,\n }),\n )}\n data-theme=\"system\"\n >\n <Global styles={dialkitStyles} />\n <SelectControl\n label=\"Mode\"\n value={tweaks.mode}\n options={[\n {\n label: 'Live',\n value: 'live',\n },\n { label: 'Mock', value: 'mock' },\n ]}\n onChange={v => tweaks.set('mode', v)}\n />\n {tweaks.mode === 'live' && (\n <>\n <TextControl\n label=\"Base URL\"\n value={tweaks.baseUrl}\n onChange={v => tweaks.set('baseUrl', v)}\n />\n <TextControl\n label=\"User ID\"\n value={tweaks.userId}\n onChange={v => tweaks.set('userId', v)}\n />\n </>\n )}\n {tweaks.mode === 'mock' && (\n <Folder title=\"Presence\">\n <SelectControl\n label=\"Status\"\n value={tweaks.presence.status}\n options={[\n {\n label: 'Online',\n value: 'online',\n },\n { label: 'Idle', value: 'idle' },\n { label: 'Offline', value: 'offline' },\n ]}\n onChange={v => tweaks.set('presence.status', v)}\n />\n {tweaks.presence.status !== 'offline' && tweaks.presence.activity !== null && (\n <>\n <TextControl\n label=\"Gerund\"\n value={tweaks.presence.activity.gerund}\n onChange={v => tweaks.set('presence.activity.gerund', v)}\n />\n <TextControl\n label=\"App Name\"\n value={tweaks.presence.activity.appName}\n onChange={v => tweaks.set('presence.activity.appName', v)}\n />\n <TextControl\n label=\"Icon Hash\"\n value={tweaks.presence.activity.iconHash!}\n onChange={v => tweaks.set('presence.activity.iconHash', v)}\n />\n </>\n )}\n </Folder>\n )}\n <Folder title=\"Behavior\">\n <SelectControl\n label=\"Side\"\n value={tweaks.behavior.side}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n { label: 'Left', value: 'left' },\n { label: 'Right', value: 'right' },\n { label: 'Inline Start', value: 'inline-start' },\n { label: 'Inline End', value: 'inline-end' },\n ]}\n onChange={v => tweaks.set('behavior.side', v)}\n />\n <SelectControl\n label=\"Align\"\n value={tweaks.behavior.align}\n options={[\n { label: 'Start', value: 'start' },\n { label: 'Center', value: 'center' },\n { label: 'End', value: 'end' },\n ]}\n onChange={v => tweaks.set('behavior.align', v)}\n />\n <Toggle\n label=\"Open on Hover\"\n checked={tweaks.behavior.openOnHover}\n onChange={v => tweaks.set('behavior.openOnHover', v)}\n />\n {tweaks.behavior.openOnHover && (\n <>\n <Slider\n label=\"Hover Open Delay\"\n min={0}\n max={1500}\n step={100}\n value={tweaks.behavior.hoverOpenDelay}\n onChange={v => tweaks.set('behavior.hoverOpenDelay', v)}\n />\n <Slider\n label=\"Hover Close Delay\"\n min={0}\n max={1500}\n step={100}\n value={tweaks.behavior.hoverCloseDelay}\n onChange={v => tweaks.set('behavior.hoverCloseDelay', v)}\n />\n </>\n )}\n </Folder>\n <ButtonGroup buttons={[{ label: 'Reset', onClick: tweaks.reset }]} />\n </div>\n )}\n </ClassNames>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"panel.js","names":["dialkitStyles"],"sources":["../../../src/components/playground/panel.tsx"],"sourcesContent":["'use client'\n\nimport dialkitStyles from 'dialkit/styles.css?raw'\nimport { Global, ClassNames } from '@emotion/react'\nimport {\n TextControl,\n SelectControl,\n Folder,\n Toggle,\n Slider,\n ButtonGroup,\n ColorControl,\n} from 'dialkit'\nimport useTweaks from './store'\n\ntype PlaygroundPanelProps = {\n lockBaseUrl?: boolean\n lockUserId?: boolean\n}\n\nexport function PlaygroundPanel({ lockBaseUrl = false, lockUserId = false }: PlaygroundPanelProps) {\n const tweaks = useTweaks()\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n 'dialkit-root',\n css({\n width: 320,\n overflowY: 'auto',\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--dial-row-gap)',\n boxShadow: 'var(--dial-shadow)',\n background: 'var(--dial-glass-bg)',\n borderLeft: '1px solid var(--dial-border)',\n backdropFilter: 'blur(var(--dial-backdrop-blur))',\n padding: 'calc(var(--dial-row-gap) * 1.5)',\n }),\n )}\n data-theme=\"system\"\n >\n <Global styles={dialkitStyles} />\n <SelectControl\n label=\"Mode\"\n value={tweaks.mode}\n options={[\n {\n label: 'Live',\n value: 'live',\n },\n { label: 'Mock', value: 'mock' },\n ]}\n onChange={v => tweaks.set('mode', v)}\n />\n {tweaks.mode === 'live' && (\n <>\n {!lockBaseUrl && (\n <TextControl\n label=\"Base URL\"\n value={tweaks.baseUrl}\n onChange={v => tweaks.set('baseUrl', v)}\n />\n )}\n {!lockUserId && (\n <TextControl\n label=\"User ID\"\n value={tweaks.userId}\n onChange={v => tweaks.set('userId', v)}\n />\n )}\n </>\n )}\n {tweaks.mode === 'mock' && (\n <Folder title=\"Presence\">\n <SelectControl\n label=\"Status\"\n value={tweaks.presence.status}\n options={[\n {\n label: 'Online',\n value: 'online',\n },\n { label: 'Idle', value: 'idle' },\n { label: 'Offline', value: 'offline' },\n ]}\n onChange={v => tweaks.set('presence.status', v)}\n />\n {tweaks.presence.status !== 'offline' && tweaks.presence.activity !== null && (\n <>\n <TextControl\n label=\"Gerund\"\n value={tweaks.presence.activity.gerund}\n onChange={v => tweaks.set('presence.activity.gerund', v)}\n />\n <TextControl\n label=\"App Name\"\n value={tweaks.presence.activity.appName}\n onChange={v => tweaks.set('presence.activity.appName', v)}\n />\n <TextControl\n label=\"Icon Hash\"\n value={tweaks.presence.activity.iconHash!}\n onChange={v => tweaks.set('presence.activity.iconHash', v)}\n />\n </>\n )}\n </Folder>\n )}\n <Folder title=\"Theme\">\n <ColorControl\n label=\"Accent\"\n value={tweaks.theme.accentColor}\n onChange={v => tweaks.set('theme.accentColor', v)}\n />\n <SelectControl\n label=\"Color Scheme\"\n value={tweaks.theme.colorScheme}\n options={[\n { label: 'Inherit', value: 'inherit' },\n { label: 'Light', value: 'light' },\n { label: 'Dark', value: 'dark' },\n ]}\n onChange={v => tweaks.set('theme.colorScheme', v)}\n />\n <Slider\n label=\"Spacing Scaling\"\n min={0.8}\n max={2}\n step={0.1}\n value={tweaks.theme.spacingScaling}\n onChange={v => tweaks.set('theme.spacingScaling', v)}\n />\n <Slider\n label=\"Font Size Scaling\"\n min={0.8}\n max={2}\n step={0.1}\n value={tweaks.theme.fontSizeScaling}\n onChange={v => tweaks.set('theme.fontSizeScaling', v)}\n />\n <Slider\n label=\"Border Radius Scaling\"\n min={0}\n max={1.5}\n step={0.1}\n value={tweaks.theme.borderRadiusScaling}\n onChange={v => tweaks.set('theme.borderRadiusScaling', v)}\n />\n </Folder>\n <Folder title=\"Behavior\">\n <SelectControl\n label=\"Side\"\n value={tweaks.behavior.side}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n { label: 'Left', value: 'left' },\n { label: 'Right', value: 'right' },\n { label: 'Inline Start', value: 'inline-start' },\n { label: 'Inline End', value: 'inline-end' },\n ]}\n onChange={v => tweaks.set('behavior.side', v)}\n />\n <SelectControl\n label=\"Align\"\n value={tweaks.behavior.align}\n options={[\n { label: 'Start', value: 'start' },\n { label: 'Center', value: 'center' },\n { label: 'End', value: 'end' },\n ]}\n onChange={v => tweaks.set('behavior.align', v)}\n />\n <Slider\n label=\"Side Offset\"\n min={0}\n max={16}\n step={2}\n value={tweaks.behavior.sideOffset}\n onChange={v => tweaks.set('behavior.sideOffset', v)}\n />\n <Toggle\n label=\"Open on Hover\"\n checked={tweaks.behavior.openOnHover}\n onChange={v => tweaks.set('behavior.openOnHover', v)}\n />\n {tweaks.behavior.openOnHover && (\n <>\n <Slider\n label=\"Hover Open Delay\"\n min={0}\n max={1500}\n step={100}\n value={tweaks.behavior.hoverOpenDelay}\n onChange={v => tweaks.set('behavior.hoverOpenDelay', v)}\n />\n <Slider\n label=\"Hover Close Delay\"\n min={0}\n max={1500}\n step={100}\n value={tweaks.behavior.hoverCloseDelay}\n onChange={v => tweaks.set('behavior.hoverCloseDelay', v)}\n />\n </>\n )}\n </Folder>\n <Folder title=\"Trigger\">\n <SelectControl\n label=\"Variant\"\n value={tweaks.trigger.variant}\n options={[\n { label: 'Inline', value: 'inline' },\n { label: 'Pill', value: 'pill' },\n ]}\n onChange={v => tweaks.set('trigger.variant', v)}\n />\n {tweaks.trigger.variant === 'inline' && (\n <Toggle\n label=\"Shimmer\"\n checked={tweaks.trigger.shimmer}\n onChange={v => tweaks.set('trigger.shimmer', v)}\n />\n )}\n {tweaks.trigger.variant === 'pill' && (\n <Toggle\n label=\"Gradient\"\n checked={tweaks.trigger.gradient}\n onChange={v => tweaks.set('trigger.gradient', v)}\n />\n )}\n </Folder>\n <Folder title=\"Popover\">\n <Toggle\n label=\"Ring\"\n checked={tweaks.popover.ring}\n onChange={v => tweaks.set('popover.ring', v)}\n />\n <SelectControl\n label=\"Shadow\"\n value={tweaks.popover.shadow}\n options={[\n { label: 'Off', value: 'none' },\n { label: 'Subtle', value: 'subtle' },\n { label: 'Elevated', value: 'elevated' },\n ]}\n onChange={v => tweaks.set('popover.shadow', v)}\n />\n <Slider\n label=\"Min Width\"\n min={200}\n max={320}\n step={10}\n value={tweaks.popover.minWidth}\n onChange={v => tweaks.set('popover.minWidth', v)}\n />\n <Toggle\n label=\"Gerund capitalize\"\n checked={tweaks.popover.gerundCapitalize}\n onChange={v => tweaks.set('popover.gerundCapitalize', v)}\n />\n <Toggle\n label=\"Gerund ellipsis\"\n checked={tweaks.popover.gerundEllipsis}\n onChange={v => tweaks.set('popover.gerundEllipsis', v)}\n />\n </Folder>\n <ButtonGroup buttons={[{ label: 'Reset', onClick: tweaks.reset }]} />\n </div>\n )}\n </ClassNames>\n )\n}\n"],"mappings":"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"}
package/dist/components/playground/playground.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  //#region src/components/playground/playground.d.ts
2
2
  type ChimelingPlaygroundProps = {
3
3
  className?: string;
4
+ baseUrl?: string;
5
+ userId?: string;
4
6
  };
5
- declare function ChimelingPlayground({ className }: ChimelingPlaygroundProps): import("react").JSX.Element;
7
+ declare function ChimelingPlayground({ className, baseUrl, userId }: ChimelingPlaygroundProps): import("react").JSX.Element;
6
8
  //#endregion
7
9
  export { ChimelingPlayground, ChimelingPlaygroundProps };
8
10
  //# sourceMappingURL=playground.d.ts.map
package/dist/components/playground/playground.js CHANGED
@@ -6,27 +6,51 @@ import { PlaygroundPanel } from "./panel.js";
6
6
  import { ClassNames } from "@emotion/react";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
  //#region src/components/playground/playground.tsx
9
- function ChimelingPlayground({ className }) {
9
+ function ChimelingPlayground({ className, baseUrl, userId }) {
10
10
  const tweaks = useTweaks();
11
+ const resolvedBaseUrl = baseUrl ?? tweaks.baseUrl;
12
+ const resolvedUserId = userId ?? tweaks.userId;
11
13
  return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
12
- className: cx(css({
13
- display: "flex",
14
- alignItems: "center",
15
- justifyContent: "center",
16
- position: "relative"
17
- }), className),
18
- children: [/* @__PURE__ */ jsx(PlaygroundPanel, {}), /* @__PURE__ */ jsx(ChimelingProvider, {
19
- baseUrl: tweaks.baseUrl,
20
- children: /* @__PURE__ */ jsxs(Chimeling.Root, {
21
- userId: tweaks.userId,
22
- presence: tweaks.mode === "mock" ? tweaks.presence : void 0,
23
- side: tweaks.behavior.side,
24
- align: tweaks.behavior.align,
25
- openOnHover: tweaks.behavior.openOnHover,
26
- hoverOpenDelay: tweaks.behavior.hoverOpenDelay,
27
- hoverCloseDelay: tweaks.behavior.hoverCloseDelay,
28
- children: [/* @__PURE__ */ jsx(Chimeling.Trigger, {}), /* @__PURE__ */ jsx(Chimeling.Popover, {})]
14
+ className: cx(css({ display: "flex" }), className),
15
+ children: [/* @__PURE__ */ jsx("div", {
16
+ className: css({
17
+ flexGrow: 1,
18
+ display: "flex",
19
+ alignItems: "center",
20
+ justifyContent: "center"
21
+ }),
22
+ children: /* @__PURE__ */ jsx(ChimelingProvider, {
23
+ baseUrl: resolvedBaseUrl,
24
+ accentColor: tweaks.theme.accentColor,
25
+ colorScheme: tweaks.theme.colorScheme,
26
+ spacingScaling: tweaks.theme.spacingScaling,
27
+ fontSizeScaling: tweaks.theme.fontSizeScaling,
28
+ borderRadiusScaling: tweaks.theme.borderRadiusScaling,
29
+ children: /* @__PURE__ */ jsxs(Chimeling.Root, {
30
+ userId: resolvedUserId,
31
+ presence: tweaks.mode === "mock" ? tweaks.presence : void 0,
32
+ side: tweaks.behavior.side,
33
+ align: tweaks.behavior.align,
34
+ sideOffset: tweaks.behavior.sideOffset,
35
+ openOnHover: tweaks.behavior.openOnHover,
36
+ hoverOpenDelay: tweaks.behavior.hoverOpenDelay,
37
+ hoverCloseDelay: tweaks.behavior.hoverCloseDelay,
38
+ children: [/* @__PURE__ */ jsx(Chimeling.Trigger, {
39
+ variant: tweaks.trigger.variant,
40
+ shimmer: tweaks.trigger.shimmer,
41
+ gradient: tweaks.trigger.gradient
42
+ }), /* @__PURE__ */ jsx(Chimeling.Popover, {
43
+ ring: tweaks.popover.ring,
44
+ shadow: tweaks.popover.shadow,
45
+ minWidth: tweaks.popover.minWidth,
46
+ gerundCapitalize: tweaks.popover.gerundCapitalize,
47
+ gerundEllipsis: tweaks.popover.gerundEllipsis
48
+ })]
49
+ })
29
50
  })
51
+ }), /* @__PURE__ */ jsx(PlaygroundPanel, {
52
+ lockBaseUrl: typeof baseUrl === "string",
53
+ lockUserId: typeof userId === "string"
30
54
  })]
31
55
  }) });
32
56
  }
package/dist/components/playground/playground.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n className?: string\n}\n\nexport function ChimelingPlayground({ className }: ChimelingPlaygroundProps) {\n const tweaks = useTweaks()\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n }),\n className,\n )}\n >\n <PlaygroundPanel />\n <ChimelingProvider baseUrl={tweaks.baseUrl}>\n <Chimeling.Root\n userId={tweaks.userId}\n presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n side={tweaks.behavior.side}\n align={tweaks.behavior.align}\n openOnHover={tweaks.behavior.openOnHover}\n hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n >\n <Chimeling.Trigger />\n <Chimeling.Popover />\n </Chimeling.Root>\n </ChimelingProvider>\n </div>\n )}\n </ClassNames>\n )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,oBAAoB,EAAE,aAAuC;CAC3E,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;EACZ,CAAC,GACD,SACF;EATF,UAAA,CAWE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,mBAAD;GAAmB,SAAS,OAAO;GACjC,UAAA,qBAAC,UAAU,MAAX;IACE,QAAQ,OAAO;IACf,UAAU,OAAO,SAAS,SAAS,OAAO,WAAW,KAAA;IACrD,MAAM,OAAO,SAAS;IACtB,OAAO,OAAO,SAAS;IACvB,aAAa,OAAO,SAAS;IAC7B,gBAAgB,OAAO,SAAS;IAChC,iBAAiB,OAAO,SAAS;IAPnC,UAAA,CASE,oBAAC,UAAU,SAAX,CAAoB,CAAA,GACpB,oBAAC,UAAU,SAAX,CAAoB,CAAA,CACN;;EACC,CAAA,CAChB;CAEG,CAAA,EAAA,CAAA;AAEhB"}
1
+ {"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n className?: string\n baseUrl?: string\n userId?: string\n}\n\nexport function ChimelingPlayground({ className, baseUrl, userId }: ChimelingPlaygroundProps) {\n const tweaks = useTweaks()\n const resolvedBaseUrl = baseUrl ?? tweaks.baseUrl\n const resolvedUserId = userId ?? tweaks.userId\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n css({\n display: 'flex',\n }),\n className,\n )}\n >\n <div\n className={css({\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n })}\n >\n <ChimelingProvider\n baseUrl={resolvedBaseUrl}\n accentColor={tweaks.theme.accentColor}\n colorScheme={tweaks.theme.colorScheme}\n spacingScaling={tweaks.theme.spacingScaling}\n fontSizeScaling={tweaks.theme.fontSizeScaling}\n borderRadiusScaling={tweaks.theme.borderRadiusScaling}\n >\n <Chimeling.Root\n userId={resolvedUserId}\n presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n side={tweaks.behavior.side}\n align={tweaks.behavior.align}\n sideOffset={tweaks.behavior.sideOffset}\n openOnHover={tweaks.behavior.openOnHover}\n hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n >\n <Chimeling.Trigger\n variant={tweaks.trigger.variant}\n shimmer={tweaks.trigger.shimmer}\n gradient={tweaks.trigger.gradient}\n />\n <Chimeling.Popover\n ring={tweaks.popover.ring}\n shadow={tweaks.popover.shadow}\n minWidth={tweaks.popover.minWidth}\n gerundCapitalize={tweaks.popover.gerundCapitalize}\n gerundEllipsis={tweaks.popover.gerundEllipsis}\n />\n </Chimeling.Root>\n </ChimelingProvider>\n </div>\n <PlaygroundPanel\n lockBaseUrl={typeof baseUrl === 'string'}\n lockUserId={typeof userId === 'string'}\n />\n </div>\n )}\n </ClassNames>\n )\n}\n"],"mappings":";;;;;;;;AAcA,SAAgB,oBAAoB,EAAE,WAAW,SAAS,UAAoC;CAC5F,MAAM,SAAS,UAAU;CACzB,MAAM,kBAAkB,WAAW,OAAO;CAC1C,MAAM,iBAAiB,UAAU,OAAO;CAExC,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,IAAI,EACF,SAAS,OACX,CAAC,GACD,SACF;EANF,UAAA,CAQE,oBAAC,OAAD;GACE,WAAW,IAAI;IACb,UAAU;IACV,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB,CAAC;GAED,UAAA,oBAAC,mBAAD;IACE,SAAS;IACT,aAAa,OAAO,MAAM;IAC1B,aAAa,OAAO,MAAM;IAC1B,gBAAgB,OAAO,MAAM;IAC7B,iBAAiB,OAAO,MAAM;IAC9B,qBAAqB,OAAO,MAAM;IAElC,UAAA,qBAAC,UAAU,MAAX;KACE,QAAQ;KACR,UAAU,OAAO,SAAS,SAAS,OAAO,WAAW,KAAA;KACrD,MAAM,OAAO,SAAS;KACtB,OAAO,OAAO,SAAS;KACvB,YAAY,OAAO,SAAS;KAC5B,aAAa,OAAO,SAAS;KAC7B,gBAAgB,OAAO,SAAS;KAChC,iBAAiB,OAAO,SAAS;KARnC,UAAA,CAUE,oBAAC,UAAU,SAAX;MACE,SAAS,OAAO,QAAQ;MACxB,SAAS,OAAO,QAAQ;MACxB,UAAU,OAAO,QAAQ;KAC1B,CAAA,GACD,oBAAC,UAAU,SAAX;MACE,MAAM,OAAO,QAAQ;MACrB,QAAQ,OAAO,QAAQ;MACvB,UAAU,OAAO,QAAQ;MACzB,kBAAkB,OAAO,QAAQ;MACjC,gBAAgB,OAAO,QAAQ;KAChC,CAAA,CACa;;GACC,CAAA;EAChB,CAAA,GACL,oBAAC,iBAAD;GACE,aAAa,OAAO,YAAY;GAChC,YAAY,OAAO,WAAW;EAC/B,CAAA,CACE;CAEG,CAAA,EAAA,CAAA;AAEhB"}
package/dist/components/playground/store.js CHANGED
@@ -1,17 +1,22 @@
1
+ import { DEFAULT_ACCENT_COLOR } from "../../theme/tokens.js";
2
+ import "../../theme/index.js";
3
+ import { DEFAULT_BASE_URL } from "../provider.js";
4
+ import { DEFAULT_ROOT } from "../root.js";
5
+ import { DEFAULT_TRIGGER } from "../trigger.js";
6
+ import { DEFAULT_POPOVER } from "../popover.js";
1
7
  import { create } from "zustand";
2
8
  import { createJSONStorage, persist } from "zustand/middleware";
3
9
  import { cloneDeep, get, set } from "es-toolkit/compat";
4
10
  //#region src/components/playground/store.ts
11
+ const NOW = /* @__PURE__ */ new Date();
5
12
  const defaults = {
6
- baseUrl: "https://chimeling.app",
13
+ baseUrl: DEFAULT_BASE_URL,
7
14
  userId: "user_3GA6hha0H3nrk9rTeCJ3pR6DcvY",
8
15
  mode: "mock",
9
16
  behavior: {
10
- openOnHover: false,
11
- hoverOpenDelay: 300,
12
- hoverCloseDelay: 0,
13
17
  side: "bottom",
14
- align: "center"
18
+ align: "center",
19
+ ...DEFAULT_ROOT
15
20
  },
16
21
  presence: {
17
22
  status: "online",
@@ -19,9 +24,18 @@ const defaults = {
19
24
  gerund: "writing code",
20
25
  appName: "Xcode",
21
26
  iconHash: "9e769c255c3afb5b435502f8294229c78e7514cf51051c16ddf368d72f757b1d",
22
- startedAt: /* @__PURE__ */ new Date()
27
+ startedAt: NOW
23
28
  }
24
- }
29
+ },
30
+ theme: {
31
+ accentColor: DEFAULT_ACCENT_COLOR,
32
+ colorScheme: "inherit",
33
+ spacingScaling: 1,
34
+ fontSizeScaling: 1,
35
+ borderRadiusScaling: 1
36
+ },
37
+ trigger: { ...DEFAULT_TRIGGER },
38
+ popover: { ...DEFAULT_POPOVER }
25
39
  };
26
40
  const useTweaks = create()(persist((set$1, getState) => ({
27
41
  ...defaults,
@@ -35,7 +49,34 @@ const useTweaks = create()(persist((set$1, getState) => ({
35
49
  }), {
36
50
  name: "chimeling-playground",
37
51
  storage: createJSONStorage(() => localStorage, { reviver: (key, value) => key === "startedAt" && typeof value === "string" ? new Date(value) : value }),
38
- partialize: ({ get, set, reset, ...tweaks }) => tweaks
52
+ partialize: ({ get, set, reset, ...tweaks }) => tweaks,
53
+ merge: (persisted, current) => {
54
+ const saved = persisted ?? {};
55
+ return {
56
+ ...current,
57
+ ...saved,
58
+ behavior: {
59
+ ...current.behavior,
60
+ ...saved.behavior
61
+ },
62
+ presence: {
63
+ ...current.presence,
64
+ ...saved.presence
65
+ },
66
+ theme: {
67
+ ...current.theme,
68
+ ...saved.theme
69
+ },
70
+ trigger: {
71
+ ...current.trigger,
72
+ ...saved.trigger
73
+ },
74
+ popover: {
75
+ ...current.popover,
76
+ ...saved.popover
77
+ }
78
+ };
79
+ }
39
80
  }));
40
81
  //#endregion
41
82
  export { useTweaks as default };
package/dist/components/playground/store.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"store.js","names":["lodashGet","set","lodashCloneDeep"],"sources":["../../../src/components/playground/store.ts"],"sourcesContent":["import { create } from 'zustand'\nimport { persist, createJSONStorage } from 'zustand/middleware'\nimport { get as lodashGet, set as lodashSet, cloneDeep as lodashCloneDeep } from 'es-toolkit/compat'\nimport type { GetResolvedUserPresenceResponse } from '@cairntale/chimeling-js'\nimport type { Chimeling } from '../chimeling'\n\ninterface Tweaks {\n baseUrl: string\n userId: string\n mode: 'live' | 'mock'\n behavior: Required<\n Pick<\n React.ComponentProps<typeof Chimeling.Root>,\n 'openOnHover' | 'hoverOpenDelay' | 'hoverCloseDelay' | 'align' | 'side'\n >\n >\n presence: GetResolvedUserPresenceResponse\n}\n\nconst NOW = new Date()\n\nconst defaults: Tweaks = {\n baseUrl: 'https://chimeling.app',\n userId: 'user_3GA6hha0H3nrk9rTeCJ3pR6DcvY',\n mode: 'mock',\n behavior: {\n openOnHover: false,\n hoverOpenDelay: 300,\n hoverCloseDelay: 0,\n side: 'bottom',\n align: 'center',\n },\n presence: {\n status: 'online',\n activity: {\n gerund: 'writing code',\n appName: 'Xcode',\n iconHash: '9e769c255c3afb5b435502f8294229c78e7514cf51051c16ddf368d72f757b1d',\n startedAt: NOW,\n },\n },\n}\n\nconst useTweaks = create<\n Tweaks & {\n get: (path: string) => any\n set: (path: string, value: any) => void\n reset: () => void\n }\n>()(\n persist(\n (set, getState) => ({\n ...defaults,\n get: (path: string): any => lodashGet(getState(), path),\n set: (path: string, value: any) =>\n set(state => {\n const next = lodashCloneDeep(state)\n lodashSet(next, path, value)\n return next\n }),\n reset: () => set(defaults),\n }),\n {\n name: 'chimeling-playground',\n storage: createJSONStorage(() => localStorage, {\n reviver: (key, value) =>\n key === 'startedAt' && typeof value === 'string' ? new Date(value) : value, // TODO: a more robust date parsing\n }),\n partialize: ({ get, set, reset, ...tweaks }) => tweaks,\n },\n ),\n)\n\nexport default useTweaks\n"],"mappings":";;;;AAqBA,MAAM,WAAmB;CACvB,SAAS;CACT,QAAQ;CACR,MAAM;CACN,UAAU;EACR,aAAa;EACb,gBAAgB;EAChB,iBAAiB;EACjB,MAAM;EACN,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,UAAU;GACR,QAAQ;GACR,SAAS;GACT,UAAU;GACV,2BAAW,IAnBD,KAmBG;EACf;CACF;AACF;AAEA,MAAM,YAAY,OAMhB,CAAC,CACD,SACG,OAAK,cAAc;CAClB,GAAG;CACH,MAAM,SAAsBA,IAAU,SAAS,GAAG,IAAI;CACtD,MAAM,MAAc,UAClBC,OAAI,UAAS;EACX,MAAM,OAAOC,UAAgB,KAAK;EAClC,IAAU,MAAM,MAAM,KAAK;EAC3B,OAAO;CACT,CAAC;CACH,aAAaD,MAAI,QAAQ;AAC3B,IACA;CACE,MAAM;CACN,SAAS,wBAAwB,cAAc,EAC7C,UAAU,KAAK,UACb,QAAQ,eAAe,OAAO,UAAU,WAAW,IAAI,KAAK,KAAK,IAAI,MACzE,CAAC;CACD,aAAa,EAAE,KAAK,KAAK,OAAO,GAAG,aAAa;AAClD,CACF,CACF"}
1
+ {"version":3,"file":"store.js","names":["lodashGet","set","lodashCloneDeep"],"sources":["../../../src/components/playground/store.ts"],"sourcesContent":["import { create } from 'zustand'\nimport { persist, createJSONStorage } from 'zustand/middleware'\nimport { get as lodashGet, set as lodashSet, cloneDeep as lodashCloneDeep } from 'es-toolkit/compat'\nimport type { GetResolvedUserPresenceResponse } from '@cairntale/chimeling-js'\nimport type { Chimeling } from '../chimeling'\nimport {\n DEFAULT_ACCENT_COLOR,\n DEFAULT_FONT_SIZE_SCALING,\n DEFAULT_BORDER_RADIUS_SCALING,\n DEFAULT_SPACING_SCALING,\n} from '../../theme'\nimport type { ChimelingColorScheme } from '../../theme'\nimport { DEFAULT_ROOT } from '../root'\nimport { DEFAULT_TRIGGER } from '../trigger'\nimport { DEFAULT_POPOVER } from '../popover'\nimport { DEFAULT_BASE_URL } from '../provider'\n\ninterface Tweaks {\n baseUrl: string\n userId: string\n mode: 'live' | 'mock'\n behavior: Required<\n Pick<\n React.ComponentProps<typeof Chimeling.Root>,\n 'openOnHover' | 'hoverOpenDelay' | 'hoverCloseDelay' | 'align' | 'side' | 'sideOffset'\n >\n >\n presence: GetResolvedUserPresenceResponse\n theme: {\n accentColor: string\n colorScheme: ChimelingColorScheme\n spacingScaling: number\n fontSizeScaling: number\n borderRadiusScaling: number\n }\n trigger: {\n variant: 'inline' | 'pill'\n shimmer: boolean\n gradient: boolean\n }\n popover: Required<\n Pick<\n React.ComponentProps<typeof Chimeling.Popover>,\n 'ring' | 'shadow' | 'minWidth' | 'gerundCapitalize' | 'gerundEllipsis'\n >\n >\n}\n\nconst NOW = new Date()\n\nconst defaults: Tweaks = {\n baseUrl: DEFAULT_BASE_URL,\n userId: 'user_3GA6hha0H3nrk9rTeCJ3pR6DcvY',\n mode: 'mock',\n behavior: {\n side: 'bottom',\n align: 'center',\n ...DEFAULT_ROOT,\n },\n presence: {\n status: 'online',\n activity: {\n gerund: 'writing code',\n appName: 'Xcode',\n iconHash: '9e769c255c3afb5b435502f8294229c78e7514cf51051c16ddf368d72f757b1d',\n startedAt: NOW,\n },\n },\n theme: {\n accentColor: DEFAULT_ACCENT_COLOR,\n colorScheme: 'inherit',\n spacingScaling: DEFAULT_SPACING_SCALING,\n fontSizeScaling: DEFAULT_FONT_SIZE_SCALING,\n borderRadiusScaling: DEFAULT_BORDER_RADIUS_SCALING,\n },\n trigger: { ...DEFAULT_TRIGGER },\n popover: { ...DEFAULT_POPOVER },\n}\n\nconst useTweaks = create<\n Tweaks & {\n get: (path: string) => any\n set: (path: string, value: any) => void\n reset: () => void\n }\n>()(\n persist(\n (set, getState) => ({\n ...defaults,\n get: (path: string): any => lodashGet(getState(), path),\n set: (path: string, value: any) =>\n set(state => {\n const next = lodashCloneDeep(state)\n lodashSet(next, path, value)\n return next\n }),\n reset: () => set(defaults),\n }),\n {\n name: 'chimeling-playground',\n storage: createJSONStorage(() => localStorage, {\n reviver: (key, value) =>\n key === 'startedAt' && typeof value === 'string' ? new Date(value) : value,\n }),\n partialize: ({ get, set, reset, ...tweaks }) => tweaks,\n merge: (persisted, current) => {\n const saved = (persisted ?? {}) as Partial<Tweaks>\n\n return {\n ...current,\n ...saved,\n behavior: { ...current.behavior, ...saved.behavior },\n presence: { ...current.presence, ...saved.presence },\n theme: { ...current.theme, ...saved.theme },\n trigger: { ...current.trigger, ...saved.trigger },\n popover: { ...current.popover, ...saved.popover },\n }\n },\n },\n ),\n)\n\nexport default useTweaks\n"],"mappings":";;;;;;;;;;AAgDA,MAAM,sBAAM,IAAI,KAAK;AAErB,MAAM,WAAmB;CACvB,SAAS;CACT,QAAQ;CACR,MAAM;CACN,UAAU;EACR,MAAM;EACN,OAAO;EACP,GAAG;CACL;CACA,UAAU;EACR,QAAQ;EACR,UAAU;GACR,QAAQ;GACR,SAAS;GACT,UAAU;GACV,WAAW;EACb;CACF;CACA,OAAO;EACL,aAAa;EACb,aAAa;EACb,gBAAA;EACA,iBAAA;EACA,qBAAA;CACF;CACA,SAAS,EAAE,GAAG,gBAAgB;CAC9B,SAAS,EAAE,GAAG,gBAAgB;AAChC;AAEA,MAAM,YAAY,OAMhB,CAAC,CACD,SACG,OAAK,cAAc;CAClB,GAAG;CACH,MAAM,SAAsBA,IAAU,SAAS,GAAG,IAAI;CACtD,MAAM,MAAc,UAClBC,OAAI,UAAS;EACX,MAAM,OAAOC,UAAgB,KAAK;EAClC,IAAU,MAAM,MAAM,KAAK;EAC3B,OAAO;CACT,CAAC;CACH,aAAaD,MAAI,QAAQ;AAC3B,IACA;CACE,MAAM;CACN,SAAS,wBAAwB,cAAc,EAC7C,UAAU,KAAK,UACb,QAAQ,eAAe,OAAO,UAAU,WAAW,IAAI,KAAK,KAAK,IAAI,MACzE,CAAC;CACD,aAAa,EAAE,KAAK,KAAK,OAAO,GAAG,aAAa;CAChD,QAAQ,WAAW,YAAY;EAC7B,MAAM,QAAS,aAAa,CAAC;EAE7B,OAAO;GACL,GAAG;GACH,GAAG;GACH,UAAU;IAAE,GAAG,QAAQ;IAAU,GAAG,MAAM;GAAS;GACnD,UAAU;IAAE,GAAG,QAAQ;IAAU,GAAG,MAAM;GAAS;GACnD,OAAO;IAAE,GAAG,QAAQ;IAAO,GAAG,MAAM;GAAM;GAC1C,SAAS;IAAE,GAAG,QAAQ;IAAS,GAAG,MAAM;GAAQ;GAChD,SAAS;IAAE,GAAG,QAAQ;IAAS,GAAG,MAAM;GAAQ;EAClD;CACF;AACF,CACF,CACF"}
package/dist/components/popover.d.ts CHANGED
@@ -1,7 +1,14 @@
1
1
  import { PopoverPopupProps } from "@base-ui/react/popover";
2
2
  //#region src/components/popover.d.ts
3
- type ChimelingPopoverProps = Pick<PopoverPopupProps, 'className' | 'style'>;
4
- declare function ChimelingPopover({ className, style }: ChimelingPopoverProps): import("react").JSX.Element | null;
3
+ type ChimelingPopoverProps = Pick<PopoverPopupProps, 'style'> & {
4
+ className?: string;
5
+ ring?: boolean;
6
+ shadow?: 'none' | 'subtle' | 'elevated';
7
+ minWidth?: number;
8
+ gerundCapitalize?: boolean;
9
+ gerundEllipsis?: boolean;
10
+ };
11
+ declare function ChimelingPopover({ className, style, ring, shadow, minWidth, gerundCapitalize, gerundEllipsis }: ChimelingPopoverProps): import("react").JSX.Element | null;
5
12
  //#endregion
6
13
  export { ChimelingPopover, ChimelingPopoverProps };
7
14
  //# sourceMappingURL=popover.d.ts.map