@blenx-dev/core 0.1.0

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/index.ts

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

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="md" 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="sm" {...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/index.ts

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

package/src/components/Checkbox/checkbox.css.ts

@@ -0,0 +1,76 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: 18,
+  height: 18,
+  borderRadius: tokenVars.borderRadius.sm,
+  borderWidth: tokenVars.borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  backgroundColor: semanticVars.background.default,
+  outline: "none",
+  transitionProperty: "box-shadow",
+  transitionDuration: "150ms",
+  selectors: {
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+  },
+  "@media": {
+    "screen and (min-width: 640px)": {
+      width: 16,
+      height: 16,
+    },
+  },
+});
+
+export const rootDisabled = style({
+  cursor: "not-allowed",
+  opacity: 0.64,
+});
+
+export const group = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: tokenVars.spacing.sm,
+});
+
+export const indicator = style({
+  position: "absolute",
+  top: -1,
+  left: -1,
+  right: -1,
+  bottom: -1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: tokenVars.borderRadius.sm,
+  color: semanticVars.interactive.primaryFg,
+});
+
+export const indicatorChecked = style({
+  backgroundColor: semanticVars.interactive.primary.default,
+  color: semanticVars.interactive.primaryFg,
+});
+
+export const indicatorIndeterminate = style({
+  color: semanticVars.text.primary,
+});
+
+export const icon = style({
+  width: 14,
+  height: 14,
+  "@media": {
+    "screen and (min-width: 640px)": {
+      width: 12,
+      height: 12,
+    },
+  },
+});

package/src/components/Checkbox/checkbox.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
+import clsx from "clsx";
+import {
+  group,
+  root,
+  rootDisabled,
+  indicator,
+  indicatorChecked,
+  indicatorIndeterminate,
+  icon,
+} from "./checkbox.css";
+
+type CheckboxGroupProps = CheckboxGroupPrimitive.Props & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+type CheckboxProps = Omit<CheckboxPrimitive.Root.Props, "style" | "className"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function CheckboxGroup({ className, style, ...props }: CheckboxGroupProps) {
+  return <CheckboxGroupPrimitive className={clsx(group, className)} style={style} {...props} />;
+}
+
+function Checkbox({ className, style, ...props }: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      {...props}
+      render={(rootProps, { disabled }) => (
+        <span
+          {...rootProps}
+          className={clsx(root, disabled && rootDisabled, className)}
+          style={style}
+          data-slot="checkbox"
+        >
+          <CheckboxPrimitive.Indicator
+            render={(_indicatorProps, state) => (
+              <span
+                {..._indicatorProps}
+                className={clsx(
+                  indicator,
+                  state.checked && indicatorChecked,
+                  state.indeterminate && indicatorIndeterminate,
+                )}
+                data-slot="checkbox-indicator"
+              >
+                {state.indeterminate ? (
+                  <svg
+                    aria-hidden="true"
+                    className={icon}
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M5.252 12h13.496" />
+                  </svg>
+                ) : (
+                  <svg
+                    aria-hidden="true"
+                    className={icon}
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+                  </svg>
+                )}
+              </span>
+            )}
+          />
+        </span>
+      )}
+    />
+  );
+}
+
+export { Checkbox };

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, CheckboxGroup } from "./checkbox";

package/src/components/CloseButton/close-button.css.ts

@@ -0,0 +1,11 @@
+import { style } from "@vanilla-extract/css";
+
+export const icon = style({
+  width: "16px",
+  height: "16px",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+});

package/src/components/CloseButton/close-button.tsx

@@ -0,0 +1,15 @@
+import { IconButton, type IconButtonProps } from "../IconButton/icon-button";
+import { icon } from "./close-button.css";
+
+export type { IconButtonProps as CloseButtonProps };
+
+export function CloseButton(props: IconButtonProps) {
+  return (
+    <IconButton {...props}>
+      <svg className={icon} viewBox="0 0 24 24" aria-hidden="true">
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </IconButton>
+  );
+}

package/src/components/CloseButton/index.ts

@@ -0,0 +1,2 @@
+export { CloseButton } from "./close-button";
+export type { CloseButtonProps } from "./close-button";

package/src/components/ColorPicker/color-picker.tsx

@@ -0,0 +1,123 @@
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { HexAlphaColorPicker, HexColorInput } from "react-colorful";
+import { Button } from "../Button/button";
+import { ColorSwatch } from "../ColorSwatch/color-swatch";
+import { Field, FieldLabel } from "../Field/field";
+import { Input } from "../Input/input";
+import {
+  Popover,
+  PopoverArrow,
+  PopoverCompound,
+  PopoverPopup,
+  PopoverPositioner,
+  PopoverTrigger,
+} from "../Popover/popover";
+import { VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+
+const HEX_REGEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+
+type Props = {
+  value: string;
+  onChange: (color: string) => void;
+  label?: string;
+};
+
+export function ColorPicker({ value, onChange, label }: Props) {
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(value);
+  const lastValidRef = useRef(value);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const prevValueRef = useRef(value);
+
+  useEffect(() => {
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
+      setInternalValue(value);
+      lastValidRef.current = value;
+    }
+  }, [value]);
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (!nextOpen && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+    setOpen(nextOpen);
+  }, []);
+
+  const handleHexInputChange = useCallback(
+    (newColor: string) => {
+      setInternalValue(newColor);
+      if (HEX_REGEX.test(newColor)) {
+        lastValidRef.current = newColor;
+        onChange(newColor);
+      }
+    },
+    [onChange],
+  );
+
+  const revertToLastValid = useCallback(() => {
+    setInternalValue(lastValidRef.current);
+    onChange(lastValidRef.current);
+  }, [onChange]);
+
+  return (
+    <Field>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        {label && (
+          <FieldLabel
+            onClick={() => {
+              triggerRef.current?.click();
+              triggerRef.current?.focus();
+            }}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <PopoverTrigger
+          ref={triggerRef}
+          aria-label={label ? `${label} color picker` : "Color picker"}
+          render={<Button type="button" variant="outline" />}
+        >
+          <ColorSwatch color={value} size={20} />
+          <Text variant="body2">{value}</Text>
+          <CaretDownIcon />
+        </PopoverTrigger>
+        <PopoverCompound.Portal>
+          <PopoverPositioner sideOffset={6} side="bottom" align="start">
+            <PopoverPopup>
+              <PopoverArrow />
+              <VStack gap="xs">
+                <HexAlphaColorPicker
+                  color={internalValue}
+                  onChange={(color) => {
+                    setInternalValue(color);
+                    lastValidRef.current = color;
+                    onChange(color);
+                  }}
+                />
+                <Input
+                  size="sm"
+                  render={
+                    <HexColorInput
+                      color={internalValue}
+                      onChange={handleHexInputChange}
+                      onBlur={() => {
+                        if (!HEX_REGEX.test(internalValue)) {
+                          revertToLastValid();
+                        }
+                      }}
+                      prefixed
+                      aria-label="Hex color value"
+                    />
+                  }
+                />
+              </VStack>
+            </PopoverPopup>
+          </PopoverPositioner>
+        </PopoverCompound.Portal>
+      </Popover>
+    </Field>
+  );
+}

package/src/components/ColorPicker/index.ts

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

package/src/components/ColorSwatch/color-swatch.tsx

@@ -0,0 +1,21 @@
+type Props = {
+  color: string;
+  size?: number;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+export function ColorSwatch({ color, size = 16, style, className }: Props) {
+  return (
+    <span
+      className={className}
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: color,
+        borderRadius: 4,
+        ...style,
+      }}
+    />
+  );
+}

package/src/components/ColorSwatch/index.ts

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