9686b54b41
Seven radii were in circulation (4/5/6/8/12/16px + pill) with no rule for which went where; one toolbar row on /transactions mixed four shape languages. This locks a 4-tier ladder (design.md convention 16): - pill: interactive toolbar controls (buttons, chips, pickers, segmented controls, toolbar search, count nubs) - rounded-xl (12px): overlay tier: page panel, dialogs, slide-overs - rounded-lg (8px): cards, form fields, popover/menu content, boxes - rounded-sm (4px): nested leaves (menu items, checkboxes, kbd/code nubs) Changes: - New SegmentedControl primitive (pill-in-pill tablist, h-8) replaces the hand-rolled bg-muted/70 tablist copied across 11 files - New ToolbarSearch primitive (pill, h-8) adopted on 9 page toolbars; dialog/picker searches keep the rounded-lg Input - dialog.tsx 8px -> 12px, matching SettingsModal/slide-over/CommandPalette - ContextPicker chips at the shared h-8 toolbar height - ~300 rounded-md / bare rounded call sites remapped by role; auth icon tiles and the mobile nav sheet come down from 16px to 12px - rounded-md, bare rounded, rounded-2xl and rounded-[Npx] are dead vocabulary, enforced by a new off-ladder-radius check in check:guards Verified: lint 0 errors, 14422 unit tests pass, check:guards green, tsc clean on all changed files, sandbox screenshots of transactions/ bookkeeping/granskning toolbars and the Ny verifikation dialog. Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import * as SelectPrimitive from '@radix-ui/react-select'
|
|
import { Check } from 'lucide-react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { Select, SelectContent, SelectTrigger, SelectValue } from '@/components/ui/select'
|
|
import { cn } from '@/lib/utils'
|
|
import { VAT_TREATMENT_OPTIONS } from './transaction-types'
|
|
import type { VatTreatment } from '@/types'
|
|
|
|
type VatSelectValue = VatTreatment | 'none' | 'auto'
|
|
|
|
// The "auto" option is opt-in (allowAuto): it means "no explicit treatment,
|
|
// the server derives it from the picked category" and is only meaningful in
|
|
// flows that submit category + treatment together (batch booking).
|
|
const AUTO_OPTION = { value: 'auto', labelKey: 'vat_auto', descriptionKey: 'vat_auto_desc' } as const
|
|
|
|
interface VatTreatmentSelectProps<T extends VatSelectValue> {
|
|
value: T
|
|
onValueChange: (value: T) => void
|
|
disabled?: boolean
|
|
allowAuto?: boolean
|
|
}
|
|
|
|
export default function VatTreatmentSelect<T extends VatSelectValue>({
|
|
value,
|
|
onValueChange,
|
|
disabled,
|
|
allowAuto,
|
|
}: VatTreatmentSelectProps<T>) {
|
|
const t = useTranslations('tx_categories')
|
|
const options: ReadonlyArray<{ value: VatSelectValue; labelKey: string; descriptionKey?: string }> =
|
|
allowAuto ? [AUTO_OPTION, ...VAT_TREATMENT_OPTIONS] : VAT_TREATMENT_OPTIONS
|
|
return (
|
|
<Select
|
|
value={value}
|
|
onValueChange={(v) => { if (v) onValueChange(v as T) }}
|
|
disabled={disabled}
|
|
>
|
|
<SelectTrigger className="h-9">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{options.map((opt) => (
|
|
<SelectPrimitive.Item
|
|
key={opt.value}
|
|
value={opt.value}
|
|
className={cn(
|
|
'relative flex w-full cursor-default select-none items-start rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-secondary focus:text-secondary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
|
|
)}
|
|
>
|
|
<span className="absolute left-2 top-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
<SelectPrimitive.ItemIndicator>
|
|
<Check className="h-4 w-4 text-primary" />
|
|
</SelectPrimitive.ItemIndicator>
|
|
</span>
|
|
<div>
|
|
<SelectPrimitive.ItemText>{t(opt.labelKey)}</SelectPrimitive.ItemText>
|
|
{opt.descriptionKey && (
|
|
<p className="text-xs text-muted-foreground mt-0.5 font-normal">
|
|
{t(opt.descriptionKey)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</SelectPrimitive.Item>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)
|
|
}
|