@blenx-dev/components 0.0.0

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

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

package/src/components/Slider/slider.css.ts

@@ -0,0 +1,82 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, borderWidth, fontSize } from "@blenx-dev/theme/tokens";
+
+export const disabled = style({
+  pointerEvents: "none",
+  opacity: 0.64,
+});
+
+export const control = style({
+  display: "flex",
+  touchAction: "none",
+  userSelect: "none",
+});
+
+export const controlHorizontal = style({
+  width: "100%",
+  minWidth: 176,
+  height: 7,
+});
+
+export const controlVertical = style({
+  height: "100%",
+  minHeight: 176,
+  flexDirection: "column",
+});
+
+export const track = style({
+  position: "relative",
+  flexGrow: 1,
+  userSelect: "none",
+  borderRadius: borderRadius.full,
+  backgroundColor: themeContract.border,
+});
+
+export const trackHorizontal = style({
+  width: "100%",
+  height: 7,
+});
+
+export const trackVertical = style({
+  height: "100%",
+});
+
+export const indicator = style({
+  userSelect: "none",
+  borderRadius: borderRadius.full,
+  backgroundColor: themeContract.primary,
+});
+
+export const thumb = style({
+  display: "block",
+  flexShrink: 0,
+  userSelect: "none",
+  borderRadius: borderRadius.full,
+  borderWidth: borderWidth.thin,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  backgroundColor: themeContract.surface,
+  outline: "none",
+  transitionProperty: "box-shadow, transform",
+  transitionDuration: "150ms",
+  width: 16,
+  height: 16,
+  boxShadow: themeContract.shadowSm,
+  selectors: {
+    "&:has(:focus-visible)": {
+      boxShadow: `0 0 0 3px ${themeContract.focusRing}`,
+    },
+  },
+});
+
+export const thumbDragging = style({
+  transform: "scale(1.2)",
+  boxShadow: "none",
+});
+
+export const value = style({
+  display: "flex",
+  justifyContent: "flex-end",
+  fontSize: fontSize.small,
+});

package/src/components/Slider/slider.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import clsx from "clsx";
+import * as React from "react";
+import {
+  disabled,
+  control,
+  controlHorizontal,
+  controlVertical,
+  track,
+  trackHorizontal,
+  trackVertical,
+  indicator,
+  thumb,
+  thumbDragging,
+  value,
+} from "./slider.css";
+
+type SliderProps = Omit<SliderPrimitive.Root.Props, "style"> & {
+  className?: string;
+};
+
+type SliderValueProps = Omit<SliderPrimitive.Value.Props, "style"> & {
+  className?: string;
+};
+
+function Slider({
+  className,
+  children,
+  defaultValue,
+  value: controlledValue,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderProps): React.ReactElement {
+  const values = React.useMemo(() => {
+    if (controlledValue !== undefined) {
+      return Array.isArray(controlledValue) ? controlledValue : [controlledValue];
+    }
+    if (defaultValue !== undefined) {
+      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return [min];
+  }, [controlledValue, defaultValue, min]);
+  const orientation = props.orientation || "horizontal";
+
+  return (
+    <SliderPrimitive.Root
+      className={clsx(props.disabled && disabled, className)}
+      defaultValue={defaultValue}
+      max={max}
+      min={min}
+      thumbAlignment="edge"
+      value={controlledValue}
+      {...props}
+    >
+      {children}
+      <SliderPrimitive.Control
+        className={clsx(
+          control,
+          orientation === "horizontal" ? controlHorizontal : controlVertical,
+        )}
+        data-slot="slider-control"
+      >
+        <SliderPrimitive.Track
+          className={clsx(track, orientation === "horizontal" ? trackHorizontal : trackVertical)}
+          data-slot="slider-track"
+        >
+          <SliderPrimitive.Indicator className={indicator} data-slot="slider-indicator" />
+          {Array.from({ length: values.length }, (_, index) => (
+            <SliderPrimitive.Thumb
+              index={index}
+              key={index}
+              render={(thumbRenderProps, state) => (
+                <div
+                  {...thumbRenderProps}
+                  className={clsx(
+                    thumbRenderProps.className,
+                    thumb,
+                    state.dragging && thumbDragging,
+                    state.disabled && disabled,
+                  )}
+                />
+              )}
+            />
+          ))}
+        </SliderPrimitive.Track>
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
+
+function SliderValue({ className, ...props }: SliderValueProps): React.ReactElement {
+  return (
+    <SliderPrimitive.Value className={clsx(value, className)} data-slot="slider-value" {...props} />
+  );
+}
+
+export { SliderValue, Slider };

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Spinner",
+  "description": "A loading spinner with ARIA role and label for accessible loading state indication.",
+  "category": "Feedback",
+  "status": "stable",
+  "keywords": ["spinner", "loading", "loader", "progress", "wait"],
+  "related": ["Button", "Progress"],
+  "accessibility": {
+    "aria": ["role", "aria-label"]
+  }
+}

package/src/components/Spinner/index.ts

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

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

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

package/src/components/Spinner/spinner.css.ts

@@ -0,0 +1,17 @@
+import { style, keyframes } from "@vanilla-extract/css";
+
+export const spin = keyframes({
+  from: { transform: "rotate(0deg)" },
+  to: { transform: "rotate(360deg)" },
+});
+
+export const spinner = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transformOrigin: "center",
+  animationName: spin,
+  animationDuration: "1s",
+  animationIterationCount: "infinite",
+  animationTimingFunction: "linear",
+});

package/src/components/Spinner/spinner.demo.tsx

@@ -0,0 +1,13 @@
+import { Stack } from "../Stack/stack";
+import { Spinner } from "./spinner";
+
+export function SizesStory() {
+  return (
+    <Stack gap="medium" direction="row" align="center">
+      <Spinner size={16} />
+      <Spinner size={24} />
+      <Spinner size={32} />
+      <Spinner size={48} />
+    </Stack>
+  );
+}

package/src/components/Spinner/spinner.tsx

@@ -0,0 +1,15 @@
+import { CircleNotchIcon } from "@phosphor-icons/react";
+import clsx from "clsx";
+import type React from "react";
+import { spinner } from "./spinner.css";
+
+type Props = Omit<React.ComponentProps<typeof CircleNotchIcon>, "className" | "style"> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function Spinner({ className, style, ...props }: Props): React.ReactElement {
+  return (
+    <CircleNotchIcon weight="bold" className={clsx(spinner, className)} style={style} {...props} />
+  );
+}

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

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
+  "title": "Splitter",
+  "description": "A resizable split panel layout with pointer and keyboard support, collapsible panels, and localStorage persistence.",
+  "category": "Layout",
+  "status": "stable",
+  "keywords": ["splitter", "resize", "panel", "layout", "split", "resizable"],
+  "related": ["Box"]
+}

package/src/components/Splitter/index.ts

@@ -0,0 +1 @@
+export { Splitter, SplitterHandle, SplitterPanel } from "./splitter";

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

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

package/src/components/Splitter/splitter.css.ts

@@ -0,0 +1,70 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { duration } from "@blenx-dev/theme/tokens";
+
+export const HANDLE_SIZE = 8;
+
+export const root = style({
+  display: "flex",
+  overflow: "hidden",
+  width: "100%",
+  height: "100%",
+});
+
+export const rootHorizontal = style({
+  flexDirection: "row",
+});
+
+export const rootVertical = style({
+  flexDirection: "column",
+});
+
+export const rootDisabled = style({
+  pointerEvents: "none",
+  opacity: 0.6,
+});
+
+export const panel = style({
+  overflow: "hidden",
+  flexShrink: 0,
+  flexBasis: 0,
+});
+
+export const handle = style({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  backgroundColor: themeContract.borderSubtle,
+  transitionProperty: "background-color",
+  transitionDuration: duration.fast,
+  outline: "none",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.border,
+    },
+    "&:focus-visible": {
+      backgroundColor: themeContract.primary,
+    },
+  },
+});
+
+export const handleActive = style({
+  backgroundColor: themeContract.primary,
+});
+
+export const handleDisabled = style({
+  cursor: "not-allowed",
+  opacity: 0.4,
+});
+
+export const handleHorizontal = style({
+  width: HANDLE_SIZE,
+  cursor: "col-resize",
+});
+
+export const handleVertical = style({
+  height: HANDLE_SIZE,
+  cursor: "row-resize",
+});