@plexui/ui 0.2.0

package/dist/types/components/Menu/Menu.d.ts

@@ -0,0 +1,170 @@
+import { DropdownMenu } from "radix-ui";
+import React, { type ComponentProps, type ComponentType, type MouseEvent, type ReactNode } from "react";
+export type MenuProps = {
+    children: React.ReactNode;
+    /** Force the menu to remain open or closed */
+    forceOpen?: boolean;
+    /** Callback triggered when the modal is opened */
+    onOpen?: () => void;
+    /** Callback triggered when the modal is closed */
+    onClose?: () => void;
+    /**
+     * When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+     * @default false
+     */
+    modal?: boolean;
+};
+export declare const Menu: {
+    ({ children, forceOpen, onOpen, onClose, modal }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, side, sideOffset, align, alignOffset, width, minWidth, maxHeight, }: MenuContentProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ className, children, disabled, onSelect, onClick }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemActions: ({ className, children }: {
+        className?: string;
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ItemAction: ({ children, onClick, }: {
+        children: ReactNode;
+        onClick: (evt: MouseEvent) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Link: MenuLink;
+    Separator: ({ className }: {
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, disabled }: DropdownMenu.DropdownMenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Sub: ({ children, forceOpen, onOpen, onClose }: SubmenuProps) => import("react/jsx-runtime").JSX.Element;
+    SubTrigger: ({ className, children, disabled, }: {
+        className?: string;
+        children: ReactNode;
+        disabled?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    SubContent: ({ children, sideOffset, alignOffset, width, minWidth, maxHeight, }: SubContentProps) => import("react/jsx-runtime").JSX.Element;
+    CheckboxItem: ({ className, children, indicatorPosition, indicatorVariant, ...props }: MenuCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
+    RadioGroup: <T extends string>({ children, value, onChange, indicatorPosition, ...props }: MenuRadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+    RadioItem: <T extends string>({ className, children, ...props }: MenuRadioItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+};
+export type MenuItemProps = {
+    className?: string;
+    children: React.ReactNode;
+    /** Callback triggered when the item is pressed */
+    onSelect?: DropdownMenu.DropdownMenuItemProps["onSelect"];
+    /** Callback triggered when the item is clicked */
+    onClick?: DropdownMenu.DropdownMenuItemProps["onClick"];
+    /** Disables the menu item */
+    disabled?: boolean;
+};
+type MenuLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children"> & {
+    /** Content rendered inside the Link */
+    children: React.ReactNode;
+    /** Disables the menu item */
+    disabled?: boolean;
+};
+type MenuLink = <T extends ComponentType<any> | "a" = PlexUI.LinkComponent>(props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & MenuLinkProps & {
+    /**
+     * Override the default component used for the link. This is useful for
+     * using a routing library, or SSR rendering.
+     * purposes.
+     *
+     * @default 'a'
+     */
+    as?: T;
+} & ComponentProps<T>) => ReactNode;
+export type MenuContentProps = {
+    children: React.ReactNode;
+    /**
+     * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.
+     * @default bottom
+     */
+    side?: DropdownMenu.DropdownMenuContentProps["side"];
+    /**
+     * The distance in pixels from the trigger.
+     * @default 5
+     */
+    sideOffset?: DropdownMenu.DropdownMenuContentProps["sideOffset"];
+    /**
+     * The preferred alignment against the trigger. May change when collisions occur.
+     * @default center
+     */
+    align?: DropdownMenu.DropdownMenuContentProps["align"];
+    /**
+     * An offset in pixels from the "start" or "end" alignment options.
+     * @default 0
+     */
+    alignOffset?: DropdownMenu.DropdownMenuContentProps["alignOffset"];
+    /**
+     * Defines the `width` property of the content
+     * @default auto
+     */
+    width?: number | "auto";
+    /**
+     * Defines the `min-width` property of the content, in pixels.
+     * @default 300
+     */
+    minWidth?: number | "auto";
+    /**
+     * Defines the `max-width` property of the content, in pixels.
+     */
+    maxHeight?: number;
+};
+export type SubmenuProps = {
+    children: React.ReactNode;
+    /** Force the menu to remain open or closed */
+    forceOpen?: boolean;
+    /** Callback triggered when the modal is opened */
+    onOpen?: () => void;
+    /** Callback triggered when the modal is closed */
+    onClose?: () => void;
+};
+type SubContentProps = {
+    children: ReactNode;
+    sideOffset?: DropdownMenu.DropdownMenuSubContentProps["sideOffset"];
+    alignOffset?: DropdownMenu.DropdownMenuSubContentProps["alignOffset"];
+    width?: number | "auto";
+    minWidth?: number | "auto";
+    maxHeight?: number;
+};
+export type MenuRadioGroupProps<T extends string> = {
+    /** Controlled value */
+    value: T;
+    /** Fired when selection changes */
+    onChange: (value: T) => void;
+    children: ReactNode;
+    /**
+     * The orientation of the indicator within the radio item.
+     * @default end
+     */
+    indicatorPosition?: "start" | "end";
+};
+export type MenuRadioItemProps<T extends string> = {
+    value: T;
+    /** Class applied to the radio item */
+    className?: string;
+    children: ReactNode;
+    /** Callback triggered when the radio item is pressed */
+    onSelect?: DropdownMenu.DropdownMenuItemProps["onSelect"];
+    /** Disables the radio item */
+    disabled?: boolean;
+};
+export type MenuCheckboxItemProps = {
+    /** Controlled checked state of the checkbox item */
+    checked?: DropdownMenu.DropdownMenuCheckboxItemProps["checked"];
+    /** Event handler called when the checked state changes */
+    onCheckedChange?: DropdownMenu.DropdownMenuCheckboxItemProps["onCheckedChange"];
+    /** Class applied to the checkbox item */
+    className?: string;
+    children: ReactNode;
+    /** Callback triggered when the checkbox item is pressed */
+    onSelect?: DropdownMenu.DropdownMenuItemProps["onSelect"];
+    /** Disables the checkbox item */
+    disabled?: boolean;
+    /**
+     * The orientation of the indicator within the checkbox item.
+     * @default end
+     */
+    indicatorPosition?: "start" | "end";
+    /**
+     * Visual treatment for the checkbox indicator.
+     * @default solid
+     */
+    indicatorVariant?: "solid" | "ghost";
+};
+export {};

package/dist/types/components/Menu/index.d.ts

@@ -0,0 +1 @@
+export { Menu } from "./Menu";

package/dist/types/components/PlexUIProvider/PlexUIContext.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentType, type ForwardRefExoticComponent } from "react";
+type PlexUIContextValue = {
+    linkComponent: ComponentType<any> | ForwardRefExoticComponent<any> | "a";
+};
+export declare const PlexUIContext: import("react").Context<PlexUIContextValue | null>;
+export {};

package/dist/types/components/PlexUIProvider/PlexUIProvider.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentType, type ForwardRefExoticComponent, type ReactNode } from "react";
+interface DefaultConfig {
+    LinkComponent: "a";
+}
+declare global {
+    interface PlexUIConfig {
+    }
+}
+type MergeOverrides<Defaults, Overrides> = Omit<Defaults, keyof Overrides> & Overrides;
+export type Config = MergeOverrides<DefaultConfig, PlexUIConfig>;
+export type LinkComponent = Config["LinkComponent"];
+/**
+ * Shared context for all Plex UI components - wrap your app in this
+ * provider to use Plex UI components.
+ *
+ * It's pretty thin right now, we only use it to hold onto the component you
+ * use for rendering Links, but it could be expanded in the future.
+ */
+export declare function PlexUIProvider({ children, linkComponent, }: {
+    children: ReactNode;
+    linkComponent: ComponentType<any> | ForwardRefExoticComponent<any> | "a";
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/PlexUIProvider/index.d.ts

@@ -0,0 +1 @@
+export { PlexUIProvider } from "./PlexUIProvider";

package/dist/types/components/PlexUIProvider/internal.d.ts

@@ -0,0 +1 @@
+export declare function useLinkComponent(): import("react").ComponentType<any> | "a";

package/dist/types/components/Popover/Popover.d.ts

@@ -0,0 +1,78 @@
+import { Popover as RadixPopover } from "radix-ui";
+import { type MouseEventHandler, type PointerEventHandler, type ReactNode } from "react";
+export type PopoverProps = {
+    /** Sets controlled visibility state */
+    open?: boolean;
+    /** Callback invoked when visibility state changes */
+    onOpenChange?: (nextState: boolean) => void;
+    showOnHover?: boolean;
+    hoverOpenDelay?: number;
+    children: React.ReactNode;
+};
+export declare const Popover: {
+    ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, showOnHover, hoverOpenDelay, children, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, onPointerDown, onClick, }: {
+        children: React.ReactNode;
+        onPointerDown?: PointerEventHandler;
+        onClick?: MouseEventHandler;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type PopoverContentProps = {
+    children: ReactNode;
+    /**
+     * Whether to avoid collisions with vieport/scroll containersw.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    /**
+     * Set the `width` of the popover, in pixels.
+     * @default auto
+     */
+    width?: number | "auto";
+    /**
+     * Set the `min-width` of the popover, in pixels.
+     * @default 300
+     */
+    minWidth?: number | "auto";
+    /**
+     * Set the `max-width` of the popover, in pixels.
+     */
+    maxWidth?: number;
+    /**
+     * Background style for the popover
+     * @default default
+     */
+    /**
+     * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.
+     * @default bottom
+     */
+    side?: RadixPopover.PopoverContentProps["side"];
+    /**
+     * The distance in pixels from the trigger.
+     * @default 8
+     */
+    sideOffset?: RadixPopover.PopoverContentProps["sideOffset"];
+    /**
+     * The preferred alignment against the trigger. May change when collisions occur.
+     * @default center
+     */
+    align?: RadixPopover.PopoverContentProps["align"];
+    /**
+     * An offset in pixels from the "start" or "end" alignment options.
+     * @default 0
+     */
+    alignOffset?: RadixPopover.PopoverContentProps["alignOffset"];
+    /**
+     * Whether the popover surface should be translucent.
+     * @default false
+     */
+    translucent?: boolean;
+    /** Additional class name to apply to the popover content, you usually don't want to set this, but ag-grid needs it to render a custom editor properly */
+    className?: string;
+    /**
+     * Auto focus the popover content when it is opened.
+     * @default true
+     */
+    autoFocus?: boolean;
+};

package/dist/types/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover, type PopoverContentProps, type PopoverProps } from "./Popover";
+export { usePopoverController } from "./usePopoverController";

package/dist/types/components/Popover/pointerIntent.d.ts

@@ -0,0 +1,8 @@
+export type Polygon = Point[];
+type Point = {
+    x: number;
+    y: number;
+};
+export declare const createPointerIntentArea: (event: PointerEvent, hoverTarget: HTMLElement) => Point[];
+export declare function isPointInPolygon(point: Point, polygon: Polygon): boolean;
+export {};

package/dist/types/components/Popover/usePopoverContext.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from "react";
+export type PopoverContextValue = {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    shake: boolean;
+    setShake: (next: boolean) => void;
+    showOnHover: boolean;
+    temporarilyPreventClickToClose: boolean;
+    onTriggerEnter: () => void;
+    onTriggerLeave: () => void;
+    hoverOpenFocusedWithTab: RefObject<boolean>;
+    isPointerInTransitRef: RefObject<boolean>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
+};
+export declare const PopoverContext: import("react").Context<PopoverContextValue | null>;
+export declare const usePopoverContext: () => PopoverContextValue;

package/dist/types/components/Popover/usePopoverController.d.ts

@@ -0,0 +1,8 @@
+export declare const usePopoverClose: () => () => void;
+export declare const usePopoverShake: () => () => void;
+export declare const usePopoverController: () => {
+    /** Plays a short shake animation on the modal. */
+    shake: () => void;
+    /** Imperatively closes the modal. */
+    close: () => void;
+};

package/dist/types/components/ProgressSteps/ProgressSteps.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from "react";
+import type { Sizes } from "../../types";
+type Orientation = "horizontal" | "vertical";
+type ConnectorStyle = "solid" | "dashed";
+type Variant = "default" | "minimal";
+type Color = "default" | "success";
+export type ProgressStepsProps = {
+    /** Current active step (1-indexed, starts from 1) */
+    current: number;
+    /**
+     * Total number of steps (required for minimal variant)
+     */
+    total?: number;
+    /**
+     * Visual variant
+     * @default default
+     */
+    variant?: Variant;
+    /**
+     * Color scheme
+     * @default default
+     */
+    color?: Color;
+    /**
+     * Layout orientation
+     * @default horizontal
+     */
+    orientation?: Orientation;
+    /**
+     * Size of step indicators
+     * @default md
+     */
+    size?: Sizes<"sm" | "md" | "lg">;
+    /**
+     * Connector line style
+     * @default solid
+     */
+    connectorStyle?: ConnectorStyle;
+    /** Class applied to the container */
+    className?: string;
+    children?: ReactNode;
+};
+export declare const ProgressSteps: {
+    ({ current, total, variant, color, orientation, size, connectorStyle, children, className, }: ProgressStepsProps): import("react/jsx-runtime").JSX.Element;
+    Step: ({ children, icon, _index }: StepProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export type StepProps = {
+    /** Custom icon (replaces step number) */
+    icon?: ReactNode;
+    /** Step content (Title and/or Description) */
+    children?: ReactNode;
+    /** @internal - injected by parent */
+    _index?: number;
+};
+export {};

package/dist/types/components/ProgressSteps/index.d.ts

@@ -0,0 +1 @@
+export { ProgressSteps, type ProgressStepsProps, type StepProps } from "./ProgressSteps";

package/dist/types/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+type Direction = "col" | "row";
+export type RadioGroupProps<T extends string> = {
+    "defaultValue"?: T;
+    "value"?: T;
+    "name"?: string;
+    "onChange"?: (value: T) => void;
+    /** Accessible label for the radio options */
+    "aria-label": string;
+    /** Determines the layout direction of the radio items
+     * @default row
+     */
+    "direction"?: Direction;
+    /** Controls whether the entire radio group is disabled */
+    "disabled"?: boolean;
+    /** Class applied to the radio group container */
+    "className"?: string;
+    "children": React.ReactNode;
+    "required"?: boolean;
+};
+export declare const RadioGroup: {
+    <T extends string>({ onChange, children, className, direction, disabled, ...restProps }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+    Item: <T extends string>({ value, disabled: itemDisabled, required, children, className, block, ...restProps }: RadioGroupItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+};
+export type RadioGroupItemProps<T extends string> = {
+    value: T;
+    /** Determines if a given radio item is disabled */
+    disabled?: boolean;
+    required?: boolean;
+    block?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+export {};

package/dist/types/components/RadioGroup/index.d.ts

@@ -0,0 +1 @@
+export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps } from "./RadioGroup";

package/dist/types/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,91 @@
+import { type ControlSize, type SemanticColors, type Sizes, type Variants } from "../../types";
+export type SizeVariant = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+export type SegmentedControlProps<T extends string> = {
+    /**
+     * Controlled value for the group
+     */
+    "value": T;
+    /** Callback for when a new value is selected */
+    "onChange"?: (nextValue: T) => void;
+    /** Callback any time the control is clicked (even if a new value was not selected) */
+    "onClick"?: () => void;
+    /**
+     * Text read aloud to screen readers when the control is focused
+     */
+    "aria-label": string;
+    /**
+     * Controls the size of the segmented control
+     *
+     * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |
+     * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
+     * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |
+     *
+     * @default md
+     */
+    "size"?: ControlSize;
+    /**
+     * Controls gutter on the edges of the button, defaults to value from `size`.
+     *
+     * | 2xs    | xs     | sm     | md     | lg     | xl     |
+     * | ------ | ------ | ------ | ------ | ------ | ------ |
+     * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |
+     */
+    "gutterSize"?: Sizes<"2xs" | "xs" | "sm" | "md" | "lg" | "xl">;
+    /** Disable the entire group */
+    "disabled"?: boolean;
+    /**
+     * Display the control as a block element with equal width segments
+     * @default false
+     */
+    "block"?: boolean;
+    /**
+     * Determines if the segment control, and its options, should be a fully rounded pill shape.
+     * @default true
+     */
+    "pill"?: boolean;
+    "className"?: string;
+    "children": React.ReactNode;
+};
+export declare const SegmentedControl: {
+    <T extends string>({ value, onChange, children, block, pill, size, gutterSize, className, onClick, ...restProps }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+    Option: ({ children, icon, badge, ...restProps }: SegmentedControlOptionProps) => import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * Badge configuration for SegmentedControl.Option
+ */
+export type SegmentedControlBadgeProp = React.ReactNode | {
+    content: React.ReactNode;
+    color?: SemanticColors<"secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "caution">;
+    variant?: Variants<"soft" | "solid">;
+    pill?: boolean;
+    loading?: boolean;
+};
+export type SegmentedControlOptionProps = {
+    /**
+     * Option value
+     */
+    "value": string;
+    /**
+     * Text read aloud to screen readers when the option is focused
+     */
+    "aria-label"?: string;
+    /**
+     * Text content to render in the option
+     */
+    "children"?: React.ReactNode;
+    /**
+     * Icon to render before the text content
+     */
+    "icon"?: React.ReactNode;
+    /**
+     * Badge to render after the text content.
+     * Can be a simple value or an object with content, color, variant, and loading options.
+     * @example badge={5}
+     * @example badge={{ content: 5, color: "danger" }}
+     */
+    "badge"?: SegmentedControlBadgeProp;
+    /**
+     * Disable the individual option
+     */
+    "disabled"?: boolean;
+};

package/dist/types/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlBadgeProp, SegmentedControlOptionProps, SegmentedControlProps, SizeVariant, } from "./SegmentedControl";