@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/select-field/select.css

@@ -0,0 +1,228 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._field_nro8f_3 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, var(--sys-unit-4));
+    inline-size: 100%;
+  }
+  ._label_nro8f_9 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-label-medium);
+    cursor: default;
+  }
+  ._trigger_nro8f_14 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._trigger_nro8f_14 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._trigger_nro8f_14[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._trigger_nro8f_14 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._trigger_nro8f_14:hover:not([data-disabled], [data-readonly]), ._trigger_nro8f_14[data-focused], ._trigger_nro8f_14[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._trigger_nro8f_14[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._trigger_nro8f_14[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._trigger_nro8f_14[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._trigger_nro8f_14[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._trigger_nro8f_14::-webkit-search-cancel-button {
+    display: none;
+    appearance: none;
+  }
+  ._trigger_nro8f_14::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+  }
+  ._trigger_nro8f_14 {
+    display: inline-flex;
+  }
+  ._trigger_nro8f_14::placeholder {
+    color: var(--field-muted-fg);
+  }
+  ._trigger_nro8f_14 {
+    position: relative;
+    gap: var(--select-gap, var(--sys-unit-6));
+    justify-content: space-between;
+    min-inline-size: 0;
+    text-align: start;
+    cursor: pointer;
+  }
+  ._trigger_nro8f_14[data-readonly] {
+    cursor: default;
+  }
+  ._value_nro8f_89 {
+    flex: 1;
+    overflow: hidden;
+    min-inline-size: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    line-height: normal;
+  }
+  ._icon_nro8f_97 {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--select-icon-fg, var(--field-muted-fg));
+  }
+  ._positioner_nro8f_102 {
+    --_popup-edge-padding: var(
+    	--popup-edge-padding,
+    	var(--sys-unit-16)
+    );
+  }
+  @property --_popup-edge-padding {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+  ._positioner_nro8f_102 {
+    outline: none;
+  }
+  ._popup_nro8f_116 {
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-surface-overlay);
+    padding: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    transform-origin: var(--transform-origin);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+    box-shadow: var(--sys-elevation-1);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_nro8f_116 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._popup_nro8f_116[data-starting-style], ._popup_nro8f_116[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._popup_nro8f_116 {
+    min-inline-size: var(--anchor-width);
+    max-block-size: var(--available-height);
+    overflow-y: auto;
+  }
+  ._item_nro8f_142 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-6);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-20);
+    border-radius: var(--sys-radius-sm);
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+    user-select: none;
+  }
+  ._item_nro8f_142 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._item_nro8f_142::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._item_nro8f_142::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._item_nro8f_142:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._item_nro8f_142:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._item_nro8f_142 {
+    outline: none;
+  }
+  ._item_nro8f_142[data-highlighted] {
+    background: var(--sys-color-primary-container);
+    color: var(--sys-color-on-primary-container);
+  }
+  ._item_nro8f_142[data-disabled] {
+    opacity: 0.38;
+    color: var(--sys-color-text-muted);
+  }
+  ._statusArea_nro8f_190 {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    contain: inline-size;
+  }
+  ._statusArea_nro8f_190 > * + * {
+    align-self: flex-start;
+  }
+  ._status_nro8f_190 {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    contain: inline-size;
+    min-block-size: 1lh;
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-medium);
+  }
+  ._status_nro8f_190:empty {
+    min-block-size: 0;
+    padding: 0;
+  }
+  ._itemText_nro8f_214 {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  ._itemDetail_nro8f_218 {
+    display: block;
+    color: var(--select-detail-fg, var(--sys-color-text-muted));
+    font: var(--select-detail-font, var(--sys-font-body-small));
+  }
+  ._indicator_nro8f_223 {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--select-indicator-fg, var(--sys-color-primary));
+  }
+}

package/dist/components/select-field/select.d.ts

@@ -0,0 +1,79 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { type ReactNode } from "react";
+import { Field, type FieldState, type OptionsLoad, type OptionsLoadLabels } from "../field/index.ts";
+import { type SelectOption } from "./select-context.ts";
+export type { SelectOption };
+export type SelectRootProps<T extends string> = Omit<BaseSelect.Root.Props<T>, "items" | "onValueChange"> & Readonly<{
+    /** The selectable options; `label` is what the trigger and list display. */
+    options: readonly SelectOption<T>[];
+    onValueChange?: (value: T) => void;
+}>;
+declare const SelectRoot: <T extends string>({ options, onValueChange, ...props }: SelectRootProps<T>) => ReactNode;
+declare const SelectLabel: ({ className, ...props }: BaseSelect.Label.Props) => ReactNode;
+export type SelectTriggerProps = BaseSelect.Trigger.Props & Readonly<{
+    /** Shown while nothing is selected. */
+    placeholder?: string;
+    /** The states projected onto the trigger as `data-*` attributes. */
+    state?: FieldState;
+}>;
+declare const SelectTrigger: ({ placeholder, state, className, children, ...props }: SelectTriggerProps) => ReactNode;
+declare const SelectPositioner: ({ className, sideOffset, alignItemWithTrigger, ...props }: BaseSelect.Positioner.Props) => ReactNode;
+declare const SelectPopup: ({ className, ...props }: BaseSelect.Popup.Props) => ReactNode;
+export type SelectItemProps = BaseSelect.Item.Props;
+declare const SelectItem: ({ className, children, ...props }: SelectItemProps) => ReactNode;
+/**
+ * Every option of the enclosing `Select.Root`, in the order it was given them.
+ * Compose the parts directly instead where a row is more than its label.
+ */
+declare const SelectItems: () => ReactNode;
+export type SelectControlProps = Omit<SelectTriggerProps, "children"> & OptionsLoadLabels & Readonly<{
+    /** How far the options have loaded, when they come from a query. */
+    load?: OptionsLoad;
+}>;
+/**
+ * The trigger over the portalled list of every option: the shape almost every
+ * select takes. Reach for the parts where the list needs anything else.
+ */
+declare const SelectControl: ({ load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, ...props }: SelectControlProps) => ReactNode;
+/** The parts of a select. */
+export type SelectParts = Readonly<{
+    Root: typeof SelectRoot;
+    Label: typeof SelectLabel;
+    Trigger: typeof SelectTrigger;
+    Value: typeof BaseSelect.Value;
+    Icon: typeof BaseSelect.Icon;
+    Portal: typeof BaseSelect.Portal;
+    Positioner: typeof SelectPositioner;
+    Popup: typeof SelectPopup;
+    List: typeof BaseSelect.List;
+    Item: typeof SelectItem;
+    Items: typeof SelectItems;
+    Group: typeof BaseSelect.Group;
+    GroupLabel: typeof BaseSelect.GroupLabel;
+    Separator: typeof BaseSelect.Separator;
+    Control: typeof SelectControl;
+    Pending: typeof Field.Pending;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
+}>;
+/**
+ * The styled parts of a base-ui Select: a trigger wearing the same treatment as
+ * every text input, over the shared popup surface. `Root` holds the options, so
+ * no part below it takes the list again. For a labelled field, use
+ * `SelectField`; a control in a toolbar composes these directly.
+ *
+ * @example
+ * <Select.Root options={options} value={value} onValueChange={setValue}>
+ * 	<Select.Label>Status</Select.Label>
+ * 	<Select.Control
+ * 		loadingLabel="Loading options…"
+ * 		loadFailedLabel="Options could not be loaded."
+ * 		loadBrokenLabel="Options could not be loaded, and trying again won't help."
+ * 		retryLabel="Try again"
+ * 		noOptionsLabel="No options available."
+ * 	/>
+ * </Select.Root>
+ */
+export declare const Select: SelectParts;
+//# sourceMappingURL=select.d.ts.map

package/dist/components/select-field/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select-field/select.tsx"],"names":[],"mappings":"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"}