@blenx-dev/components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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