@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/src/slider/slider.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import styles from "./slider.module.css";
+
+export interface SliderProps {
+  value?: number | number[];
+  defaultValue?: number | number[];
+  onValueChange?: (value: number | number[], eventDetails: unknown) => void;
+  onValueCommitted?: (value: number | number[], eventDetails: unknown) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  largeStep?: number;
+  disabled?: boolean;
+  name?: string;
+  orientation?: "horizontal" | "vertical";
+  format?: Intl.NumberFormatOptions;
+  /** Visible label rendered above the track. */
+  label?: ReactNode;
+  /** Show the current value next to the label. */
+  showValue?: boolean;
+  /** Aria-label for single-thumb sliders without a visible label. */
+  "aria-label"?: string;
+  className?: string;
+}
+
+export function Slider({
+  label,
+  showValue = false,
+  className,
+  onValueChange,
+  onValueCommitted,
+  "aria-label": ariaLabel,
+  ...props
+}: SliderProps) {
+  const isRange = Array.isArray(props.defaultValue ?? props.value);
+
+  return (
+    <BaseSlider.Root
+      className={`${styles.root} ${className ?? ""}`}
+      onValueChange={onValueChange as never}
+      onValueCommitted={onValueCommitted as never}
+      {...props}
+    >
+      {(label || showValue) && (
+        <div className={styles.header}>
+          {label && <BaseSlider.Label className={styles.label}>{label}</BaseSlider.Label>}
+          {showValue && <BaseSlider.Value className={styles.value} />}
+        </div>
+      )}
+      <BaseSlider.Control className={styles.control}>
+        <BaseSlider.Track className={styles.track}>
+          <BaseSlider.Indicator className={styles.indicator} />
+          {isRange ? (
+            <>
+              <BaseSlider.Thumb index={0} className={styles.thumb} aria-label="Minimum value" />
+              <BaseSlider.Thumb index={1} className={styles.thumb} aria-label="Maximum value" />
+            </>
+          ) : (
+            <BaseSlider.Thumb className={styles.thumb} aria-label={ariaLabel} />
+          )}
+        </BaseSlider.Track>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  );
+}
+
+export { styles as SliderStyles };

package/src/styles/layer-order.css

@@ -0,0 +1,22 @@
+/*
+ * @brijbyte/agentic-ui — CSS layer order declaration
+ *
+ * Import this ONCE, before any other stylesheet in your app entry.
+ * It establishes the cascade order so component styles always beat
+ * Tailwind preflight resets, and Tailwind utilities always beat components.
+ *
+ * If you use the full bundle (@brijbyte/agentic-ui/styles) or tokens.css,
+ * this is already included — you don't need to import it separately.
+ *
+ * Manual setup (without Tailwind):
+ *   @import "@brijbyte/agentic-ui/layer-order";
+ *   @import "@brijbyte/agentic-ui/tokens";
+ *   @import "@brijbyte/agentic-ui/reset";
+ *
+ * With Tailwind v4:
+ *   @import "tailwindcss";
+ *   @import "@brijbyte/agentic-ui/layer-order";  ← before tokens
+ *   @import "@brijbyte/agentic-ui/tokens";
+ */
+
+@layer theme, base, components, utilities;

package/src/styles/reset.css

@@ -0,0 +1,91 @@
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    tab-size: 2;
+  }
+
+  body {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-normal);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  /* Remove tap highlight globally on touch devices */
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+    color: var(--color-primary);
+  }
+
+  /* Scrollbar styling */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-thumb) var(--color-track);
+  }
+
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--color-thumb);
+    border-radius: var(--radius-full);
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--color-track);
+  }
+}

package/src/styles/tailwind-theme.css

@@ -0,0 +1,142 @@
+/**
+ * @brijbyte/agentic-ui — Tailwind v4 theme integration
+ *
+ * Import this AFTER `@import "tailwindcss"` and AFTER the agentic-ui
+ * token/reset CSS in your app's CSS entry file:
+ *
+ *   @import "tailwindcss";
+ *   @import "@brijbyte/agentic-ui/styles/tokens.css";
+ *   @import "@brijbyte/agentic-ui/styles/reset.css";
+ *   @import "@brijbyte/agentic-ui/tailwind-theme";
+ *
+ * `@theme inline` tells Tailwind v4 to generate utility classes that
+ * reference our CSS custom properties directly — dark mode and theme
+ * overrides work automatically without any Tailwind configuration.
+ *
+ * Generated utility examples:
+ *   bg-canvas         → background-color: var(--color-canvas)
+ *   text-primary      → color: var(--color-primary)
+ *   border-line       → border-color: var(--color-line)
+ *   font-mono         → font-family: var(--font-mono)
+ *   rounded-md        → border-radius: var(--radius-md)
+ *   shadow-sm         → box-shadow: var(--shadow-sm)
+ */
+
+@theme inline {
+  /* ── Backgrounds ────────────────────────────────────────────── */
+  --color-canvas: var(--color-canvas);
+  --color-elevated: var(--color-elevated);
+  --color-sunken: var(--color-sunken);
+  --color-overlay: var(--color-overlay);
+  --color-sidebar: var(--color-sidebar);
+
+  /* ── Surfaces ───────────────────────────────────────────────── */
+  --color-surface-1: var(--color-surface-1);
+  --color-surface-2: var(--color-surface-2);
+  --color-surface-3: var(--color-surface-3);
+  --color-hover: var(--color-hover);
+  --color-active: var(--color-active);
+  --color-selected: var(--color-selected);
+
+  /* ── Text ───────────────────────────────────────────────────── */
+  --color-primary: var(--color-primary);
+  --color-secondary: var(--color-secondary);
+  --color-tertiary: var(--color-tertiary);
+  --color-disabled: var(--color-disabled);
+  --color-inverse: var(--color-inverse);
+  --color-on-accent: var(--color-on-accent);
+  --color-code: var(--color-code);
+
+  /* ── Borders ────────────────────────────────────────────────── */
+  --color-line: var(--color-line);
+  --color-line-strong: var(--color-line-strong);
+  --color-line-subtle: var(--color-line-subtle);
+  --color-line-focus: var(--color-line-focus);
+
+  /* ── Accent (macOS blue) ────────────────────────────────────── */
+  --color-accent: var(--color-accent);
+  --color-accent-hover: var(--color-accent-hover);
+  --color-accent-pressed: var(--color-accent-pressed);
+  --color-accent-tint: var(--color-accent-tint);
+  --color-accent-tint-hover: var(--color-accent-tint-hover);
+
+  /* ── Focus ──────────────────────────────────────────────────── */
+  --color-focus-ring: var(--color-focus-ring);
+
+  /* ── Status ─────────────────────────────────────────────────── */
+  --color-success-bg: var(--color-success-bg);
+  --color-success-border: var(--color-success-border);
+  --color-success-text: var(--color-success-text);
+  --color-success-solid: var(--color-success-solid);
+
+  --color-warning-bg: var(--color-warning-bg);
+  --color-warning-border: var(--color-warning-border);
+  --color-warning-text: var(--color-warning-text);
+  --color-warning-solid: var(--color-warning-solid);
+
+  --color-error-bg: var(--color-error-bg);
+  --color-error-border: var(--color-error-border);
+  --color-error-text: var(--color-error-text);
+  --color-error-solid: var(--color-error-solid);
+
+  --color-info-bg: var(--color-info-bg);
+  --color-info-border: var(--color-info-border);
+  --color-info-text: var(--color-info-text);
+  --color-info-solid: var(--color-info-solid);
+
+  /* ── Code syntax ────────────────────────────────────────────── */
+  --color-code-canvas: var(--color-code-canvas);
+  --color-code-border: var(--color-code-border);
+  --color-code-keyword: var(--color-code-keyword);
+  --color-code-string: var(--color-code-string);
+  --color-code-function: var(--color-code-function);
+
+  /* ── Fonts ──────────────────────────────────────────────────── */
+  --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
+  --font-sans: var(--font-sans);
+
+  /* ── Border radius ──────────────────────────────────────────── */
+  --radius-none: var(--radius-none);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-full: var(--radius-full);
+
+  /* ── Shadows ────────────────────────────────────────────────── */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-popover: var(--shadow-popover);
+  --shadow-focus: var(--shadow-focus);
+  --shadow-inset: var(--shadow-inset);
+
+  /* ── Line heights ───────────────────────────────────────────── */
+  --leading-tight: var(--line-height-tight);
+  --leading-normal: var(--line-height-normal);
+  --leading-relaxed: var(--line-height-relaxed);
+
+  /* ── Letter spacing ─────────────────────────────────────────── */
+  --tracking-tight: var(--letter-spacing-tight);
+  --tracking-normal: var(--letter-spacing-normal);
+  --tracking-wide: var(--letter-spacing-wide);
+  --tracking-wider: var(--letter-spacing-wider);
+
+  /* ── Easing ─────────────────────────────────────────────────── */
+  --ease-standard: var(--easing-standard);
+  --ease-spring: var(--easing-spring);
+  --ease-in: var(--easing-ease-in);
+  --ease-out: var(--easing-ease-out);
+  --ease-linear: var(--easing-linear);
+
+  /* ── Z-index ────────────────────────────────────────────────── */
+  --z-dropdown: var(--z-dropdown);
+  --z-overlay: var(--z-overlay);
+  --z-modal: var(--z-modal);
+  --z-toast: var(--z-toast);
+  --z-tooltip: var(--z-tooltip);
+}