From e7703aef64458f87c14d18966ecedff0a011ba9e Mon Sep 17 00:00:00 2001 From: Gregor Vostrak Date: Wed, 12 Nov 2025 13:22:49 +0100 Subject: [PATCH] move button component to ui package --- .../Common/Reporting/ReportingFilterBadge.vue | 2 +- .../Reporting/ReportingRoundingControls.vue | 2 +- .../ui/alert-dialog/AlertDialogAction.vue | 2 +- .../ui/alert-dialog/AlertDialogCancel.vue | 2 +- .../ui/calendar/CalendarCellTrigger.vue | 3 +- .../ui/calendar/CalendarDateInput.vue | 2 +- .../ui/calendar/CalendarNextButton.vue | 3 +- .../ui/calendar/CalendarPrevButton.vue | 3 +- .../RangeCalendarCellTrigger.vue | 3 +- .../RangeCalendarNextButton.vue | 3 +- .../RangeCalendarPrevButton.vue | 3 +- resources/js/Layouts/AppLayout.vue | 2 +- resources/js/packages/ui/package-lock.json | 1519 +++++++++++------ resources/js/packages/ui/package.json | 3 + .../js/packages/ui/src/Buttons/Button.vue | 25 + resources/js/packages/ui/src/Buttons/index.ts | 36 + .../packages/ui/src/Input/DateRangePicker.vue | 2 +- .../ui/src/Input/TimeRangeSelector.vue | 2 +- resources/js/packages/ui/src/index.ts | 5 + resources/js/packages/ui/src/utils/cn.ts | 6 + tsconfig.json | 1 + 21 files changed, 1100 insertions(+), 529 deletions(-) create mode 100644 resources/js/packages/ui/src/Buttons/Button.vue create mode 100644 resources/js/packages/ui/src/Buttons/index.ts create mode 100644 resources/js/packages/ui/src/utils/cn.ts diff --git a/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue b/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue index b2f797ad..367cc253 100644 --- a/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue +++ b/resources/js/Components/Common/Reporting/ReportingFilterBadge.vue @@ -1,5 +1,5 @@ + + diff --git a/resources/js/packages/ui/src/Buttons/index.ts b/resources/js/packages/ui/src/Buttons/index.ts new file mode 100644 index 00000000..2d9e5f1a --- /dev/null +++ b/resources/js/packages/ui/src/Buttons/index.ts @@ -0,0 +1,36 @@ +import { cva, type VariantProps } from 'class-variance-authority'; + +export { default as Button } from './Button.vue'; + +export const buttonVariants = cva( + 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90', + destructive: + 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', + outline: + 'border shadow-xs hover:text-text-primary bg-card-background dark:bg-transparent border-input dark:border-input hover:bg-white/5', + secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', + ghost: 'hover:bg-white/5', + link: 'text-primary underline-offset-4 hover:underline', + input: 'border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent shadow-sm', + }, + size: { + default: 'h-9 px-4 py-2', + xs: 'h-7 rounded px-2', + sm: 'h-8 rounded-md px-3 text-xs', + lg: 'h-10 rounded-md px-8', + icon: 'h-9 w-9', + input: 'h-[42px] px-3 py-2 text-base', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + } +); + +export type ButtonVariants = VariantProps; diff --git a/resources/js/packages/ui/src/Input/DateRangePicker.vue b/resources/js/packages/ui/src/Input/DateRangePicker.vue index e01cf973..65befd63 100644 --- a/resources/js/packages/ui/src/Input/DateRangePicker.vue +++ b/resources/js/packages/ui/src/Input/DateRangePicker.vue @@ -1,6 +1,6 @@