Something went wrong. Try again.
A design system in a box. hip-ui.tngl.io/docs/introduction
Something went wrong. Try again.
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457import * as stylex from "@stylexjs/stylex";import { use } from "react";
import type { InputValidationState, InputVariant, LabelVariant, Size,} from "../theme/types";
import { SizeContext } from "../context";import { animationDuration } from "./animations.stylex";import { criticalColor, successColor, uiColor, warningColor,} from "./color.stylex";import { radius } from "./radius.stylex";import { ui } from "./semantic-color.stylex";import { gap, horizontalSpace, size as sizeSpace,} from "./semantic-spacing.stylex";import { fontSize, fontWeight, lineHeight } from "./typography.stylex";
const styles = stylex.create({ field: { gap: gap["md"], display: "flex", flexDirection: "column", }, addon: { boxSizing: "border-box", color: ui.textDim, flexShrink: 0, height: "100%",
gap: gap["md"], alignItems: "center", display: "flex", justifyContent: "center",
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles ":is(*) svg": { flexShrink: 0, pointerEvents: "none", height: sizeSpace["2xl"], width: sizeSpace["2xl"], }, }, addonSm: { paddingLeft: { ":first-child": horizontalSpace["sm"] }, paddingRight: { ":first-child": horizontalSpace["xs"], ":last-child": horizontalSpace["xs"], }, }, addonMd: { paddingLeft: { ":first-child": horizontalSpace["lg"] }, paddingRight: { ":first-child": horizontalSpace["md"], ":last-child": horizontalSpace["md"], }, }, addonLg: { paddingLeft: { ":first-child": horizontalSpace["xl"] }, paddingRight: { ":first-child": horizontalSpace["md"], ":last-child": horizontalSpace["md"], }, }, validationIcon: { alignItems: "center", display: "flex", justifyContent: "center", }, invalidIcon: { color: criticalColor.text1, }, validIcon: { color: successColor.text1, }, warningIcon: { color: warningColor.text1, }, inputWrapper: { paddingBottom: 0, paddingLeft: 0, paddingRight: 0, paddingTop: 0, borderRadius: radius.lg, borderWidth: 0,
cornerShape: "squircle", overflow: "hidden", boxSizing: "border-box", display: "flex", lineHeight: lineHeight["none"], }, input: { borderWidth: 0, outline: "none", alignItems: "center", backgroundColor: "transparent", boxSizing: "border-box", color: { default: "inherit", ":is(::placeholder,[data-placeholder])": uiColor.text1, }, display: "flex", flexGrow: 1, lineHeight: lineHeight["none"], minWidth: 0,
appearance: { "::-webkit-search-cancel-button": "none", "::-webkit-search-decoration": "none", }, }, primary: { borderColor: { default: uiColor.border1, ":has(:is([data-hovered])):not(:has(:is([data-invalid])))": uiColor.border2, ":focus": uiColor.border3, }, borderStyle: "solid", borderWidth: 1, backgroundColor: { default: uiColor.bg, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": uiColor.component1, ":is([data-pressed=true]):not(:disabled)": uiColor.component2, ":disabled": "transparent", }, boxShadow: { ":has(:is([data-invalid]))": `0 0 0 2px ${criticalColor.component1}`, }, transitionDuration: animationDuration.fast, transitionProperty: "background-color", transitionTimingFunction: "ease-in-out", }, primaryInvalid: { borderColor: { default: criticalColor.border2, ":has(:is([data-hovered]))": criticalColor.border3, ":focus": uiColor.solid1, }, backgroundColor: { default: criticalColor.bgSubtle, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": criticalColor.component2, ":disabled": "transparent", }, boxShadow: `0 0 0 2px ${criticalColor.component1}`, color: criticalColor.text2, }, primaryWarning: { borderColor: { default: warningColor.border2, ":has(:is([data-hovered]))": warningColor.border3, ":focus": uiColor.solid1, }, backgroundColor: { default: warningColor.bgSubtle, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": warningColor.component2, ":disabled": "transparent", }, boxShadow: `0 0 0 2px ${warningColor.component1}`, color: warningColor.text2, }, primaryValid: { borderColor: { default: successColor.border2, ":has(:is([data-hovered]))": successColor.border3, ":focus": uiColor.solid1, }, backgroundColor: { default: successColor.bgSubtle, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": successColor.component2, ":disabled": "transparent", }, boxShadow: `0 0 0 2px ${successColor.component1}`, color: successColor.text2, }, secondary: { borderColor: { default: uiColor.border1, ":has(:is([data-hovered])):not(:has(:is([data-invalid])))": uiColor.border2, ":focus": uiColor.border3, }, borderStyle: "solid", borderWidth: 1, backgroundColor: { default: uiColor.component1, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": uiColor.component2, ":is([data-pressed=true]):not(:disabled)": uiColor.component3, ":disabled": uiColor.component1, }, transitionDuration: animationDuration.fast, transitionProperty: "background-color", transitionTimingFunction: "ease-in-out", }, secondaryInvalid: { borderColor: { default: criticalColor.component1, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": criticalColor.component2, }, backgroundColor: { default: criticalColor.component1, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": criticalColor.component2, }, }, secondaryWarning: { borderColor: { default: warningColor.component1, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": warningColor.component2, }, backgroundColor: { default: warningColor.component1, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": warningColor.component2, }, color: warningColor.text2, }, secondaryValid: { borderColor: { default: successColor.component1, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": successColor.component2, }, backgroundColor: { default: successColor.component1, ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": successColor.component2, }, color: successColor.text2, }, tertiary: { borderColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": uiColor.component2, ":is([data-pressed=true]):not(:disabled)": uiColor.component3, ":disabled": "transparent", }, borderStyle: "solid", borderWidth: 1, backgroundColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": uiColor.component2, ":is([data-pressed=true]):not(:disabled)": uiColor.component3, ":disabled": "transparent", }, transitionDuration: animationDuration.fast, transitionProperty: "background-color", transitionTimingFunction: "ease-in-out", }, tertiaryInvalid: { borderColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": criticalColor.component1, ":is([data-pressed=true]):not(:disabled)": criticalColor.component2, ":disabled": "transparent", }, backgroundColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": criticalColor.component1, ":is([data-pressed=true]):not(:disabled)": criticalColor.component2, ":disabled": "transparent", }, color: criticalColor.text2, }, tertiaryWarning: { borderColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": warningColor.component1, ":is([data-pressed=true]):not(:disabled)": warningColor.component2, ":disabled": "transparent", }, backgroundColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": warningColor.component1, ":is([data-pressed=true]):not(:disabled)": warningColor.component2, ":disabled": "transparent", }, color: warningColor.text1, }, tertiaryValid: { borderColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": successColor.component1, ":is([data-pressed=true]):not(:disabled)": successColor.component2, ":disabled": "transparent", }, backgroundColor: { default: "transparent", ":is([data-hovered]:not(:has(* [data-hovered])),:has(input[data-hovered])):not(:disabled)": successColor.component1, ":is([data-pressed=true]):not(:disabled)": successColor.component2, ":disabled": "transparent", }, color: successColor.text1, },
inputSizeSm: { fontSize: fontSize["xs"], paddingLeft: { ":first-child": horizontalSpace["md"], }, paddingRight: horizontalSpace["xs"], }, inputSizeMd: { fontSize: fontSize["sm"], paddingLeft: { ":first-child": horizontalSpace["md"], }, paddingRight: horizontalSpace["md"], }, inputSizeLg: { fontSize: fontSize["base"], paddingLeft: { ":first-child": horizontalSpace["xl"], }, paddingRight: horizontalSpace["xl"], }, wrapperSizeSm: { height: sizeSpace["4xl"], }, wrapperSizeMd: { height: sizeSpace["6xl"], }, wrapperSizeLg: { height: sizeSpace["lg"], }, horizontalLabel: { gap: gap["2xl"], alignItems: "flex-start", flexDirection: "row", }, horizontalLabelText: { flexGrow: 1, minWidth: 0, paddingLeft: 0, paddingRight: 0, }, horizontalLabelTextSm: { lineHeight: sizeSpace["4xl"], }, horizontalLabelTextMd: { lineHeight: sizeSpace["6xl"], }, horizontalLabelTextLg: { fontSize: fontSize["base"], fontWeight: fontWeight["medium"], lineHeight: sizeSpace["lg"], }, label: { paddingLeft: horizontalSpace["xs"], paddingRight: horizontalSpace["xs"], }, additionalText: { paddingLeft: horizontalSpace["md"], paddingRight: horizontalSpace["md"], },});
export function useInputStyles({ size: sizeProp, variant = "primary", labelVariant = "vertical", validationState,}: { size: Size | undefined; variant: InputVariant | undefined; labelVariant: LabelVariant | undefined; validationState: InputValidationState | undefined;}) { const size = sizeProp || use(SizeContext);
return { field: [ styles.field, labelVariant === "horizontal" && styles.horizontalLabel, ], wrapper: [ styles.inputWrapper, ui.text, variant === "primary" && [ styles.primary, validationState === "invalid" && [styles.primaryInvalid], validationState === "warning" && [styles.primaryWarning], validationState === "valid" && [styles.primaryValid], ], variant === "secondary" && [ styles.secondary, validationState === "invalid" && [styles.secondaryInvalid], validationState === "warning" && [styles.secondaryWarning], validationState === "valid" && [styles.secondaryValid], ], variant === "tertiary" && [ styles.tertiary, validationState === "invalid" && [styles.tertiaryInvalid], validationState === "warning" && [styles.tertiaryWarning], validationState === "valid" && [styles.tertiaryValid], ], size === "sm" && styles.wrapperSizeSm, size === "md" && styles.wrapperSizeMd, size === "lg" && styles.wrapperSizeLg, ], label: [ styles.label, labelVariant === "horizontal" && [ styles.horizontalLabelText, size === "sm" && styles.horizontalLabelTextSm, size === "md" && styles.horizontalLabelTextMd, size === "lg" && styles.horizontalLabelTextLg, ], ], description: [styles.additionalText], errorMessage: [styles.additionalText], input: [ styles.input, size === "sm" && styles.inputSizeSm, size === "md" && styles.inputSizeMd, size === "lg" && styles.inputSizeLg, ], addon: [ styles.addon, size === "sm" && styles.addonSm, size === "md" && styles.addonMd, size === "lg" && styles.addonLg, ] as unknown as stylex.StyleXStyles, validationIcon: [ styles.validationIcon, validationState === "invalid" && [styles.invalidIcon], validationState === "valid" && [styles.validIcon], validationState === "warning" && [styles.warningIcon], ], };}