@trail-ui/react
Version:
271 lines (268 loc) • 7.38 kB
JavaScript
import {
Text
} from "./chunk-6YFKOGWT.mjs";
import {
CloseButton
} from "./chunk-JSQOQEGD.mjs";
import {
composeTailwindRenderProps,
inputFieldStyle
} from "./chunk-3GNMOIYS.mjs";
// src/multiselect/tw-field.tsx
import React from "react";
import {
FieldError as RACFieldError,
Input as RACInput,
Label as RACLabel,
composeRenderProps,
LabelContext,
GroupContext,
Group as RACGroup,
TextField as RACTextField,
TextArea as RACTextArea,
Text as RACText,
SearchField as RACSearchField
} from "react-aria-components";
import { twMerge } from "tailwind-merge";
import { jsx, jsxs } from "react/jsx-runtime";
var LabeledGroup = React.forwardRef(function(props, ref) {
const labelId = React.useId();
return /* @__PURE__ */ jsx(LabelContext.Provider, { value: { id: labelId, elementType: "span" }, children: /* @__PURE__ */ jsx(GroupContext.Provider, { value: { "aria-labelledby": labelId }, children: /* @__PURE__ */ jsx(
RACGroup,
{
...props,
ref,
className: composeRenderProps(props.className, (className) => {
return twMerge("relative flex flex-col", className);
})
}
) }) });
});
function Label({
requiredHint,
...props
}) {
return /* @__PURE__ */ jsx(
RACLabel,
{
...props,
"data-slot": "label",
className: twMerge(
"min-w-fit cursor-default text-pretty text-base/6 font-medium sm:text-sm/6",
"group-disabled:opacity-50",
requiredHint && "after:text-destructive after:ms-0.5 after:content-['*']",
props.className
)
}
);
}
function WithLabelContext({
children
}) {
var _a;
const context = (_a = React.useContext(LabelContext)) != null ? _a : {};
return children({
"aria-labelledBy": context == null ? void 0 : context.id
});
}
var DescriptionContext = React.createContext(null);
function WithDescriptionContext({
children
}) {
const context = React.useContext(DescriptionContext);
return children(context);
}
function DescriptionProvider({ children }) {
const descriptionId = React.useId();
const [descriptionRendered, setDescriptionRendered] = React.useState(true);
React.useLayoutEffect(() => {
if (!document.getElementById(descriptionId)) {
setDescriptionRendered(false);
}
}, [descriptionId]);
return /* @__PURE__ */ jsx(
DescriptionContext.Provider,
{
value: {
"aria-describedby": descriptionRendered ? descriptionId : void 0
},
children
}
);
}
function Description({ className, ...props }) {
return /* @__PURE__ */ jsx(WithDescriptionContext, { children: (context) => {
const describedby = context == null ? void 0 : context["aria-describedby"];
return describedby ? /* @__PURE__ */ jsx(
Text,
{
...props,
id: describedby,
"data-slot": "description",
className: twMerge("group-disabled:opacity-50", className)
}
) : /* @__PURE__ */ jsx(
RACText,
{
...props,
"data-slot": "description",
slot: "description",
className: twMerge(
"text-muted text-pretty text-base/6 sm:text-sm/6",
"group-disabled:opacity-50",
className
)
}
);
} });
}
function TextField(props) {
return /* @__PURE__ */ jsx(
RACTextField,
{
...props,
className: composeTailwindRenderProps(props.className, inputFieldStyle)
}
);
}
function FieldError(props) {
return /* @__PURE__ */ jsx(
RACFieldError,
{
...props,
className: composeTailwindRenderProps(
props.className,
"text-destructive my-1 text-base/6 sm:text-sm/6"
)
}
);
}
var InputFieldGroup = React.forwardRef(
function InputFieldGroup2(props, ref) {
return /* @__PURE__ */ jsx(
RACGroup,
{
...props,
"data-slot": "control",
ref,
className: composeRenderProps(props.className, (className) => {
return twMerge(
"group relative flex w-full items-center overflow-hidden rounded-md border bg-inherit shadow-sm",
"[&_svg]:text-muted",
"group-invalid:border-destructive",
// Disabled and readonly style
"[&:has(_[data-disabled=true])]:opacity-50",
"[&:has([readonly])]:opacity-50",
// Prevent double opacity
"[&:has(_[data-disabled=true])_[class*=opacity-]]:opacity-100",
"[&:has([readonly])_[class*=opacity-]]:opacity-100",
// Remove inside input/data-input border style
"[&_:is(input,[data-slot=control])]:border-none",
"[&_:is(input,[data-slot=control])]:shadow-none",
"[&_:is(input,[data-slot=control])]:ring-0",
className
);
})
}
);
}
);
var Input = React.forwardRef(function Input2(props, ref) {
return /* @__PURE__ */ jsx(
RACInput,
{
...props,
ref,
className: composeRenderProps(props.className, (className, { isDisabled, isInvalid }) => {
return twMerge(
"flex w-full rounded-md border bg-inherit px-2 py-[5px] shadow-sm outline-none",
"text-sm opacity-60 placeholder:text-neutral-900",
"[&[readonly]]:opacity-50",
isInvalid && "border-destructive",
isDisabled && "opacity-50",
className
);
})
}
);
});
function TextArea(props) {
return /* @__PURE__ */ jsx(
RACTextArea,
{
...props,
className: composeRenderProps(props.className, (className, { isDisabled, isInvalid }) => {
return twMerge(
"w-full rounded-md border bg-inherit p-2 outline-none",
"placeholder:text-muted text-base/6 sm:text-sm/6 ",
"[&[readonly]]:opacity-50",
isDisabled && "opacity-50",
isInvalid && "border-destructive",
className
);
})
}
);
}
function SearchField(props) {
return /* @__PURE__ */ jsx(
RACSearchField,
{
...props,
className: composeTailwindRenderProps(props.className, inputFieldStyle)
}
);
}
function SearchInput({
className,
...props
}) {
return /* @__PURE__ */ jsxs(
InputFieldGroup,
{
className: composeTailwindRenderProps(className, [
"[&_input::-webkit-search-cancel-button]:hidden"
]),
children: [
/* @__PURE__ */ jsx(
"svg",
{
"aria-hidden": true,
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: 2,
stroke: "currentColor",
className: "ms-2 size-5",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
}
)
}
),
/* @__PURE__ */ jsx(Input, { ...props }),
/* @__PURE__ */ jsx(CloseButton, { plain: true, size: "sm", className: "me-1 group-empty:invisible" })
]
}
);
}
export {
LabeledGroup,
Label,
WithLabelContext,
DescriptionContext,
WithDescriptionContext,
DescriptionProvider,
Description,
TextField,
FieldError,
InputFieldGroup,
Input,
TextArea,
SearchField,
SearchInput
};