Update TailwindCSS and component padding, tags, boxShadow

Layout padding for various components was adjusted for consistent spacing. HTML semantics were improved by using specific tags like 'section', 'header', 'footer', and 'main' instead of generic 'div' enhancing readability and structure. A boxShadow configuration was also added in TailwindCSS for better presentation.

Author: thevuong

packages/tailwindcss/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/tailwindcss
 
+## 0.1.34
+
+### Patch Changes
+
+- Adjust padding, improve semantics, and enhance shadow styling
+
 ## 0.1.33
 
 ### Patch Changes

packages/tailwindcss/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/tailwindcss",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/tailwindcss/src/tailwind.config.ts

@@ -109,6 +109,9 @@ export const sharedConfig: Config = {
         sm: 'calc(var(--ui-radius) - 0.375rem)' /* 16px */,
         xl: 'calc(var(--ui-radius) + 0.25rem)' /* 24px */,
       },
+      boxShadow: {
+        box: '0 0 0 1px hsl(var(--ui-border))',
+      },
       colors: {
         accent: {
           DEFAULT: 'hsl(var(--ui-accent))',

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.65
+
+### Patch Changes
+
+- Adjust padding, improve semantics, and enhance shadow styling
+
 ## 0.1.64
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/ui/src/react/alert-dialog.tsx

@@ -196,7 +196,7 @@ export function AlertDialogHeader({
 }: React.ComponentProps<'header'>): React.JSX.Element {
   return (
     <header
-      className={twMerge('grid shrink-0 gap-2 border-b px-6 py-4', className)}
+      className={twMerge('grid shrink-0 gap-2 border-b px-6 py-3', className)}
       {...props}
     />
   );
@@ -226,7 +226,7 @@ export function AlertDialogFooter({
   return (
     <div
       className={twMerge(
-        'flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-between',
+        'flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 sm:flex-row sm:justify-between',
         className,
       )}
       {...props}

packages/ui/src/react/card.tsx

@@ -10,9 +10,9 @@ export const Card = forwardRef<
   React.ElementRef<'div'>,
   React.ComponentProps<'div'>
 >(({ className, ...props }, forwardedRef) => (
-  <div
+  <section
     className={twMerge(
-      'bg-card text-card-foreground overflow-hidden rounded-lg border shadow-lg',
+      'bg-card text-card-foreground shadow-border shadow-box rounded',
       className,
     )}
     ref={forwardedRef}
@@ -30,8 +30,11 @@ export const CardHeader = forwardRef<
   React.ElementRef<'div'>,
   React.ComponentProps<'div'>
 >(({ className, ...props }, forwardedRef) => (
-  <div
-    className={twMerge('flex flex-col gap-1.5 p-6', className)}
+  <header
+    className={twMerge(
+      'flex flex-col gap-1.5 rounded-t border-b px-6 py-3',
+      className,
+    )}
     ref={forwardedRef}
     {...props}
   />
@@ -47,8 +50,11 @@ export const CardFooter = forwardRef<
   React.ElementRef<'div'>,
   React.ComponentProps<'div'>
 >(({ className, ...props }, forwardedRef) => (
-  <div
-    className={twMerge('flex items-center p-6', className)}
+  <footer
+    className={twMerge(
+      'flex items-center rounded-b border-t px-6 py-3',
+      className,
+    )}
     ref={forwardedRef}
     {...props}
   />
@@ -101,7 +107,7 @@ export const CardContent = forwardRef<
   React.ElementRef<'div'>,
   React.ComponentProps<'div'>
 >(({ className, ...props }, forwardedRef) => (
-  <div className={twMerge('px-6', className)} ref={forwardedRef} {...props} />
+  <main className={twMerge('p-6', className)} ref={forwardedRef} {...props} />
 ));
 
 CardContent.displayName = 'CardContent';

packages/ui/src/react/dialog.tsx

@@ -155,7 +155,7 @@ export function DialogHeader({
 }: React.ComponentProps<'header'>): React.JSX.Element {
   return (
     <header
-      className={twMerge('grid shrink-0 gap-2 border-b px-6 py-4', className)}
+      className={twMerge('grid shrink-0 gap-2 border-b px-6 py-3', className)}
       {...props}
     />
   );
@@ -185,7 +185,7 @@ export function DialogFooter({
   return (
     <footer
       className={twMerge(
-        'flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-between',
+        'flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 sm:flex-row sm:justify-between',
         className,
       )}
       {...props}

packages/ui/src/react/drawer.tsx

@@ -168,7 +168,7 @@ export function DrawerHeader({
 }: React.ComponentProps<'header'>): React.JSX.Element {
   return (
     <header
-      className={twMerge('grid shrink-0 gap-2 border-b px-6 py-4', className)}
+      className={twMerge('grid shrink-0 gap-2 border-b px-6 py-3', className)}
       {...props}
     />
   );
@@ -198,7 +198,7 @@ export function DrawerFooter({
   return (
     <footer
       className={twMerge(
-        'flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-between',
+        'flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 sm:flex-row sm:justify-between',
         className,
       )}
       {...props}