@blenx-dev/components 0.0.0

package/src/components/Calendar/calendar.css.ts

@@ -0,0 +1,188 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const root = style({
+  display: "inline-block",
+  width: "100%",
+});
+
+export const months = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const monthCaption = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  paddingBottom: spacing.small,
+  minHeight: 40,
+});
+
+export const captionLabel = style({
+  fontSize: fontSize.medium,
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentPrimary,
+  margin: 0,
+  padding: 0,
+});
+
+export const nav = style({
+  height: "fit-content",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  position: "absolute",
+  inset: 0,
+  padding: spacing.xsmall,
+  pointerEvents: "none",
+  zIndex: 10,
+});
+
+export const buttonNav = style({
+  pointerEvents: "auto",
+  appearance: "none",
+  backgroundColor: "transparent",
+  border: "none",
+  padding: 0,
+  font: "inherit",
+  WebkitTapHighlightColor: "transparent",
+  width: 28,
+  height: 28,
+  borderRadius: themeContract.borderRadius,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: themeContract.contentSecondary,
+  cursor: "pointer",
+  flexShrink: 0,
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.backgroundSubtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${themeContract.focusRing}`,
+    },
+  },
+});
+
+export const monthGrid = style({
+  width: "100%",
+  borderCollapse: "collapse",
+});
+
+export const weekday = style({
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.medium,
+  color: themeContract.contentSecondary,
+  textAlign: "center",
+  verticalAlign: "middle",
+  padding: spacing.xxsmall,
+  width: 40,
+  height: 32,
+  boxSizing: "border-box",
+});
+
+export const day = style({
+  textAlign: "center",
+  verticalAlign: "middle",
+  padding: 1,
+  width: 40,
+  height: 40,
+  boxSizing: "border-box",
+});
+
+export const dayButton = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  minWidth: 32,
+  minHeight: 32,
+  maxWidth: 36,
+  maxHeight: 36,
+  borderRadius: themeContract.borderRadius,
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  fontSize: fontSize.small,
+  color: themeContract.contentPrimary,
+  outline: "none",
+  margin: "0 auto",
+  padding: 0,
+  fontFamily: "inherit",
+  lineHeight: 1,
+  transitionProperty: "background-color, color",
+  transitionDuration: "100ms",
+  transitionTimingFunction: "ease",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.backgroundSubtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${themeContract.focusRing}`,
+    },
+  },
+});
+
+export const dayButtonSelected = style({
+  backgroundColor: themeContract.primary,
+  color: themeContract.contentOnPrimary,
+  fontWeight: fontWeight.semibold,
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.primary,
+    },
+  },
+});
+
+export const dayButtonToday = style({
+  fontWeight: fontWeight.semibold,
+});
+
+export const dayButtonDisabled = style({
+  color: themeContract.contentDisabled,
+  cursor: "not-allowed",
+  opacity: 0.5,
+  selectors: {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+});
+
+export const dayButtonOutside = style({
+  color: themeContract.contentDisabled,
+  opacity: 0.5,
+});
+
+export const footer = style({
+  paddingTop: spacing.small,
+});
+
+export const dropdowns = style({
+  display: "flex",
+  gap: spacing.xsmall,
+  alignItems: "center",
+});
+
+export const dropdown = style({
+  appearance: "none",
+  backgroundColor: themeContract.backgroundSubtle,
+  border: `1px solid ${themeContract.border}`,
+  borderRadius: themeContract.borderRadius,
+  color: themeContract.contentPrimary,
+  fontSize: fontSize.small,
+  padding: `${spacing.xxsmall} ${spacing.small}`,
+  cursor: "pointer",
+  outline: "none",
+  selectors: {
+    "&:focus-visible": {
+      borderColor: themeContract.borderStrong,
+      boxShadow: `0 0 0 2px ${themeContract.borderStrong}`,
+    },
+  },
+});

package/src/components/Calendar/calendar.doc.tsx

@@ -0,0 +1,10 @@
+import { Stack } from "../Stack/stack";
+import { Calendar } from "./calendar";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="small">
+      <Calendar mode="single" selected={new Date()} onSelect={() => {}} />
+    </Stack>
+  );
+}

package/src/components/Calendar/calendar.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { CaretLeftIcon, CaretRightIcon, CaretUpDownIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import { DayPicker, type DayPickerProps } from "react-day-picker";
+import { Button } from "../Button/button";
+import {
+  root,
+  months,
+  monthCaption,
+  captionLabel,
+  nav,
+  buttonNav,
+  monthGrid,
+  weekday,
+  day,
+  dayButton,
+  dayButtonSelected,
+  dayButtonToday,
+  dayButtonDisabled,
+  dayButtonOutside,
+  footer,
+  dropdowns,
+  dropdown,
+} from "./calendar.css";
+
+function StyledDayButton({
+  day: _day,
+  modifiers,
+  className,
+  ...props
+}: {
+  day: object;
+  modifiers: Record<string, boolean>;
+} & React.ComponentPropsWithoutRef<"button">) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus();
+    }
+  }, [modifiers.focused]);
+
+  const isSelected = modifiers.selected;
+  const isToday = modifiers.today;
+  const isDisabled = modifiers.disabled;
+  const isOutside = modifiers.outside;
+
+  const composed = clsx(
+    dayButton,
+    isSelected && dayButtonSelected,
+    isToday && dayButtonToday,
+    isDisabled && dayButtonDisabled,
+    isOutside && dayButtonOutside,
+    className,
+  );
+
+  return <button ref={ref} className={composed} {...props} />;
+}
+
+function Calendar({ className, components: userComponents, ...props }: DayPickerProps) {
+  const classNames = {
+    root: clsx(root, className),
+    months: months,
+    month: "",
+    month_caption: monthCaption,
+    caption_label: captionLabel,
+    nav: nav,
+    button_previous: buttonNav,
+    button_next: buttonNav,
+    chevron: "",
+    month_grid: monthGrid,
+    weekdays: "",
+    weekday: weekday,
+    weeks: "",
+    week: "",
+    day: day,
+    day_button: "",
+    footer: footer,
+    dropdowns: dropdowns,
+    dropdown: dropdown,
+    dropdown_root: "",
+    months_dropdown: "",
+    years_dropdown: "",
+    week_number: "",
+    week_number_header: "",
+    selected: "",
+    today: "",
+    disabled: "",
+    hidden: "",
+    outside: "",
+    focused: "",
+    range_start: "",
+    range_end: "",
+    range_middle: "",
+    weeks_before_enter: "",
+    weeks_before_exit: "",
+    weeks_after_enter: "",
+    weeks_after_exit: "",
+    caption_after_enter: "",
+    caption_after_exit: "",
+    caption_before_enter: "",
+    caption_before_exit: "",
+  };
+  const defaultComponents = {
+    Chevron: ({
+      orientation,
+      ...chevronProps
+    }: {
+      orientation?: "left" | "right" | "up" | "down";
+    }): React.ReactElement => {
+      if (orientation === "left") {
+        return (
+          <Button size="icon" variant="ghost">
+            <CaretLeftIcon {...chevronProps} aria-hidden="true" />
+          </Button>
+        );
+      }
+      if (orientation === "right") {
+        return (
+          <Button size="icon" variant="ghost">
+            <CaretRightIcon {...chevronProps} aria-hidden="true" />
+          </Button>
+        );
+      }
+      return (
+        <Button size="icon" variant="ghost">
+          <CaretUpDownIcon {...chevronProps} aria-hidden="true" />
+        </Button>
+      );
+    },
+  };
+  const mergedComponents = {
+    ...defaultComponents,
+    ...userComponents,
+    DayButton: StyledDayButton,
+  };
+
+  return <DayPicker classNames={classNames} components={mergedComponents} {...props} />;
+}
+
+export { Calendar };

package/src/components/Calendar/docs-meta.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Calendar",
+  "description": "A date calendar component built on react-day-picker. Supports single, range, and multiple date selection modes.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["calendar", "date", "datepicker", "day", "month"],
+  "related": ["DatePicker", "Button"]
+}

package/src/components/Calendar/index.ts

@@ -0,0 +1 @@
+export * from "./calendar";

package/src/components/Calendar/registry-meta.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar",
+  "type": "registry:ui",
+  "title": "Calendar",
+  "description": "A StyleX button component.",
+  "registryDependencies": ["button"],
+  "files": [
+    {
+      "file": "calendar.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Calendar/calendar.tsx"
+    },
+    {
+      "file": "calendar.css.ts",
+      "type": "registry:file",
+      "target": "@ui/Calendar/calendar.css.ts"
+    }
+  ]
+}

package/src/components/Card/card.demo.tsx

@@ -0,0 +1,177 @@
+import { MapPinIcon, ShoppingCartIcon, StarIcon, ChartBarIcon } from "@phosphor-icons/react";
+import { Button } from "../Button/button";
+import { Text } from "../Text/text";
+import { Badge } from "../Badge/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/avatar";
+import { HStack, VStack } from "../Stack/stack";
+import { Box } from "../Box/box";
+import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+
+export function CardDemo() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Getting Started</CardTitle>
+        <CardDescription>
+          Learn how to install and use Blenx UI components in your project.
+        </CardDescription>
+      </CardHeader>
+      <CardBody>
+        <Text variant="body2">
+          Blenx UI provides a set of accessible, styleable React components built on Base UI
+          primitives and styled with StyleX.
+        </Text>
+      </CardBody>
+      <CardFooter>
+        <Button variant="outline" size="small">
+          Read docs
+        </Button>
+        <Button size="small">Install</Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export function ProfileCardDemo() {
+  return (
+    <Card>
+      <CardHeader>
+        <HStack gap="medium" align="center">
+          <Avatar size="large">
+            <AvatarImage src="https://i.pravatar.cc/150?u=alex" alt="Alex Rivera" />
+            <AvatarFallback>AR</AvatarFallback>
+          </Avatar>
+          <VStack gap="xxsmall">
+            <HStack gap="xsmall" align="center">
+              <CardTitle>Alex Rivera</CardTitle>
+              <Badge variant="primary">Pro</Badge>
+            </HStack>
+            <HStack gap="xxsmall" align="center">
+              <MapPinIcon size={12} />
+              <Text variant="caption" color="secondary">
+                San Francisco, CA
+              </Text>
+            </HStack>
+          </VStack>
+        </HStack>
+      </CardHeader>
+      <CardBody>
+        <Text variant="body2">
+          Full-stack developer with 8+ years of experience building accessible, performant web
+          applications. Passionate about design systems and open source.
+        </Text>
+      </CardBody>
+      <CardFooter>
+        <HStack gap="small" justify="end" wrap>
+          <Button variant="ghost" size="small">
+            Message
+          </Button>
+          <Button size="small">Follow</Button>
+        </HStack>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export function ProductCardDemo() {
+  return (
+    <Card>
+      <Box
+        height="auto"
+        width="full"
+        backgroundColor="info"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          borderTopLeftRadius: "inherit",
+          borderTopRightRadius: "inherit",
+          overflow: "hidden",
+        }}
+      >
+        <Badge variant="danger" style={{ position: "absolute", top: 8, left: 8 }}>
+          20% OFF
+        </Badge>
+        <ShoppingCartIcon size={40} />
+      </Box>
+      <CardHeader>
+        <HStack gap="medium" justify="between" align="center">
+          <VStack gap="xxsmall">
+            <CardTitle>Pro Subscription</CardTitle>
+            <CardDescription>Annual billing - save 20%</CardDescription>
+          </VStack>
+          <HStack gap="xsmall" align="center">
+            <StarIcon size={14} />
+            <Text variant="caption" weight="semibold">
+              4.9
+            </Text>
+          </HStack>
+        </HStack>
+      </CardHeader>
+      <CardBody>
+        <Text variant="body2">
+          Unlimited projects, advanced analytics, priority support, and team collaboration features.
+          Everything you need to scale your workflow.
+        </Text>
+        <HStack gap="xsmall" align="baseline" style={{ marginTop: 8 }}>
+          <Text variant="h3" weight="bold">
+            $29
+          </Text>
+          <Text variant="body3" color="secondary">
+            /month
+          </Text>
+        </HStack>
+      </CardBody>
+      <CardFooter>
+        <Button fullWidth>Subscribe Now</Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export function StatCardDemo() {
+  return (
+    <Card>
+      <CardBody>
+        <HStack gap="medium" align="center" justify="between">
+          <VStack gap="xxsmall">
+            <Text variant="caption" color="secondary">
+              Total Revenue
+            </Text>
+            <Text variant="h3" weight="bold">
+              $48,250
+            </Text>
+            <HStack gap="xxsmall" align="center">
+              <Badge variant="sucess">+12.5%</Badge>
+              <Text variant="caption" color="secondary">
+                vs last month
+              </Text>
+            </HStack>
+          </VStack>
+          <Box
+            style={{
+              width: 48,
+              height: 48,
+              borderRadius: 12,
+              backgroundColor: "var(--color-primary-subtle)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            <ChartBarIcon size={24} />
+          </Box>
+        </HStack>
+      </CardBody>
+    </Card>
+  );
+}
+
+export const demos = [
+  { name: "Default", component: CardDemo },
+  { name: "Profile Card", component: ProfileCardDemo },
+  { name: "Product Card", component: ProductCardDemo },
+  { name: "Stat Card", component: StatCardDemo },
+];

package/src/components/Card/card.doc.tsx

@@ -0,0 +1,47 @@
+import { Stack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+
+export function DefaultStory() {
+  return (
+    <Stack gap="medium">
+      <Card padding="medium">
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card description text</CardDescription>
+        </CardHeader>
+        <CardBody>
+          <Text variant="body2">Main card content goes here.</Text>
+        </CardBody>
+        <CardFooter>
+          <Text variant="body3" color="secondary">
+            Card footer
+          </Text>
+        </CardFooter>
+      </Card>
+    </Stack>
+  );
+}
+
+export function PaddingVariantsStory() {
+  return (
+    <Stack gap="medium">
+      <Card padding="small">
+        <CardHeader padding="small">
+          <CardTitle>Small</CardTitle>
+        </CardHeader>
+        <CardBody padding="small">
+          <Text variant="body2">Small padding variant</Text>
+        </CardBody>
+      </Card>
+      <Card padding="large">
+        <CardHeader padding="large">
+          <CardTitle>Large</CardTitle>
+        </CardHeader>
+        <CardBody padding="large">
+          <Text variant="body2">Large padding variant</Text>
+        </CardBody>
+      </Card>
+    </Stack>
+  );
+}

package/src/components/Card/card.tsx

@@ -0,0 +1,32 @@
+import { Surface, type SurfaceProps } from "../Surface/surface";
+
+import { HStack, type HStackProps } from "../Stack/stack";
+import { Box, type BoxProps } from "../Box/box";
+import { Text, type TextProps } from "../Text";
+
+function Card(props: SurfaceProps) {
+  return <Surface p="medium" withBorder variant="sunken" {...props} />;
+}
+
+function CardHeader(props: BoxProps) {
+  return <Box marginBottom={"md"} {...props} />;
+}
+
+function CardBody(props: BoxProps) {
+  return <Box {...props} />;
+}
+
+function CardFooter(props: HStackProps) {
+  return <HStack justify="end" gap="small" {...props} />;
+}
+
+function CardTitle(props: TextProps) {
+  return <Text variant="h2" {...props} />;
+}
+
+function CardDescription(props: TextProps) {
+  return <Text variant="body2" color="secondary" {...props} />;
+}
+
+export type { SurfaceProps as CardProps, TextProps as CardTitleProps };
+export { Card, CardDescription, CardTitle, CardFooter, CardBody, CardHeader };

package/src/components/Card/docs-meta.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Card",
+  "description": "A content card container with header, body, footer, title, and description sub-components.",
+  "category": "Data Display",
+  "status": "stable",
+  "keywords": ["card", "container", "panel", "content", "surface"],
+  "related": ["Surface", "Box"]
+}

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export * from "./card";

package/src/components/Card/registry-meta.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "title": "Card",
+  "description": "A StyleX button component.",
+  "registryDependencies": ["box"],
+  "files": [
+    {
+      "file": "card.tsx",
+      "type": "registry:ui",
+      "target": "@ui/Card/card.tsx"
+    }
+  ]
+}