@blenx-dev/components 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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