@darthcharles/greda 1.1.0 → 1.3.0

package/README.md

@@ -45,6 +45,45 @@ Greda and application markup share unprefixed utility classes such as
 `className` to override component defaults. See the introduction guide for supported
 utilities and migration from `ds-*` classes.
 
+## Searchable selection
+
+Use `Combobox` for filtering as you type and optional option creation. It uses
+existing Radix dependencies. `Select` remains available for simple selection.
+
+Import the same package stylesheet shown in Quick start, then compose the field:
+
+```tsx
+import {
+  Combobox, ComboboxInput, ComboboxContent, Label,
+} from "@darthcharles/greda";
+
+const materials = [
+  { value: "clay", label: "Clay", keywords: ["pottery"] },
+  { value: "linen", label: "Linen" },
+];
+
+export function MaterialField() {
+  return (
+    <>
+      <Label htmlFor="material">Material</Label>
+      <Combobox
+        options={materials}
+        name="material"
+        onCreate={(label) => ({ value: crypto.randomUUID(), label })}
+      >
+        <ComboboxInput id="material" placeholder="Choose or create" required />
+        <ComboboxContent />
+      </Combobox>
+    </>
+  );
+}
+```
+
+See the [usage guide](src/stories/Combobox.mdx) for controlled state, remote
+search, creation callbacks, forms, and keyboard interaction. Explore the
+[Storybook examples](https://elegant-hotteok-cbb834.netlify.app/?path=/docs/components-combobox--docs)
+for component states.
+
 ## With Tailwind 4
 
 Import Greda's tokens in your app's Tailwind CSS entry point. This registers the
@@ -108,7 +147,7 @@ element. Importing it alone leaves the neutral base unchanged. The application
 still controls page backgrounds and fonts. Select **cobalto** in Storybook to
 preview components, and see the [composition recipe](src/stories/Cobalto.mdx)
 for large mixed-weight titles, an asterisk, a polaroid photo, scoped portals,
-and Tailwind 4 import order. Both recipes use Tailwind utilities directly in JSX;
+and Tailwind 4 import order. The recipes use Tailwind utilities directly in JSX;
 compile them with your application’s Tailwind 4 setup.
 
 Comal is also available as an optional theme. Import
@@ -117,10 +156,18 @@ Comal is also available as an optional theme. Import
 element. It uses warm neutrals, terracotta actions and rounded corners. Its font
 stacks reference DM Sans and Fraunces; load those fonts in your application or
 override `--font-sans` and `--font-heading`. No fonts are downloaded or bundled
-by either theme. Both exports can be imported together and selected by attribute.
+by these themes. Theme exports can be imported together and selected by attribute.
 See the [Comal composition recipe](src/stories/Comal.mdx) for a complete fictional
 workshop page, optional font setup, responsive layout and copyable Tailwind JSX.
 
+Matrix adds a terminal identity with green actions, system monospace fonts and
+square controls. Import `@darthcharles/greda/themes/matrix.css` after the package
+stylesheet and set `data-theme="matrix"` with `data-color-scheme="dark"` for
+green-black surfaces, or `"light"` for pale green surfaces. No font setup is
+required. Select **matrix** in Storybook to preview components, or see the
+[Matrix composition recipe](src/stories/Matrix.mdx) for a responsive console
+layout and Tailwind 4 setup.
+
 Customization is optional. To change the default theme, import your own
 `theme.css` after the package stylesheet and override the base colors or other
 tokens you need.

package/THIRD_PARTY_NOTICES.md

@@ -15,5 +15,6 @@ requested for the initial component set.
 
 Local adaptations: relative imports; shared semantic color utilities; a scoped CSS baseline;
 consumer token mapping; optional portal containers; button loading, 1px press feedback from the current Nova style, and a default
-non-submit type; viewport bounds on dialogs; invalid-field styles; an accessible
+non-submit type; viewport bounds on dialogs and popovers; popover root positioning options,
+portal container refs, and an explicit close helper; invalid-field styles; an accessible
 toast close name; and a distinct indeterminate checkbox icon.

package/dist/components/ui/combobox.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Input } from "./input";
+import { type PopoverContentProps } from "./popover";
+export interface ComboboxOption {
+    /** Stable, unique ID used for selection and form submission. */
+    value: string;
+    label: string;
+    disabled?: boolean;
+    keywords?: string[];
+}
+export type ComboboxFilter = (option: ComboboxOption, query: string) => boolean;
+export interface ComboboxProps {
+    children: React.ReactNode;
+    options: ComboboxOption[];
+    value?: ComboboxOption | null;
+    defaultValue?: ComboboxOption | null;
+    onValueChange?: (option: ComboboxOption | null) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (query: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** false preserves remote results and their ordering without filtering again. */
+    filter?: ComboboxFilter | false;
+    loading?: boolean;
+    error?: React.ReactNode;
+    disabled?: boolean;
+    name?: string;
+    form?: string;
+    onCreate?: (query: string) => ComboboxOption | Promise<ComboboxOption>;
+    /** Additional eligibility check; the server must still enforce uniqueness. */
+    isValidNewOption?: (query: string, options: ComboboxOption[]) => boolean;
+}
+declare function Combobox({ children, options, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputValueChange, open: controlledOpen, defaultOpen, onOpenChange, filter, loading, error, disabled, name, form, onCreate, isValidNewOption, }: ComboboxProps): React.JSX.Element;
+export type ComboboxInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, "value" | "defaultValue" | "type" | "role" | "name" | "disabled">;
+declare const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface ComboboxContentProps extends Omit<PopoverContentProps, "children" | "role"> {
+    emptyText?: React.ReactNode;
+    loadingText?: React.ReactNode;
+    creatingText?: React.ReactNode;
+    createErrorText?: React.ReactNode;
+    renderCreateLabel?: (query: string) => React.ReactNode;
+    renderOption?: (option: ComboboxOption) => React.ReactNode;
+    getStatusText?: (count: number, canCreate: boolean) => string;
+}
+declare const ComboboxContent: React.ForwardRefExoticComponent<ComboboxContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Combobox, ComboboxInput, ComboboxContent };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export type PopoverAnchorProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>;
+type Side = NonNullable<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>["side"]>;
+type Align = NonNullable<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>["align"]>;
+export interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
+    placement?: Side | `${Side}-${Exclude<Align, "center">}`;
+    sideOffset?: number;
+}
+declare function Popover({ placement, sideOffset, ...props }: PopoverProps): React.JSX.Element;
+export type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>["container"] | React.RefObject<HTMLElement | null>;
+};
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>["container"] | React.RefObject<HTMLElement | null>;
+} & React.RefAttributes<HTMLDivElement>>;
+export type PopoverCloseProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>;
+declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverAnchor };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/ui/input";
 export * from "./components/ui/textarea";
 export * from "./components/ui/label";
 export * from "./components/ui/select";
+export * from "./components/ui/combobox";
 export * from "./components/ui/dialog";
 export * from "./components/ui/card";
 export * from "./components/ui/badge";
@@ -10,4 +11,5 @@ export * from "./components/ui/checkbox";
 export * from "./components/ui/tabs";
 export * from "./components/ui/toast";
 export * from "./components/ui/tooltip";
+export * from "./components/ui/popover";
 export { cn } from "./lib/utils";