create-nextjs-cms 0.5.20 → 0.5.23

package/templates/default/components/SectionItemCard.tsx

@@ -67,7 +67,7 @@ export default function SectionItemCard({
 
     return (
         <>
-            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow'>
+            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
                 {item.coverPhoto ? (
                     <div className='relative h-[200px]'>
                         {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}

package/templates/default/components/SectionItemStatusBadge.tsx

@@ -6,7 +6,7 @@ const SectionItemStatusBadge = ({ status }: { status: number }) => {
     return (
         <Badge
             variant={status === 1 ? 'success' : 'destructive'}
-            className='absolute top-3 shadow left-3 z-30 font-bold'
+            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
         >
             {status === 1 ? getString('approved') : getString('pending_approval')}
         </Badge>

package/templates/default/components/SectionPage.tsx

@@ -100,8 +100,8 @@ export default function SectionPage({ section }: { section: string }) {
             {isError ? <div>{error?.message}</div> : null}
             {data ? (
                 <div className='flex w-full flex-col'>
-                    <div className='relative z-[1] border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                        <div className='absolute left-0 top-0 z-[2] h-4 w-full bg-gradient-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
+                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
                         <h1 className='pb-4 text-4xl'>{data.section?.title}</h1>
                         <span>
                             /{getString('edit')} {data.section?.title}

package/templates/default/components/SelectBox.tsx

@@ -44,7 +44,7 @@ export default function SelectBox({
                 <>
                     {/*<Listbox.Label className='block text-sm font-medium leading-6 text-gray-900'>Fabrics</Listbox.Label>*/}
                     <div className={`relative ${classname}`}>
-                        <ListboxButton className='relative w-full cursor-default rounded bg-input p-3 pe-1 ps-1 text-start text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6'>
+                        <ListboxButton className='relative w-full cursor-default rounded bg-input p-3 pe-1 ps-1 text-start text-foreground shadow-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6'>
                             <span className='ml-3 block truncate'>{selected?.label ? selected.label : ''}</span>
                             <span className='pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2'>
                                 <ChevronDownIcon className='h-5 w-5 text-gray-400' aria-hidden='true' />
@@ -58,7 +58,7 @@ export default function SelectBox({
                             leaveFrom='opacity-100'
                             leaveTo='opacity-0'
                         >
-                            <ListboxOptions className='absolute z-40 mt-1 max-h-56 w-full overflow-auto rounded-md border bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
+                            <ListboxOptions className='absolute z-40 mt-1 max-h-56 w-full overflow-auto rounded-md border bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden sm:text-sm'>
                                 {items.map((item: SelectOption, index: number) => (
                                     <ListboxOption
                                         key={`${item.label}-${index}`}

package/templates/default/components/SettingsPage.tsx

@@ -113,7 +113,7 @@ export default function SettingsPage() {
     return (
         <div>
             <div className='w-full overflow-hidden bg-background'>
-                <div className='bg-gradient-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
+                <div className='bg-linear-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
                     <h1 className='text-3xl'>{getString('accountSettings')}</h1>
                 </div>
                 <div className='flex w-full flex-col'>

package/templates/default/components/Sidebar.tsx

@@ -32,7 +32,7 @@ const Sidebar = (props: SidebarProps) => {
     return (
         <div
             className={classNames({
-                'fixed z-20 h-full bg-gradient-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950 md:translate-x-0':
+                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950 md:translate-x-0':
                     true,
                 'transition-all duration-100 ease-in-out': true,
                 'w-[300px] md:w-[275px]': true,
@@ -55,7 +55,7 @@ const Sidebar = (props: SidebarProps) => {
                         LAZEMNI
                     </span>
                 </div>
-                <ScrollArea type='always' className='flex-grow'>
+                <ScrollArea type='always' className='grow'>
                     <ul
                         className={classNames({
                             'my-2 flex flex-col items-stretch gap-2': true,
@@ -182,7 +182,7 @@ const Sidebar = (props: SidebarProps) => {
                                 width={40}
                                 height={40}
                                 // fill={true}
-                                className='rounded-full ring ring-foreground'
+                                className='rounded-full ring-3 ring-foreground'
                             />
                         ) : (
                             <Image

package/templates/default/components/VariantEditPage.tsx

@@ -154,7 +154,7 @@ export default function VariantEditPage({
         <div>
             <div className='w-full overflow-hidden'>
                 <form onSubmit={handleSubmit}>
-                    <div className='bg-gradient-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-black'>
+                    <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-black'>
                         {data && data.variant && (
                             <>
                                 <h1 className='pb-4 text-4xl'>{data?.variant?.variant_html_name_en}</h1>
@@ -200,7 +200,7 @@ export default function VariantEditPage({
                                         <div className='mt-5'>
                                             <button
                                                 className={classNames({
-                                                    'w-full rounded bg-gradient-to-r p-2 font-bold text-white drop-shadow':
+                                                    'w-full rounded bg-linear-to-r p-2 font-bold text-white drop-shadow-sm':
                                                         true,
                                                     'from-emerald-700 via-green-700 to-green-500': !isSubmitting,
                                                     'from-gray-600 via-gray-500 to-gray-400': isSubmitting,

package/templates/default/components/form/Form.tsx

@@ -263,7 +263,7 @@ export default function Form({
                                                 className={classNames({
                                                     'w-full': buttonType === 'big',
                                                     'float-end': buttonType === 'small',
-                                                    'rounded bg-gradient-to-r px-4 py-2 font-bold text-white drop-shadow':
+                                                    'rounded bg-linear-to-r px-4 py-2 font-bold text-white drop-shadow-sm':
                                                         true,
                                                     'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
                                                         !isSubmitting,

package/templates/default/components/form/FormInputElement.tsx

@@ -53,7 +53,7 @@ export default function FormInputElement({
                 })}
             >
                 {readonly ? (
-                    <div className='w-full rounded bg-input p-3 text-foreground shadow-sm outline-0'>{value}</div>
+                    <div className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0'>{value}</div>
                 ) : (
                     <>
                         {children}

package/templates/default/components/form/helpers/{_section-hot-reload.ts → _section-hot-reload.js}

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const sectionSchemaLastUpdated = 1765720351721
+export const sectionSchemaLastUpdated = 1765925556117

package/templates/default/components/form/helpers/util.ts

@@ -9,7 +9,7 @@ try {
     // Try to import the auto-generated file from root
     // Using dynamic require to handle missing file gracefully
     // @/ alias resolves to the app root directory
-    const sectionInfo = require('./_section-hot-reload.ts')
+    const sectionInfo = require('./_section-hot-reload.js')
     sectionSchemaLastUpdated = sectionInfo?.sectionSchemaLastUpdated ?? Date.now()
 } catch {
     // If file doesn't exist or can't be loaded, use current timestamp as fallback

package/templates/default/components/form/inputs/ColorFormInput.tsx

@@ -37,7 +37,7 @@ export default function ColorFormInput({ input }: { input: ColorFieldClientConfi
                 onBlur={field.onBlur}
                 value={field.value}
                 ref={field.ref}
-                className='h-10 w-full rounded bg-input p-1 text-foreground shadow-sm outline-0 ring-2 ring-blue-300 focus:ring-blue-500'
+                className='h-10 w-full rounded bg-input p-1 text-foreground shadow-xs outline-0 ring-2 ring-blue-300 focus:ring-blue-500'
             />
         </FormInputElement>
     )

package/templates/default/components/form/inputs/DateFormInput.tsx

@@ -69,7 +69,7 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
                         <Button
                             variant={'outline'}
                             className={cn(
-                                'min-w-[250px] justify-start rounded bg-input px-3 py-6 text-start font-normal text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500',
+                                'min-w-[250px] justify-start rounded bg-input px-3 py-6 text-start font-normal text-foreground shadow-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500',
                                 !date && 'text-muted-foreground',
                             )}
                         >

package/templates/default/components/form/inputs/DocumentFormInput.tsx

@@ -44,7 +44,7 @@ export default function DocumentFormInput({
             file={input.value}
             width={450}
             height={620}
-            className='mb-4 rounded p-1 ring ring-gray-400'
+            className='mb-4 rounded p-1 ring-3 ring-gray-400'
         />
     )
 
@@ -79,7 +79,7 @@ export default function DocumentFormInput({
                             />
                             <embed
                                 src={image}
-                                className='mb-4 max-w-full rounded p-1 ring ring-green-600'
+                                className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
                                 width={350}
                                 height={520}
                             />
@@ -105,7 +105,7 @@ export default function DocumentFormInput({
                 <div className='w-full flex-1 md:flex-[0.5]'>
                     <button
                         type='button'
-                        className='w-full rounded border bg-gradient-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow'
+                        className='w-full rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm'
                         onClick={() => {
                             if (fileInputContainerRef.current?.firstChild) {
                                 ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()

package/templates/default/components/form/inputs/NumberFormInput.tsx

@@ -35,7 +35,7 @@ export default function NumberFormInput({ input }: { input: NumberFieldClientCon
                 onBlur={field.onBlur}
                 value={field.value}
                 ref={field.ref}
-                className='w-full rounded bg-input p-3 text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+                className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
             />
         </FormInputElement>
     )

package/templates/default/components/form/inputs/PasswordFormInput.tsx

@@ -40,7 +40,7 @@ export default function PasswordFormInput({
                 onBlur={field.onBlur}
                 value={field.value}
                 ref={field.ref}
-                className='w-full rounded bg-input p-3 text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+                className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
             />
         </FormInputElement>
     )

package/templates/default/components/form/inputs/PhotoFormInput.tsx

@@ -47,7 +47,7 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
             alt={'admin'}
             width={imageWidth}
             height={imageHeight}
-            className='rounded p-1 ring ring-gray-400'
+            className='rounded p-1 ring-3 ring-gray-400'
         />
     )
 
@@ -123,7 +123,7 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
                                         }}
                                     />
                                     <Image
-                                        className='mb-4 rounded p-1 ring ring-green-600'
+                                        className='mb-4 rounded p-1 ring-3 ring-green-600'
                                         src={image}
                                         alt='new'
                                         fill={true}
@@ -156,7 +156,7 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
                                 <div className='w-[400px] max-w-full'>
                                     <button
                                         type='button'
-                                        className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-gradient-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow hover:from-red-400 hover:to-amber-400'
+                                        className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
                                         onClick={() => {
                                             setModal({
                                                 title: getString('deletePhoto'),
@@ -196,7 +196,7 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
                             <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
                                 <button
                                     type='button'
-                                    className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-gradient-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow hover:from-blue-500 hover:to-sky-400'
+                                    className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
                                     onClick={() => {
                                         if (fileInputContainerRef.current?.firstChild) {
                                             ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()

package/templates/default/components/form/inputs/SelectFormInput.tsx

@@ -131,7 +131,7 @@ export default function SelectFormInput({
                         field.onChange(value.value)
                         if (value) setValue(value)
                     }}
-                    classname='w-full shadow-sm'
+                    classname='w-full shadow-xs'
                 />
             </FormInputElement>
             <div ref={parent}>

package/templates/default/components/form/inputs/TagsFormInput.tsx

@@ -42,7 +42,7 @@ export default function TagsFormInput({ input }: { input: TagsFieldClientConfig
                     <TextField
                         {...params}
                         label={input.label}
-                        // className='ring-2 outline-0 focus:ring-blue-500 hover:ring-gray-400 ring-gray-300 shadow-sm rounded w-full bg-input text-foreground'
+                        // className='ring-2 outline-0 focus:ring-blue-500 hover:ring-gray-400 ring-gray-300 shadow-xs rounded w-full bg-input text-foreground'
                         placeholder={input.placeholder ? input.placeholder : getString('start_typing')}
                     />
                 )}

package/templates/default/components/form/inputs/TextFormInput.tsx

@@ -41,7 +41,7 @@ export default function TextFormInput({
                 onBlur={field.onBlur}
                 value={field.value}
                 ref={field.ref}
-                className='w-full rounded bg-input p-3 text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+                className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
             />
         </FormInputElement>
     )

package/templates/default/components/form/inputs/TextareaFormInput.tsx

@@ -40,7 +40,7 @@ export default function TextareaFormInput({
                 onBlur={field.onBlur}
                 value={field.value}
                 ref={field.ref}
-                className='h-[150px] w-full rounded bg-input p-3 text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
+                className='h-[150px] w-full rounded bg-input p-3 text-foreground shadow-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500'
             ></textarea>
         </FormInputElement>
     )

package/templates/default/components/form/inputs/VideoFormInput.tsx

@@ -38,7 +38,7 @@ export default function VideoFormInput({ input, sectionName }: { input: VideoFie
             file={input.value}
             width={400}
             height={280}
-            className='mb-4 rounded p-1 ring ring-gray-400'
+            className='mb-4 rounded p-1 ring-3 ring-gray-400'
         />
     )
 
@@ -72,7 +72,7 @@ export default function VideoFormInput({ input, sectionName }: { input: VideoFie
                             />
                             <embed
                                 src={image}
-                                className='mb-4 max-w-full rounded p-1 ring ring-green-600'
+                                className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
                                 width={300}
                                 height={190}
                             />
@@ -98,7 +98,7 @@ export default function VideoFormInput({ input, sectionName }: { input: VideoFie
                 <div className='w-full flex-1 md:flex-[0.5]'>
                     <button
                         type='button'
-                        className='w-full rounded border bg-gradient-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow'
+                        className='w-full rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm'
                         onClick={() => {
                             if (fileInputContainerRef.current?.firstChild) {
                                 ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()

package/templates/default/components/ui/badge.tsx

@@ -4,18 +4,18 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from 'nextjs-cms/utils'
 
 const badgeVariants = cva(
-    'inline-flex items-center rounded-md border px-1.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    'inline-flex items-center rounded-md border px-1.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
     {
         variants: {
             variant: {
-                default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+                default: 'border-transparent bg-primary text-primary-foreground shadow-sm 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',
+                    'border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80',
                 outline: 'text-foreground',
-                primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-                success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80',
-                warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80',
+                primary: 'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80',
+                success: 'border-transparent bg-success text-success-foreground shadow-sm hover:bg-success/80',
+                warning: 'border-transparent bg-warning text-warning-foreground shadow-sm hover:bg-warning/80',
             },
         },
         defaultVariants: {

package/templates/default/components/ui/button.tsx

@@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from 'nextjs-cms/utils'
 
 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-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 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",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },

package/templates/default/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground shadow-sm",
       className
     )}
     {...props}

package/templates/default/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
         ref={ref}
         className={cn(
-            'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state="indeterminate"]:bg-gray-300 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state="indeterminate"]:bg-gray-500',
+            'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state="indeterminate"]:bg-gray-300 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state="indeterminate"]:bg-gray-500',
             className,
         )}
         {...props}

package/templates/default/components/ui/dropdown-menu.tsx

@@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className
     )}
@@ -51,7 +51,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -69,7 +69,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -88,7 +88,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -128,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}

package/templates/default/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

package/templates/default/components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/templates/default/components/ui/scroll-area.tsx

@@ -28,8 +28,8 @@ const ScrollBar = React.forwardRef<
         orientation={orientation}
         className={cn(
             'flex touch-none select-none transition-colors',
-            orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-            orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+            orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+            orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
             className,
         )}
         {...props}

package/templates/default/components/ui/select.tsx

@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -80,7 +80,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -93,7 +93,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         )}
       >
         {children}
@@ -123,7 +123,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}

package/templates/default/components/ui/sheet.tsx

@@ -57,7 +57,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
             <SheetOverlay />
             <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
                 {children}
-                <SheetPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary'>
+                <SheetPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary'>
                     <Cross2Icon className='h-4 w-4' />
                     <span className='sr-only'>Close</span>
                 </SheetPrimitive.Close>

package/templates/default/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}

package/templates/default/components/ui/table.tsx

@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
       className
     )}
     {...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
@@ -88,7 +88,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}

package/templates/default/components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}