feat(card): add size variant (#270)

giantnodes · Nov 23, 2024 · f407f27 · f407f27
1 parent fed0e84
commit f407f27
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/packages/react/src/components/card/Card.tsx b/packages/react/src/components/card/Card.tsx
@@ -24,11 +24,11 @@ const Component: ComponentType = React.forwardRef(
     props: ComponentProps<TElement>,
     ref: Polymophic.Ref<TElement>
   ) => {
-    const { as, children, className, ...rest } = props
+    const { as, children, className, size, ...rest } = props
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useCardValue()
+    const context = useCardValue({ size })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

diff --git a/packages/react/src/components/card/use-card.hook.ts b/packages/react/src/components/card/use-card.hook.ts
@@ -1,14 +1,17 @@
 'use client'
 
+import type { CardVariantProps } from '@giantnodes/theme'
 import React from 'react'
 import { card } from '@giantnodes/theme'
 
 import { create } from '~/utilities/create-context'
 
+type UseCardProps = CardVariantProps
+
 type CardContextType = ReturnType<typeof useCardValue>
 
-export const useCardValue = () => {
-  const slots = React.useMemo(() => card({}), [])
+export const useCardValue = ({ size }: UseCardProps) => {
+  const slots = React.useMemo(() => card({ size }), [size])
 
   return {
     slots,

diff --git a/packages/theme/src/components/card.ts b/packages/theme/src/components/card.ts
@@ -11,11 +11,32 @@ export const card = tv({
       'rounded-lg',
       'overflow-auto',
     ],
-    header: ['text-title', 'p-3'],
-    body: ['flex-grow', 'text-content', 'p-3', 'overflow-auto'],
-    footer: ['text-content', 'p-3'],
+    header: ['text-title'],
+    body: ['flex-grow', 'text-content', 'overflow-auto'],
+    footer: ['text-content'],
+  },
+  variants: {
+    size: {
+      sm: {
+        header: ['py-1', 'px-2'],
+        body: ['p-2'],
+        footer: ['py-1', 'px-2'],
+      },
+      md: {
+        header: ['py-2', 'px-3'],
+        body: ['p-2'],
+        footer: ['py-2', 'px-3'],
+      },
+      lg: {
+        header: ['py-3', 'px-4'],
+        body: ['p-3'],
+        footer: ['py-3', 'px-4'],
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
   },
-  variants: {},
 })
 
 export type CardVariantProps = VariantProps<typeof card>