@blenx-dev/components 0.0.0

package/src/components/AlertDialog/alert-dialog.css.ts

@@ -0,0 +1,146 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderWidth, fontSize, fontWeight, lineHeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const backdrop = style({
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  backdropFilter: "blur(4px)",
+  transitionProperty: "transform, opacity",
+  transitionDuration: "200ms",
+});
+
+export const viewport = style({
+  position: "fixed",
+  inset: 0,
+  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%",
+  maxWidth: "28rem",
+  minHeight: 0,
+  maxHeight: "calc(100svh - 80px)",
+  transformOrigin: "center",
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: themeContract.borderRadius,
+  backgroundColor: themeContract.surface,
+  color: themeContract.contentPrimary,
+  boxSizing: "border-box",
+  opacity: "calc(1 - var(--nested-dialogs))",
+  outline: "none",
+  boxShadow: themeContract.shadowLg,
+  transitionProperty: "opacity, translate",
+  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)",
+  },
+});
+
+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: "70svh",
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  },
+});
+
+export const closeButton = style({
+  position: "absolute",
+  top: 4,
+  right: 4,
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing.xxsmall,
+  padding: spacing.medium,
+  boxSizing: "border-box",
+  paddingBottom: spacing.xsmall,
+});
+
+export const footer = style({
+  display: "flex",
+  flexDirection: "column-reverse",
+  gap: spacing.small,
+  paddingLeft: spacing.medium,
+  paddingRight: spacing.medium,
+  boxSizing: "border-box",
+  "@media": {
+    "(min-width: 640px)": {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      borderBottomLeftRadius: "calc(16px - 1px)",
+      borderBottomRightRadius: "calc(16px - 1px)",
+    },
+  },
+});
+
+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: fontSize.large,
+  lineHeight: lineHeight.tight,
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentPrimary,
+});
+
+export const description = style({
+  fontSize: fontSize.small,
+  lineHeight: lineHeight.normal,
+  color: themeContract.contentSecondary,
+});
+
+export const panel = style({
+  boxSizing: "border-box",
+  padding: spacing.medium,
+  paddingTop: spacing.xxsmall,
+  paddingBottom: spacing.xxsmall,
+});

package/src/components/AlertDialog/alert-dialog.demo.tsx

@@ -0,0 +1,59 @@
+import { TrashIcon } from "@phosphor-icons/react";
+import { Button } from "../Button/button";
+import { HStack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPanel,
+  AlertDialogPopup,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+import { Box } from "../Box/box";
+
+export function AlertDialogDemo() {
+  return (
+    <VStack gap="medium">
+      <Text variant="h6">Alert Dialog</Text>
+      <Box>
+        <AlertDialog>
+          <AlertDialogTrigger
+            render={
+              <Button variant="outline" intent="danger">
+                <TrashIcon /> Delete Project
+              </Button>
+            }
+          >
+            Delete
+          </AlertDialogTrigger>
+          <AlertDialogPopup>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete project</AlertDialogTitle>
+              <AlertDialogDescription>
+                This will permanently delete the project and all of its data.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogPanel>
+              <Text variant="body2">
+                This action cannot be undone. All files, settings, and member permissions will be
+                removed.
+              </Text>
+            </AlertDialogPanel>
+            <AlertDialogFooter>
+              <HStack gap="small" justify="end" wrap>
+                <AlertDialogClose render={<Button variant="ghost" />}>Cancel</AlertDialogClose>
+                <Button intent="danger">Delete</Button>
+              </HStack>
+            </AlertDialogFooter>
+          </AlertDialogPopup>
+        </AlertDialog>
+      </Box>
+    </VStack>
+  );
+}
+
+export const demos = [{ name: "Default", component: AlertDialogDemo }];

package/src/components/AlertDialog/alert-dialog.doc.tsx

@@ -0,0 +1,31 @@
+import { Button } from "../Button/button";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPanel,
+  AlertDialogPopup,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+
+export function DefaultStory() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={<Button intent="danger">Delete</Button>} />
+      <AlertDialogPopup>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>This action cannot be undone.s</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogPanel />
+        <AlertDialogFooter>
+          <AlertDialogClose render={<Button variant="soft">Cancel</Button>} />
+          <Button intent="danger">Delete</Button>
+        </AlertDialogFooter>
+      </AlertDialogPopup>
+    </AlertDialog>
+  );
+}

package/src/components/AlertDialog/alert-dialog.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { useRender } from "@base-ui/react/use-render";
+import clsx from "clsx";
+import type React from "react";
+import type { _BaseDivProps } from "../../utils/types";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+import {
+  backdrop,
+  viewport,
+  popup,
+  viewportShellBottomStickOnMobile,
+  popupBottomStickOnMobile,
+  header,
+  footer,
+  footerDefault,
+  footerBare,
+  title,
+  description,
+  panel,
+} from "./alert-dialog.css";
+import { CloseButton } from "../CloseButton";
+import { Box } from "../Box/box";
+
+function AlertDialog(props: AlertDialogPrimitive.Root.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Root {...props} />;
+}
+
+function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogClose(props: AlertDialogPrimitive.Close.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />;
+}
+
+function AlertDialogPortal(props: AlertDialogPrimitive.Portal.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Portal {...props} />;
+}
+
+function AlertDialogBackdrop(props: AlertDialogPrimitive.Backdrop.Props): React.ReactElement {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      className={backdrop}
+      data-slot="alert-dialog-backdrop"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogViewport(
+  props: AlertDialogPrimitive.Viewport.Props & {
+    bottomStickOnMobile?: boolean;
+  },
+): React.ReactElement {
+  const { bottomStickOnMobile, className, ...restProps } = props;
+  return (
+    <AlertDialogPrimitive.Viewport
+      className={clsx(viewport, bottomStickOnMobile && viewportShellBottomStickOnMobile, className)}
+      data-slot="alert-dialog-viewport"
+      {...restProps}
+    />
+  );
+}
+
+type AlertDialogPopupProps = AlertDialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  closeProps?: AlertDialogPrimitive.Close.Props;
+  bottomStickOnMobile?: boolean;
+};
+
+function AlertDialogPopup({
+  children,
+  bottomStickOnMobile = true,
+  showCloseButton = true,
+  closeProps,
+  className,
+  ...props
+}: AlertDialogPopupProps): React.ReactElement {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogBackdrop />
+      <AlertDialogViewport bottomStickOnMobile={bottomStickOnMobile}>
+        <AlertDialogPrimitive.Popup
+          className={clsx(popup, bottomStickOnMobile && popupBottomStickOnMobile, className)}
+          data-slot="alert-dialog-popup"
+          {...props}
+        >
+          {showCloseButton && (
+            <Box position="absolute" right="xsmall" top="xsmall">
+              <AlertDialogPrimitive.Close
+                aria-label="Close"
+                render={<CloseButton variant="ghost" />}
+                {...closeProps}
+              />
+            </Box>
+          )}
+          {children}
+        </AlertDialogPrimitive.Popup>
+      </AlertDialogViewport>
+    </AlertDialogPortal>
+  );
+}
+
+type HeaderProps = _BaseDivProps;
+
+function AlertDialogHeader({ className, render, ...props }: HeaderProps): React.ReactElement {
+  return useRender({
+    defaultTagName: "div",
+    props: {
+      className: clsx(header, className),
+      "data-slot": "alert-dialog-header",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+type FooterProps = _BaseDivProps & {
+  variant?: "default" | "bare";
+};
+
+function AlertDialogFooter({
+  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": "alert-dialog-footer",
+      ...props,
+    } as never,
+    render,
+  });
+}
+
+function AlertDialogTitle(props: AlertDialogPrimitive.Title.Props): React.ReactElement {
+  return <AlertDialogPrimitive.Title className={title} data-slot="alert-dialog-title" {...props} />;
+}
+
+function AlertDialogDescription(props: AlertDialogPrimitive.Description.Props): React.ReactElement {
+  return (
+    <AlertDialogPrimitive.Description
+      className={description}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogPanel({
+  scrollFade = true,
+  render,
+  className,
+  ...props
+}: _BaseDivProps & {
+  scrollFade?: boolean;
+}): React.ReactElement {
+  return (
+    <ScrollArea scrollFade={scrollFade} height="fit-content">
+      {useRender({
+        defaultTagName: "div",
+        props: {
+          className: clsx(panel, className),
+          "data-slot": "alert-dialog-panel",
+          ...props,
+        } as never,
+        render,
+      })}
+    </ScrollArea>
+  );
+}
+
+export type { AlertDialogPopupProps };
+export {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPanel,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogViewport,
+};

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

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Alert Dialog",
+  "componentKey": "alert-dialog",
+  "description": "A confirmation or alert modal dialog for critical user interactions requiring acknowledgment.",
+  "category": "Overlay",
+  "status": "stable",
+  "keywords": ["dialog", "modal", "alert", "confirmation", "confirm"],
+  "related": ["Dialog", "Button", "ScrollArea"],
+  "accessibility": {
+    "keyboard": ["Escape"],
+    "aria": ["role", "aria-modal", "aria-labelledby", "aria-describedby"]
+  }
+}

package/src/components/AlertDialog/index.ts

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

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

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

package/src/components/Autocomplete/autocomplete.css.ts

@@ -0,0 +1,168 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, borderWidth, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const inputGroup = style({
+  position: "relative",
+  width: "100%",
+  minWidth: 0,
+  color: themeContract.contentPrimary,
+});
+
+export const inputSize = style({
+  vars: {
+    "--autocomplete-input-padding-inline-start": "33px",
+    "--autocomplete-input-padding-inline-end": "28px",
+  },
+});
+
+export const inputSizeSm = style({
+  paddingInlineStart: "31px",
+  paddingInlineEnd: "26px",
+});
+
+export const inputSizeDefault = style({
+  paddingInlineStart: "33px",
+  paddingInlineEnd: "28px",
+});
+
+export const inputSizeLg = style({
+  paddingInlineStart: "35px",
+  paddingInlineEnd: "30px",
+});
+
+export const startAddon = style({
+  pointerEvents: "none",
+  position: "absolute",
+  insetBlock: 0,
+  insetInlineStart: borderWidth.thin,
+  zIndex: 1,
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.8,
+});
+
+export const startAddonDefault = style({
+  paddingInlineStart: "11px",
+});
+
+export const startAddonSmall = style({
+  paddingInlineStart: "9px",
+});
+
+export const adornment = style({
+  position: "absolute",
+  top: "50%",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  transform: "translateY(-50%)",
+  borderRadius: borderRadius.medium,
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: "transparent",
+  opacity: 0.8,
+  outline: "none",
+  transitionProperty: "color, background-color, box-shadow, opacity",
+  transitionDuration: "150ms",
+});
+
+export const adornmentSmall = style({
+  width: "28px",
+  height: "28px",
+});
+
+export const adornmentDefault = style({
+  width: "32px",
+  height: "32px",
+});
+
+export const adornmentEndSmall = style({
+  insetInlineEnd: spacing["0"],
+});
+
+export const adornmentEndDefault = style({
+  insetInlineEnd: spacing["0.5"],
+});
+
+export const positioner = style({
+  outline: "none",
+});
+
+export const popupShell = style({
+  position: "relative",
+  display: "flex",
+  maxHeight: "100%",
+  minWidth: "var(--anchor-width)",
+  maxWidth: "var(--available-width)",
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.large,
+  backgroundColor: themeContract.surface,
+  boxShadow: themeContract.shadowLg,
+  transformOrigin: "var(--transform-origin)",
+  transitionProperty: "transform, opacity",
+  transitionDuration: "150ms",
+});
+
+export const popup = style({
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  maxHeight: "min(var(--available-height), 23rem)",
+  color: themeContract.contentPrimary,
+});
+
+export const group = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const separator = style({
+  height: "1px",
+  marginBlock: spacing.xsmall,
+  marginInline: spacing.small,
+  backgroundColor: themeContract.border,
+});
+
+export const groupLabel = style({
+  paddingBlock: spacing["1"],
+  paddingInline: spacing["2"],
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.medium,
+  color: themeContract.contentSecondary,
+});
+
+export const empty = style({
+  padding: spacing.small,
+  textAlign: "center",
+  fontSize: fontSize.small,
+  color: themeContract.contentSecondary,
+});
+
+export const list = style({
+  padding: spacing.xsmall,
+});
+
+export const status = style({
+  paddingInline: spacing.medium,
+  paddingBlock: spacing.small,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.medium,
+  color: themeContract.contentSecondary,
+});
+
+export const item = style({
+  display: "flex",
+  alignItems: "center",
+  paddingInline: spacing.small,
+  paddingBlock: spacing["1"],
+  borderRadius: borderRadius.medium,
+  cursor: "default",
+  userSelect: "none",
+  outline: "none",
+  minHeight: "32px",
+  fontSize: fontSize.medium,
+});