Add shadow variation to card story and update tailwindcss configs

Added a new variation to the card story with shadow implementation. Also expanded border radius and box shadow configurations in the tailwind.config.ts file. Additionally, comments for height, maxHeight, and minHeight properties were updated, indicating these changes are allowed for now. Increased tailwindcss package version due to these updates.

Author: thevuong

apps/docs/src/stories/card/card.stories.tsx

@@ -139,3 +139,51 @@ export const WithForm: Story = {
     </Card>
   ),
 };
+
+// With Shadow
+export const WithShadow: Story = {
+  args: {
+    className: 'max-w-md shadow-box-md',
+  },
+  render: (args) => (
+    <Card {...args}>
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center space-x-4 rounded-md border p-4">
+          <BellIcon size={16} />
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium">Push Notifications</p>
+            <p className="text-muted-foreground text-sm">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch />
+        </div>
+        <div>
+          {notifications.map((notification) => (
+            <div
+              className="mb-2 grid grid-cols-[25px_1fr] items-start pb-2 last:mb-0 last:pb-0"
+              key={notification.title}
+            >
+              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium">{notification.title}</p>
+                <p className="text-muted-foreground text-sm">
+                  {notification.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" startIcon={<CheckIcon />}>
+          Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};

packages/tailwindcss/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/tailwindcss
 
+## 0.1.35
+
+### Patch Changes
+
+- Expand border radius and box shadow configurations
+
 ## 0.1.34
 
 ### Patch Changes

packages/tailwindcss/package.json

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

packages/tailwindcss/src/tailwind.config.ts

@@ -100,17 +100,29 @@ export const sharedConfig: Config = {
         DEFAULT: 'hsl(var(--ui-border))',
       },
       borderRadius: {
+        inherit: 'inherit',
+        sm: 'calc(var(--ui-radius) - 0.375rem)',
+        DEFAULT: 'calc(var(--ui-radius) - 0.25rem)',
+        md: 'calc(var(--ui-radius) - 0.125rem)',
+        lg: 'var(--ui-radius)',
+        xl: 'calc(var(--ui-radius) + 0.25rem)',
         '2xl': 'calc(var(--ui-radius) + 0.5rem)',
-        '3xl': 'calc(var(--ui-radius) + 1rem)' /* 2px */,
-        DEFAULT: 'calc(var(--ui-radius) - 0.25rem)' /* 4px */,
-        inherit: 'inherit' /* 6px */,
-        lg: 'var(--ui-radius)' /* 8px */,
-        md: 'calc(var(--ui-radius) - 0.125rem)' /* 12px */,
-        sm: 'calc(var(--ui-radius) - 0.375rem)' /* 16px */,
-        xl: 'calc(var(--ui-radius) + 0.25rem)' /* 24px */,
+        '3xl': 'calc(var(--ui-radius) + 1rem)',
       },
       boxShadow: {
         box: '0 0 0 1px hsl(var(--ui-border))',
+        'box-xs':
+          '0 0 0 1px hsl(var(--ui-border)), 0 1px 2px 0 hsl(var(--ui-border))',
+        'box-sm':
+          '0 0 0 1px hsl(var(--ui-border)), 0 1px 3px 0 hsl(var(--ui-border)), 0 1px 2px -1px hsl(var(--ui-border))',
+        'box-md':
+          '0 0 0 1px hsl(var(--ui-border)), 0 4px 6px -1px hsl(var(--ui-border)), 0 2px 4px -2px hsl(var(--ui-border))',
+        'box-lg':
+          '0 0 0 1px hsl(var(--ui-border)), 0 10px 15px -3px hsl(var(--ui-border)), 0 4px 6px -4px hsl(var(--ui-border))',
+        'box-xl':
+          '0 0 0 1px hsl(var(--ui-border)), 0 20px 25px -5px hsl(var(--ui-border)), 0 8px 10px -6px hsl(var(--ui-border))',
+        'box-2xl':
+          '0 0 0 1px hsl(var(--ui-border)), 0 25px 50px -12px hsl(var(--ui-border))',
       },
       colors: {
         accent: {
@@ -211,7 +223,7 @@ export const sharedConfig: Config = {
         serif: [`var(--font-serif, ${fontFamily.serif.join(', ')})`],
       },
       height: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- fix later
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- allow for now
         // @ts-expect-error
         screen: ['100vh', '100dvh'],
       },
@@ -411,12 +423,12 @@ export const sharedConfig: Config = {
         },
       },
       maxHeight: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- fix later
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- allow for now
         // @ts-expect-error
         screen: ['100vh', '100dvh'],
       },
       minHeight: {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- fix later
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- allow for now
         // @ts-expect-error
         screen: ['100vh', '100dvh'],
       },