@blenx-dev/components 0.0.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/docs-meta.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Date Picker",
+  "description": "A date picker built as a popover containing a calendar with formatted date display.",
+  "category": "Forms",
+  "status": "stable",
+  "keywords": ["date", "date picker", "calendar", "popover", "form"],
+  "related": ["Calendar", "Popover", "Field", "Button"]
+}

package/src/components/DatePicker/index.ts

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

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

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "datepicker",
+  "type": "registry:ui",
+  "title": "DatePicker",
+  "description": "A StyleX Date Picker component.",
+  "registryDependencies": ["button", "calendar", "field", "popover"],
+  "files": [
+    {
+      "file": "date-picker.tsx",
+      "type": "registry:ui",
+      "target": "@ui/DatePicker/date-picker.tsx"
+    }
+  ]
+}

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

@@ -0,0 +1,155 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, borderWidth, spacing } from "@blenx-dev/theme/tokens";
+
+export const backdrop = style({
+  position: "fixed",
+  inset: 0,
+  zIndex: 50,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  backdropFilter: "blur(4px)",
+  transitionProperty: "opacity, transform",
+  transitionDuration: "200ms",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const viewport = style({
+  position: "fixed",
+  inset: 0,
+  zIndex: 51,
+  display: "grid",
+  gridTemplateRows: "1fr auto 3fr",
+  justifyItems: "center",
+  padding: spacing.medium,
+  boxSizing: "border-box",
+});
+
+export const popup = style({
+  position: "relative",
+  gridRowStart: 2,
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  minWidth: 0,
+  maxWidth: "32rem",
+  maxHeight: "100%",
+  minHeight: 0,
+  transformOrigin: "center",
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.xlarge,
+  backgroundColor: themeContract.surface,
+  color: themeContract.contentPrimary,
+  boxSizing: "border-box",
+  opacity: "calc(1 - var(--nested-dialogs))",
+  outline: "none",
+  transitionProperty: "transform, opacity",
+  transitionDuration: "200ms",
+  transitionTimingFunction: "ease-in-out",
+  willChange: "transform",
+  "::before": {
+    content: '""',
+    pointerEvents: "none",
+    position: "absolute",
+    inset: 0,
+    borderRadius: "calc(16px - 1px)",
+    boxShadow: "0 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionProperty: "none",
+      transitionDuration: "0ms",
+    },
+  },
+});
+
+export const viewportShellBottomStickOnMobile = style({
+  "@media": {
+    "(max-width: 768px)": {
+      display: "flex",
+      alignItems: "flex-end",
+      justifyContent: "center",
+      padding: spacing.small,
+      paddingBottom: 0,
+    },
+  },
+});
+
+export const popupBottomStickOnMobile = style({
+  "@media": {
+    "(max-width: 768px)": {
+      width: "100%",
+      maxWidth: "100%",
+      maxHeight: "90svh",
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  },
+});
+
+export const closeButton = style({
+  position: "absolute",
+  top: spacing.small,
+  insetInlineEnd: spacing.small,
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing.small,
+  padding: spacing.large,
+  boxSizing: "border-box",
+  selectors: {
+    "[data-has-panel] &": {
+      paddingBottom: spacing.small,
+    },
+  },
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column-reverse",
+  gap: spacing.small,
+  paddingLeft: spacing.large,
+  paddingRight: spacing.large,
+  boxSizing: "border-box",
+  paddingBottom: "env(safe-area-inset-bottom)",
+});
+
+export const footerDefault = style({
+  borderTopWidth: borderWidth.thin,
+  borderTopStyle: "solid",
+  borderTopColor: themeContract.borderSubtle,
+  backgroundColor: themeContract.backgroundSubtle,
+  paddingTop: spacing.medium,
+  paddingBottom: spacing.medium,
+});
+
+export const footerBare = style({
+  paddingTop: spacing.medium,
+  paddingBottom: spacing.large,
+});
+
+export const title = style({
+  fontSize: "20px",
+  lineHeight: 1,
+  fontWeight: 600,
+  color: themeContract.contentPrimary,
+});
+
+export const description = style({
+  fontSize: "14px",
+  lineHeight: 1.4,
+  color: themeContract.contentSecondary,
+});
+
+export const panel = style({
+  boxSizing: "border-box",
+  padding: spacing.large,
+});

package/src/components/Dialog/dialog.demo.tsx

@@ -0,0 +1,39 @@
+import { Button } from "../Button/button";
+import { HStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>Open Dialog</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Confirm Action</DialogTitle>
+          <DialogDescription>Are you sure you want to proceed with this action?</DialogDescription>
+        </DialogHeader>
+        <DialogPanel>
+          <Text variant="body2">This action cannot be undone. Please confirm your choice.</Text>
+        </DialogPanel>
+        <DialogFooter>
+          <HStack gap="small" justify="end" wrap>
+            <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
+            <Button>Confirm</Button>
+          </HStack>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const demos = [{ name: "Default", component: DialogDemo }];

package/src/components/Dialog/dialog.doc.tsx

@@ -0,0 +1,33 @@
+import { Button } from "../Button/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+export function DefaultStory() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button>Open Dialog</Button>} />
+      <DialogPopup>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>Dialog description text</DialogDescription>
+        </DialogHeader>
+        <DialogPanel>
+          <div>Dialog content goes here.</div>
+        </DialogPanel>
+        <DialogFooter>
+          <DialogClose render={<Button variant="soft">Close</Button>} />
+          <Button variant="solid">Confirm</Button>
+        </DialogFooter>
+      </DialogPopup>
+    </Dialog>
+  );
+}

package/src/components/Dialog/dialog.tsx

@@ -0,0 +1,186 @@
+"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 {
+  backdrop,
+  viewport,
+  popup,
+  viewportShellBottomStickOnMobile,
+  popupBottomStickOnMobile,
+  closeButton as closeButtonStyle,
+  header,
+  footer,
+  footerDefault,
+  footerBare,
+  title,
+  description,
+  panel,
+} from "./dialog.css";
+import { CloseButton } from "../CloseButton";
+import type { _BaseDivProps } from "../../utils/types";
+
+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 && (
+            <DialogPrimitive.Close
+              aria-label="Close"
+              render={<CloseButton variant="ghost" className={closeButtonStyle} />}
+              {...closeProps}
+            />
+          )}
+        </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/docs-meta.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Dialog",
+  "description": "A modal dialog with backdrop, header, footer, scroll panel, and mobile bottom sheet behavior.",
+  "category": "Overlay",
+  "status": "stable",
+  "keywords": ["dialog", "modal", "popup", "overlay", "alert"],
+  "related": ["AlertDialog", "Button", "ScrollArea", "Drawer"],
+  "accessibility": {
+    "keyboard": ["Escape"],
+    "aria": ["role", "aria-modal", "aria-labelledby", "aria-describedby"]
+  }
+}

package/src/components/Dialog/index.ts

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

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

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

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Drawer",
+  "description": "A swipeable drawer panel that slides in from any side. Supports nested menus, radio groups, and checkboxes.",
+  "category": "Overlay",
+  "status": "stable",
+  "keywords": ["drawer", "panel", "slide", "swipe", "sidebar", "menu"],
+  "related": ["ScrollArea", "Dialog", "Button"]
+}