keystone-design-bootstrap 1.0.3

package/src/design_system/elements/input/input.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { type ComponentType, type HTMLAttributes, type ReactNode, type Ref, createContext, useContext } from "react";
+import { HelpCircle, InfoCircle } from "@untitledui/icons";
+import type { InputProps as AriaInputProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { Group as AriaGroup, Input as AriaInput, TextField as AriaTextField } from "react-aria-components";
+import { HintText } from './hint-text';
+import { Label } from './label';
+import { Tooltip, TooltipTrigger } from '../tooltip/tooltip';
+import { cx, sortCx } from '../../../utils/cx';
+
+export interface InputBaseProps extends TextFieldProps {
+    /** Tooltip message on hover. */
+    tooltip?: string;
+    /**
+     * Input size.
+     * @default "sm"
+     */
+    size?: "sm" | "md";
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Class name for the icon. */
+    iconClassName?: string;
+    /** Class name for the input. */
+    inputClassName?: string;
+    /** Class name for the input wrapper. */
+    wrapperClassName?: string;
+    /** Class name for the tooltip. */
+    tooltipClassName?: string;
+    /** Keyboard shortcut to display. */
+    shortcut?: string | boolean;
+    ref?: Ref<HTMLInputElement>;
+    groupRef?: Ref<HTMLDivElement>;
+    /** Icon component to display on the left side of the input. */
+    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
+}
+
+export const InputBase = ({
+    ref,
+    tooltip,
+    shortcut,
+    groupRef,
+    size = "sm",
+    isInvalid,
+    isDisabled,
+    icon: Icon,
+    placeholder,
+    wrapperClassName,
+    tooltipClassName,
+    inputClassName,
+    iconClassName,
+    // Omit this prop to avoid invalid HTML attribute warning
+    isRequired: _isRequired,
+    ...inputProps
+}: Omit<InputBaseProps, "label" | "hint">) => {
+    // Check if the input has a leading icon or tooltip
+    const hasTrailingIcon = tooltip || isInvalid;
+    const hasLeadingIcon = Icon;
+
+    // If the input is inside a `TextFieldContext`, use its context to simplify applying styles
+    const context = useContext(TextFieldContext);
+
+    const inputSize = context?.size || size;
+
+    const sizes = sortCx({
+        sm: {
+            root: cx("px-3 py-2", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+            iconLeading: "left-3",
+            iconTrailing: "right-3",
+            shortcut: "pr-2.5",
+        },
+        md: {
+            root: cx("px-3.5 py-2.5", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+            iconLeading: "left-3.5",
+            iconTrailing: "right-3.5",
+            shortcut: "pr-3",
+        },
+    });
+
+    return (
+        <AriaGroup
+            {...{ isDisabled, isInvalid }}
+            ref={groupRef}
+            className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                cx(
+                    "relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset",
+
+                    isFocusWithin && !isDisabled && "ring-2 ring-brand",
+
+                    // Disabled state styles
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle ring-disabled",
+                    "group-disabled:cursor-not-allowed group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
+
+                    // Invalid state styles
+                    isInvalid && "ring-error_subtle",
+                    "group-invalid:ring-error_subtle",
+
+                    // Invalid state with focus-within styles
+                    isInvalid && isFocusWithin && "ring-2 ring-error",
+                    isFocusWithin && "group-invalid:ring-2 group-invalid:ring-error",
+
+                    context?.wrapperClassName,
+                    wrapperClassName,
+                )
+            }
+        >
+            {/* Leading icon and Payment icon */}
+            {Icon && (
+                <Icon
+                    className={cx(
+                        "pointer-events-none absolute size-5 text-fg-quaternary",
+                        isDisabled && "text-fg-disabled",
+                        sizes[inputSize].iconLeading,
+                        context?.iconClassName,
+                        iconClassName,
+                    )}
+                />
+            )}
+
+            {/* Input field */}
+            <AriaInput
+                {...(inputProps as AriaInputProps)}
+                ref={ref}
+                placeholder={placeholder}
+                className={cx(
+                    "m-0 w-full bg-transparent text-md text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary",
+                    isDisabled && "cursor-not-allowed text-disabled",
+                    sizes[inputSize].root,
+                    context?.inputClassName,
+                    inputClassName,
+                )}
+            />
+
+            {/* Tooltip and help icon */}
+            {tooltip && !isInvalid && (
+                <Tooltip title={tooltip} placement="top">
+                    <TooltipTrigger
+                        className={cx(
+                            "absolute cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+                            sizes[inputSize].iconTrailing,
+                            context?.tooltipClassName,
+                            tooltipClassName,
+                        )}
+                    >
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+
+            {/* Invalid icon */}
+            {isInvalid && (
+                <InfoCircle
+                    className={cx(
+                        "pointer-events-none absolute size-4 text-fg-error-secondary",
+                        sizes[inputSize].iconTrailing,
+                        context?.tooltipClassName,
+                        tooltipClassName,
+                    )}
+                />
+            )}
+
+            {/* Shortcut */}
+            {shortcut && (
+                <div
+                    className={cx(
+                        "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+                        sizes[inputSize].shortcut,
+                    )}
+                >
+                    <span
+                        className={cx(
+                            "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                            isDisabled && "bg-transparent text-disabled",
+                        )}
+                        aria-hidden="true"
+                    >
+                        {typeof shortcut === "string" ? shortcut : "⌘K"}
+                    </span>
+                </div>
+            )}
+        </AriaGroup>
+    );
+};
+
+InputBase.displayName = "InputBase";
+
+interface BaseProps {
+    /** Label text for the input */
+    label?: string;
+    /** Helper text displayed below the input */
+    hint?: ReactNode;
+}
+
+interface TextFieldProps
+    extends BaseProps,
+        AriaTextFieldProps,
+        Pick<InputBaseProps, "size" | "wrapperClassName" | "inputClassName" | "iconClassName" | "tooltipClassName"> {
+    ref?: Ref<HTMLDivElement>;
+}
+
+const TextFieldContext = createContext<TextFieldProps>({});
+
+export const TextField = ({ className, ...props }: TextFieldProps) => {
+    return (
+        <TextFieldContext.Provider value={props}>
+            <AriaTextField
+                {...props}
+                data-input-wrapper
+                className={(state) =>
+                    cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+                }
+            />
+        </TextFieldContext.Provider>
+    );
+};
+
+TextField.displayName = "TextField";
+
+interface InputProps extends InputBaseProps, BaseProps {
+    /** Whether to hide required indicator from label */
+    hideRequiredIndicator?: boolean;
+}
+
+export const Input = ({
+    size = "sm",
+    placeholder,
+    icon: Icon,
+    label,
+    hint,
+    shortcut,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    tooltip,
+    iconClassName,
+    inputClassName,
+    wrapperClassName,
+    tooltipClassName,
+    ...props
+}: InputProps) => {
+    return (
+        <TextField aria-label={!label ? placeholder : undefined} {...props} className={className}>
+            {({ isRequired, isInvalid }) => (
+                <>
+                    {label && <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired}>{label}</Label>}
+
+                    <InputBase
+                        {...{
+                            ref,
+                            groupRef,
+                            size,
+                            placeholder,
+                            icon: Icon,
+                            shortcut,
+                            iconClassName,
+                            inputClassName,
+                            wrapperClassName,
+                            tooltipClassName,
+                            tooltip,
+                        }}
+                    />
+
+                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+Input.displayName = "Input";

package/src/design_system/elements/input/label.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import { HelpCircle } from "@untitledui/icons";
+import type { LabelProps as AriaLabelProps } from "react-aria-components";
+import { Label as AriaLabel } from "react-aria-components";
+import { Tooltip, TooltipTrigger } from '../tooltip/tooltip';
+import { cx } from '../../../utils/cx';
+
+interface LabelProps extends AriaLabelProps {
+    children: ReactNode;
+    isRequired?: boolean;
+    tooltip?: string;
+    tooltipDescription?: string;
+    ref?: Ref<HTMLLabelElement>;
+}
+
+export const Label = ({ isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {
+    return (
+        <AriaLabel
+            // Used for conditionally hiding/showing the label element via CSS:
+            // <Input label="Visible only on mobile" className="lg:**:data-label:hidden" />
+            // or
+            // <Input label="Visible only on mobile" className="lg:label:hidden" />
+            data-label="true"
+            {...props}
+            className={cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className)}
+        >
+            {props.children}
+
+            <span className={cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block")}>*</span>
+
+            {tooltip && (
+                <Tooltip title={tooltip} description={tooltipDescription} placement="top">
+                    <TooltipTrigger
+                        // `TooltipTrigger` inherits the disabled state from the parent form field
+                        // but we don't that. We want the tooltip be enabled even if the parent
+                        // field is disabled.
+                        isDisabled={false}
+                        className="cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover"
+                    >
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+        </AriaLabel>
+    );
+};
+
+Label.displayName = "Label";

package/src/design_system/elements/label/label.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import { HelpCircle } from "@untitledui/icons";
+import type { LabelProps as AriaLabelProps } from "react-aria-components";
+import { Label as AriaLabel } from "react-aria-components";
+import { Tooltip, TooltipTrigger } from '../tooltip/tooltip';
+import { cx } from '../../../utils/cx';
+
+interface LabelProps extends AriaLabelProps {
+    children: ReactNode;
+    isRequired?: boolean;
+    tooltip?: string;
+    tooltipDescription?: string;
+    ref?: Ref<HTMLLabelElement>;
+}
+
+export const Label = ({ isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {
+    return (
+        <AriaLabel
+            // Used for conditionally hiding/showing the label element via CSS:
+            // <Input label="Visible only on mobile" className="lg:**:data-label:hidden" />
+            // or
+            // <Input label="Visible only on mobile" className="lg:label:hidden" />
+            data-label="true"
+            {...props}
+            className={cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className)}
+        >
+            {props.children}
+
+            <span className={cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block")}>*</span>
+
+            {tooltip && (
+                <Tooltip title={tooltip} description={tooltipDescription} placement="top">
+                    <TooltipTrigger
+                        // `TooltipTrigger` inherits the disabled state from the parent form field
+                        // but we don't that. We want the tooltip be enabled even if the parent
+                        // field is disabled.
+                        isDisabled={false}
+                        className="cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover"
+                    >
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+        </AriaLabel>
+    );
+};
+
+Label.displayName = "Label";

package/src/design_system/elements/loading-indicator/loading-indicator.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { cx } from '../../../utils/cx';
+
+const styles = {
+    sm: {
+        root: "gap-4",
+        label: "text-sm font-medium",
+        spinner: "size-8",
+    },
+    md: {
+        root: "gap-4",
+        label: "text-sm font-medium",
+        spinner: "size-12",
+    },
+    lg: {
+        root: "gap-4",
+        label: "text-lg font-medium",
+        spinner: "size-14",
+    },
+    xl: {
+        root: "gap-5",
+        label: "text-lg font-medium",
+        spinner: "size-16",
+    },
+};
+
+interface LoadingIndicatorProps {
+    /**
+     * The visual style of the loading indicator.
+     * @default 'line-simple'
+     */
+    type?: "line-simple" | "line-spinner" | "dot-circle";
+    /**
+     * The size of the loading indicator.
+     * @default 'sm'
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Optional text label displayed below the indicator.
+     */
+    label?: string;
+}
+
+export const LoadingIndicator = ({ type = "line-simple", size = "sm", label }: LoadingIndicatorProps) => {
+    const renderSpinner = () => {
+        if (type === "line-spinner") {
+            return (
+                <svg className={cx("animate-spin", styles[size].spinner)} viewBox="0 0 32 32" fill="none">
+                    <circle
+                        className="stroke-fg-brand-primary"
+                        cx="16"
+                        cy="16"
+                        r="14"
+                        fill="none"
+                        strokeWidth="4"
+                        strokeDashoffset="40"
+                        strokeDasharray="100"
+                        strokeLinecap="round"
+                    />
+                </svg>
+            );
+        }
+
+        if (type === "dot-circle") {
+            return (
+                <svg className={cx("animate-spin text-fg-brand-primary", styles[size].spinner)} viewBox="0 0 36 36" fill="none">
+                    <path
+                        d="M34 18C34 15.8989 33.5861 13.8183 32.7821 11.8771C31.978 9.93586 30.7994 8.17203 29.3137 6.68629C27.828 5.20055 26.0641 4.022 24.1229 3.21793C22.1817 2.41385 20.1011 2 18 2C15.8988 2 13.8183 2.41385 11.8771 3.21793C9.93585 4.022 8.17203 5.20055 6.68629 6.68629C5.20055 8.17203 4.022 9.93586 3.21793 11.8771C2.41385 13.8183 2 15.8989 2 18"
+                        stroke="url(#paint0)"
+                        strokeWidth="4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeDasharray="0.1 8"
+                    />
+                    <path
+                        d="M3.21793 24.1229C4.022 26.0641 5.20055 27.828 6.68629 29.3137C8.17203 30.7994 9.93585 31.978 11.8771 32.7821C13.8183 33.5861 15.8988 34 18 34C20.1011 34 22.1817 33.5861 24.1229 32.7821C26.0641 31.978 27.828 30.7994 29.3137 29.3137C30.7994 27.828 31.978 26.0641 32.7821 24.1229"
+                        stroke="url(#paint1)"
+                        strokeWidth="4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeDasharray="0.1 8"
+                    />
+                    <defs>
+                        <linearGradient id="paint0" x1="34" y1="18" x2="2" y2="18" gradientUnits="userSpaceOnUse">
+                            <stop stopColor="currentColor" />
+                            <stop offset="1" stopColor="currentColor" stopOpacity="0.5" />
+                        </linearGradient>
+                        <linearGradient id="paint1" x1="33" y1="23.5" x2="3" y2="24" gradientUnits="userSpaceOnUse">
+                            <stop stopOpacity="0" stopColor="currentColor" />
+                            <stop offset="1" stopColor="currentColor" stopOpacity="0.48" />
+                        </linearGradient>
+                    </defs>
+                </svg>
+            );
+        }
+
+        // Default case: type === "line-simple"
+        return (
+            <svg className={cx("animate-spin", styles[size].spinner)} viewBox="0 0 32 32" fill="none">
+                <circle className="text-bg-tertiary" cx="16" cy="16" r="14" stroke="currentColor" strokeWidth="4" />
+                <circle
+                    className="stroke-fg-brand-primary"
+                    cx="16"
+                    cy="16"
+                    r="14"
+                    fill="none"
+                    strokeWidth="4"
+                    strokeDashoffset="75"
+                    strokeDasharray="100"
+                    strokeLinecap="round"
+                />
+            </svg>
+        );
+    };
+
+    return (
+        <div className={cx("flex flex-col items-center justify-center", styles[size].root)}>
+            {renderSpinner()}
+            {label && <span className={cx("text-secondary", styles[size].label)}>{label}</span>}
+        </div>
+    );
+};