@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/card.module.css

@@ -0,0 +1,41 @@
+.card {
+  border-radius: var(--ac-radius-lg);
+  border: 1px solid var(--ac-border);
+  background-color: var(--ac-card);
+  color: var(--ac-card-foreground);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-1);
+  padding: var(--ac-space-6);
+}
+
+.title {
+  font-size: var(--ac-text-lg);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.01em;
+}
+
+.description {
+  font-size: var(--ac-text-sm);
+  color: var(--ac-muted-foreground);
+}
+
+.action {
+  margin-left: auto;
+  align-self: flex-start;
+}
+
+.content {
+  padding: 0 var(--ac-space-6) var(--ac-space-6);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--ac-space-6) var(--ac-space-6);
+}

package/src/components/ui/card.tsx

@@ -1,73 +1,226 @@
-"use client";
-
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./card.module.css";
+
+/**
+ * Represents the shared styling props supported by the Card root container.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so cards can participate in semantic layouts,
+ * landmarks, and custom event handling while exposing a documented class override.
+ */
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Additional CSS classes merged with the default card surface styles.
+   */
+  className?: string;
+}
+
+/**
+ * Represents the shared styling props supported by card layout sections.
+ *
+ * @remarks
+ * Use these props for presentational card regions such as headers, content blocks,
+ * action rows, and footers. All standard `<div>` attributes continue to work.
+ */
+interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Additional CSS classes merged with the section's default spacing styles.
+   */
+  className?: string;
+}
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+/**
+ * A card container for grouping related content into a bordered surface.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a styled `<div>` with the library's card border, background, and shadow.
+ * Compose it with {@link CardHeader}, {@link CardContent}, and {@link CardFooter}
+ * to create structured panels without depending on a Base UI primitive.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Team activity</CardTitle>
+ *     <CardDescription>Latest changes across your workspace.</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>{children}</CardContent>
+ *   <CardFooter>Updated 2 minutes ago</CardFooter>
+ * </Card>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const Card = React.forwardRef<HTMLDivElement, CardProps>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn(
-      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-      className,
-    )}
+    className={cn(styles.card, className)}
     {...props}
   />
 ));
 Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+/**
+ * A header region for card titles, descriptions, and top-level actions.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a `<div>` with vertical spacing tuned for leading card content.
+ * Place {@link CardTitle}, {@link CardDescription}, and optional controls inside it.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <CardTitle>Revenue</CardTitle>
+ *   <CardDescription>Monthly recurring revenue overview.</CardDescription>
+ * </CardHeader>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const CardHeader = React.forwardRef<HTMLDivElement, CardSectionProps>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn(styles.header, className)}
     {...props}
   />
 ));
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+/**
+ * A prominent title slot for the primary heading inside a card.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a styled `<div>` for visual hierarchy. Provide semantic heading elements
+ * inside it when the surrounding document outline requires explicit heading levels.
+ *
+ * @example
+ * ```tsx
+ * <CardTitle>Security overview</CardTitle>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const CardTitle = React.forwardRef<HTMLDivElement, CardSectionProps>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn("leading-none font-semibold tracking-tight", className)}
+    className={cn(styles.title, className)}
     {...props}
   />
 ));
 CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+/**
+ * A muted text block for supporting information beneath a card title.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a styled `<div>` intended for secondary copy, helper messaging, or status
+ * summaries that contextualize the main card heading.
+ *
+ * @example
+ * ```tsx
+ * <CardDescription>Track response times and alert volume in one place.</CardDescription>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const CardDescription = React.forwardRef<HTMLDivElement, CardSectionProps>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    className={cn(styles.description, className)}
     {...props}
   />
 ));
 CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+/**
+ * A compact action slot aligned alongside card header content.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a `<div>` positioned for buttons, menus, or status badges that should sit
+ * at the top edge of the card without disturbing header spacing.
+ *
+ * @example
+ * ```tsx
+ * <CardAction>
+ *   <Button size="sm">Manage</Button>
+ * </CardAction>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const CardAction = React.forwardRef<HTMLDivElement, CardSectionProps>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn("p-6 pt-0", className)}
+    className={cn(styles.action, className)}
     {...props}
   />
 ));
-CardContent.displayName = "CardContent";
+CardAction.displayName = "CardAction";
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+/**
+ * The main content region for card body content.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a `<div>` with interior spacing optimized for text, forms, charts, or any
+ * other primary card content placed between the header and footer.
+ *
+ * @example
+ * ```tsx
+ * <CardContent>
+ *   <p>Your subscription renews on March 31.</p>
+ * </CardContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const CardContent = React.forwardRef<HTMLDivElement, CardSectionProps>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn(styles.content, className)}
     {...props}
   />
 ));
-CardFooter.displayName = "CardFooter";
+CardContent.displayName = "CardContent";
 
-const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
+/**
+ * A footer region for actions, summaries, or secondary metadata.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a flex-enabled `<div>` that sits at the bottom of the card and is commonly
+ * used for buttons, timestamps, totals, or other closing UI elements.
+ *
+ * @example
+ * ```tsx
+ * <CardFooter>
+ *   <Button>Save changes</Button>
+ * </CardFooter>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const CardFooter = React.forwardRef<HTMLDivElement, CardSectionProps>(({className, ...props}, ref) => (
   <div
     ref={ref}
-    className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+    className={cn(styles.footer, className)}
     {...props}
   />
 ));
-CardAction.displayName = "CardAction";
+CardFooter.displayName = "CardFooter";
 
 export {Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};

package/src/components/ui/carousel.module.css

@@ -0,0 +1,80 @@
+.carousel {
+  position: relative;
+}
+
+.viewport {
+  overflow: hidden;
+}
+
+.content {
+  display: flex;
+  margin-left: calc(var(--ac-space-4) * -1);
+}
+
+.contentVertical {
+  flex-direction: column;
+  margin-top: calc(var(--ac-space-4) * -1);
+  margin-left: 0;
+}
+
+.item {
+  min-width: 0;
+  flex: 0 0 100%;
+  padding-left: var(--ac-space-4);
+}
+
+.itemVertical {
+  padding-top: var(--ac-space-4);
+  padding-left: 0;
+}
+
+.navigationButton {
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 999px;
+}
+
+.navigationButton[data-orientation="horizontal"] {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.navigationButton[data-orientation="vertical"] {
+  left: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+.previousButton[data-orientation="horizontal"] {
+  left: -3rem;
+}
+
+.nextButton[data-orientation="horizontal"] {
+  right: -3rem;
+}
+
+.previousButton[data-orientation="vertical"] {
+  top: -3rem;
+}
+
+.nextButton[data-orientation="vertical"] {
+  bottom: -3rem;
+}
+
+.navigationIcon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+