@dloizides/ui-nav 1.12.0 → 1.13.0

package/dist/index.d.mts

@@ -972,6 +972,35 @@ interface CommandPaletteProps {
 /** The overlay palette. Renders null when closed. */
 declare const CommandPalette: ({ open, items, onClose, labels, testID }: CommandPaletteProps) => React.ReactElement | null;
 
+/**
+ * CommandPaletteTrigger — the VISIBLE, discoverable affordance that opens the
+ * {@link CommandPalette}. A ⌘K shortcut alone is invisible; a docs-style search
+ * pill (muted placeholder on the left, a keyboard-shortcut badge on the right)
+ * tells operators the palette exists and is one click away. Place it in a shell
+ * header / sidebar; wire `onPress` to the same open handler as the ⌘K hotkey.
+ *
+ * Self-contained on purpose: the shared icon set has no magnifier, so this uses
+ * text + a shortcut badge (the recognizable "Search … ⌘K" pattern) rather than a
+ * render-slot icon — one less thing every consumer must supply. Colours come from
+ * the `@dloizides/ui-feedback` UiProvider theme; the label/shortcut are
+ * pre-localized strings (package discipline: no FM/router imports).
+ */
+
+interface CommandPaletteTriggerProps {
+    /** Placeholder-style label, e.g. "Search". */
+    label: string;
+    /** a11y hint describing what activating it does. */
+    hint: string;
+    /** The shortcut badge text, e.g. "⌘K" (already chosen per-platform by the caller). */
+    shortcut: string;
+    /** Open the palette (same handler as the ⌘K hotkey). */
+    onPress: () => void;
+    /** testID for the trigger. */
+    testID: string;
+}
+/** The visible "Search … ⌘K" pill that opens the command palette. */
+declare const CommandPaletteTrigger: ({ label, hint, shortcut, onPress, testID, }: CommandPaletteTriggerProps) => React.ReactElement;
+
 /**
  * Call `onOpen` when the operator presses ⌘K (macOS) or Ctrl-K (Windows/Linux),
  * anywhere in the document. `enabled=false` unbinds (e.g. when the shell has no
@@ -1232,4 +1261,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.d.ts

@@ -972,6 +972,35 @@ interface CommandPaletteProps {
 /** The overlay palette. Renders null when closed. */
 declare const CommandPalette: ({ open, items, onClose, labels, testID }: CommandPaletteProps) => React.ReactElement | null;
 
+/**
+ * CommandPaletteTrigger — the VISIBLE, discoverable affordance that opens the
+ * {@link CommandPalette}. A ⌘K shortcut alone is invisible; a docs-style search
+ * pill (muted placeholder on the left, a keyboard-shortcut badge on the right)
+ * tells operators the palette exists and is one click away. Place it in a shell
+ * header / sidebar; wire `onPress` to the same open handler as the ⌘K hotkey.
+ *
+ * Self-contained on purpose: the shared icon set has no magnifier, so this uses
+ * text + a shortcut badge (the recognizable "Search … ⌘K" pattern) rather than a
+ * render-slot icon — one less thing every consumer must supply. Colours come from
+ * the `@dloizides/ui-feedback` UiProvider theme; the label/shortcut are
+ * pre-localized strings (package discipline: no FM/router imports).
+ */
+
+interface CommandPaletteTriggerProps {
+    /** Placeholder-style label, e.g. "Search". */
+    label: string;
+    /** a11y hint describing what activating it does. */
+    hint: string;
+    /** The shortcut badge text, e.g. "⌘K" (already chosen per-platform by the caller). */
+    shortcut: string;
+    /** Open the palette (same handler as the ⌘K hotkey). */
+    onPress: () => void;
+    /** testID for the trigger. */
+    testID: string;
+}
+/** The visible "Search … ⌘K" pill that opens the command palette. */
+declare const CommandPaletteTrigger: ({ label, hint, shortcut, onPress, testID, }: CommandPaletteTriggerProps) => React.ReactElement;
+
 /**
  * Call `onOpen` when the operator presses ⌘K (macOS) or Ctrl-K (Windows/Linux),
  * anywhere in the document. `enabled=false` unbinds (e.g. when the shell has no
@@ -1232,4 +1261,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type ShellMessage, Sidebar, type SidebarProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, roleRoutesToNavItems, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.js

@@ -1671,6 +1671,55 @@ var CommandPalette = ({ open, items, onClose, labels, testID }) => {
     )
   ] });
 };
+var MIN_TARGET = 36;
+var styles5 = reactNative.StyleSheet.create({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    columnGap: 8,
+    paddingHorizontal: 12,
+    minHeight: MIN_TARGET,
+    borderWidth: 1,
+    borderRadius: 8
+  },
+  label: { fontSize: 14 },
+  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
+  badgeText: { fontSize: 11, fontWeight: "700" }
+});
+var CommandPaletteTrigger = ({
+  label,
+  hint,
+  shortcut,
+  onPress,
+  testID
+}) => {
+  const { theme } = uiFeedback.useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React2__default.default.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      style: [
+        styles5.trigger,
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        focusRingStyle(focused, primary)
+      ],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles5.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+      ]
+    }
+  );
+};
 var LAUNCH_KEY = "k";
 function useCommandPaletteHotkey(onOpen, enabled = true) {
   React2.useEffect(() => {
@@ -1703,6 +1752,7 @@ exports.BASE_INDENT = BASE_INDENT;
 exports.CHEVRON_ICON_SIZE = CHEVRON_ICON_SIZE;
 exports.CollapsedRail = CollapsedRail;
 exports.CommandPalette = CommandPalette;
+exports.CommandPaletteTrigger = CommandPaletteTrigger;
 exports.DEFAULT_COLLAPSED_RAIL_MAX = DEFAULT_COLLAPSED_RAIL_MAX;
 exports.DarkModeControl = DarkModeControl;
 exports.NAV_ICON_SIZE = NAV_ICON_SIZE;