@milktop/react-ui 0.2.0 → 0.2.2

package/README.md

@@ -106,7 +106,8 @@ the words of the app's provider.
   (`classes={{ itemText: 'font-mono' }}`).
 - Slots replace a part's content: a node, or a function given its state
   (`indicator={({ indeterminate }) => …}`, `renderItem={(item) => …}`).
-- `style={{ '--ui-accent': … }}`: tokens for one instance; on `:root` for the whole app.
+- Tokens for one instance or a section: a class (`className="[--ui-accent:#16a34a]"` with
+  Tailwind) or `style={{ '--ui-accent': … }}`; on `:root` for the whole app.
 - Typed: written in TypeScript, shipped as JS with `.d.ts` types, so TSX apps
   get checked props (Select's value is the type of your items' `valueKey`)
   and JSX apps get autocomplete, with no errors either way.

package/dist/event-calendar/EventCalendar.js

@@ -301,13 +301,14 @@ export function EventCalendar({ events = [], resources = null, resourceViews = n
     const refocus = useRef(null);
     const suppressClick = useRef(false);
     // `byMinutes` kept to the day's hours: an event moves or grows no further than
-    // the grid shows (one already past an edge doesn't go further past it).
+    // the grid shows (one already past an edge doesn't go further past it), and
+    // shrinks to a slot at the shortest (one already shorter doesn't shrink).
     function withinHours(event, kind, byMinutes) {
         const start = parse(event.start);
         const from = minutesOfDay(start);
-        const to = from + minutesBetween(start, parse(event.end));
-        const latest = Math.max(0, endHour * 60 - to);
-        const earliest = kind === 'move' ? Math.min(0, startHour * 60 - from) : -Infinity;
+        const length = minutesBetween(start, parse(event.end));
+        const latest = Math.max(0, endHour * 60 - from - length);
+        const earliest = kind === 'move' ? Math.min(0, startHour * 60 - from) : Math.min(0, slotMinutes - length);
         return Math.max(earliest, Math.min(latest, byMinutes));
     }
     // Where a pinned event placed at `minute` starts: on a slot, ending by the day's last hour.

package/dist/index.d.ts

@@ -29,7 +29,7 @@ export { colorScheme, useColorScheme, type Scheme } from './color-scheme.js';
 export { Appearance } from './appearance-panel/Appearance.js';
 export { appearance, useAppearance, accents, accentScale, accentSteps, sidebarStyles, type AccentName, type AppearanceValue, type SidebarStyle, } from './appearance.js';
 export { Tooltip } from './tooltip/Tooltip.js';
-export { Menu, ContextMenu, MenuItem, MenuSeparator, MenuGroup, MenuCheckbox, MenuRadioGroup, MenuRadio, Submenu, type MenuEntry, type MenuOptionChange, } from './menu/Menu.js';
+export { Menu, ContextMenu, MenuItem, MenuSeparator, MenuGroup, MenuCheckbox, MenuRadioGroup, MenuRadio, Submenu, type MenuEntry, type MenuOptionChange, type MenuIndicator, } from './menu/Menu.js';
 export { Tabs, Tab } from './tabs/Tabs.js';
 export { Dialog } from './dialog/Dialog.js';
 export { confirm, type ConfirmOptions } from './confirm/confirm.js';

package/dist/menu/Menu.d.ts

@@ -29,6 +29,10 @@
  *   component must pass them on, as Button does)
  * - `placement`: 'bottom-start' (default), 'bottom-end', …
  * - `label`: a small label above the items
+ * - `indicator`: where checkbox and radio items show they're checked: 'end'
+ *   (default; a tick after the label, so labels line up with the other
+ *   items) or 'start' (a tick, or a dot for radios, before it); submenus
+ *   follow their menu's unless they set one
  * - `keepOpen`: stay open after an item is chosen (to tick several); an
  *   item's own `keepOpen` overrides it
  * - `context`: open on right-click (or long-press) of the trigger, at the
@@ -48,6 +52,7 @@ import { type Classes } from '../utils.js';
 import '../theme.css';
 import './menu.css';
 type Value = string | number;
+export type MenuIndicator = 'start' | 'end';
 export type MenuEntry = string | number | {
     label?: ReactNode;
     value?: Value;
@@ -157,15 +162,17 @@ declare function Radio({ value, icon, shortcut, disabled, keepOpen, children }:
  *   </Menu.Submenu>
  *
  * - `label`: the row's text; `icon`: an optional Iconify name before it
- * - `items`: as on Menu; `keepOpen` for its items (it follows its menu)
+ * - `items`: as on Menu; `keepOpen` and `indicator` for its items (they
+ *   follow its menu's)
  *
  * Its items' selections reach the outer Menu's `onSelect`.
  */
-declare function Submenu({ label, icon, items, keepOpen, className, children }: {
+declare function Submenu({ label, icon, items, keepOpen, indicator, className, children }: {
     label: ReactNode;
     icon?: string | null;
     items?: MenuEntry[];
     keepOpen?: boolean | null;
+    indicator?: MenuIndicator | null;
     className?: string;
     children?: ReactNode;
 }): import("react").JSX.Element;
@@ -177,6 +184,7 @@ export type MenuProps = Omit<Ark.ContentProps, 'onSelect' | 'onChange'> & {
     trigger?: ReactElement | null;
     placement?: NonNullable<Ark.RootProps['positioning']>['placement'];
     label?: ReactNode;
+    indicator?: MenuIndicator;
     keepOpen?: boolean;
     context?: boolean;
     open?: boolean;
@@ -186,7 +194,7 @@ export type MenuProps = Omit<Ark.ContentProps, 'onSelect' | 'onChange'> & {
     onChange?: (change: MenuOptionChange) => void;
     classes?: Classes<'positioner' | 'content' | 'menuLabel'>;
 };
-declare function MenuShortcut({ items, labelKey, valueKey, disabledKey, trigger, placement, label, keepOpen, context, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }: MenuProps): import("react").JSX.Element;
+declare function MenuShortcut({ items, labelKey, valueKey, disabledKey, trigger, placement, label, indicator, keepOpen, context, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }: MenuProps): import("react").JSX.Element;
 export declare const Menu: typeof MenuShortcut & {
     Item: typeof Item;
     Separator: typeof Separator;

package/dist/menu/Menu.js

@@ -30,6 +30,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *   component must pass them on, as Button does)
  * - `placement`: 'bottom-start' (default), 'bottom-end', …
  * - `label`: a small label above the items
+ * - `indicator`: where checkbox and radio items show they're checked: 'end'
+ *   (default; a tick after the label, so labels line up with the other
+ *   items) or 'start' (a tick, or a dot for radios, before it); submenus
+ *   follow their menu's unless they set one
  * - `keepOpen`: stay open after an item is chosen (to tick several); an
  *   item's own `keepOpen` overrides it
  * - `context`: open on right-click (or long-press) of the trigger, at the
@@ -109,7 +113,7 @@ function Checkbox({ checked, defaultChecked = false, onCheckedChange, value, ico
     const id = useId();
     const [own, setOwn] = useState(defaultChecked);
     const on = checked ?? own;
-    return (_jsxs(Ark.CheckboxItem, { ...menu.part('item'), value: String(value ?? id), checked: on, disabled: !!disabled, ...closeFor(keepOpen), onCheckedChange: (next) => { setOwn(next); onCheckedChange?.(next); }, children: [_jsx("span", { ...menu.part('indicator'), children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "checkbox", children: _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
+    return (_jsxs(Ark.CheckboxItem, { ...menu.part('item'), value: String(value ?? id), checked: on, disabled: !!disabled, ...closeFor(keepOpen), onCheckedChange: (next) => { setOwn(next); onCheckedChange?.(next); }, children: [_jsx("span", { ...menu.part('indicator'), "data-side": menu.indicator, children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "checkbox", children: _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
 }
 // A radio group's id and value, for its radios.
 const RadioContext = createContext(null);
@@ -152,7 +156,7 @@ function Radio({ value, icon = null, shortcut = null, disabled = false, keepOpen
     const values = useContext(RadioValues);
     const key = `${group?.id}/${value}`;
     values?.set(key, value);
-    return (_jsxs(Ark.RadioItem, { ...menu.part('item'), value: key, disabled: !!disabled, ...closeFor(keepOpen), children: [_jsx("span", { ...menu.part('indicator'), children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "radio" }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
+    return (_jsxs(Ark.RadioItem, { ...menu.part('item'), value: key, disabled: !!disabled, ...closeFor(keepOpen), children: [_jsx("span", { ...menu.part('indicator'), "data-side": menu.indicator, children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "radio", children: menu.indicator === 'end' && _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
 }
 /**
  * A submenu inside a Menu (or another Submenu): a row that opens a nested
@@ -163,15 +167,17 @@ function Radio({ value, icon = null, shortcut = null, disabled = false, keepOpen
  *   </Menu.Submenu>
  *
  * - `label`: the row's text; `icon`: an optional Iconify name before it
- * - `items`: as on Menu; `keepOpen` for its items (it follows its menu)
+ * - `items`: as on Menu; `keepOpen` and `indicator` for its items (they
+ *   follow its menu's)
  *
  * Its items' selections reach the outer Menu's `onSelect`.
  */
-function Submenu({ label, icon = null, items = [], keepOpen = null, className, children }) {
+function Submenu({ label, icon = null, items = [], keepOpen = null, indicator = null, className, children }) {
     const outer = useMenu();
     const part = outer.part;
     const stays = keepOpen ?? outer.keepOpen;
-    return (_jsxs(Ark.Root, { closeOnSelect: !stays, positioning: { placement: 'right-start', strategy: 'fixed', gutter: 2 }, navigate: (details) => details.node.click(), onSelect: (details) => outer.select(details.value), children: [_jsxs(Ark.TriggerItem, { ...part('item'), children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('label'), children: label }), _jsx("iconify-icon", { ...part('chevron'), icon: "lucide:chevron-right", "aria-hidden": "true" })] }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsx(Ark.Content, { ...part('content'), className: className, children: _jsxs(MenuContext.Provider, { value: { ...outer, keepOpen: stays }, children: [_jsx(Entries, { items: items }), children] }) }) })] }));
+    const side = indicator ?? outer.indicator;
+    return (_jsxs(Ark.Root, { closeOnSelect: !stays, positioning: { placement: 'right-start', strategy: 'fixed', gutter: 2 }, navigate: (details) => details.node.click(), onSelect: (details) => outer.select(details.value), children: [_jsxs(Ark.TriggerItem, { ...part('item'), children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('label'), children: label }), _jsx("iconify-icon", { ...part('chevron'), icon: "lucide:chevron-right", "aria-hidden": "true" })] }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsx(Ark.Content, { ...part('content'), className: className, children: _jsxs(MenuContext.Provider, { value: { ...outer, keepOpen: stays, indicator: side }, children: [_jsx(Entries, { items: items }), children] }) }) })] }));
 }
 // A checkbox or radio entry from `items`, checked by the root menu. Zag's
 // option props straight onto it: Ark's RadioItem wants a RadioItemGroup round it.
@@ -183,7 +189,7 @@ function Option({ entry, optionKey, label, disabled, siblings }) {
         valueText: typeof label === 'string' ? label : optionKey, ...closeFor(entry.keepOpen),
         onCheckedChange: (on) => menu.check(entry, optionKey, on, siblings),
     };
-    return (_jsxs("div", { ...api.getOptionItemProps(props), ...menu.part('item'), "data-danger": entry.danger || undefined, children: [_jsx("span", { ...menu.part('indicator'), children: _jsx("span", { ...api.getItemIndicatorProps(props), ...menu.part('item-indicator'), "data-type": entry.type, children: entry.type === 'checkbox' && _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), entry.icon && _jsx("iconify-icon", { ...menu.part('icon'), icon: entry.icon, "aria-hidden": "true" }), _jsx("span", { ...menu.part('label'), children: label }), entry.shortcut && _jsx("kbd", { ...menu.part('shortcut'), children: entry.shortcut })] }));
+    return (_jsxs("div", { ...api.getOptionItemProps(props), ...menu.part('item'), "data-danger": entry.danger || undefined, children: [_jsx("span", { ...menu.part('indicator'), "data-side": menu.indicator, children: _jsx("span", { ...api.getItemIndicatorProps(props), ...menu.part('item-indicator'), "data-type": entry.type, children: (entry.type === 'checkbox' || menu.indicator === 'end') && _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), entry.icon && _jsx("iconify-icon", { ...menu.part('icon'), icon: entry.icon, "aria-hidden": "true" }), _jsx("span", { ...menu.part('label'), children: label }), entry.shortcut && _jsx("kbd", { ...menu.part('shortcut'), children: entry.shortcut })] }));
 }
 // A menu's `items` array, as the components above.
 function Entries({ items }) {
@@ -210,13 +216,13 @@ function Entries({ items }) {
             return (_jsx(Item, { value: value, href: entry.href, icon: entry.icon, shortcut: entry.shortcut, danger: entry.danger, disabled: disabled, keepOpen: entry.keepOpen, children: label }, i));
         }) });
 }
-function MenuShortcut({ items = [], labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', trigger = null, placement = 'bottom-start', label = null, keepOpen = false, context = false, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }) {
+function MenuShortcut({ items = [], labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', trigger = null, placement = 'bottom-start', label = null, indicator = 'end', keepOpen = false, context = false, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }) {
     const part = partsOf('menu', classes);
     const values = useRef(new Map());
     // `items` checkbox and radio entries, starting from their own `checked`.
     const [checks, setChecks] = useState({});
     const shared = {
-        part, keepOpen, keys: { labelKey, valueKey, disabledKey },
+        part, keepOpen, indicator, keys: { labelKey, valueKey, disabledKey },
         remember: (key, value) => { values.current.set(key, value); },
         select: (key) => { if (values.current.has(key))
             onSelect?.(values.current.get(key)); },

package/dist/menu/menu.css

@@ -28,6 +28,9 @@
   [data-scope=menu][data-part=item-indicator] {
     &[data-type=checkbox] { display: block; font-size: 14px; color: var(--ui-accent); }
     &[data-type=radio] { display: block; width: 6px; height: 6px; border-radius: 9999px; background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); } }
+  /* indicator='end' (the default): a tick after the label and any shortcut, for radios too. */
+  [data-scope=menu][data-part=indicator][data-side=end] { order: 1;
+    & > [data-type=radio] { width: auto; height: auto; font-size: 14px; color: var(--ui-accent); border-radius: 0; background: none; box-shadow: none; } }
   [data-scope=menu][data-part=chevron] { display: block; font-size: 14px; margin-left: auto; color: var(--ui-muted); }
   /* A div or an <hr> (Ark's): no border of its own. */
   [data-scope=menu][data-part=separator] { display: block; height: 1px; margin: 0.25rem -0.25rem; border: none; background: var(--ui-border); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milktop/react-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React components on Ark UI (Zag state machines), with imba-ui's API and design",
   "license": "MIT",
   "author": "André Goldstein",