diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx index a4cc554ea..7530f38bf 100644 --- a/packages/ui/src/components/badge.tsx +++ b/packages/ui/src/components/badge.tsx @@ -17,24 +17,24 @@ enum BadgesHoverStates { } const badgeVariants = cva( - 'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2', + 'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow', - secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent', - destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow', + default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80', + secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', + destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80', outline: 'text-foreground' }, size: { default: 'px-2.5 py-0.5 text-xs font-semibold', lg: 'px-3 py-1 text-xs font-normal', - sm: 'text-12 h-5 px-1 leading-none', - xs: 'text-11 px-1.5 py-0 font-light', + sm: 'h-5 px-1 text-12 leading-none', + xs: 'px-1.5 py-0 text-11 font-light', // TODO: Consider switching size variants to numeric values // Numeric size variants (like '18') provide clearer context about actual dimensions // compared to abstract sizes (xs, sm, lg). - '18': 'text-12 h-[18px] px-2' + '18': 'h-[18px] px-2 text-12' }, borderRadius: { default: '', diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx index 758e35e3b..10db6b8cf 100644 --- a/packages/ui/src/components/card.tsx +++ b/packages/ui/src/components/card.tsx @@ -3,7 +3,7 @@ import { forwardRef, HTMLAttributes } from 'react' import { cn } from '@utils/cn' import { cva, type VariantProps } from 'class-variance-authority' -const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', { +const cardVariants = cva('rounded-lg border bg-card text-card-foreground shadow', { variants: { variant: { default: '', diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx index f309c51ba..3a05a899c 100644 --- a/packages/ui/src/components/dialog.tsx +++ b/packages/ui/src/components/dialog.tsx @@ -42,7 +42,7 @@ const DialogContent = React.forwardRef< {...props} > {children} - + Close diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx index ef079416f..f650662b7 100644 --- a/packages/ui/src/components/dropdown-menu.tsx +++ b/packages/ui/src/components/dropdown-menu.tsx @@ -126,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef< checked={checked} {...props} > - - - + + + {children} diff --git a/packages/ui/src/components/filters/filters-bar/filters.tsx b/packages/ui/src/components/filters/filters-bar/filters.tsx index a1063bc0e..7aed6d7b4 100644 --- a/packages/ui/src/components/filters/filters-bar/filters.tsx +++ b/packages/ui/src/components/filters/filters-bar/filters.tsx @@ -84,8 +84,8 @@ const Filters = ({ return ( - -
+ +
{filterOption.label} {!!filter.selectedValues.length && ': '} @@ -107,7 +107,7 @@ const Filters = ({ {filterOption.label} - + {filterOption.conditions?.find(c => c.value === filter.condition)?.label} @@ -127,17 +127,17 @@ const Filters = ({ handleRemoveFilter?.(filter.type)} > - @@ -153,7 +153,7 @@ const Filters = ({ {filterOption.type === 'checkbox' && getFilteredOptions(filterOption, filter, searchQueries).length === 0 && (
- No results + No results
)}
diff --git a/packages/ui/src/components/filters/filters-bar/sorts.tsx b/packages/ui/src/components/filters/filters-bar/sorts.tsx index b7a3e2140..c9cda74c1 100644 --- a/packages/ui/src/components/filters/filters-bar/sorts.tsx +++ b/packages/ui/src/components/filters/filters-bar/sorts.tsx @@ -47,7 +47,7 @@ const SortableItem = ({
@@ -55,7 +55,7 @@ const SortableItem = ({
- + {sortOptions.find(opt => opt.value === sort.type)?.label} @@ -72,7 +72,7 @@ const SortableItem = ({ - + {sortDirections.find(dir => dir.value === sort.direction)?.label} @@ -90,7 +90,7 @@ const SortableItem = ({
@@ -248,10 +248,10 @@ const Sorts = ({ )} - diff --git a/packages/ui/src/components/form/checkbox.tsx b/packages/ui/src/components/form/checkbox.tsx index 93fdf7f83..ff7b233b8 100644 --- a/packages/ui/src/components/form/checkbox.tsx +++ b/packages/ui/src/components/form/checkbox.tsx @@ -20,7 +20,7 @@ const Checkbox = forwardRef, CheckboxP
diff --git a/packages/ui/src/components/form/input.tsx b/packages/ui/src/components/form/input.tsx index c3010261f..a42e8853e 100644 --- a/packages/ui/src/components/form/input.tsx +++ b/packages/ui/src/components/form/input.tsx @@ -8,11 +8,11 @@ export interface BaseInputProps extends Omit, 'size'>, VariantProps {} -const inputVariants = cva('text-foreground-1 bg-transparent px-2.5 py-1 disabled:cursor-not-allowed', { +const inputVariants = cva('bg-transparent px-2.5 py-1 text-foreground-1 disabled:cursor-not-allowed', { variants: { variant: { default: - 'placeholder:text-foreground-4 flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none', + 'flex w-full rounded border text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none', extended: 'grow border-none focus-visible:outline-none' }, size: { @@ -50,6 +50,8 @@ interface InputProps extends BaseInputProps { caption?: ReactNode error?: InputError optional?: boolean + className?: string + wrapperClassName?: string } /** @@ -64,6 +66,8 @@ interface InputProps extends BaseInputProps { * @param {MessageTheme} [props.theme] - Visual theme of the input * @param {boolean} [props.disabled] - Whether the input is disabled * @param {boolean} [props.optional] - Indicates if the field is optional, displays "(Optional)" in the label + * @param {string} [props.className] - Optional additional class names for the input element + * @param {string} [props.wrapperClassName] - Optional additional class names for the wrapper element * @param {BaseInputProps} props.rest - All other props are passed to the underlying input element * * @example @@ -77,17 +81,24 @@ interface InputProps extends BaseInputProps { * /> */ const Input = forwardRef( - ({ label, caption, error, id, theme, disabled, optional, ...props }, ref) => { - const InputWrapper = error || caption || label ? ControlGroup : Fragment + ({ label, caption, error, id, theme, disabled, optional, className, wrapperClassName, ...props }, ref) => { + const InputWrapper = error || caption || label || wrapperClassName ? ControlGroup : Fragment return ( - + {label && ( )} - + {error && ( {error.message} diff --git a/packages/ui/src/components/form/label.tsx b/packages/ui/src/components/form/label.tsx index 65996de35..ad6ed97ae 100644 --- a/packages/ui/src/components/form/label.tsx +++ b/packages/ui/src/components/form/label.tsx @@ -54,7 +54,7 @@ interface LabelProps extends VariantProps, PropsWithChildr const Label = ({ htmlFor, optional, color, variant, children, className }: LabelProps) => { return ( - {children} {optional && (optional)} + {children} {optional && (optional)} ) } diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 0ef30f8a0..6abddc994 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -32,6 +32,8 @@ export * from './breadcrumb' export * from './skeleton-list' export * from './dialog' export * from './path-breadcrumbs' +export * from './card' +export * from './input-otp' export * from './form' export * from './button-group' diff --git a/packages/ui/src/components/input-otp.tsx b/packages/ui/src/components/input-otp.tsx index e82a54665..049f1fd6c 100644 --- a/packages/ui/src/components/input-otp.tsx +++ b/packages/ui/src/components/input-otp.tsx @@ -48,7 +48,7 @@ const InputOTPSlot = forwardRef(({ index, cla {char} {hasFakeCaret && (
-
+
)}
diff --git a/packages/ui/src/components/manage-navigation/index.tsx b/packages/ui/src/components/manage-navigation/index.tsx index 9dee8f5be..9e1df9ed8 100644 --- a/packages/ui/src/components/manage-navigation/index.tsx +++ b/packages/ui/src/components/manage-navigation/index.tsx @@ -127,11 +127,11 @@ export const ManageNavigation = ({
- + Pinned {!currentPinnedItems.length ? ( - + No pinned items ) : ( @@ -152,7 +152,7 @@ export const ManageNavigation = ({ {item.title}