@blenx-dev/components 0.0.2 → 0.0.3

package/src/components/Popover/popover.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import clsx from "clsx";
-import type React from "react";
-import { backdrop, positioner, popup, arrow, arrowFill, title, description } from "./popover.css";
-
-export const PopoverCreateHandle: typeof PopoverPrimitive.createHandle =
-  PopoverPrimitive.createHandle;
-
-export function Popover(props: PopoverPrimitive.Root.Props): React.ReactElement {
-  return <PopoverPrimitive.Root {...props} />;
-}
-
-export function PopoverTrigger(props: PopoverPrimitive.Trigger.Props): React.ReactElement {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-export function PopoverClose(props: PopoverPrimitive.Close.Props): React.ReactElement {
-  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
-}
-
-export function PopoverPortal(props: PopoverPrimitive.Portal.Props): React.ReactElement {
-  return <PopoverPrimitive.Portal {...props} />;
-}
-
-export function PopoverPositioner({
-  sideOffset = 4,
-  side = "bottom",
-  align = "center",
-  className,
-  style,
-  ...props
-}: PopoverPrimitive.Positioner.Props & {
-  className?: string;
-  style?: React.CSSProperties;
-}): React.ReactElement {
-  return (
-    <PopoverPrimitive.Positioner
-      sideOffset={sideOffset}
-      side={side}
-      align={align}
-      className={clsx(positioner, className)}
-      style={style}
-      data-slot="popover-positioner"
-      {...props}
-    />
-  );
-}
-
-export function PopoverPopup({
-  className,
-  style,
-  ...props
-}: PopoverPrimitive.Popup.Props & {
-  className?: string;
-  style?: React.CSSProperties;
-}): React.ReactElement {
-  return (
-    <PopoverPortal>
-      <PopoverPositioner>
-        <PopoverPrimitive.Popup
-          className={clsx(popup, className)}
-          style={style}
-          data-slot="popover-popup"
-          {...props}
-        />
-      </PopoverPositioner>
-    </PopoverPortal>
-  );
-}
-
-export function PopoverArrow(props: PopoverPrimitive.Arrow.Props): React.ReactElement {
-  return (
-    <PopoverPrimitive.Arrow className={arrow} data-slot="popover-arrow" {...props}>
-      <div className={arrowFill} />
-    </PopoverPrimitive.Arrow>
-  );
-}
-
-export function PopoverBackdrop(props: PopoverPrimitive.Backdrop.Props): React.ReactElement {
-  return <PopoverPrimitive.Backdrop className={backdrop} data-slot="popover-backdrop" {...props} />;
-}
-
-export function PopoverTitle(props: PopoverPrimitive.Title.Props): React.ReactElement {
-  return <PopoverPrimitive.Title className={title} data-slot="popover-title" {...props} />;
-}
-
-export function PopoverDescription(props: PopoverPrimitive.Description.Props): React.ReactElement {
-  return (
-    <PopoverPrimitive.Description
-      className={description}
-      data-slot="popover-description"
-      {...props}
-    />
-  );
-}
-
-export const PopoverRoot = Popover;
-
-export const PopoverCompound = {
-  Root: Popover,
-  Trigger: PopoverTrigger,
-  Close: PopoverClose,
-  Portal: PopoverPortal,
-  Positioner: PopoverPositioner,
-  Popup: PopoverPopup,
-  Arrow: PopoverArrow,
-  Backdrop: PopoverBackdrop,
-  Title: PopoverTitle,
-  Description: PopoverDescription,
-  createHandle: PopoverCreateHandle,
-};

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "popover",
-  "type": "registry:ui",
-  "title": "Popover",
-  "description": "A StyleX Input Group component.",
-  "files": [
-    {
-      "file": "popover.tsx",
-      "type": "registry:ui",
-      "target": "@ui/Popover/popover.tsx"
-    },
-    {
-      "file": "popover.css.ts",
-      "type": "registry:file",
-      "target": "@ui/Popover/popover.css.ts"
-    }
-  ]
-}

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

@@ -1,12 +0,0 @@
-{
-  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
-  "title": "Progress",
-  "description": "A progress bar with label, track, indicator, and value display. Built on Base UI Progress.",
-  "category": "Feedback",
-  "status": "stable",
-  "keywords": ["progress", "bar", "loading", "status", "indicator"],
-  "related": ["Spinner"],
-  "accessibility": {
-    "aria": ["role", "aria-valuenow", "aria-valuemin", "aria-valuemax"]
-  }
-}

package/src/components/Progress/index.ts

@@ -1,7 +0,0 @@
-export {
-  Progress,
-  ProgressIndicator,
-  ProgressLabel,
-  ProgressTrack,
-  ProgressValue,
-} from "./progress";

package/src/components/Progress/progress.css.ts

@@ -1,38 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { themeContract } from "@blenx-dev/theme/contract";
-import { borderRadius, duration, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
-
-export const root = style({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column",
-  gap: spacing["2"],
-});
-
-export const track = style({
-  display: "block",
-  height: 6,
-  width: "100%",
-  overflow: "hidden",
-  borderRadius: borderRadius.full,
-  backgroundColor: themeContract.surface,
-});
-
-export const indicator = style({
-  height: "100%",
-  backgroundColor: themeContract.primary,
-  borderRadius: borderRadius.full,
-  transitionProperty: "width, background-color",
-  transitionDuration: duration.slow,
-  transitionTimingFunction: "ease",
-});
-
-export const progressLabel = style({
-  fontSize: fontSize.medium,
-  fontWeight: fontWeight.medium,
-});
-
-export const value = style({
-  fontSize: fontSize.small,
-  fontVariantNumeric: "tabular-nums",
-});

package/src/components/Progress/progress.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
-import clsx from "clsx";
-import * as styles from "./progress.css";
-import type { _BaseDivProps } from "../../utils/types";
-
-type ProgressRootProps = _BaseDivProps & ProgressPrimitive.Root.Props;
-
-function Progress({ children, className, style, ...props }: ProgressRootProps) {
-  return (
-    <ProgressPrimitive.Root className={clsx(styles.root, className)} style={style} {...props}>
-      {children ?? (
-        <ProgressTrack>
-          <ProgressIndicator />
-        </ProgressTrack>
-      )}
-    </ProgressPrimitive.Root>
-  );
-}
-
-type ProgressLabelProps = _BaseDivProps & ProgressPrimitive.Label.Props;
-
-export function ProgressLabel({ className, style, ...props }: ProgressLabelProps) {
-  return (
-    <ProgressPrimitive.Label
-      className={clsx(styles.progressLabel, className)}
-      style={style}
-      {...props}
-    />
-  );
-}
-
-type ProgressTrackProps = _BaseDivProps & ProgressPrimitive.Track.Props;
-
-export function ProgressTrack({ className, style, ...props }: ProgressTrackProps) {
-  return (
-    <ProgressPrimitive.Track className={clsx(styles.track, className)} style={style} {...props} />
-  );
-}
-
-type ProgressIndicatorProps = _BaseDivProps & ProgressPrimitive.Indicator.Props;
-
-export function ProgressIndicator({ className, style, ...props }: ProgressIndicatorProps) {
-  return (
-    <ProgressPrimitive.Indicator
-      className={clsx(styles.indicator, className)}
-      style={style}
-      {...props}
-    />
-  );
-}
-
-type ProgressValueProps = _BaseDivProps & ProgressPrimitive.Value.Props;
-
-export function ProgressValue({ className, style, ...props }: ProgressValueProps) {
-  return (
-    <ProgressPrimitive.Value className={clsx(styles.value, className)} style={style} {...props} />
-  );
-}
-
-export { Progress };

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "progress",
-  "type": "registry:ui",
-  "title": "Progress",
-  "description": "A StyleX Progress component.",
-  "files": [
-    {
-      "file": "progress.tsx",
-      "type": "registry:ui",
-      "target": "@ui/Progress/progress.tsx"
-    },
-    {
-      "file": "progress.css.ts",
-      "type": "registry:file",
-      "target": "@ui/Progress/progress.css.ts"
-    }
-  ]
-}

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

@@ -1,13 +0,0 @@
-{
-  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
-  "title": "Radio",
-  "description": "A radio button with RadioGroup wrapper for single-select option lists. Built on Base UI Radio primitive.",
-  "category": "Forms",
-  "status": "stable",
-  "keywords": ["radio", "radio group", "option", "select", "form"],
-  "related": ["Field", "InputGroup"],
-  "accessibility": {
-    "keyboard": ["ArrowUp", "ArrowDown"],
-    "aria": ["aria-checked", "aria-labelledby"]
-  }
-}

package/src/components/Radio/index.ts

@@ -1 +0,0 @@
-export { Radio, RadioGroup, RadioGroupItem } from "./radio";

package/src/components/Radio/radio.css.ts

@@ -1,73 +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 root = style({
-  position: "relative",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexShrink: 0,
-  width: 18,
-  height: 18,
-  borderRadius: borderRadius.full,
-  borderWidth: borderWidth.thin,
-  borderStyle: "solid",
-  borderColor: themeContract.border,
-  backgroundColor: themeContract.background,
-  outline: "none",
-  transitionProperty: "box-shadow",
-  transitionDuration: "150ms",
-  selectors: {
-    "&:focus-visible": {
-      boxShadow: `0 0 0 2px ${themeContract.focusRing}`,
-    },
-  },
-  "@media": {
-    "screen and (min-width: 640px)": {
-      width: 16,
-      height: 16,
-    },
-  },
-});
-
-export const rootDisabled = style({
-  cursor: "not-allowed",
-  opacity: 0.64,
-});
-
-export const group = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing.small,
-});
-
-export const indicator = style({
-  display: "none",
-  position: "absolute",
-  top: -1,
-  left: -1,
-  right: -1,
-  bottom: -1,
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: borderRadius.full,
-});
-
-export const indicatorChecked = style({
-  display: "flex",
-  backgroundColor: themeContract.primary,
-});
-
-export const dot = style({
-  width: 8,
-  height: 8,
-  borderRadius: borderRadius.full,
-  backgroundColor: themeContract.contentOnPrimary,
-  "@media": {
-    "screen and (min-width: 640px)": {
-      width: 6,
-      height: 6,
-    },
-  },
-});

package/src/components/Radio/radio.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { Radio as RadioPrimitive } from "@base-ui/react/radio";
-import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
-import clsx from "clsx";
-import { group, root, rootDisabled, indicator, indicatorChecked, dot } from "./radio.css";
-
-type RadioGroupProps = Omit<RadioGroupPrimitive.Props, "style" | "className"> & {
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-type RadioProps = Omit<RadioPrimitive.Root.Props, "style" | "className"> & {
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-export function RadioGroup({ className, style, ...props }: RadioGroupProps) {
-  return (
-    <RadioGroupPrimitive
-      className={clsx(group, className)}
-      style={style}
-      data-slot="radio-group"
-      {...props}
-    />
-  );
-}
-
-export function Radio({ className, style, ...props }: RadioProps) {
-  return (
-    <RadioPrimitive.Root
-      {...props}
-      render={(rootProps, { checked, disabled }) => (
-        <span
-          {...rootProps}
-          className={clsx(root, disabled && rootDisabled, className)}
-          style={style}
-          data-slot="radio"
-        >
-          <RadioPrimitive.Indicator className={clsx(indicator, checked && indicatorChecked)}>
-            {checked && <span className={dot} />}
-          </RadioPrimitive.Indicator>
-        </span>
-      )}
-    />
-  );
-}
-
-export { Radio as RadioGroupItem };

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "radio",
-  "type": "registry:ui",
-  "title": "Radio",
-  "description": "A StyleX Radio component.",
-  "files": [
-    {
-      "file": "radio.tsx",
-      "type": "registry:ui",
-      "target": "@ui/Radio/radio.tsx"
-    },
-    {
-      "file": "radio.css.ts",
-      "type": "registry:file",
-      "target": "@ui/Radio/radio.css.ts"
-    }
-  ]
-}

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

@@ -1,9 +0,0 @@
-{
-  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
-  "title": "Scroll Area",
-  "description": "A custom scroll area with scroll fade, scrollbar gutter reservation, and fill mode. Built on Base UI ScrollArea.",
-  "category": "Utility",
-  "status": "stable",
-  "keywords": ["scroll", "scroll area", "scrollbar", "scroll fade"],
-  "related": ["Dialog", "AlertDialog", "Drawer", "Autocomplete", "Combobox"]
-}

package/src/components/ScrollArea/index.ts

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

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "scroll-area",
-  "type": "registry:ui",
-  "title": "ScrollArea",
-  "description": "A StyleX Input Group component.",
-  "files": [
-    {
-      "file": "scroll-area.tsx",
-      "type": "registry:ui",
-      "target": "@ui/ScrollArea/scroll-area.tsx"
-    },
-    {
-      "file": "scroll-area.css.ts",
-      "type": "registry:file",
-      "target": "@ui/ScrollArea/scroll-area.css.ts"
-    }
-  ]
-}

package/src/components/ScrollArea/scroll-area.css.ts

@@ -1,80 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { themeContract } from "@blenx-dev/theme/contract";
-import { spacing } from "@blenx-dev/theme/tokens";
-
-export const root = style({
-  height: "100%",
-  minHeight: 0,
-  width: "100%",
-  boxSizing: "border-box",
-});
-
-export const viewport = style({
-  height: "100%",
-  minWidth: 0,
-  borderRadius: themeContract.borderRadius,
-  outline: "none",
-  boxSizing: "border-box",
-  overscrollBehaviorY: "contain",
-  overscrollBehaviorX: "contain",
-  selectors: {
-    "&:focus-visible": {
-      boxShadow: `0 0 0 2px ${themeContract.borderStrong}`,
-    },
-  },
-});
-
-export const viewportFade = style({
-  WebkitMaskImage:
-    "linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent)",
-  maskImage:
-    "linear-gradient(to bottom, transparent, black 1.5rem, black calc(100% - 1.5rem), transparent)",
-});
-
-export const viewportGutter = style({
-  paddingRight: spacing.small,
-  paddingBottom: spacing.small,
-});
-
-export const contentFill = style({
-  height: "100%",
-  width: "100%",
-});
-
-export const scrollbar = style({
-  margin: spacing.xsmall,
-  display: "flex",
-  opacity: 0,
-  boxSizing: "border-box",
-  transitionProperty: "opacity",
-  transitionDuration: "300ms",
-  transitionTimingFunction: "ease",
-  selectors: {
-    "&[data-hovering]": {
-      opacity: 1,
-      transitionDelay: "0ms",
-      transitionDuration: "100ms",
-    },
-    "&[data-scrolling]": {
-      opacity: 1,
-      transitionDelay: "0ms",
-      transitionDuration: "100ms",
-    },
-  },
-});
-
-export const scrollbarHorizontal = style({
-  height: "6px",
-  flexDirection: "column",
-});
-
-export const scrollbarVertical = style({
-  width: "6px",
-});
-
-export const thumb = style({
-  position: "relative",
-  flexGrow: 1,
-  borderRadius: themeContract.borderRadius,
-  backgroundColor: themeContract.borderStrong,
-});

package/src/components/ScrollArea/scroll-area.doc.tsx

@@ -1,44 +0,0 @@
-import { Card } from "../Card/card";
-import { Stack } from "../Stack/stack";
-import { Text } from "../Text/text";
-import { ScrollArea } from "./scroll-area";
-
-export function DefaultStory() {
-  return (
-    <Card
-      padding="small"
-      // Style={{ height: 200, maxWidth: 300 }}
-    >
-      <ScrollArea>
-        <Stack gap="small" padding="medium">
-          {Array.from({ length: 20 }, (_, i) => (
-            // Biome-ignore lint/suspicious/noArrayIndexKey: noArrayIndexKey
-            <Text key={i} variant="body2">
-              List item {i + 1}
-            </Text>
-          ))}
-        </Stack>
-      </ScrollArea>
-    </Card>
-  );
-}
-
-export function WithFadeStory() {
-  return (
-    <Card
-      padding="small"
-      // Style={{ height: 200, maxWidth: 300 }}
-    >
-      <ScrollArea scrollFade>
-        <Stack gap="small" padding="medium">
-          {Array.from({ length: 20 }, (_, i) => (
-            // Biome-ignore lint/suspicious/noArrayIndexKey: noArrayIndexKey
-            <Text key={i} variant="body2">
-              Item {i + 1}
-            </Text>
-          ))}
-        </Stack>
-      </ScrollArea>
-    </Card>
-  );
-}