File size: 5,572 Bytes
a070805 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | import { cn } from "#/utils/utils";
/** 36px control height — shared by fields, dropdowns, and buttons. */
export const formControlHeightClassName = "h-9 min-h-9";
export const formControlRadiusClassName = "rounded-lg";
export const formControlBorderClassName = "border border-[var(--oh-border)]";
export const formControlSurfaceClassName = "bg-base-secondary";
/** Shared transition duration for form controls and chrome buttons. */
export const formControlTransitionDurationClassName = "duration-75";
export const formControlHeroUiTransitionDurationClassName = "!duration-75";
export const formControlMotionReduceClassName = "motion-reduce:transition-none";
/** Shell properties that animate on hover/focus; foreground color snaps instantly. */
export const formControlTransitionPropertiesClassName =
"transition-[background-color,border-color,box-shadow,opacity]";
/** Animate shell chrome on hover/focus; foreground color snaps instantly. */
export const formControlTransitionClassName = cn(
formControlTransitionPropertiesClassName,
formControlTransitionDurationClassName,
formControlMotionReduceClassName,
);
/** HeroUI input wrappers ship `transition-colors`; override so caret/text hover is instant. */
export const formControlHeroUiWrapperTransitionClassName = cn(
"!transition-[background-color,border-color,box-shadow,opacity]",
formControlHeroUiTransitionDurationClassName,
formControlMotionReduceClassName,
);
/** Transform-only transitions (e.g. combobox carets). */
export const formControlTransformTransitionClassName = cn(
"transition-[transform] ease",
formControlTransitionDurationClassName,
formControlMotionReduceClassName,
);
/** Muted icon/pill controls: instant foreground, fading shell on hover. */
export const formControlMutedHoverClassName =
"hover:text-white hover:bg-white/10";
/** Text/icon pill triggers in the chat input actions row. */
export const chatInputPillButtonClassName = cn(
"inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5",
"text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 cursor-pointer",
formControlTransitionClassName,
formControlMutedHoverClassName,
);
/** Circular icon triggers in the chat input actions row. */
export const chatInputIconButtonClassName = cn(
"flex items-center justify-center rounded-full text-[var(--oh-muted)] cursor-pointer",
formControlTransitionClassName,
formControlMutedHoverClassName,
);
export const formControlFocusClassName =
"focus:border-white/40 focus:ring-1 focus:ring-white/20 focus:outline-none";
export const formControlFocusWithinClassName =
"focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20";
export const formControlDisabledClassName =
"disabled:cursor-not-allowed disabled:opacity-60";
/** Native text inputs and HeroUI Autocomplete wrappers. */
export const formControlFieldClassName = cn(
formControlHeightClassName,
formControlRadiusClassName,
formControlBorderClassName,
formControlSurfaceClassName,
formControlTransitionClassName,
formControlFocusClassName,
formControlDisabledClassName,
"w-full min-w-0 px-3 text-sm text-white placeholder:text-tertiary-alt",
);
/** Settings screens keep italic placeholders on form controls. */
export const formControlSettingsFieldClassName = cn(
formControlFieldClassName,
"placeholder:italic",
formControlHeroUiWrapperTransitionClassName,
);
/** Multiline fields share border/radius/focus styling without a fixed height. */
export const formControlMultilineFieldClassName = cn(
formControlRadiusClassName,
formControlBorderClassName,
formControlSurfaceClassName,
formControlTransitionClassName,
formControlFocusClassName,
formControlDisabledClassName,
"w-full min-w-0 px-3 py-2 text-sm text-white placeholder:text-tertiary-alt",
);
/** Combobox / search shell (icon + input), e.g. skills toolbar. */
export const formControlShellClassName = cn(
formControlHeightClassName,
"relative flex min-w-0 items-center",
formControlRadiusClassName,
formControlBorderClassName,
formControlSurfaceClassName,
formControlTransitionClassName,
formControlFocusWithinClassName,
);
/** Borderless input nested inside {@link formControlShellClassName}. */
export const formControlInlineInputClassName = cn(
"min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none",
"placeholder:text-tertiary-alt",
"[&::-webkit-search-cancel-button]:hidden",
);
/** Primary/secondary/danger action buttons. */
export const formControlButtonClassName = cn(
formControlHeightClassName,
"inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-3",
formControlRadiusClassName,
formControlTransitionClassName,
"text-sm font-normal disabled:cursor-not-allowed disabled:opacity-30",
);
/** Helper text under a left-aligned {@link SettingsSwitch} (40px track + gap-2). */
export const formControlSwitchDescriptionClassName = "pl-12";
/** Filter / enum dropdown triggers beside search toolbars. */
export const formControlFilterTriggerClassName = cn(
formControlButtonClassName,
formControlBorderClassName,
formControlSurfaceClassName,
"shrink-0 text-white",
);
/** Muted back navigation control with tertiary hover fill (settings sub-pages, detail views). */
export const formControlBackNavButtonClassName = cn(
"inline-flex items-center gap-2 self-start rounded-lg p-2",
"text-sm font-normal leading-5 text-[var(--oh-muted)] cursor-pointer",
formControlTransitionClassName,
"hover:bg-tertiary hover:text-white",
);
|