fix card

apps/doc/src/@crossed-ui/Card.stories.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card } from '@crossed/ui/src/display/Card';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Card> = {
+  component: Card,
+  subcomponents: {
+    'Card.Description': Card.Description,
+    'Card.Extra': Card.Extra,
+    'Card.Title': Card.Title,
+  },
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  render: (e) => (
+    <Card {...e}>
+      <Card.Title>This is a title</Card.Title>
+      <Card.Description>This is the Description of your card </Card.Description>
+      <Card.Extra>This is a litle extra</Card.Extra>
+    </Card>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  parameters: {
+    docs: {
+      source: { language: 'tsx' },
+    },
+  },
+};

packages/ui/src/display/Card.tsx

@@ -21,6 +21,11 @@ const useCard = createStyles(({ space, font, components }) => ({
       borderColor: components.Card.default.border,
       gap: space.xxs,
     },
+    media: {
+      xs: { padding: space.xs, gap: space.xxs },
+      md: { padding: space.sm, gap: space.xs },
+      xl: { padding: space.md, gap: space.sm },
+    },
   },
   rootLink: {
     'web': { base: { transition: 'all 0.27s ease' } },
@@ -35,12 +40,20 @@ const useCard = createStyles(({ space, font, components }) => ({
     base: {
       color: components.Card.default.title,
       alignSelf: 'stretch',
-      fontSize: font.fontSize.lg,
+      fontSize: font.fontSize.xl,
+      fontWeight: font.fontWeight.h1,
+      lineHeight: font.lineHeight.xl,
     },
   },
   description: {
     base: { alignSelf: 'stretch', color: components.Card.default.description },
   },
+  extra: {
+    base: {
+      color: components.Card.default.description,
+      fontWeight: font.fontWeight.xl,
+    },
+  },
 }));
 
 type CardProps = YBoxProps;
@@ -79,20 +92,33 @@ const Description = (props: TextProps) => {
     <Text {...props} style={composeStyles(useCard.description, props.style)} />
   );
 };
+
+const Extra = (props: TextProps) => {
+  return <Text {...props} style={composeStyles(useCard.extra, props.style)} />;
+};
+
 const Card = withStaticProperties(CardRoot, {
   Title,
   Description,
+  Extra,
 });
-const { Title: CardTitle, Description: CardDescription } = Card;
+const {
+  Title: CardTitle,
+  Description: CardDescription,
+  Extra: CardExtra,
+} = Card;
 
 type CardTitleProps = GetProps<typeof CardTitle>;
 type CardDescriptionProps = GetProps<typeof CardDescription>;
+type CardExtraProps = GetProps<typeof CardExtra>;
 
 export {
   Card,
   CardTitle,
   CardDescription,
+  CardExtra,
   type CardProps,
   type CardTitleProps,
   type CardDescriptionProps,
+  type CardExtraProps,
 };