@blenx-dev/components 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

@@ -1,168 +0,0 @@
-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,
-});