@blenx-dev/core 0.1.0

package/src/components/DatePicker/date-picker.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { CalendarBlankIcon } from "@phosphor-icons/react";
+import { useRef, useState } from "react";
+import { Button } from "../Button/button";
+import { Calendar } from "../Calendar/calendar";
+import { Field, FieldError, FieldLabel } from "../Field/field";
+import {
+  Popover,
+  PopoverCompound,
+  PopoverPopup,
+  PopoverPositioner,
+  PopoverTrigger,
+} from "../Popover/popover";
+
+type Props = {
+  value: Date | undefined;
+  onChange: (date: Date | undefined) => void;
+  format?: (date: Date | undefined) => string;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+};
+
+export function DatePicker({
+  value,
+  onChange,
+  label,
+  format,
+  placeholder = "Pick a date",
+  error,
+  disabled,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const handleSelect = (date: Date | undefined) => {
+    onChange(date);
+    setOpen(false);
+  };
+
+  return (
+    <Field>
+      <Popover open={open} onOpenChange={setOpen}>
+        {label && (
+          <FieldLabel
+            onClick={() => {
+              triggerRef.current?.click();
+              triggerRef.current?.focus();
+            }}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <PopoverTrigger
+          ref={triggerRef}
+          disabled={disabled}
+          render={<Button type="button" variant="outline" fullWidth />}
+        >
+          <CalendarBlankIcon size={18} />
+          {value ? (format?.(value) ?? value.toString()) : placeholder}
+        </PopoverTrigger>
+        <PopoverCompound.Portal>
+          <PopoverPositioner sideOffset={6} side="bottom" align="start">
+            <PopoverPopup>
+              <Calendar mode="single" selected={value} onSelect={handleSelect} />
+            </PopoverPopup>
+          </PopoverPositioner>
+        </PopoverCompound.Portal>
+      </Popover>
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  );
+}

package/src/components/DatePicker/index.ts

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

package/src/components/Dialog/dialog.css.ts

@@ -0,0 +1,57 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: tokenVars.spacing.sm,
+  padding: tokenVars.spacing.lg,
+  boxSizing: "border-box",
+  selectors: {
+    "[data-has-panel] &": {
+      paddingBottom: tokenVars.spacing.sm,
+    },
+  },
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column-reverse",
+  gap: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.lg,
+  paddingRight: tokenVars.spacing.lg,
+  boxSizing: "border-box",
+  paddingBottom: "env(safe-area-inset-bottom)",
+});
+
+export const footerDefault = style({
+  borderTopWidth: tokenVars.borderWidth.thin,
+  borderTopStyle: "solid",
+  borderTopColor: semanticVars.border.subtle,
+  backgroundColor: semanticVars.background.subtle,
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.md,
+});
+
+export const footerBare = style({
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.lg,
+});
+
+export const title = style({
+  fontSize: "20px",
+  lineHeight: 1,
+  fontWeight: 600,
+  color: semanticVars.text.primary,
+});
+
+export const description = style({
+  fontSize: "14px",
+  lineHeight: 1.4,
+  color: semanticVars.text.secondary,
+});
+
+export const panel = style({
+  boxSizing: "border-box",
+  padding: tokenVars.spacing.lg,
+});

package/src/components/Dialog/dialog.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type React from "react";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import { header, footer, footerDefault, footerBare, title, description, panel } from "./dialog.css";
+import { CloseButton } from "../CloseButton";
+import type { _BaseDivProps } from "../../utils/types";
+import {
+  backdrop,
+  popup,
+  viewport,
+  viewportShellBottomStickOnMobile,
+  popupBottomStickOnMobile,
+} from "../../utils/drawer-styles.css";
+import { Box } from "../Box";
+const DialogCreateHandle: typeof DialogPrimitive.createHandle = DialogPrimitive.createHandle;
+
+const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;
+
+const DialogPortal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal;
+
+function DialogTrigger(props: DialogPrimitive.Trigger.Props): React.ReactElement {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+export function DialogClose(props: DialogPrimitive.Close.Props): React.ReactElement {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+export function DialogBackdrop(props: DialogPrimitive.Backdrop.Props): React.ReactElement {
+  return <DialogPrimitive.Backdrop className={backdrop} data-slot="dialog-backdrop" {...props} />;
+}
+
+type DialogViewportProps = DialogPrimitive.Viewport.Props & {
+  bottomStickOnMobile?: boolean;
+};
+
+export function DialogViewport({
+  bottomStickOnMobile,
+  className,
+  ...props
+}: DialogViewportProps): React.ReactElement {
+  return (
+    <DialogPrimitive.Viewport
+      className={clsx(viewport, bottomStickOnMobile && viewportShellBottomStickOnMobile, className)}
+      data-slot="dialog-viewport"
+      {...props}
+    />
+  );
+}
+
+export function DialogPopup({
+  children,
+  showCloseButton = true,
+  bottomStickOnMobile = true,
+  closeProps,
+  portalProps,
+  className,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  bottomStickOnMobile?: boolean;
+  closeProps?: DialogPrimitive.Close.Props;
+  portalProps?: DialogPrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <DialogPortal {...portalProps}>
+      <DialogBackdrop />
+      <DialogViewport bottomStickOnMobile={bottomStickOnMobile}>
+        <DialogPrimitive.Popup
+          className={clsx(popup, bottomStickOnMobile && popupBottomStickOnMobile, className)}
+          data-slot="dialog-popup"
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <Box position="absolute" top="xs" right="xs">
+              <DialogPrimitive.Close
+                aria-label="Close"
+                render={<CloseButton variant="ghost" />}
+                {...closeProps}
+              />
+            </Box>
+          )}
+        </DialogPrimitive.Popup>
+      </DialogViewport>
+    </DialogPortal>
+  );
+}
+
+type HeaderProps = _BaseDivProps;
+
+export function DialogHeader({ className, render, ...props }: HeaderProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(header, className),
+      "data-slot": "dialog-header",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+type FooterProps = _BaseDivProps & {
+  variant?: "default" | "bare";
+};
+
+export function DialogFooter({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: FooterProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(
+        footer,
+        variant === "default" && footerDefault,
+        variant === "bare" && footerBare,
+        className,
+      ),
+      "data-slot": "dialog-footer",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+export function DialogTitle(props: DialogPrimitive.Title.Props): React.ReactElement {
+  return <DialogPrimitive.Title className={title} data-slot="dialog-title" {...props} />;
+}
+
+export function DialogDescription(props: DialogPrimitive.Description.Props): React.ReactElement {
+  return (
+    <DialogPrimitive.Description
+      className={description}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+function DialogPanel({
+  scrollFade = true,
+  render,
+  className,
+  ...props
+}: _BaseDivProps & {
+  scrollFade?: boolean;
+}): React.ReactElement {
+  return (
+    <ScrollArea scrollFade={scrollFade}>
+      {useRender({
+        defaultTagName: "div",
+        props: {
+          className: clsx(panel, className),
+          "data-slot": "dialog-panel",
+          ...props,
+        } as never,
+        render,
+      })}
+    </ScrollArea>
+  );
+}
+
+export type { DialogViewportProps };
+
+export {
+  Dialog,
+  DialogBackdrop as DialogOverlay,
+  DialogCreateHandle,
+  DialogPanel,
+  DialogPopup as DialogContent,
+  DialogPortal,
+  DialogTrigger,
+};

package/src/components/Dialog/index.ts

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

package/src/components/Drawer/drawer.css.ts

@@ -0,0 +1,404 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const swipeArea = style({
+  position: "fixed",
+  zIndex: 50,
+  touchAction: "none",
+});
+
+export const swipeAreaBottom = style({
+  left: 0,
+  right: 0,
+  bottom: 0,
+  height: "32px",
+});
+
+export const swipeAreaTop = style({
+  left: 0,
+  right: 0,
+  top: 0,
+  height: "32px",
+});
+
+export const swipeAreaLeft = style({
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: "32px",
+});
+
+export const swipeAreaRight = style({
+  top: 0,
+  bottom: 0,
+  right: 0,
+  width: "32px",
+});
+
+export const backdrop = style({
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  backdropFilter: "blur(4px)",
+  transitionProperty: "opacity",
+  transitionDuration: "450ms",
+  transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const viewport = style({
+  position: "fixed",
+  inset: 0,
+  touchAction: "none",
+  boxSizing: "border-box",
+});
+
+export const viewportBottom = style({
+  display: "grid",
+  gridTemplateRows: "1fr auto",
+  paddingTop: "48px",
+});
+
+export const viewportTop = style({
+  display: "grid",
+  gridTemplateRows: "auto 1fr",
+  paddingBottom: "48px",
+});
+
+export const viewportLeft = style({
+  display: "flex",
+  justifyContent: "flex-start",
+});
+
+export const viewportRight = style({
+  display: "flex",
+  justifyContent: "flex-end",
+});
+
+export const viewportInset = style({
+  paddingLeft: tokenVars.spacing.md,
+  paddingRight: tokenVars.spacing.md,
+});
+
+export const popup = style({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "100%",
+  minHeight: 0,
+  minWidth: 0,
+  width: "100%",
+  boxSizing: "border-box",
+  backgroundColor: semanticVars.surface.default,
+  color: semanticVars.text.primary,
+  borderStyle: "solid",
+  borderColor: semanticVars.border.default,
+  outline: "none",
+  willChange: "transform",
+  transitionProperty: "transform, box-shadow, height, background-color, margin, padding",
+  transitionDuration: "450ms",
+  transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const popupDefault = style({
+  boxShadow: tokenVars.shadow.lg,
+});
+
+export const popupStraight = style({
+  vars: {
+    "--stack-step": "0",
+  },
+});
+
+export const popupInset = style({
+  borderWidth: "none",
+  borderRadius: "none",
+  "@media": {
+    "(min-width: 640px)": {
+      borderWidth: tokenVars.borderWidth.thin,
+      borderRadius: tokenVars.borderRadius.xl,
+    },
+  },
+});
+
+export const popupBottom = style({
+  gridRowStart: 2,
+  borderTopWidth: tokenVars.borderWidth.thin,
+  borderTopLeftRadius: tokenVars.borderRadius.xl,
+  borderTopRightRadius: tokenVars.borderRadius.xl,
+});
+
+export const popupTop = style({
+  borderBottomWidth: tokenVars.borderWidth.thin,
+  borderBottomLeftRadius: tokenVars.borderRadius.xl,
+  borderBottomRightRadius: tokenVars.borderRadius.xl,
+});
+
+export const popupLeft = style({
+  width: "calc(100% - 48px)",
+  maxWidth: "28rem",
+  borderRightWidth: tokenVars.borderWidth.thin,
+  borderTopRightRadius: tokenVars.borderRadius.xl,
+  borderBottomRightRadius: tokenVars.borderRadius.xl,
+});
+
+export const popupRight = style({
+  width: "calc(100% - 48px)",
+  maxWidth: "28rem",
+  borderLeftWidth: tokenVars.borderWidth.thin,
+  borderTopLeftRadius: tokenVars.borderRadius.xl,
+  borderBottomLeftRadius: tokenVars.borderRadius.xl,
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: tokenVars.spacing.sm,
+  paddingTop: tokenVars.spacing.lg,
+  paddingLeft: tokenVars.spacing.lg,
+  paddingRight: tokenVars.spacing.lg,
+  boxSizing: "border-box",
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column-reverse",
+  gap: tokenVars.spacing.sm,
+  paddingLeft: tokenVars.spacing.lg,
+  paddingRight: tokenVars.spacing.lg,
+  boxSizing: "border-box",
+  "@media": {
+    "(min-width: 640px)": {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+    },
+  },
+});
+
+export const footerDefault = style({
+  borderTopWidth: tokenVars.borderWidth.thin,
+  borderTopStyle: "solid",
+  borderTopColor: semanticVars.border.subtle,
+  backgroundColor: semanticVars.background.subtle,
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.md,
+});
+
+export const footerBare = style({
+  paddingTop: tokenVars.spacing.md,
+  paddingBottom: tokenVars.spacing.lg,
+});
+
+export const title = style({
+  fontSize: "20px",
+  lineHeight: 1,
+  fontWeight: tokenVars.fontWeight.semibold,
+});
+
+export const description = style({
+  fontSize: tokenVars.fontSize.sm,
+  lineHeight: 1.4,
+  color: semanticVars.text.secondary,
+});
+
+export const panel = style({
+  boxSizing: "border-box",
+  paddingTop: tokenVars.spacing.lg,
+  paddingLeft: tokenVars.spacing.lg,
+  paddingRight: tokenVars.spacing.lg,
+  paddingBottom: tokenVars.spacing.lg,
+});
+
+export const bar = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: tokenVars.spacing.sm,
+  touchAction: "none",
+});
+
+export const barHorizontal = style({
+  insetInline: 0,
+  height: "48px",
+});
+
+export const barVertical = style({
+  insetBlock: 0,
+  width: "48px",
+});
+
+export const barTop = style({
+  bottom: 0,
+});
+
+export const barBottom = style({
+  top: 0,
+});
+
+export const barLeft = style({
+  right: 0,
+});
+
+export const barRight = style({
+  left: 0,
+});
+
+export const menu = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const menuItem = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  minHeight: "36px",
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  borderRadius: tokenVars.borderRadius.sm,
+  border: "none",
+  backgroundColor: "transparent",
+  color: semanticVars.text.primary,
+  fontSize: tokenVars.fontSize.md,
+  textAlign: "left",
+  cursor: "default",
+  outline: "none",
+});
+
+export const menuItemDestructive = style({
+  color: semanticVars.status.danger.default,
+});
+
+export const separator = style({
+  height: "1px",
+  backgroundColor: semanticVars.border.subtle,
+  marginTop: tokenVars.spacing.xs,
+  marginBottom: tokenVars.spacing.xs,
+});
+
+export const menuGroup = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const menuGroupLabel = style({
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.medium,
+  color: semanticVars.text.secondary,
+});
+
+export const menuTrigger = style({
+  display: "flex",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  minHeight: "36px",
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  borderRadius: tokenVars.borderRadius.sm,
+  backgroundColor: "transparent",
+  border: "none",
+  color: semanticVars.text.primary,
+});
+
+export const menuTriggerIcon = style({
+  marginLeft: "auto",
+  marginRight: "-2px",
+  opacity: 0.8,
+});
+
+export const menuCheckbox = style({
+  display: "grid",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  minHeight: "36px",
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.sm,
+  borderRadius: tokenVars.borderRadius.sm,
+  backgroundColor: "transparent",
+  border: "none",
+  color: semanticVars.text.primary,
+});
+
+export const menuCheckboxDefault = style({
+  gridTemplateColumns: "1rem 1fr",
+  paddingRight: tokenVars.spacing.md,
+});
+
+export const menuCheckboxSwitch = style({
+  gridTemplateColumns: "1fr auto",
+  paddingRight: tokenVars.spacing.xs,
+});
+
+export const menuCheckboxSwitchLabel = style({
+  gridColumnStart: 1,
+});
+
+export const menuCheckboxSwitchIndicator = style({
+  gridColumnStart: 2,
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "2px",
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.border.subtle,
+});
+
+export const menuCheckboxSwitchThumb = style({
+  width: "14px",
+  height: "14px",
+  borderRadius: tokenVars.borderRadius.full,
+  backgroundColor: semanticVars.background.default,
+});
+
+export const menuCheckboxIndicator = style({
+  gridColumnStart: 1,
+});
+
+export const menuCheckboxLabel = style({
+  gridColumnStart: 2,
+});
+
+export const menuRadio = style({
+  display: "grid",
+  alignItems: "center",
+  gap: tokenVars.spacing.sm,
+  minHeight: "36px",
+  paddingTop: tokenVars.spacing.xs,
+  paddingBottom: tokenVars.spacing.xs,
+  paddingLeft: tokenVars.spacing.sm,
+  paddingRight: tokenVars.spacing.md,
+  borderRadius: tokenVars.borderRadius.sm,
+  backgroundColor: "transparent",
+  border: "none",
+  color: semanticVars.text.primary,
+  gridTemplateColumns: "1rem 1fr",
+});
+
+export const menuRadioIndicator = style({
+  gridColumnStart: 1,
+});
+
+export const menuRadioLabel = style({
+  gridColumnStart: 2,
+});