@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/inputs/CopyInput.d.ts

@@ -1,26 +1,55 @@
-import { InputSize, InputVariant } from "./Input";
-export interface CopyInputProps {
-    /** The text shown and copied. Read-only — there is no `onChange`. */
+import { type AriaAttributes, type CSSProperties } from "react";
+import { FontFamily } from "../theme/enums.js";
+import { InputSize, InputVariant } from "./Input.js";
+export interface CopyInputProps extends AriaAttributes {
+    /** The text shown in the field and written to the clipboard. It is read-only, so there is no `onChange`. */
     value: string;
+    /** Label above the field, rendered through `Field`. It also names the copy button ("Copy Webhook URL"). For a description or a label tooltip, wrap the field in `Field` instead. */
     label?: string;
-    /** Adds an info icon beside the label with this content on hover. */
-    labelTooltip?: string | React.ReactNode;
-    /** Field surface color. @default InputVariant.PRIMARY */
-    variant?: InputVariant;
-    /** @default InputSize.MEDIUM */
+    /** Accessible name of the field when there is no visible label (no `label` and no wrapping `Field`). It also names the copy button ("Copy API key"). */
+    ariaLabel?: string;
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall. The copy button follows it.
+     * @default InputSize.MEDIUM
+     */
     size?: InputSize;
-    /** A number is px. */
-    width?: number | string;
+    /**
+     * Resting fill of the field, from the surface set. Ignored with `isGhost`.
+     * @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /**
+     * Ghost field: no fill and no hairline at rest; the frame appears on hover and focus (Input's `isGhost`).
+     * @default false
+     */
+    isGhost?: boolean;
+    /**
+     * Type family of the value. Use mono for keys, IDs, hosts and connection strings.
+     * @default FontFamily.SANS
+     */
+    family?: FontFamily.SANS | FontFamily.MONO;
+    /**
+     * The value is not focusable and cannot be copied. Shows the disabled look on the field and the button.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Stretch to the parent's width. Without it, the field is about 20 characters wide and a long value ends in an ellipsis.
+     * @default false
+     */
     fillWidth?: boolean;
-    /** Render the value in the mono family — usually right for keys and IDs. */
-    isMonospace?: boolean;
+    /**
+     * DOM id of the `<input>`. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<input>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when `label` is set, otherwise the frame. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * A read-only field with a copy-to-clipboard button — API keys, IDs, share links.
- * The trailing button confirms the copy itself, so you don't need to.
- */
-declare const CopyInput: {
-    ({ value, label, labelTooltip, variant, size, width, fillWidth, isMonospace, }: CopyInputProps): import("react").JSX.Element;
-    displayName: string;
-};
+/** A read-only field with an in-field copy button: `TextInput isReadOnly` + `CopyButton`. */
+declare const CopyInput: import("react").ForwardRefExoticComponent<CopyInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default CopyInput;

package/dist/inputs/CopyInput.js

@@ -1,60 +1,68 @@
-import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
-import { InputSize, InputVariant } from "./Input.js";
+import { FontFamily } from "../theme/enums.js";
+import { ButtonVariant } from "../buttons/Button.js";
+import CopyButton from "../buttons/CopyButton.js";
+import { useField } from "../hooks/useField.js";
+import "./internal/innerButton.js";
+import { INPUT_SIZE_TO_BUTTON_SIZE_MAP, InputSize, InputVariant } from "./Input.js";
 import TextInput from "./TextInput.js";
-import { useCallback, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+import { forwardRef, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
 //#region src/inputs/CopyInput.tsx
-var INPUT_SIZE_TO_BUTTON_SIZE = {
-	[InputSize.SMALL]: ButtonSize.SMALL,
-	[InputSize.MEDIUM]: ButtonSize.MEDIUM,
-	[InputSize.LARGE]: ButtonSize.LARGE
-};
-var INPUT_VARIANT_TO_BUTTON_VARIANT = {
-	[InputVariant.TRANSPARENT]: ButtonVariant.TERTIARY,
-	[InputVariant.BASE]: ButtonVariant.SECONDARY,
-	[InputVariant.PRIMARY]: ButtonVariant.SECONDARY,
-	[InputVariant.SECONDARY]: ButtonVariant.SECONDARY,
-	[InputVariant.TERTIARY]: ButtonVariant.SECONDARY
-};
 /**
-* A read-only field with a copy-to-clipboard button — API keys, IDs, share links.
-* The trailing button confirms the copy itself, so you don't need to.
+* Shows one value the user copies but does not edit: an API key, a webhook URL, a connection
+* string, an ID. A read-only `TextInput` with a `CopyButton` in its `trailing` slot (Input's
+* in-field action pattern: a `TERTIARY` icon-only button at the rung's in-field size). Pressing it
+* copies the full value, selects the field's text, swaps the icon to a check and confirms "Copied",
+* all through CopyButton. The button is named "Copy <label>" from `label`, `ariaLabel` or a
+* wrapping `Field`'s label. `InputSize` / `InputVariant` are imported from `inputs/Input`.
+*
+* It does not mask, edit, validate or fetch. A secret that is copied but stays masked is the base
+* `Input` with `type="password"` and `isReadOnly`, and a `TERTIARY` `CopyButton` at the rung's
+* in-field size in `trailing` (`PasswordInput` owns its trailing slot); an editable value with a
+* copy action is `TextInput` with a `CopyButton` in `trailing`. Replaces 1.x
+* `CopyInput` (the outside button moves inside the field; `width` → `fillWidth`, `isMonospace` →
+* `family`, `labelTooltip` → wrap in `Field`).
 */
-var CopyInput = ({ value, label, labelTooltip, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
-	const [copied, setCopied] = useState(false);
+/** A read-only field with an in-field copy button: `TextInput isReadOnly` + `CopyButton`. */
+var CopyInput = forwardRef(function CopyInput(props, ref) {
+	const { value, label, ariaLabel, size = InputSize.MEDIUM, variant = InputVariant.PRIMARY, isGhost = false, family = FontFamily.SANS, isDisabled = false, fillWidth = false, ...rest } = props;
+	const field = useField();
 	const inputRef = useRef(null);
-	const handleCopy = useCallback(() => {
-		inputRef.current?.select();
-		navigator.clipboard.writeText(value).then(() => {
-			setCopied(true);
-			setTimeout(() => setCopied(false), 2e3);
-		});
-	}, [value]);
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		alignItems: AlignItems.END,
-		gap: 8,
+	const mergedRef = useMergeRefs([inputRef, ref]);
+	const hasLabel = label !== void 0 && label !== "";
+	const hasAriaLabel = ariaLabel !== void 0 && ariaLabel !== "";
+	const copyName = hasLabel ? `Copy ${label}` : hasAriaLabel ? `Copy ${ariaLabel}` : "Copy";
+	const fieldNaming = !hasLabel && !hasAriaLabel && field !== null && field.labelId !== void 0 ? {
+		id: `${field.controlId}-copy`,
+		"aria-labelledby": `${field.controlId}-copy ${field.labelId}`
+	} : {};
+	return /* @__PURE__ */ jsx(TextInput, {
+		...rest,
+		ref: mergedRef,
+		value,
+		isReadOnly: true,
+		...label === void 0 ? {} : { label },
+		...ariaLabel === void 0 ? {} : { ariaLabel },
+		size,
+		variant,
+		isGhost,
+		family,
+		isDisabled,
 		fillWidth,
-		children: [/* @__PURE__ */ jsx(TextInput, {
-			ref: inputRef,
-			label,
-			labelTooltip,
+		trailing: /* @__PURE__ */ jsx(CopyButton, {
+			...fieldNaming,
 			value,
-			onChange: () => {},
-			variant,
-			size,
-			width,
-			fillWidth,
-			isMonospace
-		}), /* @__PURE__ */ jsx(Button, {
-			icon: copied ? CheckIcon : CopyIcon,
-			variant: INPUT_VARIANT_TO_BUTTON_VARIANT[variant],
-			size: INPUT_SIZE_TO_BUTTON_SIZE[size],
-			onClick: handleCopy
-		})]
+			ariaLabel: copyName,
+			variant: ButtonVariant.TERTIARY,
+			size: INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+			isDisabled,
+			onClick: () => inputRef.current?.setSelectionRange(0, value.length),
+			className: cx(size === InputSize.X_SMALL && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+		})
 	});
-};
+});
 CopyInput.displayName = "CopyInput";
 //#endregion
 export { CopyInput as default };

package/dist/inputs/CronInput.d.ts

@@ -0,0 +1,94 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Canonical rungs; CronInput supports all five and passes the rung to every control it renders. */
+export declare enum CronInputSize {
+    /** 20px controls, caption text. */
+    X_SMALL = "X_SMALL",
+    /** 24px controls, body_sm text. */
+    SMALL = "SMALL",
+    /** 32px controls, body_md text. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px controls, body_lg text. */
+    LARGE = "LARGE",
+    /** 40px controls, body_lg text. */
+    X_LARGE = "X_LARGE"
+}
+/** Resting fill of the builder's controls (Constitution V-A surface set). */
+export declare enum CronInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+export interface CronInputProps extends AriaAttributes {
+    /** Controlled five-field cron expression. Pass it with `onChange`. */
+    value?: string;
+    /**
+     * Initial expression while uncontrolled (daily at 00:00).
+     * @default 0 0 * * *
+     */
+    defaultValue?: string;
+    /** Called with the new expression on every builder change and every keystroke in the Custom field. */
+    onChange?: (value: string) => void;
+    /**
+     * Rung of every control in the builder: 20 / 24 / 32 / 36 / 40px.
+     * @default CronInputSize.MEDIUM
+     */
+    size?: CronInputSize;
+    /**
+     * Resting fill of the builder's controls, from the surface set. Ignored with `isGhost`.
+     * @default CronInputVariant.PRIMARY
+     */
+    variant?: CronInputVariant;
+    /**
+     * Ghost controls (1.x `TRANSPARENT`): the selects and the Custom field show no fill and no hairline
+     * until hover or focus, and the frequency toggle's track has no fill and no hairline.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the builder, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
+    label?: string;
+    /** Message from the app, shown under the builder through `Field`. Also marks the builder's controls invalid. */
+    error?: string;
+    /**
+     * Error borders and `aria-invalid` on the controls without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Every control is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Every control is focusable and announced but cannot change the schedule.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required` on the controls. No validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Stretch to the parent's width; the control column fills the rest of each row.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name of the group when there is no visible label (no `label` and no wrapping `Field`). */
+    ariaLabel?: string;
+    /** DOM id of the group element. A wrapping `Field`'s id wins. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the group element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when CronInput renders one, otherwise the group. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A five-field cron expression, edited through a frequency builder with a plain-English preview. */
+declare const CronInput: import("react").ForwardRefExoticComponent<CronInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CronInput;