@primitiv-ui/react 0.1.38 → 0.1.39

package/dist/Button/Button.d.ts

@@ -0,0 +1,73 @@
+import type { ReactElement } from "react";
+import { ButtonProps } from "./types.js";
+/**
+ * A headless, accessible `<button>` element.
+ *
+ * Renders a native `<button type="button">` by default, preventing
+ * accidental form submission. The `type` prop can override this to
+ * `"submit"` or `"reset"` when the button lives inside a form.
+ *
+ * **Ref forwarding.** Pass a `ref` prop to access the underlying
+ * `HTMLButtonElement` directly:
+ *
+ * ```tsx
+ * const ref = useRef<HTMLButtonElement>(null);
+ * <Button ref={ref}>Click me</Button>
+ * ```
+ *
+ * **Disabled.** Sets native `disabled` (removing the button from the
+ * tab order and suppressing clicks) plus `data-disabled=""` so CSS can
+ * target `[data-disabled]` without relying on the `:disabled` pseudo-class:
+ *
+ * ```tsx
+ * <Button disabled>Save</Button>
+ * ```
+ *
+ * ```css
+ * button[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+ * ```
+ *
+ * **`asChild` composition.** Renders the consumer's element instead of
+ * `<button>`, merging all props (aria-*, data-*, event handlers, ref)
+ * via the {@link Slot} utility. Event handlers compose with the child's
+ * own handlers (child runs first). `type` is **not** forwarded in this
+ * mode — the child element owns its own type semantics.
+ *
+ * **Icon-only buttons.** Provide `aria-label` or `aria-labelledby`
+ * when the button has no visible text label. Mark decorative icons
+ * `aria-hidden="true"`:
+ *
+ * ```tsx
+ * <Button aria-label="Close dialog">
+ *   <CloseIcon aria-hidden="true" />
+ * </Button>
+ * ```
+ *
+ * @extends HTMLButtonElement
+ *
+ * @example Text button
+ * ```tsx
+ * <Button onClick={handleSave}>Save</Button>
+ * ```
+ *
+ * @example Submit button inside a form
+ * ```tsx
+ * <Button type="submit">Send</Button>
+ * ```
+ *
+ * @example Disabled
+ * ```tsx
+ * <Button disabled>Save</Button>
+ * ```
+ *
+ * @example asChild — render a router link styled as a button
+ * ```tsx
+ * <Button asChild>
+ *   <a href="/settings">Settings</a>
+ * </Button>
+ * ```
+ */
+export declare function Button({ asChild, type, disabled, children, ref, ...rest }: ButtonProps): ReactElement;
+export declare namespace Button {
+    var displayName: string;
+}

package/dist/Button/Button.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "../Slot/index.js";
+/**
+ * A headless, accessible `<button>` element.
+ *
+ * Renders a native `<button type="button">` by default, preventing
+ * accidental form submission. The `type` prop can override this to
+ * `"submit"` or `"reset"` when the button lives inside a form.
+ *
+ * **Ref forwarding.** Pass a `ref` prop to access the underlying
+ * `HTMLButtonElement` directly:
+ *
+ * ```tsx
+ * const ref = useRef<HTMLButtonElement>(null);
+ * <Button ref={ref}>Click me</Button>
+ * ```
+ *
+ * **Disabled.** Sets native `disabled` (removing the button from the
+ * tab order and suppressing clicks) plus `data-disabled=""` so CSS can
+ * target `[data-disabled]` without relying on the `:disabled` pseudo-class:
+ *
+ * ```tsx
+ * <Button disabled>Save</Button>
+ * ```
+ *
+ * ```css
+ * button[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+ * ```
+ *
+ * **`asChild` composition.** Renders the consumer's element instead of
+ * `<button>`, merging all props (aria-*, data-*, event handlers, ref)
+ * via the {@link Slot} utility. Event handlers compose with the child's
+ * own handlers (child runs first). `type` is **not** forwarded in this
+ * mode — the child element owns its own type semantics.
+ *
+ * **Icon-only buttons.** Provide `aria-label` or `aria-labelledby`
+ * when the button has no visible text label. Mark decorative icons
+ * `aria-hidden="true"`:
+ *
+ * ```tsx
+ * <Button aria-label="Close dialog">
+ *   <CloseIcon aria-hidden="true" />
+ * </Button>
+ * ```
+ *
+ * @extends HTMLButtonElement
+ *
+ * @example Text button
+ * ```tsx
+ * <Button onClick={handleSave}>Save</Button>
+ * ```
+ *
+ * @example Submit button inside a form
+ * ```tsx
+ * <Button type="submit">Send</Button>
+ * ```
+ *
+ * @example Disabled
+ * ```tsx
+ * <Button disabled>Save</Button>
+ * ```
+ *
+ * @example asChild — render a router link styled as a button
+ * ```tsx
+ * <Button asChild>
+ *   <a href="/settings">Settings</a>
+ * </Button>
+ * ```
+ */
+export function Button({ asChild = false, type = "button", disabled, children, ref, ...rest }) {
+    const rootProps = {
+        ...rest,
+        ref,
+        disabled,
+        "data-disabled": disabled ? "" : undefined,
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...rootProps, children: children });
+    }
+    return (_jsx("button", { type: type, ...rootProps, children: children }));
+}
+/** @internal */
+Button.displayName = "Button";

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Button.js";
+export * from "./types.js";

package/dist/Button/index.js

@@ -0,0 +1,2 @@
+export * from "./Button.js";
+export * from "./types.js";

package/dist/Button/types.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+/**
+ * Props for {@link Button} — all native `<button>` attributes (with `type`
+ * defaulting to `"button"`) plus the `asChild` escape hatch and a typed `ref`.
+ *
+ * @extends HTMLButtonElement
+ */
+export type ButtonProps = Omit<ComponentProps<"button">, "type"> & {
+    /**
+     * The button's native `type` attribute, restricted to the three valid
+     * values. Defaults to `"button"` (not the DOM's own default of
+     * `"submit"`), so a `Button` placed inside a `<form>` never triggers an
+     * accidental submit unless set explicitly.
+     * @default "button"
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Renders the child element instead of a native `<button>`, merging all
+     * props — aria-*, data-*, event handlers, ref — onto it via
+     * {@link Slot}. `type` is not forwarded in this mode; the child owns its
+     * own type semantics. See the `asChild` example on {@link Button}.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Forwarded to the underlying `HTMLButtonElement`, or — under
+     * `asChild` — merged onto the rendered child via {@link Slot}.
+     */
+    ref?: Ref<HTMLButtonElement>;
+    /** Button content. Under `asChild`, becomes the single child element `Slot` merges props onto. */
+    children?: ReactNode;
+};

package/dist/Button/types.js

@@ -0,0 +1 @@
+export {};