3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-08 12:07:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update input and focus styles (#1012)

Browse source
This commit is contained in:
Luke Vella 2024-02-01 12:44:30 +07:00 • committed by GitHub
parent 8b0f039840
commit 729e97cc53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 69 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

5
packages/ui/src/button.tsx
View file

@ -7,7 +7,10 @@ import * as React from "react";
import { cn } from "@rallly/ui";
const buttonVariants = cva(
"inline-flex border font-medium disabled:text-muted-foreground focus:ring-1 focus:ring-gray-300 disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center whitespace-nowrap rounded-md border",
cn(
"inline-flex border font-medium disabled:text-muted-foreground disabled:bg-muted disabled:pointer-events-none select-none items-center justify-center whitespace-nowrap rounded-md border",
"focus-visible:ring-offset-input-background focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-indigo-100",
),
{
variants: {
variant: {

7
packages/ui/src/dialog.tsx
View file

@ -52,7 +52,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"animate-in sm:zoom-in-90 data-[state=open]:fade-in shadow-huge fixed z-50 grid w-full gap-4 overflow-hidden bg-white p-5 sm:rounded-md",
"animate-in data-[state=open]:fade-in shadow-huge fixed z-50 mx-4 grid translate-y-4 gap-4 overflow-hidden rounded-md bg-white p-5",
{
"sm:max-w-sm": size === "sm",
"sm:max-w-md": size === "md",
@ -80,10 +80,7 @@ const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("flex flex-col text-center sm:text-left", className)}
{...props}
/>
<div className={cn("flex flex-col", className)} {...props} />
);
DialogHeader.displayName = "DialogHeader";

35
packages/ui/src/input.tsx
View file

@ -1,16 +1,45 @@
import * as React from "react";
import { cn } from "@rallly/ui";
import { cva } from "class-variance-authority";
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
export type InputProps = Omit<
React.InputHTMLAttributes<HTMLInputElement>,
"size"
> & {
size?: "sm" | "md" | "lg";
error?: boolean;
};
const inputVariants = cva(
cn(
"border-input placeholder:text-muted-foreground flex h-9 w-full rounded border bg-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
),
{
variants: {
size: {
sm: "h-6 text-sm px-1",
md: "h-9 text-base px-2",
lg: "h-12 text-lg px-3",
},
},
defaultVariants: {
size: "md",
},
},
);
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
({ className, size, type, error, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"border-input ring-offset-input-background placeholder:text-muted-foreground focus-visible:ring-ring focus-visible:border-ring flex h-9 w-full rounded border bg-transparent px-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
"focus-visible:ring-offset-input-background focus-visible:ring-1 focus-visible:ring-offset-1",
inputVariants({ size }),
error
? "focus-visible:border-rose-400 focus-visible:ring-rose-100"
: "focus-visible:border-primary-400 focus-visible:ring-primary-100",
className,
)}
ref={ref}

4
packages/ui/src/textarea.tsx
View file

@ -9,7 +9,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
"border-input ring-offset-input-background placeholder:text-muted-foreground focus-visible:ring-ring focus-visible:border-ring flex min-h-[80px] w-full rounded border bg-transparent px-3 py-2 focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
"border-input placeholder:text-muted-foreground flex min-h-[80px] w-full rounded border bg-transparent px-3 py-2 disabled:cursor-not-allowed disabled:opacity-50",
"focus-visible:ring-offset-input-background focus-visible:ring-1 focus-visible:ring-offset-1",
"focus-visible:border-primary-400 focus-visible:ring-primary-100",
className,
)}
ref={ref}