7feb53ee20
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m24s
Tham khảo NAMGROUP density conventions, GIỮ brand #1F7DC1 + Be Vietnam Pro. - index.css: density heading ladder (semibold, drop font-bold) + .label-eyebrow util - 6 UI primitives (Button/Input/Label/Select/Textarea/Dialog): text-xs font-semibold, py-1.5 ≤36px, rounded-lg, brand focus-ring - 6 shell (DataTable sticky-thead+RowActions/Layout brand-rail/TopBar/PageHeader/PhaseBadge/EmptyState) - DashboardPage flagship: KPI cards + brand-tinted icon chips + uppercase labels Visual-only — functionality unchanged (Button variant/size keys stable 51 call-sites, props/forwardRef intact). build 0 TS err. reviewer PASS 0 blocker (2 minor slate-400 hint a11y defer). fe-admin only (fe-user mirror = Phase 3). Dashboard live-visual blocked by dev auth-rig → xem live sau deploy. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
39 lines
1.8 KiB
TypeScript
39 lines
1.8 KiB
TypeScript
import { forwardRef, type ButtonHTMLAttributes } from 'react'
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import { cn } from '@/lib/cn'
|
|
|
|
// Density-first (NAMGROUP convention): text-xs font-semibold, compact heights,
|
|
// rounded-lg. Brand identity kept — primary = brand-600, focus ring brand-500.
|
|
// Decorative shadow dropped; only the filled actions keep a 1px tint shadow for
|
|
// affordance. Variant keys (primary/secondary/outline/ghost/danger) + size keys
|
|
// (sm/md/lg) are STABLE — 51 call-sites depend on them.
|
|
const buttonVariants = cva(
|
|
'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
primary: 'bg-brand-600 text-white shadow-xs shadow-brand-700/20 hover:bg-brand-700',
|
|
secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200',
|
|
outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-400',
|
|
ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
|
|
danger: 'bg-red-600 text-white shadow-xs shadow-red-700/20 hover:bg-red-700',
|
|
},
|
|
size: {
|
|
sm: 'h-7 px-2.5',
|
|
md: 'h-8 px-3.5',
|
|
lg: 'h-10 px-5 text-sm',
|
|
},
|
|
},
|
|
defaultVariants: { variant: 'primary', size: 'md' },
|
|
},
|
|
)
|
|
|
|
type Props = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, Props>(
|
|
({ className, variant, size, ...props }, ref) => (
|
|
<button ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />
|
|
),
|
|
)
|
|
Button.displayName = 'Button'
|