@arcanejs/react-toolkit 0.4.1 → 0.6.0

package/README.md

@@ -90,7 +90,7 @@ const ControlPanel = () => {
       <Group>
         {`Switch State: ${switchState}`}
         <Switch
-            state={switchState}
+            value={switchState}
             onChange={setSwitchState}
           />
       </Group>
@@ -289,6 +289,12 @@ For a comprehensive list of examples,
 please see the example directory in the arcane monorepo:
 <https://github.com/arcanejs/arcanejs/tree/main/examples/react>
 
+### [Example Philips Hue App](https://github.com/arcanejs/hue-example)
+
+Check out this example repository that uses `@arcanejs/react-toolkit`
+to create an app that can be used to control a Philips Hue Bridge
+on your local network.
+
 ## Status / Suitability / Security Disclaimer
 
 This project is **experimental**,

package/dist/chunk-HVMRFXJ2.mjs

@@ -0,0 +1,49 @@
+// src/components.ts
+import * as React from "react";
+var Button = React.forwardRef(
+  (props, ref) => React.createElement("button", { ...props, ref }, props.children)
+);
+var Group = React.forwardRef(
+  (props, ref) => React.createElement("group", { ...props, ref }, props.children)
+);
+var GroupHeader = React.forwardRef(
+  (props, ref) => React.createElement("group-header", { ...props, ref }, props.children)
+);
+var Label = React.forwardRef(
+  (props, ref) => React.createElement("label", { ...props, ref }, props.children)
+);
+var Rect = React.forwardRef(
+  (props, ref) => React.createElement("rect", { ...props, ref }, props.children)
+);
+var SliderButton = React.forwardRef(
+  (props, ref) => React.createElement("slider-button", { ...props, ref }, props.children)
+);
+var Switch = React.forwardRef(
+  (props, ref) => React.createElement("switch", { ...props, ref }, props.children)
+);
+var Tab = React.forwardRef(
+  (props, ref) => React.createElement("tab", { ...props, ref }, props.children)
+);
+var Tabs = React.forwardRef(
+  (props, ref) => React.createElement("tabs", { ...props, ref }, props.children)
+);
+var TextInput = React.forwardRef(
+  (props, ref) => React.createElement("text-input", { ...props, ref }, props.children)
+);
+var Timeline = React.forwardRef(
+  (props, ref) => React.createElement("timeline", { ...props, ref }, props.children)
+);
+
+export {
+  Button,
+  Group,
+  GroupHeader,
+  Label,
+  Rect,
+  SliderButton,
+  Switch,
+  Tab,
+  Tabs,
+  TextInput,
+  Timeline
+};

package/dist/chunk-RKOUSLUW.js

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }// src/components.ts
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var Button = React.forwardRef(
+  (props, ref) => React.createElement("button", { ...props, ref }, props.children)
+);
+var Group = React.forwardRef(
+  (props, ref) => React.createElement("group", { ...props, ref }, props.children)
+);
+var GroupHeader = React.forwardRef(
+  (props, ref) => React.createElement("group-header", { ...props, ref }, props.children)
+);
+var Label = React.forwardRef(
+  (props, ref) => React.createElement("label", { ...props, ref }, props.children)
+);
+var Rect = React.forwardRef(
+  (props, ref) => React.createElement("rect", { ...props, ref }, props.children)
+);
+var SliderButton = React.forwardRef(
+  (props, ref) => React.createElement("slider-button", { ...props, ref }, props.children)
+);
+var Switch = React.forwardRef(
+  (props, ref) => React.createElement("switch", { ...props, ref }, props.children)
+);
+var Tab = React.forwardRef(
+  (props, ref) => React.createElement("tab", { ...props, ref }, props.children)
+);
+var Tabs = React.forwardRef(
+  (props, ref) => React.createElement("tabs", { ...props, ref }, props.children)
+);
+var TextInput = React.forwardRef(
+  (props, ref) => React.createElement("text-input", { ...props, ref }, props.children)
+);
+var Timeline = React.forwardRef(
+  (props, ref) => React.createElement("timeline", { ...props, ref }, props.children)
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Button = Button; exports.Group = Group; exports.GroupHeader = GroupHeader; exports.Label = Label; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.Switch = Switch; exports.Tab = Tab; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline;

package/dist/colors.d.mts

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { L as LightDeskIntrinsicElements } from './types-D0Wa4a4d.mjs';
+import '@arcanejs/toolkit/components/group';
+import '@arcanejs/toolkit/components/button';
+import '@arcanejs/toolkit/components/label';
+import '@arcanejs/toolkit/components/rect';
+import '@arcanejs/toolkit/components/slider-button';
+import '@arcanejs/toolkit/components/switch';
+import '@arcanejs/toolkit/components/tabs';
+import '@arcanejs/toolkit/components/text-input';
+import '@arcanejs/toolkit/components/timeline';
+
+type HslColor = {
+    /**
+     * Hue in degrees, between 0-360.
+     */
+    hue: number;
+    /**
+     * Percentage saturation, between 0-100.
+     */
+    saturation: number;
+    /**
+     * Percentage lightness, between 0-100.
+     */
+    lightness: number;
+    /**
+     * Alpha channel, between 0-1.
+     */
+    alpha?: number;
+};
+type HslColorPickerProps = {
+    color: HslColor;
+    onChange: (update: (current: HslColor) => HslColor) => void;
+    /**
+     * Should the alpha channel be shown?
+     *
+     * @default false
+     */
+    showAlpha?: boolean;
+    /**
+     * Props to pass to the group component.
+     *
+     * @see {@link DEFAULT_GROUP_PROPS}
+     */
+    groupProps?: LightDeskIntrinsicElements['group'];
+};
+declare const HslColorPicker: React__default.FC<HslColorPickerProps>;
+
+export { type HslColor, HslColorPicker, type HslColorPickerProps };

package/dist/colors.d.ts

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { L as LightDeskIntrinsicElements } from './types-D0Wa4a4d.js';
+import '@arcanejs/toolkit/components/group';
+import '@arcanejs/toolkit/components/button';
+import '@arcanejs/toolkit/components/label';
+import '@arcanejs/toolkit/components/rect';
+import '@arcanejs/toolkit/components/slider-button';
+import '@arcanejs/toolkit/components/switch';
+import '@arcanejs/toolkit/components/tabs';
+import '@arcanejs/toolkit/components/text-input';
+import '@arcanejs/toolkit/components/timeline';
+
+type HslColor = {
+    /**
+     * Hue in degrees, between 0-360.
+     */
+    hue: number;
+    /**
+     * Percentage saturation, between 0-100.
+     */
+    saturation: number;
+    /**
+     * Percentage lightness, between 0-100.
+     */
+    lightness: number;
+    /**
+     * Alpha channel, between 0-1.
+     */
+    alpha?: number;
+};
+type HslColorPickerProps = {
+    color: HslColor;
+    onChange: (update: (current: HslColor) => HslColor) => void;
+    /**
+     * Should the alpha channel be shown?
+     *
+     * @default false
+     */
+    showAlpha?: boolean;
+    /**
+     * Props to pass to the group component.
+     *
+     * @see {@link DEFAULT_GROUP_PROPS}
+     */
+    groupProps?: LightDeskIntrinsicElements['group'];
+};
+declare const HslColorPicker: React__default.FC<HslColorPickerProps>;
+
+export { type HslColor, HslColorPicker, type HslColorPickerProps };

package/dist/colors.js

@@ -0,0 +1,129 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkRKOUSLUWjs = require('./chunk-RKOUSLUW.js');
+
+// src/colors.tsx
+var _react = require('react');
+var _util = require('@arcanejs/toolkit/util');
+var _jsxruntime = require('react/jsx-runtime');
+var DEFAULT_GROUP_PROPS = {
+  wrap: true,
+  direction: "horizontal"
+};
+var HslColorPicker = ({
+  color,
+  onChange,
+  showAlpha = false,
+  groupProps
+}) => {
+  const { hue, saturation, lightness, alpha = 1 } = color;
+  const setHue = _react.useCallback.call(void 0, 
+    (newHue) => {
+      onChange((current) => ({
+        ...current,
+        hue: newHue
+      }));
+    },
+    [onChange]
+  );
+  const setSat = _react.useCallback.call(void 0, 
+    (newSat) => {
+      onChange((current) => ({
+        ...current,
+        saturation: newSat
+      }));
+    },
+    [onChange]
+  );
+  const setLightness = _react.useCallback.call(void 0, 
+    (newLightness) => {
+      onChange((current) => ({
+        ...current,
+        lightness: newLightness
+      }));
+    },
+    [onChange]
+  );
+  const setAlpha = _react.useCallback.call(void 0, 
+    (newAlpha) => {
+      onChange((current) => ({
+        ...current,
+        alpha: newAlpha
+      }));
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkRKOUSLUWjs.Group, { ...DEFAULT_GROUP_PROPS, ...groupProps, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRKOUSLUWjs.Rect, { color: `hsl(${hue}deg ${saturation}% ${lightness}% / ${alpha})` }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkRKOUSLUWjs.SliderButton,
+      {
+        value: hue,
+        onChange: setHue,
+        min: 0,
+        max: 360,
+        step: 1,
+        gradient: _util.HUE_GRADIENT,
+        grow: true
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkRKOUSLUWjs.SliderButton,
+      {
+        value: saturation,
+        onChange: setSat,
+        min: 0,
+        max: 100,
+        step: 1,
+        gradient: [
+          { color: `hsl(${hue}deg 0% ${lightness}%)`, position: 0 },
+          { color: `hsl(${hue}deg 50% ${lightness}%)`, position: 0.5 },
+          { color: `hsl(${hue}deg 100% ${lightness}%)`, position: 1 }
+        ],
+        grow: true
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkRKOUSLUWjs.SliderButton,
+      {
+        value: lightness,
+        onChange: setLightness,
+        min: 0,
+        max: 100,
+        step: 1,
+        gradient: [
+          { color: `hsl(${hue}deg ${saturation}% 0%)`, position: 0 },
+          { color: `hsl(${hue}deg ${saturation}% 50%)`, position: 0.5 },
+          { color: `hsl(${hue}deg ${saturation}% 100%)`, position: 1 }
+        ],
+        grow: true
+      }
+    ),
+    showAlpha && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkRKOUSLUWjs.SliderButton,
+      {
+        value: alpha,
+        onChange: setAlpha,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        gradient: [
+          {
+            color: `hsla(${hue}deg ${saturation}% ${lightness}% / 0)`,
+            position: 0
+          },
+          {
+            color: `hsla(${hue}deg ${saturation}% ${lightness}% / 1)`,
+            position: 1
+          }
+        ],
+        grow: true
+      }
+    )
+  ] });
+};
+
+
+exports.HslColorPicker = HslColorPicker;

package/dist/colors.mjs

@@ -0,0 +1,129 @@
+import {
+  Group,
+  Rect,
+  SliderButton
+} from "./chunk-HVMRFXJ2.mjs";
+
+// src/colors.tsx
+import { useCallback } from "react";
+import { HUE_GRADIENT } from "@arcanejs/toolkit/util";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_GROUP_PROPS = {
+  wrap: true,
+  direction: "horizontal"
+};
+var HslColorPicker = ({
+  color,
+  onChange,
+  showAlpha = false,
+  groupProps
+}) => {
+  const { hue, saturation, lightness, alpha = 1 } = color;
+  const setHue = useCallback(
+    (newHue) => {
+      onChange((current) => ({
+        ...current,
+        hue: newHue
+      }));
+    },
+    [onChange]
+  );
+  const setSat = useCallback(
+    (newSat) => {
+      onChange((current) => ({
+        ...current,
+        saturation: newSat
+      }));
+    },
+    [onChange]
+  );
+  const setLightness = useCallback(
+    (newLightness) => {
+      onChange((current) => ({
+        ...current,
+        lightness: newLightness
+      }));
+    },
+    [onChange]
+  );
+  const setAlpha = useCallback(
+    (newAlpha) => {
+      onChange((current) => ({
+        ...current,
+        alpha: newAlpha
+      }));
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(Group, { ...DEFAULT_GROUP_PROPS, ...groupProps, children: [
+    /* @__PURE__ */ jsx(Rect, { color: `hsl(${hue}deg ${saturation}% ${lightness}% / ${alpha})` }),
+    /* @__PURE__ */ jsx(
+      SliderButton,
+      {
+        value: hue,
+        onChange: setHue,
+        min: 0,
+        max: 360,
+        step: 1,
+        gradient: HUE_GRADIENT,
+        grow: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderButton,
+      {
+        value: saturation,
+        onChange: setSat,
+        min: 0,
+        max: 100,
+        step: 1,
+        gradient: [
+          { color: `hsl(${hue}deg 0% ${lightness}%)`, position: 0 },
+          { color: `hsl(${hue}deg 50% ${lightness}%)`, position: 0.5 },
+          { color: `hsl(${hue}deg 100% ${lightness}%)`, position: 1 }
+        ],
+        grow: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderButton,
+      {
+        value: lightness,
+        onChange: setLightness,
+        min: 0,
+        max: 100,
+        step: 1,
+        gradient: [
+          { color: `hsl(${hue}deg ${saturation}% 0%)`, position: 0 },
+          { color: `hsl(${hue}deg ${saturation}% 50%)`, position: 0.5 },
+          { color: `hsl(${hue}deg ${saturation}% 100%)`, position: 1 }
+        ],
+        grow: true
+      }
+    ),
+    showAlpha && /* @__PURE__ */ jsx(
+      SliderButton,
+      {
+        value: alpha,
+        onChange: setAlpha,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        gradient: [
+          {
+            color: `hsla(${hue}deg ${saturation}% ${lightness}% / 0)`,
+            position: 0
+          },
+          {
+            color: `hsla(${hue}deg ${saturation}% ${lightness}% / 1)`,
+            position: 1
+          }
+        ],
+        grow: true
+      }
+    )
+  ] });
+};
+export {
+  HslColorPicker
+};

package/dist/index.d.mts

@@ -1,69 +1,15 @@
 import * as ld from '@arcanejs/toolkit';
-import { Props as Props$1, Events as Events$1, Group as Group$1, GroupHeader as GroupHeader$1 } from '@arcanejs/toolkit/components/group';
-import { Props, Events, Button as Button$1 } from '@arcanejs/toolkit/components/button';
-import { Props as Props$2, Label as Label$1 } from '@arcanejs/toolkit/components/label';
-import { Props as Props$3, Rect as Rect$1 } from '@arcanejs/toolkit/components/rect';
-import { Props as Props$4, Events as Events$2, SliderButton as SliderButton$1 } from '@arcanejs/toolkit/components/slider-button';
-import { Props as Props$5, Events as Events$3, Switch as Switch$1 } from '@arcanejs/toolkit/components/switch';
-import { TabProps, Tab as Tab$1, TabsProps, Tabs as Tabs$1 } from '@arcanejs/toolkit/components/tabs';
-import { Props as Props$6, Events as Events$4, TextInput as TextInput$1 } from '@arcanejs/toolkit/components/text-input';
-import { Props as Props$7, Timeline as Timeline$1 } from '@arcanejs/toolkit/components/timeline';
+import { Group as Group$1, GroupHeader as GroupHeader$1, Props } from '@arcanejs/toolkit/components/group';
+import { L as LightDeskIntrinsicElements } from './types-D0Wa4a4d.mjs';
 import * as React from 'react';
-import { Ref } from 'react';
-
-type Child = JSX.Element | string | null | undefined | boolean;
-type Children = Child | Child[];
-interface LightDeskIntrinsicElements {
-    button: Props & {
-        children?: never;
-        onClick?: Events['click'];
-        ref?: Ref<Button$1>;
-    };
-    group: Props$1 & {
-        children?: Children;
-        onTitleChanged?: Events$1['title-changed'];
-        ref?: Ref<Group$1>;
-    };
-    'group-header': {
-        children?: Children;
-        ref?: Ref<GroupHeader$1>;
-    };
-    label: Props$2 & {
-        children?: never;
-        ref?: Ref<Label$1>;
-    };
-    rect: Props$3 & {
-        children?: never;
-        ref?: Ref<Rect$1>;
-    };
-    'slider-button': Props$4 & {
-        children?: never;
-        onChange?: Events$2['change'];
-        ref?: Ref<SliderButton$1>;
-    };
-    switch: Props$5 & {
-        children?: never;
-        onChange?: Events$3['change'];
-        ref?: Ref<Switch$1>;
-    };
-    tab: TabProps & {
-        children?: JSX.Element | string;
-        ref?: Ref<Tab$1>;
-    };
-    tabs: TabsProps & {
-        children?: JSX.Element | JSX.Element[];
-        ref?: Ref<Tabs$1>;
-    };
-    'text-input': Props$6 & {
-        children?: JSX.Element | JSX.Element[];
-        onChange?: Events$4['change'];
-        ref?: Ref<TextInput$1>;
-    };
-    timeline: Props$7 & {
-        children?: never;
-        ref?: Ref<Timeline$1>;
-    };
-}
+import { Button as Button$1 } from '@arcanejs/toolkit/components/button';
+import { Label as Label$1 } from '@arcanejs/toolkit/components/label';
+import { Rect as Rect$1 } from '@arcanejs/toolkit/components/rect';
+import { SliderButton as SliderButton$1 } from '@arcanejs/toolkit/components/slider-button';
+import { Switch as Switch$1 } from '@arcanejs/toolkit/components/switch';
+import { Tab as Tab$1, Tabs as Tabs$1 } from '@arcanejs/toolkit/components/tabs';
+import { Timeline as Timeline$1 } from '@arcanejs/toolkit/components/timeline';
+import { TextInput as TextInput$1 } from '@arcanejs/toolkit/components/text-input';
 
 type ComponentWithRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
 declare const Button: ComponentWithRef<Button$1, LightDeskIntrinsicElements['button']>;
@@ -80,7 +26,7 @@ declare const Timeline: ComponentWithRef<Timeline$1, LightDeskIntrinsicElements[
 
 declare const ToolkitRenderer: {
     renderGroup: (component: JSX.Element, container: ld.Group) => void;
-    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props$1) => void;
+    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props) => void;
 };
 
-export { Button, Group, GroupHeader, Label, type LightDeskIntrinsicElements, Rect, SliderButton, Switch, Tab, Tabs, TextInput, Timeline, ToolkitRenderer };
+export { Button, Group, GroupHeader, Label, LightDeskIntrinsicElements, Rect, SliderButton, Switch, Tab, Tabs, TextInput, Timeline, ToolkitRenderer };

package/dist/index.d.ts

@@ -1,69 +1,15 @@
 import * as ld from '@arcanejs/toolkit';
-import { Props as Props$1, Events as Events$1, Group as Group$1, GroupHeader as GroupHeader$1 } from '@arcanejs/toolkit/components/group';
-import { Props, Events, Button as Button$1 } from '@arcanejs/toolkit/components/button';
-import { Props as Props$2, Label as Label$1 } from '@arcanejs/toolkit/components/label';
-import { Props as Props$3, Rect as Rect$1 } from '@arcanejs/toolkit/components/rect';
-import { Props as Props$4, Events as Events$2, SliderButton as SliderButton$1 } from '@arcanejs/toolkit/components/slider-button';
-import { Props as Props$5, Events as Events$3, Switch as Switch$1 } from '@arcanejs/toolkit/components/switch';
-import { TabProps, Tab as Tab$1, TabsProps, Tabs as Tabs$1 } from '@arcanejs/toolkit/components/tabs';
-import { Props as Props$6, Events as Events$4, TextInput as TextInput$1 } from '@arcanejs/toolkit/components/text-input';
-import { Props as Props$7, Timeline as Timeline$1 } from '@arcanejs/toolkit/components/timeline';
+import { Group as Group$1, GroupHeader as GroupHeader$1, Props } from '@arcanejs/toolkit/components/group';
+import { L as LightDeskIntrinsicElements } from './types-D0Wa4a4d.js';
 import * as React from 'react';
-import { Ref } from 'react';
-
-type Child = JSX.Element | string | null | undefined | boolean;
-type Children = Child | Child[];
-interface LightDeskIntrinsicElements {
-    button: Props & {
-        children?: never;
-        onClick?: Events['click'];
-        ref?: Ref<Button$1>;
-    };
-    group: Props$1 & {
-        children?: Children;
-        onTitleChanged?: Events$1['title-changed'];
-        ref?: Ref<Group$1>;
-    };
-    'group-header': {
-        children?: Children;
-        ref?: Ref<GroupHeader$1>;
-    };
-    label: Props$2 & {
-        children?: never;
-        ref?: Ref<Label$1>;
-    };
-    rect: Props$3 & {
-        children?: never;
-        ref?: Ref<Rect$1>;
-    };
-    'slider-button': Props$4 & {
-        children?: never;
-        onChange?: Events$2['change'];
-        ref?: Ref<SliderButton$1>;
-    };
-    switch: Props$5 & {
-        children?: never;
-        onChange?: Events$3['change'];
-        ref?: Ref<Switch$1>;
-    };
-    tab: TabProps & {
-        children?: JSX.Element | string;
-        ref?: Ref<Tab$1>;
-    };
-    tabs: TabsProps & {
-        children?: JSX.Element | JSX.Element[];
-        ref?: Ref<Tabs$1>;
-    };
-    'text-input': Props$6 & {
-        children?: JSX.Element | JSX.Element[];
-        onChange?: Events$4['change'];
-        ref?: Ref<TextInput$1>;
-    };
-    timeline: Props$7 & {
-        children?: never;
-        ref?: Ref<Timeline$1>;
-    };
-}
+import { Button as Button$1 } from '@arcanejs/toolkit/components/button';
+import { Label as Label$1 } from '@arcanejs/toolkit/components/label';
+import { Rect as Rect$1 } from '@arcanejs/toolkit/components/rect';
+import { SliderButton as SliderButton$1 } from '@arcanejs/toolkit/components/slider-button';
+import { Switch as Switch$1 } from '@arcanejs/toolkit/components/switch';
+import { Tab as Tab$1, Tabs as Tabs$1 } from '@arcanejs/toolkit/components/tabs';
+import { Timeline as Timeline$1 } from '@arcanejs/toolkit/components/timeline';
+import { TextInput as TextInput$1 } from '@arcanejs/toolkit/components/text-input';
 
 type ComponentWithRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
 declare const Button: ComponentWithRef<Button$1, LightDeskIntrinsicElements['button']>;
@@ -80,7 +26,7 @@ declare const Timeline: ComponentWithRef<Timeline$1, LightDeskIntrinsicElements[
 
 declare const ToolkitRenderer: {
     renderGroup: (component: JSX.Element, container: ld.Group) => void;
-    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props$1) => void;
+    render: (component: JSX.Element, container: ld.Toolkit, rootGroupProps?: Props) => void;
 };
 
-export { Button, Group, GroupHeader, Label, type LightDeskIntrinsicElements, Rect, SliderButton, Switch, Tab, Tabs, TextInput, Timeline, ToolkitRenderer };
+export { Button, Group, GroupHeader, Label, LightDeskIntrinsicElements, Rect, SliderButton, Switch, Tab, Tabs, TextInput, Timeline, ToolkitRenderer };

package/dist/index.js

@@ -1,5 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+
+
+
+
+
+
+
+
+
+
+var _chunkRKOUSLUWjs = require('./chunk-RKOUSLUW.js');
+
+
 var _chunkRT2VSMJLjs = require('./chunk-RT2VSMJL.js');
 
 // src/index.tsx
@@ -7,44 +20,6 @@ var _reactreconciler = require('react-reconciler'); var _reactreconciler2 = _int
 var _constants = require('react-reconciler/constants');
 var _toolkit = require('@arcanejs/toolkit'); var ld = _interopRequireWildcard(_toolkit);
 var _base = require('@arcanejs/toolkit/components/base');
-
-// src/components.ts
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-var Button = React.forwardRef(
-  (props, ref) => React.createElement("button", { ...props, ref }, props.children)
-);
-var Group = React.forwardRef(
-  (props, ref) => React.createElement("group", { ...props, ref }, props.children)
-);
-var GroupHeader = React.forwardRef(
-  (props, ref) => React.createElement("group-header", { ...props, ref }, props.children)
-);
-var Label = React.forwardRef(
-  (props, ref) => React.createElement("label", { ...props, ref }, props.children)
-);
-var Rect = React.forwardRef(
-  (props, ref) => React.createElement("rect", { ...props, ref }, props.children)
-);
-var SliderButton = React.forwardRef(
-  (props, ref) => React.createElement("slider-button", { ...props, ref }, props.children)
-);
-var Switch = React.forwardRef(
-  (props, ref) => React.createElement("switch", { ...props, ref }, props.children)
-);
-var Tab = React.forwardRef(
-  (props, ref) => React.createElement("tab", { ...props, ref }, props.children)
-);
-var Tabs = React.forwardRef(
-  (props, ref) => React.createElement("tabs", { ...props, ref }, props.children)
-);
-var TextInput = React.forwardRef(
-  (props, ref) => React.createElement("text-input", { ...props, ref }, props.children)
-);
-var Timeline = React.forwardRef(
-  (props, ref) => React.createElement("timeline", { ...props, ref }, props.children)
-);
-
-// src/index.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var isType = (targetType, type, _props) => targetType === type;
 var canSetProps = (instance) => instance instanceof _base.Base;
@@ -229,7 +204,7 @@ var ToolkitRenderer = {
     reconciler.updateContainer(componentWithContexts, root, null);
   },
   render: (component, container, rootGroupProps) => {
-    const group = new ld.Group(rootGroupProps);
+    const group = new ld.Group({ direction: "vertical", ...rootGroupProps });
     container.setRoot(group);
     ToolkitRenderer.renderGroup(component, group);
   }
@@ -247,4 +222,4 @@ var ToolkitRenderer = {
 
 
 
-exports.Button = Button; exports.Group = Group; exports.GroupHeader = GroupHeader; exports.Label = Label; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.Switch = Switch; exports.Tab = Tab; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline; exports.ToolkitRenderer = ToolkitRenderer;
+exports.Button = _chunkRKOUSLUWjs.Button; exports.Group = _chunkRKOUSLUWjs.Group; exports.GroupHeader = _chunkRKOUSLUWjs.GroupHeader; exports.Label = _chunkRKOUSLUWjs.Label; exports.Rect = _chunkRKOUSLUWjs.Rect; exports.SliderButton = _chunkRKOUSLUWjs.SliderButton; exports.Switch = _chunkRKOUSLUWjs.Switch; exports.Tab = _chunkRKOUSLUWjs.Tab; exports.Tabs = _chunkRKOUSLUWjs.Tabs; exports.TextInput = _chunkRKOUSLUWjs.TextInput; exports.Timeline = _chunkRKOUSLUWjs.Timeline; exports.ToolkitRenderer = ToolkitRenderer;

package/dist/index.mjs

@@ -1,3 +1,16 @@
+import {
+  Button,
+  Group,
+  GroupHeader,
+  Label,
+  Rect,
+  SliderButton,
+  Switch,
+  Tab,
+  Tabs,
+  TextInput,
+  Timeline
+} from "./chunk-HVMRFXJ2.mjs";
 import {
   LoggerContext
 } from "./chunk-TOGR56FN.mjs";
@@ -7,44 +20,6 @@ import Reconciler from "react-reconciler";
 import { DefaultEventPriority } from "react-reconciler/constants";
 import * as ld from "@arcanejs/toolkit";
 import { Base, BaseParent } from "@arcanejs/toolkit/components/base";
-
-// src/components.ts
-import * as React from "react";
-var Button = React.forwardRef(
-  (props, ref) => React.createElement("button", { ...props, ref }, props.children)
-);
-var Group = React.forwardRef(
-  (props, ref) => React.createElement("group", { ...props, ref }, props.children)
-);
-var GroupHeader = React.forwardRef(
-  (props, ref) => React.createElement("group-header", { ...props, ref }, props.children)
-);
-var Label = React.forwardRef(
-  (props, ref) => React.createElement("label", { ...props, ref }, props.children)
-);
-var Rect = React.forwardRef(
-  (props, ref) => React.createElement("rect", { ...props, ref }, props.children)
-);
-var SliderButton = React.forwardRef(
-  (props, ref) => React.createElement("slider-button", { ...props, ref }, props.children)
-);
-var Switch = React.forwardRef(
-  (props, ref) => React.createElement("switch", { ...props, ref }, props.children)
-);
-var Tab = React.forwardRef(
-  (props, ref) => React.createElement("tab", { ...props, ref }, props.children)
-);
-var Tabs = React.forwardRef(
-  (props, ref) => React.createElement("tabs", { ...props, ref }, props.children)
-);
-var TextInput = React.forwardRef(
-  (props, ref) => React.createElement("text-input", { ...props, ref }, props.children)
-);
-var Timeline = React.forwardRef(
-  (props, ref) => React.createElement("timeline", { ...props, ref }, props.children)
-);
-
-// src/index.tsx
 import { jsx } from "react/jsx-runtime";
 var isType = (targetType, type, _props) => targetType === type;
 var canSetProps = (instance) => instance instanceof Base;
@@ -229,7 +204,7 @@ var ToolkitRenderer = {
     reconciler.updateContainer(componentWithContexts, root, null);
   },
   render: (component, container, rootGroupProps) => {
-    const group = new ld.Group(rootGroupProps);
+    const group = new ld.Group({ direction: "vertical", ...rootGroupProps });
     container.setRoot(group);
     ToolkitRenderer.renderGroup(component, group);
   }

package/dist/types-D0Wa4a4d.d.mts

@@ -0,0 +1,66 @@
+import { Props as Props$1, Events as Events$1, Group, GroupHeader } from '@arcanejs/toolkit/components/group';
+import { Props, Events, Button } from '@arcanejs/toolkit/components/button';
+import { Props as Props$2, Label } from '@arcanejs/toolkit/components/label';
+import { Props as Props$3, Rect } from '@arcanejs/toolkit/components/rect';
+import { Props as Props$4, Events as Events$2, SliderButton } from '@arcanejs/toolkit/components/slider-button';
+import { Props as Props$5, Events as Events$3, Switch } from '@arcanejs/toolkit/components/switch';
+import { TabProps, Tab, TabsProps, Tabs } from '@arcanejs/toolkit/components/tabs';
+import { Props as Props$6, Events as Events$4, TextInput } from '@arcanejs/toolkit/components/text-input';
+import { Props as Props$7, Timeline } from '@arcanejs/toolkit/components/timeline';
+import { Ref } from 'react';
+
+type Child = JSX.Element | string | null | undefined | boolean;
+type Children = Child | Child[];
+interface LightDeskIntrinsicElements {
+    button: Props & {
+        children?: never;
+        onClick?: Events['click'];
+        ref?: Ref<Button>;
+    };
+    group: Props$1 & {
+        children?: Children;
+        onTitleChanged?: Events$1['title-changed'];
+        ref?: Ref<Group>;
+    };
+    'group-header': {
+        children?: Children;
+        ref?: Ref<GroupHeader>;
+    };
+    label: Props$2 & {
+        children?: never;
+        ref?: Ref<Label>;
+    };
+    rect: Props$3 & {
+        children?: never;
+        ref?: Ref<Rect>;
+    };
+    'slider-button': Props$4 & {
+        children?: never;
+        onChange?: Events$2['change'];
+        ref?: Ref<SliderButton>;
+    };
+    switch: Props$5 & {
+        children?: never;
+        onChange?: Events$3['change'];
+        ref?: Ref<Switch>;
+    };
+    tab: TabProps & {
+        children?: JSX.Element | string;
+        ref?: Ref<Tab>;
+    };
+    tabs: TabsProps & {
+        children?: JSX.Element | JSX.Element[];
+        ref?: Ref<Tabs>;
+    };
+    'text-input': Props$6 & {
+        children?: JSX.Element | JSX.Element[];
+        onChange?: Events$4['change'];
+        ref?: Ref<TextInput>;
+    };
+    timeline: Props$7 & {
+        children?: never;
+        ref?: Ref<Timeline>;
+    };
+}
+
+export type { LightDeskIntrinsicElements as L };

package/dist/types-D0Wa4a4d.d.ts

@@ -0,0 +1,66 @@
+import { Props as Props$1, Events as Events$1, Group, GroupHeader } from '@arcanejs/toolkit/components/group';
+import { Props, Events, Button } from '@arcanejs/toolkit/components/button';
+import { Props as Props$2, Label } from '@arcanejs/toolkit/components/label';
+import { Props as Props$3, Rect } from '@arcanejs/toolkit/components/rect';
+import { Props as Props$4, Events as Events$2, SliderButton } from '@arcanejs/toolkit/components/slider-button';
+import { Props as Props$5, Events as Events$3, Switch } from '@arcanejs/toolkit/components/switch';
+import { TabProps, Tab, TabsProps, Tabs } from '@arcanejs/toolkit/components/tabs';
+import { Props as Props$6, Events as Events$4, TextInput } from '@arcanejs/toolkit/components/text-input';
+import { Props as Props$7, Timeline } from '@arcanejs/toolkit/components/timeline';
+import { Ref } from 'react';
+
+type Child = JSX.Element | string | null | undefined | boolean;
+type Children = Child | Child[];
+interface LightDeskIntrinsicElements {
+    button: Props & {
+        children?: never;
+        onClick?: Events['click'];
+        ref?: Ref<Button>;
+    };
+    group: Props$1 & {
+        children?: Children;
+        onTitleChanged?: Events$1['title-changed'];
+        ref?: Ref<Group>;
+    };
+    'group-header': {
+        children?: Children;
+        ref?: Ref<GroupHeader>;
+    };
+    label: Props$2 & {
+        children?: never;
+        ref?: Ref<Label>;
+    };
+    rect: Props$3 & {
+        children?: never;
+        ref?: Ref<Rect>;
+    };
+    'slider-button': Props$4 & {
+        children?: never;
+        onChange?: Events$2['change'];
+        ref?: Ref<SliderButton>;
+    };
+    switch: Props$5 & {
+        children?: never;
+        onChange?: Events$3['change'];
+        ref?: Ref<Switch>;
+    };
+    tab: TabProps & {
+        children?: JSX.Element | string;
+        ref?: Ref<Tab>;
+    };
+    tabs: TabsProps & {
+        children?: JSX.Element | JSX.Element[];
+        ref?: Ref<Tabs>;
+    };
+    'text-input': Props$6 & {
+        children?: JSX.Element | JSX.Element[];
+        onChange?: Events$4['change'];
+        ref?: Ref<TextInput>;
+    };
+    timeline: Props$7 & {
+        children?: never;
+        ref?: Ref<Timeline>;
+    };
+}
+
+export type { LightDeskIntrinsicElements as L };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/react-toolkit",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "private": false,
   "description": "Build web-accessible control interfaces for your long-running Node.js processes",
   "keywords": [
@@ -25,6 +25,12 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./colors": {
+      "@arcanejs/source": "./src/colors.tsx",
+      "import": "./dist/colors.mjs",
+      "require": "./dist/colors.js",
+      "types": "./dist/colors.d.ts"
+    },
     "./data": {
       "@arcanejs/source": "./src/data.tsx",
       "import": "./dist/data.mjs",
@@ -50,15 +56,15 @@
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
     "zod": "^3.23.8",
-    "@arcanejs/typescript-config": "^0.0.0",
-    "@arcanejs/eslint-config": "^0.0.0"
+    "@arcanejs/eslint-config": "^0.0.0",
+    "@arcanejs/typescript-config": "^0.0.0"
   },
   "dependencies": {
     "lodash": "^4.17.21",
     "react": "^18",
     "react-reconciler": "0.28.0",
-    "@arcanejs/protocol": "^0.2.0",
-    "@arcanejs/toolkit": "^0.3.0"
+    "@arcanejs/protocol": "^0.3.0",
+    "@arcanejs/toolkit": "^0.5.0"
   },
   "peerDependencies": {
     "zod": "^3.23.8"