mirror of
https://github.com/jetkvm/kvm.git
synced 2025-09-16 08:38:14 +00:00
3ec1bdf388
* chore(ui): Patch bump in tailwind related packages and framer-motion tailwind: [4.1.6 -> 4.1.7](https://github.com/tailwindlabs/tailwindcss/compare/v4.1.6...v4.1.7) @tailwindcss/postcss: 4.1.6 -> 4.1.7 @tailwindcss/vite: 4.1.6 -> 4.1.7 Also patch-bump of: framer-motion: [12.11.0 -> 12.11.4](https://github.com/motiondivision/motion/compare/v12.11.0...v12.11.4) No source changes seemingly needed, have not rerun the migrate. * chore(ui): Run tailwind upgrade and review changes Ran the `npx @tailwindcss/upgrade` and accepted the changes that seemed safe. They're things like: - `data-[closed]:translate-y-9` -> `data-closed:translate-y-8` ()swaps the square bracket syntax to a `-` modifier) - `bg-gradient-to-*` -> `bg-linear-to-*` - `/[*%]` -> `/*` (swap square bracket syntax for inline) - `theme(*.*)` -> `var(--*-*)` (theme styles are exposed as variables with hyphens for dots now) - `[background-size:*]` -> `bg-size[*]` (move the square brackets inside tag) - `[.active_&]:` -> `in[.active]:` (new syntax for parent query) - `!class` -> `class!` (e.g. _!overflow-visible_ to _overflow-visible!_, for [important flag](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-flag style) - `w-[1px]` -> `w-px` (that's a new syntax for a 1px width) - `h-[1px]` -> `h-px` (that's a new syntax for a 1px height) - moved `html` and `html, body` global settings in the _index.css_ Also killed off an unused `import` and blank css class. Also picked up the two `flex-grow` -> `grow` that I missed last pass, oops.
107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import React, { JSX } from "react";
|
|
import clsx from "clsx";
|
|
|
|
import FieldLabel from "@/components/FieldLabel";
|
|
import { cva } from "@/cva.config";
|
|
|
|
import Card from "./Card";
|
|
|
|
|
|
type SelectMenuProps = Pick<
|
|
JSX.IntrinsicElements["select"],
|
|
"disabled" | "onChange" | "name" | "value"
|
|
> & {
|
|
defaultSelection?: string;
|
|
className?: string;
|
|
options: {
|
|
label: string;
|
|
value: string;
|
|
disabled?: boolean;
|
|
}[];
|
|
size?: keyof typeof sizes;
|
|
direction?: "vertical" | "horizontal";
|
|
error?: string;
|
|
fullWidth?: boolean;
|
|
} & Partial<React.ComponentProps<typeof FieldLabel>>;
|
|
|
|
const sizes = {
|
|
XS: "h-[24.5px] pl-3 pr-8 text-xs",
|
|
SM: "h-[32px] pl-3 pr-8 text-[13px]",
|
|
MD: "h-[40px] pl-4 pr-10 text-sm",
|
|
LG: "h-[48px] pl-4 pr-10 px-5 text-base",
|
|
};
|
|
|
|
const selectMenuVariants = cva({
|
|
variants: { size: sizes },
|
|
});
|
|
|
|
export const SelectMenuBasic = React.forwardRef<HTMLSelectElement, SelectMenuProps>(
|
|
function SelectMenuBasic(
|
|
{
|
|
fullWidth,
|
|
options,
|
|
className,
|
|
direction = "vertical",
|
|
label,
|
|
size = "MD",
|
|
name,
|
|
disabled,
|
|
value,
|
|
id,
|
|
onChange,
|
|
},
|
|
ref,
|
|
) {
|
|
const classes = selectMenuVariants({ size });
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
direction === "vertical" ? "space-y-1" : "flex items-center gap-x-2",
|
|
fullWidth ? "w-full" : "w-auto",
|
|
className,
|
|
"text-sm",
|
|
)}
|
|
>
|
|
{label && <FieldLabel label={label} id={id} as="span" />}
|
|
<Card className="w-auto border! border-solid border-slate-800/30! shadow-xs outline-0 dark:border-slate-300/30!">
|
|
<select
|
|
ref={ref}
|
|
name={name}
|
|
disabled={disabled}
|
|
className={clsx(
|
|
classes,
|
|
|
|
// General styling
|
|
"block w-full cursor-pointer rounded-sm border-none py-0 font-medium shadow-none outline-0 transition duration-300",
|
|
|
|
// Hover
|
|
"hover:bg-blue-50/80 active:bg-blue-100/60 disabled:hover:bg-white",
|
|
|
|
// Dark mode
|
|
"dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 dark:active:bg-slate-800/60 dark:disabled:hover:bg-slate-800",
|
|
|
|
// Invalid
|
|
"invalid:ring-2 invalid:ring-red-600 invalid:ring-offset-2",
|
|
|
|
// Focus
|
|
"focus:outline-blue-600 focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 dark:focus:outline-blue-500 dark:focus:ring-blue-500",
|
|
|
|
// Disabled
|
|
"disabled:pointer-events-none disabled:select-none disabled:bg-slate-50 disabled:text-slate-500/80 dark:disabled:bg-slate-800 dark:disabled:text-slate-400/80",
|
|
)}
|
|
value={value}
|
|
id={id}
|
|
onChange={onChange}
|
|
>
|
|
{options.map(x => (
|
|
<option key={x.value} value={x.value} disabled={x.disabled}>
|
|
{x.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Card>
|
|
</div>
|
|
);
|
|
},
|
|
);
|