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

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 CHANGED
@@ -1,5 +1,11 @@
1
1
  # @cairntale/chimeling-react
2
2
 
3
+ ## 1.0.0-alpha.5
4
+
5
+ ### Patch Changes
6
+
7
+ - ee2eeb3: Fix the invalid `display` value and make the pane of `ChimelingPlayground` positioned absolutely.
8
+
3
9
  ## 1.0.0-alpha.4
4
10
 
5
11
  ### Patch Changes
@@ -10,10 +10,10 @@ function PlaygroundPanel() {
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
+ display: "flex",
14
14
  flexDirection: "column",
15
15
  gap: "var(--dial-row-gap)",
16
- position: "fixed",
16
+ position: "absolute",
17
17
  top: "calc(var(--dial-row-gap) * 1.5)",
18
18
  right: "calc(var(--dial-row-gap) * 1.5)",
19
19
  boxShadow: "var(--dial-shadow)",
@@ -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 { 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: 'flex',\n flexDirection: 'column',\n gap: 'var(--dial-row-gap)',\n position: 'absolute',\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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cairntale/chimeling-react",
3
- "version": "1.0.0-alpha.4",
3
+ "version": "1.0.0-alpha.5",
4
4
  "private": false,
5
5
  "description": "Chimeling React library",
6
6
  "homepage": "https://chimeling.app/",