mirror of
https://github.com/temetro/temetro.git
synced 2026-07-26 11:58:14 +00:00
Khalid Abdi
bd8fdfadda
- Invoice dialog: the Back-date / Due-date toggles now use the COSS Checkbox instead of raw, misshapen native checkboxes. - Patients page: rebuilt the list as a COSS Table in a CardFrame, and moved "Import from a patient app" into a ⋯ overflow menu so the toolbar keeps one primary "Add patient" CTA. - Patient detail sheet: collapsed the five header buttons + delete into a primary Edit action plus a ⋯ More menu (Download summary, Record visit, Transfer, Push to wallet, and a destructive Delete). - Added the COSS table + checkbox primitives; new i18n keys across all locales. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
|
|
import type React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function Checkbox({
|
|
className,
|
|
...props
|
|
}: CheckboxPrimitive.Root.Props): React.ReactElement {
|
|
return (
|
|
<CheckboxPrimitive.Root
|
|
className={cn(
|
|
"relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[.25rem] border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:cursor-not-allowed data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none",
|
|
className,
|
|
)}
|
|
data-slot="checkbox"
|
|
{...props}
|
|
>
|
|
<CheckboxPrimitive.Indicator
|
|
className="absolute -inset-px flex items-center justify-center rounded-[.25rem] text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground"
|
|
data-slot="checkbox-indicator"
|
|
render={(
|
|
props: React.ComponentProps<"span">,
|
|
state: CheckboxPrimitive.Indicator.State,
|
|
) => (
|
|
<span {...props}>
|
|
{state.indeterminate ? (
|
|
<svg
|
|
aria-hidden="true"
|
|
className="size-3.5 sm:size-3"
|
|
fill="none"
|
|
height="24"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="3"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M5.252 12h13.496" />
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
aria-hidden="true"
|
|
className="size-3.5 sm:size-3"
|
|
fill="none"
|
|
height="24"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="3"
|
|
viewBox="0 0 24 24"
|
|
width="24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
|
|
</svg>
|
|
)}
|
|
</span>
|
|
)}
|
|
/>
|
|
</CheckboxPrimitive.Root>
|
|
);
|
|
}
|
|
|
|
export { CheckboxPrimitive };
|