Package headless UI dev

packages/ui/uikit/flippo/components/src/components/Box/index.ts

@@ -0,0 +1 @@
+export * from './ui/Box';

packages/ui/uikit/flippo/components/src/components/Box/ui/Box.tsx

@@ -0,0 +1,39 @@
+import type React from 'react';
+
+import { useRender } from '@flippo-ui/headless-components';
+import { extractBoxProps } from '~@lib/layouts';
+
+import type { BoxProps as BoxLayoutProps } from '~@lib/types';
+
+/**
+ * Box - A fundamental layout building block.
+ * Supports all layout props: margin, padding, sizing, position, overflow,
+ * and can act as a flex/grid child.
+ */
+export function Box<ElementType extends keyof React.JSX.IntrinsicElements = 'div'>(
+    props: Box.Props<ElementType>
+) {
+    const { as: Tag = 'div', ref, ...restProps } = props;
+
+    const { style, otherProps } = extractBoxProps(restProps);
+
+    const element = useRender({
+        defaultTagName: Tag,
+        ref: ref as React.Ref<Element>,
+        props: [{ style }, otherProps]
+    });
+
+    return element;
+}
+
+export type BoxComponentProps<ElementType extends keyof React.JSX.IntrinsicElements = 'div'>
+  = React.PropsWithChildren<React.ComponentPropsWithRef<ElementType>>
+    & BoxLayoutProps
+    & {
+        /** HTML element to render */
+        as?: ElementType;
+    };
+
+export namespace Box {
+    export type Props<ElementType extends keyof React.JSX.IntrinsicElements = 'div'> = BoxComponentProps<ElementType>;
+}

packages/ui/uikit/flippo/components/src/components/Card/index.parts.ts

@@ -0,0 +1,9 @@
+// Context
+export { useCardContext, useOptionalCardContext } from './ui/root/CardContext';
+export type { CardContextValue } from './ui/root/CardContext';
+export { CardContent as Content } from './ui/content/CardContent';
+export { CardDescription as Description } from './ui/description/CardDescription';
+export { CardFooter as Footer } from './ui/footer/CardFooter';
+
+export { CardRoot as Root } from './ui/root/CardRoot';
+export { CardTitle as Title } from './ui/title/CardTitle';

packages/ui/uikit/flippo/components/src/components/Card/index.ts

@@ -0,0 +1 @@
+export * as Card from './index.parts';

packages/ui/uikit/flippo/components/src/components/Card/story/Card.stories.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as Button from '../../Button';
+import * as Card from '../index.parts';
+
+const meta: Meta<typeof Card.Root> = {
+    title: 'Components/Card',
+    component: Card.Root,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <Card.Root style={{ maxWidth: 400 }}>
+            <Card.Content>
+                <Card.Title>{'Card Title'}</Card.Title>
+                <Card.Description>
+                    {'Card automatically connects Title and Description to Root via aria-labelledby and aria-describedby.'}
+                </Card.Description>
+                <p>{'Main content goes here. You can add any content you want inside the card.'}</p>
+            </Card.Content>
+            <Card.Footer>
+                <Button.Button variant={'primary'}>{'Action'}</Button.Button>
+                <Button.Button variant={'secondary'}>{'Cancel'}</Button.Button>
+            </Card.Footer>
+        </Card.Root>
+    )
+};
+
+export const WithoutFooter: Story = {
+    render: () => (
+        <Card.Root style={{ maxWidth: 400 }}>
+            <Card.Content>
+                <Card.Title>{'Simple Card'}</Card.Title>
+                <Card.Description>
+                    {'A card without a footer section.'}
+                </Card.Description>
+                <p>{'This card only has content, no footer actions.'}</p>
+            </Card.Content>
+        </Card.Root>
+    )
+};
+
+export const WithLayoutProps: Story = {
+    render: () => (
+        <Card.Root p={24} m={16} maxWidth={500}>
+            <Card.Content>
+                <Card.Title>{'Card with Layout Props'}</Card.Title>
+                <Card.Description>
+                    {'This card uses layout props (padding, margin, maxWidth) directly on the Root component.'}
+                </Card.Description>
+            </Card.Content>
+        </Card.Root>
+    )
+};
+
+export const MultipleCards: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <Card.Root style={{ maxWidth: 300 }}>
+                <Card.Content>
+                    <Card.Title>{'Card 1'}</Card.Title>
+                    <Card.Description>{'First card description'}</Card.Description>
+                    <p>{'Content for the first card.'}</p>
+                </Card.Content>
+            </Card.Root>
+            <Card.Root style={{ maxWidth: 300 }}>
+                <Card.Content>
+                    <Card.Title>{'Card 2'}</Card.Title>
+                    <Card.Description>{'Second card description'}</Card.Description>
+                    <p>{'Content for the second card.'}</p>
+                </Card.Content>
+            </Card.Root>
+            <Card.Root style={{ maxWidth: 300 }}>
+                <Card.Content>
+                    <Card.Title>{'Card 3'}</Card.Title>
+                    <Card.Description>{'Third card description'}</Card.Description>
+                    <p>{'Content for the third card.'}</p>
+                </Card.Content>
+            </Card.Root>
+        </div>
+    )
+};

packages/ui/uikit/flippo/components/src/components/Card/ui/content/CardContent.module.scss

@@ -0,0 +1,6 @@
+.CardContent {
+  padding: var(--f-spacing-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--f-spacing-4);
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/content/CardContent.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+
+import { useRender } from '@flippo-ui/headless-components';
+import { cx } from 'class-variance-authority';
+
+import type { PolymorphicComponentPropsWithRef } from '~@lib/types';
+
+import styles from './CardContent.module.scss';
+
+/**
+ * CardContent - Main content area of the card.
+ */
+export function CardContent(props: CardContent.Props) {
+    const {
+        as: Tag = 'div',
+        ref,
+        className,
+        ...otherProps
+    } = props;
+
+    const cardContentClasses = cx(styles.CardContent, className);
+
+    const element = useRender({ defaultTagName: Tag, ref, props: [{ className: cardContentClasses }, otherProps] });
+
+    return element;
+}
+
+export namespace CardContent {
+    export type Props = PolymorphicComponentPropsWithRef<'div'>;
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/description/CardDescription.module.scss

@@ -0,0 +1,7 @@
+@use 'mixins/_font.scss' as font;
+
+.CardDescription {
+  @include font.body('default');
+  color: var(--f-color-text-3);
+  margin: 0;
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/description/CardDescription.tsx

@@ -0,0 +1,37 @@
+import type React from 'react';
+
+import { useRender } from '@flippo-ui/headless-components';
+import { cx } from 'class-variance-authority';
+
+import type { PolymorphicComponentPropsWithRef } from '~@lib/types';
+
+import { useCardContext } from '../root/CardContext';
+
+import styles from './CardDescription.module.scss';
+
+/**
+ * CardDescription - Card subtitle or description text.
+ * Automatically connected to Card.Root via context for accessibility.
+ */
+export function CardDescription(props: CardDescription.Props) {
+    const {
+        as: Tag = 'p',
+        ref,
+        className,
+        id: providedId,
+        ...otherProps
+    } = props;
+
+    const context = useCardContext();
+
+    const descriptionId = providedId ?? context.descriptionId;
+    const cardDescriptionClasses = cx(styles.CardDescription, className);
+
+    const element = useRender({ defaultTagName: Tag, ref, props: [{ className: cardDescriptionClasses, id: descriptionId }, otherProps] });
+
+    return element;
+}
+
+export namespace CardDescription {
+    export type Props = PolymorphicComponentPropsWithRef<'p'>;
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/footer/CardFooter.module.scss

@@ -0,0 +1,7 @@
+.CardFooter {
+  padding: var(--f-spacing-6);
+  padding-top: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--f-spacing-3);
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/footer/CardFooter.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+
+import { useRender } from '@flippo-ui/headless-components';
+import { cx } from 'class-variance-authority';
+
+import type { PolymorphicComponentPropsWithRef } from '~@lib/types';
+
+import styles from './CardFooter.module.scss';
+
+/**
+ * CardFooter - Footer area for card actions or additional content.
+ */
+export function CardFooter(props: CardFooter.Props) {
+    const {
+        as: Tag = 'div',
+        ref,
+        className,
+        ...otherProps
+    } = props;
+
+    const cardFooterClasses = cx(styles.CardFooter, className);
+
+    const element = useRender({ defaultTagName: Tag, ref, props: [{ className: cardFooterClasses }, otherProps] });
+
+    return element;
+}
+
+export namespace CardFooter {
+    export type Props = PolymorphicComponentPropsWithRef<'div'>;
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/root/CardContext.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export type CardContextValue = {
+    titleId: string;
+    descriptionId: string;
+};
+
+export const CardContext = React.createContext<CardContextValue | null>(null);
+
+export function useCardContext() {
+    const context = React.use(CardContext);
+    if (!context) {
+        throw new Error('Card components must be used within Card.Root');
+    }
+    return context;
+}
+
+export function useOptionalCardContext() {
+    return React.use(CardContext);
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/root/CardRoot.module.scss

@@ -0,0 +1,11 @@
+.CardRoot {
+  background-color: var(--f-color-bg-1);
+  border-radius: var(--f-border-radius-card);
+  border: 1px solid var(--f-color-stroke);
+  overflow: hidden;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: var(--f-color-stroke-hover);
+  }
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/root/CardRoot.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type * as ReactTypes from 'react';
+
+import { useRender } from '@flippo-ui/headless-components';
+import { cx } from 'class-variance-authority';
+
+import { extractBoxProps } from '~@lib/layouts';
+
+import type { BoxProps } from '~@lib/types';
+
+import { CardContext } from './CardContext';
+import styles from './CardRoot.module.scss';
+
+/**
+ * CardRoot - Root container for Card component.
+ * Provides context for Title and Description to connect via aria-labelledby and aria-describedby.
+ */
+export function CardRoot<ElementType extends keyof ReactTypes.JSX.IntrinsicElements = 'div'>(
+    props: CardRoot.Props<ElementType>
+) {
+    const {
+        as: Tag = 'div',
+        ref,
+        className,
+        ...restProps
+    } = props;
+
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+
+    const { style, otherProps } = extractBoxProps(restProps);
+
+    const contextValue = React.useMemo(
+        () => ({ titleId, descriptionId }),
+        [titleId, descriptionId]
+    );
+
+    const element = useRender({
+        defaultTagName: Tag,
+        ref: ref as React.Ref<Element>,
+        props: [{
+            style,
+            'className': cx(styles.CardRoot, className),
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId
+        }, otherProps]
+    });
+
+    return <CardContext.Provider value={contextValue}>{element}</CardContext.Provider>;
+}
+
+export type CardRootProps<ElementType extends keyof React.JSX.IntrinsicElements = 'div'>
+  = React.PropsWithChildren<React.ComponentPropsWithRef<ElementType>>
+    & BoxProps
+    & {
+        /** HTML element to render */
+        as?: ElementType;
+        /** Additional CSS class */
+        className?: string;
+    };
+
+export namespace CardRoot {
+    export type Props<ElementType extends keyof React.JSX.IntrinsicElements = 'div'> = CardRootProps<ElementType>;
+}

packages/ui/uikit/flippo/components/src/components/Card/ui/title/CardTitle.module.scss

@@ -0,0 +1,7 @@
+@use 'mixins/_font.scss' as font;
+
+.CardTitle {
+  @include font.heading3('default');
+  color: var(--f-color-text-primary);
+  margin: 0;
+}