@fabio.caffarello/react-design-system 1.4.1 → 1.5.0

package/dist/ui/atoms/NavLink/NavLink.d.ts

@@ -1,7 +1,8 @@
-import type { AnchorHTMLAttributes } from "react";
-interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     variant?: "default" | "active" | "disabled";
-    children: React.ReactNode;
+    icon?: ReactNode;
+    children: ReactNode;
 }
 /**
  * NavLink Component
@@ -16,5 +17,4 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
  * </NavLink>
  * ```
  */
-export default function NavLink({ variant, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function NavLink({ variant, icon, className, children, ...props }: NavLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/NavLink/NavLink.stories.d.ts

@@ -4,5 +4,6 @@ declare const meta: Meta<typeof NavLink>;
 export declare const Default: StoryObj<typeof NavLink>;
 export declare const Active: StoryObj<typeof NavLink>;
 export declare const Disabled: StoryObj<typeof NavLink>;
+export declare const WithIcon: StoryObj<typeof NavLink>;
 export declare const NavigationBar: StoryObj<typeof NavLink>;
 export default meta;

package/dist/ui/atoms/SidebarItem/SidebarItem.d.ts

@@ -0,0 +1,21 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+export interface SidebarItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    href: string;
+    isActive?: boolean;
+    icon?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * SidebarItem Component
+ *
+ * An individual navigation item within a sidebar.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <SidebarItem href="/epics" isActive={true} icon={<EpicIcon />}>
+ *   Epics
+ * </SidebarItem>
+ * ```
+ */
+export default function SidebarItem({ href, isActive, icon, children, className, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/atoms/SidebarItem/SidebarItem.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidebarItem from "./SidebarItem";
+declare const meta: Meta<typeof SidebarItem>;
+export declare const Default: StoryObj<typeof SidebarItem>;
+export declare const Active: StoryObj<typeof SidebarItem>;
+export declare const WithIcon: StoryObj<typeof SidebarItem>;
+export default meta;

package/dist/ui/atoms/SidebarItem/SidebarItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/index.d.ts

@@ -13,3 +13,5 @@ export { default as Tooltip } from "./Tooltip/Tooltip";
 export type { TooltipProps } from "./Tooltip/Tooltip";
 export { default as Skeleton } from "./Skeleton/Skeleton";
 export type { SkeletonProps } from "./Skeleton/Skeleton";
+export { default as SidebarItem } from "./SidebarItem/SidebarItem";
+export type { SidebarItemProps } from "./SidebarItem/SidebarItem";

package/dist/ui/molecules/NavbarGroup/NavbarGroup.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export interface NavbarGroupProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+    isActive?: boolean;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * NavbarGroup Component
+ *
+ * A clickable group in the navbar that can expand a sidebar.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <NavbarGroup
+ *   label="Agile"
+ *   isActive={activeGroup === 'agile'}
+ *   onClick={() => setActiveGroup('agile')}
+ * />
+ * ```
+ */
+export default function NavbarGroup({ label, isActive, icon, onClick, className, children, ...props }: NavbarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/NavbarGroup/NavbarGroup.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import NavbarGroup from "./NavbarGroup";
+declare const meta: Meta<typeof NavbarGroup>;
+export declare const Default: StoryObj<typeof NavbarGroup>;
+export declare const Active: StoryObj<typeof NavbarGroup>;
+export declare const WithIcon: StoryObj<typeof NavbarGroup>;
+export declare const NavigationBar: StoryObj<typeof NavbarGroup>;
+export default meta;

package/dist/ui/molecules/NavbarGroup/NavbarGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/SidebarGroup/SidebarGroup.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    children: ReactNode;
+}
+/**
+ * SidebarGroup Component
+ *
+ * A group container for sidebar items with optional title.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <SidebarGroup title="Agile">
+ *   <SidebarItem href="/epics">Epics</SidebarItem>
+ *   <SidebarItem href="/stories">Stories</SidebarItem>
+ * </SidebarGroup>
+ * ```
+ */
+export default function SidebarGroup({ title, children, className, ...props }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/SidebarHeader/SidebarHeader.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    onClose?: () => void;
+    showCloseButton?: boolean;
+    children?: ReactNode;
+}
+/**
+ * SidebarHeader Component
+ *
+ * Header section of a sidebar with title and optional close button.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <SidebarHeader title="Navigation" onClose={handleClose} />
+ * ```
+ */
+export default function SidebarHeader({ title, onClose, showCloseButton, children, className, ...props }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/molecules/index.d.ts

@@ -8,3 +8,9 @@ export { default as EmptyState } from "./EmptyState/EmptyState";
 export type { EmptyStateProps } from "./EmptyState/EmptyState";
 export { default as Dropdown } from "./Dropdown/Dropdown";
 export type { DropdownProps, DropdownItem } from "./Dropdown/Dropdown";
+export { default as SidebarGroup } from "./SidebarGroup/SidebarGroup";
+export type { SidebarGroupProps } from "./SidebarGroup/SidebarGroup";
+export { default as SidebarHeader } from "./SidebarHeader/SidebarHeader";
+export type { SidebarHeaderProps } from "./SidebarHeader/SidebarHeader";
+export { default as NavbarGroup } from "./NavbarGroup/NavbarGroup";
+export type { NavbarGroupProps } from "./NavbarGroup/NavbarGroup";

package/dist/ui/organisms/Sidebar/Sidebar.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import SidebarHeader from "../../molecules/SidebarHeader/SidebarHeader";
+import SidebarGroup from "../../molecules/SidebarGroup/SidebarGroup";
+import SidebarItem from "../../atoms/SidebarItem/SidebarItem";
+export interface SidebarProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "collapsed";
+    title?: string;
+    showHeader?: boolean;
+    onClose?: () => void;
+    children: ReactNode;
+}
+/**
+ * Sidebar Component
+ *
+ * A sidebar navigation component with header, groups, and items.
+ * Follows Atomic Design principles as an Organism component.
+ * Uses Compound Components pattern.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar title="Navigation" variant="default">
+ *   <Sidebar.Group title="Agile">
+ *     <Sidebar.Item href="/epics" isActive>Epics</Sidebar.Item>
+ *     <Sidebar.Item href="/stories">Stories</Sidebar.Item>
+ *   </Sidebar.Group>
+ * </Sidebar>
+ * ```
+ */
+declare function SidebarComponent({ variant, title, showHeader, onClose, children, className, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarComponent {
+    var Group: typeof SidebarGroup;
+    var Item: typeof SidebarItem;
+    var Header: typeof SidebarHeader;
+}
+export default SidebarComponent;

package/dist/ui/organisms/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Sidebar from "./Sidebar";
+declare const meta: Meta<typeof Sidebar>;
+export declare const Default: StoryObj<typeof Sidebar>;
+export declare const WithIcons: StoryObj<typeof Sidebar>;
+export declare const Collapsed: StoryObj<typeof Sidebar>;
+export declare const WithoutHeader: StoryObj<typeof Sidebar>;
+export default meta;

package/dist/ui/organisms/Sidebar/Sidebar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/organisms/index.d.ts

@@ -2,3 +2,5 @@ export { default as LoginBox } from "./LoginBox/LoginBox";
 export { default as Modal } from "./Modal/Modal";
 export { default as Table } from "./Table/Table";
 export type { TableColumn } from "./Table/Table";
+export { default as Sidebar } from "./Sidebar/Sidebar";
+export type { SidebarProps } from "./Sidebar/Sidebar";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "1.4.1",
+  "version": "1.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/ui/atoms/NavLink/NavLink.stories.tsx

@@ -46,6 +46,18 @@ export const Disabled: StoryObj<typeof NavLink> = {
   },
 };
 
+export const WithIcon: StoryObj<typeof NavLink> = {
+  args: {
+    children: "Dashboard",
+    href: "/dashboard",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+    ),
+  },
+};
+
 export const NavigationBar: StoryObj<typeof NavLink> = {
   render: () => (
     <nav className="flex space-x-8">

package/src/ui/atoms/NavLink/NavLink.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import type { AnchorHTMLAttributes } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
 
-interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   variant?: "default" | "active" | "disabled";
-  children: React.ReactNode;
+  icon?: ReactNode;
+  children: ReactNode;
 }
 
 /**
@@ -22,10 +23,11 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
  */
 export default function NavLink({
   variant = "default",
+  icon,
   className = "",
   children,
   ...props
-}: Props) {
+}: NavLinkProps) {
   const baseClasses = [
     "inline-flex",
     "items-center",
@@ -37,7 +39,7 @@ export default function NavLink({
     "transition-colors",
   ];
 
-  const variantClasses: Record<NonNullable<Props["variant"]>, string> = {
+  const variantClasses: Record<NonNullable<NavLinkProps["variant"]>, string> = {
     default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
     active: "border-indigo-500 text-gray-900",
     disabled: "border-transparent text-gray-300 cursor-not-allowed pointer-events-none",
@@ -52,6 +54,7 @@ export default function NavLink({
   if (variant === "disabled") {
     return (
       <span className={classes} aria-disabled="true">
+        {icon && <span className="flex-shrink-0">{icon}</span>}
         {children}
       </span>
     );
@@ -59,6 +62,7 @@ export default function NavLink({
 
   return (
     <a className={classes} {...props}>
+      {icon && <span className="flex-shrink-0">{icon}</span>}
       {children}
     </a>
   );

package/src/ui/atoms/SidebarItem/SidebarItem.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidebarItem from "./SidebarItem";
+
+const meta: Meta<typeof SidebarItem> = {
+  title: "UI/Atoms/SidebarItem",
+  component: SidebarItem,
+  parameters: {
+    docs: {
+      description: {
+        component: "An individual navigation item within a sidebar.",
+      },
+    },
+  },
+  argTypes: {
+    isActive: {
+      control: "boolean",
+      description: "Whether the item is currently active",
+    },
+    href: {
+      control: "text",
+      description: "URL for the navigation item",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof SidebarItem> = {
+  args: {
+    href: "/epics",
+    children: "Epics",
+    isActive: false,
+  },
+};
+
+export const Active: StoryObj<typeof SidebarItem> = {
+  args: {
+    href: "/epics",
+    children: "Epics",
+    isActive: true,
+  },
+};
+
+export const WithIcon: StoryObj<typeof SidebarItem> = {
+  args: {
+    href: "/epics",
+    children: "Epics",
+    isActive: false,
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+    ),
+  },
+};
+
+export default meta;

package/src/ui/atoms/SidebarItem/SidebarItem.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import SidebarItem from "./SidebarItem";
+
+describe("SidebarItem", () => {
+  it("renders with href and children", () => {
+    render(<SidebarItem href="/epics">Epics</SidebarItem>);
+    const link = screen.getByRole("link", { name: /epics/i });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "/epics");
+  });
+
+  it("applies active styles when isActive is true", () => {
+    render(<SidebarItem href="/epics" isActive>Epics</SidebarItem>);
+    const link = screen.getByRole("link");
+    expect(link.className).toContain("bg-indigo-50");
+    expect(link.className).toContain("text-indigo-700");
+  });
+
+  it("renders icon when provided", () => {
+    const icon = <span data-testid="icon">Icon</span>;
+    render(<SidebarItem href="/epics" icon={icon}>Epics</SidebarItem>);
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/SidebarItem/SidebarItem.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+
+export interface SidebarItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  href: string;
+  isActive?: boolean;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * SidebarItem Component
+ * 
+ * An individual navigation item within a sidebar.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <SidebarItem href="/epics" isActive={true} icon={<EpicIcon />}>
+ *   Epics
+ * </SidebarItem>
+ * ```
+ */
+export default function SidebarItem({
+  href,
+  isActive = false,
+  icon,
+  children,
+  className = "",
+  ...props
+}: SidebarItemProps) {
+  const baseClasses = [
+    "flex",
+    "items-center",
+    "px-4",
+    "py-2",
+    "text-sm",
+    "font-medium",
+    "rounded-md",
+    "transition-colors",
+    "hover:bg-gray-100",
+  ];
+
+  const activeClasses = isActive
+    ? "bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600"
+    : "text-gray-700 hover:text-gray-900";
+
+  const classes = [
+    ...baseClasses,
+    activeClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <a href={href} className={classes} {...props}>
+      {icon && <span className="mr-3 flex-shrink-0">{icon}</span>}
+      <span>{children}</span>
+    </a>
+  );
+}

package/src/ui/atoms/index.ts

@@ -25,3 +25,6 @@ export type { TooltipProps } from "./Tooltip/Tooltip";
 
 export { default as Skeleton } from "./Skeleton/Skeleton";
 export type { SkeletonProps } from "./Skeleton/Skeleton";
+
+export { default as SidebarItem } from "./SidebarItem/SidebarItem";
+export type { SidebarItemProps } from "./SidebarItem/SidebarItem";

package/src/ui/molecules/NavbarGroup/NavbarGroup.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import NavbarGroup from "./NavbarGroup";
+
+const meta: Meta<typeof NavbarGroup> = {
+  title: "UI/Molecules/NavbarGroup",
+  component: NavbarGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: "A clickable group in the navbar that can expand a sidebar.",
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label text for the group",
+    },
+    isActive: {
+      control: "boolean",
+      description: "Whether the group is currently active",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof NavbarGroup> = {
+  args: {
+    label: "Agile",
+    isActive: false,
+  },
+};
+
+export const Active: StoryObj<typeof NavbarGroup> = {
+  args: {
+    label: "Agile",
+    isActive: true,
+  },
+};
+
+export const WithIcon: StoryObj<typeof NavbarGroup> = {
+  args: {
+    label: "Agile",
+    isActive: false,
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+      </svg>
+    ),
+  },
+};
+
+export const NavigationBar: StoryObj<typeof NavbarGroup> = {
+  render: () => (
+    <nav className="flex space-x-4 bg-white p-4 border-b">
+      <NavbarGroup label="Dashboard" isActive={false} />
+      <NavbarGroup label="Agile" isActive={true} />
+      <NavbarGroup label="Documentação" isActive={false} />
+    </nav>
+  ),
+};
+
+export default meta;

package/src/ui/molecules/NavbarGroup/NavbarGroup.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import NavbarGroup from "./NavbarGroup";
+
+describe("NavbarGroup", () => {
+  it("renders with label", () => {
+    render(<NavbarGroup label="Agile" />);
+    expect(screen.getByRole("button", { name: /agile/i })).toBeInTheDocument();
+  });
+
+  it("applies active styles when isActive is true", () => {
+    render(<NavbarGroup label="Agile" isActive />);
+    const button = screen.getByRole("button");
+    expect(button.className).toContain("bg-indigo-100");
+    expect(button.className).toContain("text-indigo-700");
+  });
+
+  it("calls onClick when clicked", async () => {
+    const handleClick = vi.fn();
+    render(<NavbarGroup label="Agile" onClick={handleClick} />);
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders icon when provided", () => {
+    const icon = <span data-testid="icon">Icon</span>;
+    render(<NavbarGroup label="Agile" icon={icon} />);
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+});

package/src/ui/molecules/NavbarGroup/NavbarGroup.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export interface NavbarGroupProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  isActive?: boolean;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+/**
+ * NavbarGroup Component
+ * 
+ * A clickable group in the navbar that can expand a sidebar.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <NavbarGroup
+ *   label="Agile"
+ *   isActive={activeGroup === 'agile'}
+ *   onClick={() => setActiveGroup('agile')}
+ * />
+ * ```
+ */
+export default function NavbarGroup({
+  label,
+  isActive = false,
+  icon,
+  onClick,
+  className = "",
+  children,
+  ...props
+}: NavbarGroupProps) {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "px-3",
+    "py-2",
+    "text-sm",
+    "font-medium",
+    "rounded-md",
+    "transition-colors",
+  ];
+
+  const variantClasses = isActive
+    ? "bg-indigo-100 text-indigo-700 border-b-2 border-indigo-600"
+    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900";
+
+  const classes = [
+    ...baseClasses,
+    variantClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <button
+      type="button"
+      className={classes}
+      onClick={onClick}
+      aria-expanded={isActive}
+      aria-haspopup="true"
+      {...props}
+    >
+      {icon && <span className="mr-2">{icon}</span>}
+      <span>{label}</span>
+      {children}
+    </button>
+  );
+}

package/src/ui/molecules/SidebarGroup/SidebarGroup.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { Text } from "../../atoms";
+
+export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  children: ReactNode;
+}
+
+/**
+ * SidebarGroup Component
+ * 
+ * A group container for sidebar items with optional title.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <SidebarGroup title="Agile">
+ *   <SidebarItem href="/epics">Epics</SidebarItem>
+ *   <SidebarItem href="/stories">Stories</SidebarItem>
+ * </SidebarGroup>
+ * ```
+ */
+export default function SidebarGroup({
+  title,
+  children,
+  className = "",
+  ...props
+}: SidebarGroupProps) {
+  const baseClasses = [
+    "space-y-1",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} {...props}>
+      {title && (
+        <Text as="h3" className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+          {title}
+        </Text>
+      )}
+      <div className="space-y-1">
+        {children}
+      </div>
+    </div>
+  );
+}