@blenx-dev/components 0.0.1 → 0.0.3

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

@@ -1,188 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,143 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-{
-  "$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

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

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

@@ -1,20 +0,0 @@
-{
-  "$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

@@ -1,177 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,9 +0,0 @@
-{
-  "$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

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

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

@@ -1,15 +0,0 @@
-{
-  "$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"
-    }
-  ]
-}