@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/src/number-field/number-field.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
@@ -7,30 +5,25 @@
     align-items: flex-start;
     gap: var(--space-1);
   }
-
   .scrub-area {
     cursor: ew-resize;
     user-select: none;
   }
-
   .scrub-area-cursor {
     filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
   }
-
   .label {
     cursor: ew-resize;
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     letter-spacing: var(--letter-spacing-wide);
     text-transform: uppercase;
   }
-
   .group {
     display: flex;
   }
-
   .input {
     box-sizing: border-box;
     margin: 0;
@@ -42,27 +35,24 @@
     font-weight: normal;
     text-align: center;
     font-variant-numeric: tabular-nums;
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-elevated);
-    border-top: var(--border-width-base) solid var(--color-border-base);
-    border-bottom: var(--border-width-base) solid var(--color-border-base);
+    color: var(--color-primary);
+    background-color: var(--color-elevated);
+    border-top: var(--border-width-base) solid var(--color-line);
+    border-bottom: var(--border-width-base) solid var(--color-line);
     border-left: none;
     border-right: none;
     border-radius: 0;
     outline: none;
     transition: box-shadow var(--duration-fast) var(--easing-standard);
   }
-
   .input:focus {
     z-index: 1;
-    box-shadow: inset var(--shadow-focus);
+    box-shadow: inset 0 0 0 1.5px var(--color-accent);
   }
-
   .input[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .step-button {
     box-sizing: border-box;
     display: flex;
@@ -72,9 +62,9 @@
     height: 2rem;
     margin: 0;
     padding: 0;
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     background-color: var(--color-surface-1);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     cursor: pointer;
     outline: none;
     user-select: none;
@@ -83,31 +73,25 @@
       color var(--duration-fast) var(--easing-standard),
       transform 100ms var(--easing-ease-out);
   }
-
   .step-button:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
-
   .step-button:active:not([data-disabled]) {
-    background-color: var(--color-surface-active);
+    background-color: var(--color-active);
     transform: scale(0.93);
   }
-
   .step-button:focus-visible {
     z-index: 1;
-    box-shadow: inset var(--shadow-focus);
+    box-shadow: inset 0 0 0 1.5px var(--color-accent);
   }
-
   .step-button[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .decrement {
     border-radius: var(--radius-md) 0 0 var(--radius-md);
   }
-
   .increment {
     border-radius: 0 var(--radius-md) var(--radius-md) 0;
   }

package/src/progress/progress.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
@@ -7,16 +5,14 @@
     gap: var(--space-1-5);
     width: 100%;
   }
-
   .label-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
   }
-
   .track {
     width: 100%;
     height: 6px;
@@ -24,7 +20,6 @@
     border-radius: var(--radius-full);
     overflow: hidden;
   }
-
   .track-sm {
     height: 4px;
   }
@@ -34,14 +29,12 @@
   .track-lg {
     height: 8px;
   }
-
   .indicator {
     height: 100%;
     border-radius: var(--radius-full);
     background-color: var(--color-accent);
     transition: width var(--duration-slower) var(--easing-standard);
   }
-
   .indicator-success {
     background-color: var(--color-success-solid);
   }
@@ -51,7 +44,6 @@
   .indicator-error {
     background-color: var(--color-error-solid);
   }
-
   /* Indeterminate */
   @keyframes progress-indeterminate {
     0% {
@@ -61,7 +53,6 @@
       transform: translateX(400%);
     }
   }
-
   .indicator[data-value="null"],
   .indicator-indeterminate {
     width: 30% !important;

package/src/select/select.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .trigger {
     display: inline-flex;
@@ -9,9 +7,9 @@
     width: 100%;
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     background-color: var(--color-surface-1);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-md);
     cursor: pointer;
     outline: none;
@@ -27,64 +25,55 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
   .trigger:hover:not([data-disabled]) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-line-strong);
   }
-
   .trigger:focus-visible {
     border-color: var(--color-accent);
     box-shadow: var(--shadow-focus);
   }
-
   .trigger[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .trigger-value {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
   .trigger-icon {
     flex-shrink: 0;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     transition: transform var(--duration-normal) var(--easing-standard);
   }
-
   .trigger[data-popup-open] .trigger-icon {
     transform: rotate(180deg);
   }
-
   /* ─── Popup / Listbox ───────────────────────────────── */
   .positioner {
     z-index: var(--z-dropdown);
   }
-
   .popup {
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-popover);
     padding: var(--space-1);
-    min-width: var(--available-width);
+    min-width: var(--anchor-width);
+    max-width: var(--available-width);
+    width: fit-content;
     max-height: 280px;
     overflow-y: auto;
     outline: none;
-
     transform-origin: var(--transform-origin);
     transition:
       opacity 150ms var(--easing-ease-out),
       transform 150ms var(--easing-ease-out);
   }
-
   .popup[data-starting-style] {
     opacity: 0;
     transform: scale(0.95);
   }
-
   .popup[data-ending-style] {
     opacity: 0;
     transform: scale(0.98);
@@ -92,7 +81,6 @@
       opacity 75ms var(--easing-ease-in),
       transform 75ms var(--easing-ease-in);
   }
-
   /* Backdrop blur for macOS feel */
   @supports (backdrop-filter: blur(12px)) {
     .popup {
@@ -100,7 +88,6 @@
       -webkit-backdrop-filter: blur(12px) saturate(1.5);
     }
   }
-
   .item {
     display: flex;
     align-items: center;
@@ -108,56 +95,48 @@
     padding: var(--space-1-5) var(--space-2-5);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     border-radius: var(--radius-sm);
     cursor: default;
     outline: none;
     transition: background-color var(--duration-fast) var(--easing-standard);
     user-select: none;
   }
-
   .item:hover,
   .item[data-highlighted] {
     background-color: var(--color-accent);
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
   }
-
   .item[data-selected] {
     font-weight: var(--font-weight-medium);
   }
-
   .item[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .item-indicator {
     margin-left: auto;
     color: var(--color-accent);
     display: flex;
     align-items: center;
   }
-
   .item:hover .item-indicator,
   .item[data-highlighted] .item-indicator {
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
   }
-
   .group-label {
     padding: var(--space-1) var(--space-2-5);
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     letter-spacing: var(--letter-spacing-wider);
     text-transform: uppercase;
   }
-
   .separator {
     height: var(--border-width-base);
-    background-color: var(--color-border-subtle);
+    background-color: var(--color-line-subtle);
     margin: var(--space-1) 0;
   }
-
   /* List container — wraps items inside the popup */
   .list {
     display: flex;

package/src/select/select.tsx

@@ -1,14 +1,15 @@
+import { useMemo, type ReactNode } from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import styles from "./select.module.css";
 
 export interface SelectOption {
   value: string;
-  label: string;
+  label: ReactNode;
   disabled?: boolean;
 }
 
 export interface SelectGroup {
-  label?: string;
+  label?: ReactNode;
   options: SelectOption[];
 }
 
@@ -54,11 +55,19 @@ function SelectItem({ option }: { option: SelectOption }) {
   );
 }
 
-export function Select({ placeholder = "Select…", options, groups, className, onValueChange, ...props }: SelectProps) {
+export function Select({ placeholder = "Select…", options, groups, className, onValueChange, value, defaultValue, ...props }: SelectProps) {
+  const allOptions = useMemo(() => [...(options ?? []), ...(groups?.flatMap((g) => g.options) ?? [])], [options, groups]);
+
   return (
-    <BaseSelect.Root onValueChange={onValueChange as never} {...props}>
+    <BaseSelect.Root onValueChange={onValueChange as never} value={value} defaultValue={defaultValue} {...props}>
       <BaseSelect.Trigger className={`${styles.trigger} ${className ?? ""}`}>
-        <BaseSelect.Value className={styles["trigger-value"]} placeholder={placeholder} />
+        <BaseSelect.Value className={styles["trigger-value"]} placeholder={placeholder}>
+          {(currentValue: string | null) => {
+            if (!currentValue) return placeholder;
+            const match = allOptions.find((o) => o.value === currentValue);
+            return match ? match.label : currentValue;
+          }}
+        </BaseSelect.Value>
         <span className={styles["trigger-icon"]}>
           <ChevronIcon />
         </span>

package/src/separator/separator.module.css

@@ -1,16 +1,12 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .separator {
-    background-color: var(--color-border-base);
+    background-color: var(--color-line);
     flex-shrink: 0;
   }
-
   .separator[data-orientation="horizontal"] {
     width: 100%;
     height: var(--border-width-base, 1px);
   }
-
   .separator[data-orientation="vertical"] {
     width: var(--border-width-base, 1px);
     align-self: stretch;

package/src/slider/index.ts

@@ -0,0 +1,14 @@
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider";
+
+export { SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderLabel, SliderValue } from "./parts";
+export type {
+  SliderControlProps,
+  SliderTrackProps,
+  SliderIndicatorProps,
+  SliderThumbProps,
+  SliderLabelProps,
+  SliderValueProps,
+} from "./parts";
+
+export { SliderStyles } from "./slider";

package/src/slider/parts.tsx

@@ -0,0 +1,90 @@
+/**
+ * Styled primitives for Slider.
+ *
+ * @example
+ * ```tsx
+ * import { Slider as BaseSlider } from '@base-ui/react/slider';
+ * import { SliderControl, SliderTrack, SliderIndicator, SliderThumb } from '@brijbyte/agentic-ui/slider';
+ *
+ * <BaseSlider.Root defaultValue={50}>
+ *   <SliderControl>
+ *     <SliderTrack>
+ *       <SliderIndicator />
+ *       <SliderThumb aria-label="Volume" />
+ *     </SliderTrack>
+ *   </SliderControl>
+ * </BaseSlider.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import styles from "./slider.module.css";
+
+type BaseControlProps = ComponentPropsWithoutRef<typeof BaseSlider.Control>;
+type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseSlider.Track>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseSlider.Indicator>;
+type BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSlider.Thumb>;
+type BaseLabelProps = ComponentPropsWithoutRef<typeof BaseSlider.Label>;
+type BaseValueProps = ComponentPropsWithoutRef<typeof BaseSlider.Value>;
+
+export interface SliderControlProps extends Omit<BaseControlProps, "className"> {
+  className?: string;
+}
+export interface SliderTrackProps extends Omit<BaseTrackProps, "className"> {
+  className?: string;
+}
+export interface SliderIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+  className?: string;
+}
+export interface SliderThumbProps extends Omit<BaseThumbProps, "className"> {
+  className?: string;
+}
+export interface SliderLabelProps extends Omit<BaseLabelProps, "className"> {
+  className?: string;
+}
+export interface SliderValueProps extends Omit<BaseValueProps, "className"> {
+  className?: string;
+}
+
+export const SliderControl = forwardRef<ComponentRef<typeof BaseSlider.Control>, SliderControlProps>(function SliderControl(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Control ref={ref} className={`${styles.control} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderTrack = forwardRef<ComponentRef<typeof BaseSlider.Track>, SliderTrackProps>(function SliderTrack(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Track ref={ref} className={`${styles.track} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderIndicator = forwardRef<ComponentRef<typeof BaseSlider.Indicator>, SliderIndicatorProps>(function SliderIndicator(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Indicator ref={ref} className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderThumb = forwardRef<ComponentRef<typeof BaseSlider.Thumb>, SliderThumbProps>(function SliderThumb(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Thumb ref={ref} className={`${styles.thumb} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderLabel = forwardRef<ComponentRef<typeof BaseSlider.Label>, SliderLabelProps>(function SliderLabel(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Label ref={ref} className={`${styles.label} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderValue = forwardRef<ComponentRef<typeof BaseSlider.Value>, SliderValueProps>(function SliderValue(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Value ref={ref} className={`${styles.value} ${className ?? ""}`} {...props} />;
+});

package/src/slider/slider.module.css

@@ -0,0 +1,110 @@
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    width: 100%;
+  }
+
+  /* ─── Label + Value row ──────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .label {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-secondary);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  .value {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-tertiary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ─── Control (hit area) ─────────────────────────────────────── */
+
+  .control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-block: var(--space-2);
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .control[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  /* ─── Track ──────────────────────────────────────────────────── */
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line-subtle);
+    user-select: none;
+  }
+
+  /* ─── Indicator (filled portion) ────────────────────────────── */
+
+  .indicator {
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard);
+  }
+
+  .root[data-disabled] .indicator {
+    background-color: var(--color-tertiary);
+  }
+
+  /* ─── Thumb ──────────────────────────────────────────────────── */
+
+  .thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    box-shadow: var(--shadow-sm);
+    user-select: none;
+    transition:
+      transform var(--duration-fast) var(--easing-spring),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+  }
+
+  /* Grow on drag — gives tactile feedback */
+  .thumb[data-dragging] {
+    transform: scale(1.2);
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+  }
+
+  /* Focus ring via the nested <input> */
+  .thumb:has(:focus-visible) {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-focus);
+  }
+
+  .thumb[data-disabled] {
+    cursor: not-allowed;
+    background-color: var(--color-surface-3);
+  }
+}

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 };