@okshaun/components 0.3.3 → 0.4.0

package/README.md

@@ -451,14 +451,44 @@ npm run build
 
 ## Publishing
 
-To publish a new version to npm:
+Publishing is handled via GitHub Actions with a manual workflow that prevents common pitfalls like tag conflicts.
 
-1. Update version in `package.json`
-2. Create a git tag: `git tag v1.0.0`
-3. Push tag: `git push --tags`
-4. Create a GitHub release, or use the manual workflow in GitHub Actions
+### How to Publish
 
-The package will be automatically published to npm via GitHub Actions.
+1. Go to the repository on GitHub
+2. Click **Actions** tab
+3. Select **"Publish to NPM"** workflow from the left sidebar
+4. Click **"Run workflow"** button (dropdown on the right)
+5. Select the version bump type:
+   - **patch** (0.3.4 → 0.3.5) - Bug fixes, minor changes
+   - **minor** (0.3.4 → 0.4.0) - New features, backward compatible
+   - **major** (0.3.4 → 1.0.0) - Breaking changes
+6. Click **"Run workflow"**
+
+### What the Workflow Does
+
+1. Builds and lints the package
+2. **Validates** the new version doesn't already exist (on npm or as a git tag)
+3. Bumps `package.json` version and commits
+4. Pushes the commit to `main`
+5. Publishes to npm with provenance
+6. Creates git tag and GitHub release (only after successful publish)
+
+### Troubleshooting
+
+**"Tag already exists" error:**
+```bash
+# Delete the conflicting tag locally and remotely
+git tag -d v0.3.5
+git push origin :refs/tags/v0.3.5
+```
+
+**"Version already published" error:**
+- Choose a higher version bump level (e.g., minor instead of patch)
+
+**Workflow failed mid-way:**
+- Safe to re-run - the workflow validates before making changes
+- If version commit was pushed but npm publish failed, fix the issue and re-run
 
 ## Storybook
 

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { ColorToken } from '../../../styled-system/tokens';
 import { ComponentPropsWithoutRef } from 'react';
 import { default as default_2 } from 'react';
 import { DividerVariantProps } from '../../../styled-system/recipes';
+import { DropdownProps } from './types';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { FontSizeToken } from '../../../styled-system/tokens';
@@ -22,7 +23,9 @@ import { IconNamesList } from './icons';
 import { JSX } from 'react/jsx-runtime';
 import { LabelVariantProps } from '../../../styled-system/recipes';
 import { LinkVariantProps } from '../../../styled-system/recipes';
+import { menu } from '../../../styled-system/recipes';
 import { MenuVariantProps } from '../../../styled-system/recipes';
+import { Placement } from '@floating-ui/react';
 import { RadioInputVariantProps } from '../../../styled-system/recipes';
 import { RadioVariantProps } from '../../../styled-system/recipes';
 import * as React_2 from 'react';
@@ -41,6 +44,52 @@ import { TooltipVariantProps } from '../../../styled-system/recipes';
 
 declare type AllowedIconSizes = keyof typeof numericSizes;
 
+export declare const Autocomplete: default_2.FC<AutocompleteProps>;
+
+export declare interface AutocompleteOption {
+    /** Unique identifier for the option */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Optional icon name */
+    icon?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+
+export declare type AutocompleteProps = MenuVariantProps & {
+    /** Input name attribute */
+    name: string;
+    /** Current input value */
+    value: string;
+    /** Callback when input value changes */
+    onChange: (value: string) => void;
+    /** Available options to filter and display */
+    options: AutocompleteOption[];
+    /** Callback when an option is selected */
+    onSelect: (option: AutocompleteOption) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Floating UI placement */
+    placement?: Placement;
+    /** Offset distance from input (in pixels) */
+    offset?: number;
+    /** Optional ID for ARIA attributes */
+    id?: string;
+    /** Disable the autocomplete */
+    disabled?: boolean;
+    /** Show error state */
+    error?: boolean;
+    /** Custom filter function (defaults to case-insensitive label match) */
+    filterFn?: (option: AutocompleteOption, inputValue: string) => boolean;
+    /** Message to show when no options match */
+    noResultsMessage?: string;
+    /** Props to pass to the TextInput */
+    inputProps?: Omit<TextInputProps, 'name' | 'value' | 'onChange' | 'disabled' | 'error' | 'id'>;
+};
+
 /**
  * The Badge component uses the polymorphic Box as its base.
  * Renders as a <span> by default but can be changed via the 'as' prop.
@@ -233,6 +282,10 @@ export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & D
     weight?: string;
 };
 
+export declare const Dropdown: default_2.FC<DropdownProps>;
+
+export { DropdownProps }
+
 export declare const Heading: React.FC<HeadingProps>;
 
 export declare type HeadingProps = Omit<TextProps, keyof HeadingVariantProps> & HeadingVariantProps & {
@@ -337,6 +390,14 @@ export declare const IconNames: {
     readonly 'checkbox-focus': "checkbox-focus";
     readonly 'checkbox-indeterminate': "checkbox-indeterminate";
     readonly checkbox: "checkbox";
+    readonly 'chevron-down': "chevron-down";
+    readonly 'chevron-filled-down': "chevron-filled-down";
+    readonly 'chevron-filled-left': "chevron-filled-left";
+    readonly 'chevron-filled-right': "chevron-filled-right";
+    readonly 'chevron-filled-up': "chevron-filled-up";
+    readonly 'chevron-left': "chevron-left";
+    readonly 'chevron-right': "chevron-right";
+    readonly 'chevron-up': "chevron-up";
     readonly 'circle-change': "circle-change";
     readonly 'circle-check': "circle-check";
     readonly circle: "circle";
@@ -600,30 +661,91 @@ export declare type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVar
     children?: React.ReactNode;
 };
 
-export declare const Menu: React.FC<MenuProps>;
+export declare const Menu: default_2.FC<MenuProps>;
+
+declare interface MenuContextValue {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    floatingStyles: React.CSSProperties;
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> & {
+        index?: number;
+        active?: boolean;
+    }) => Record<string, unknown>;
+    activeIndex: number | null;
+    listRef: React.MutableRefObject<(HTMLElement | null)[]>;
+    classes: ReturnType<menu>;
+}
+
+export declare const MenuDivider: default_2.FC<MenuDividerProps>;
+
+export declare type MenuDividerProps = Omit<BoxProps, 'children'>;
+
+export declare const MenuGroup: default_2.FC<MenuGroupProps>;
+
+export declare type MenuGroupProps = Omit<BoxProps, 'title'> & {
+    /** Group label */
+    label?: string;
+    /** Children (MenuItem components) */
+    children: React.ReactNode;
+};
+
+export declare const MenuItem: default_2.FC<MenuItemProps>;
+
+export declare type MenuItemProps = Omit<BoxProps, 'children'> & {
+    /** Item behavior type */
+    type?: MenuItemType;
+    /** Selected state (for single-select and multi-select) */
+    selected?: boolean;
+    /** Callback when item is selected/activated */
+    onSelect?: () => void;
+    /** Disable the item */
+    disabled?: boolean;
+    /** Primary label (required) */
+    label: string | React.ReactNode;
+    /** Secondary description text */
+    description?: string;
+    /** Icon on the left side */
+    iconLeft?: IconNamesList;
+    /** Icon on the right side */
+    iconRight?: IconNamesList;
+    /** Text to highlight (for autocomplete/search scenarios) */
+    highlightMatch?: string;
+    /** Selection indicator style (only for select types) */
+    selectionIndicator?: SelectionIndicator;
+    /** Index for keyboard navigation (managed internally via context) */
+    index?: number;
+};
+
+export declare type MenuItemType = 'action' | 'single-select' | 'multi-select';
 
 export declare type MenuProps = Omit<BoxProps, keyof MenuVariantProps> & MenuVariantProps & {
-    menuSection: {
-        id?: string;
-        title?: string;
-        divider?: boolean;
-        spacer?: boolean;
-        link?: boolean;
-        items: {
-            id: string;
-            label: string;
-            description?: string;
-            value?: string;
-            iconName?: string;
-            children?: MenuProps['menuSection'];
-            disabled?: boolean;
-            href?: string;
-        }[];
-    }[];
-    iconPlacement?: 'left' | 'right';
-    variant?: 'single-select' | 'multi-select';
-    multiSelectType?: 'checkbox' | 'toggle';
-    onChange?: (selected: string[] | string | null) => void;
+    /** Controlled open state (REQUIRED) */
+    open: boolean;
+    /** Callback when open state should change (REQUIRED) */
+    onOpenChange: (open: boolean) => void;
+    /** Floating UI placement */
+    placement?: Placement;
+    /** Offset distance from trigger (in pixels) */
+    offset?: number;
+    /** Children (MenuTrigger, MenuItem, MenuGroup, etc.) */
+    children: React.ReactNode;
+    /** Optional ID for ARIA attributes */
+    id?: string;
+};
+
+export declare const MenuTrigger: default_2.FC<MenuTriggerProps>;
+
+export declare type MenuTriggerProps = Omit<BoxProps, 'children'> & {
+    /** Trigger element (button, custom component, etc.) */
+    children: React.ReactElement;
+    /** Disable the trigger */
+    disabled?: boolean;
 };
 
 declare const numericSizes: {
@@ -808,6 +930,8 @@ export declare type RadioProps = Omit<BoxProps, keyof RadioVariantProps> & Radio
     error?: boolean;
 };
 
+export declare type SelectionIndicator = 'checkmark' | 'checkbox';
+
 export declare const Spinner: React.FC<SpinnerProps>;
 
 export declare type SpinnerProps = Omit<BoxProps, keyof SpinnerVariantProps> & SpinnerVariantProps & {
@@ -938,6 +1062,8 @@ export declare function useContainerQuery(containerRef: RefObject<HTMLElement>,
  */
 export declare function useMediaQuery(breakpoint: BreakpointKey, direction?: QueryDirection): boolean;
 
+export declare const useMenuContext: () => MenuContextValue;
+
 export declare function useTheme(): ThemeContextType;
 
 export { }