jaci-ui 0.7.0 → 0.9.0

package/dist/components/carousel/carousel.js

@@ -0,0 +1,330 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { carousel } from "../../styled-system/recipes/carousel.js";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/carousel/carousel.tsx
+const CarouselContext = createContext(null);
+function useCarouselContext() {
+	const context = useContext(CarouselContext);
+	if (!context) throw new Error("Carousel parts must be rendered inside Carousel.Root.");
+	return context;
+}
+const CarouselRoot = forwardRef(function CarouselRoot({ autoplay = false, autoplayInterval = 5e3, children, className, defaultIndex = 0, disabled = false, index, onBlur, onFocus, loop = true, onIndexChange, onKeyDown, onPointerEnter, onPointerLeave, orientation = "horizontal", pauseOnFocus = true, pauseOnHover = true, style, swipeable = true, ...props }, ref) {
+	const [uncontrolledIndex, setUncontrolledIndex] = useState(Math.max(0, defaultIndex));
+	const [registered, setRegistered] = useState(() => /* @__PURE__ */ new Set());
+	const [paused, setPaused] = useState(false);
+	const [focusWithin, setFocusWithin] = useState(false);
+	const swipeRef = useRef(null);
+	const isControlled = index !== void 0;
+	const indexCount = registered.size ? Math.max(...registered) + 1 : 0;
+	const currentIndex = Math.max(0, Math.min(indexCount ? indexCount - 1 : 0, index ?? uncontrolledIndex));
+	const styles = carousel({
+		orientation,
+		active: true
+	});
+	const setIndex = useCallback((nextIndex) => {
+		if (disabled || !indexCount) return;
+		const next = loop ? (nextIndex + indexCount) % indexCount : Math.max(0, Math.min(indexCount - 1, nextIndex));
+		if (!isControlled) setUncontrolledIndex(next);
+		if (next !== currentIndex) onIndexChange?.(next);
+	}, [
+		currentIndex,
+		disabled,
+		indexCount,
+		isControlled,
+		loop,
+		onIndexChange
+	]);
+	const getNextIndex = useCallback((direction) => currentIndex + direction, [currentIndex]);
+	const registerIndex = useCallback((itemIndex) => {
+		setRegistered((previous) => {
+			if (previous.has(itemIndex)) return previous;
+			const next = new Set(previous);
+			next.add(itemIndex);
+			return next;
+		});
+		return () => setRegistered((previous) => {
+			if (!previous.has(itemIndex)) return previous;
+			const next = new Set(previous);
+			next.delete(itemIndex);
+			return next;
+		});
+	}, []);
+	const onRootKeyDown = useCallback((event) => {
+		if (disabled) return;
+		const forward = orientation === "horizontal" ? event.key === "ArrowRight" : event.key === "ArrowDown";
+		const backward = orientation === "horizontal" ? event.key === "ArrowLeft" : event.key === "ArrowUp";
+		if (forward || backward) {
+			event.preventDefault();
+			setIndex(getNextIndex(forward ? 1 : -1));
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			setIndex(0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			setIndex(indexCount - 1);
+		}
+		onKeyDown?.(event);
+	}, [
+		disabled,
+		getNextIndex,
+		indexCount,
+		onKeyDown,
+		orientation,
+		setIndex
+	]);
+	const startSwipe = useCallback((event) => {
+		if (!swipeable || disabled || event.pointerType === "mouse") return;
+		swipeRef.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY
+		};
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	}, [disabled, swipeable]);
+	const moveSwipe = useCallback(() => void 0, []);
+	const endSwipe = useCallback((event) => {
+		const start = swipeRef.current;
+		swipeRef.current = null;
+		if (!start || start.pointerId !== event.pointerId) return;
+		const delta = orientation === "horizontal" ? event.clientX - start.startX : event.clientY - start.startY;
+		if (Math.abs(delta) < 40) return;
+		setIndex(getNextIndex(delta < 0 ? 1 : -1));
+	}, [
+		getNextIndex,
+		orientation,
+		setIndex
+	]);
+	useEffect(() => {
+		if (!autoplay || paused || disabled || indexCount < 2) return;
+		const interval = Number.isFinite(autoplayInterval) && autoplayInterval > 0 ? autoplayInterval : 5e3;
+		const timer = window.setInterval(() => setIndex(getNextIndex(1)), interval);
+		return () => window.clearInterval(timer);
+	}, [
+		autoplay,
+		autoplayInterval,
+		disabled,
+		getNextIndex,
+		indexCount,
+		paused,
+		setIndex
+	]);
+	const value = useMemo(() => ({
+		currentIndex,
+		disabled,
+		endSwipe,
+		getNextIndex,
+		indexCount,
+		loop,
+		moveSwipe,
+		onKeyDown: onRootKeyDown,
+		orientation,
+		registerIndex,
+		setIndex,
+		startSwipe,
+		styles
+	}), [
+		currentIndex,
+		disabled,
+		endSwipe,
+		getNextIndex,
+		indexCount,
+		loop,
+		moveSwipe,
+		onRootKeyDown,
+		orientation,
+		registerIndex,
+		setIndex,
+		startSwipe,
+		styles
+	]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("section", {
+			...props,
+			ref,
+			"aria-roledescription": "carousel",
+			className: cx(styles.root, className),
+			"data-jaci-component": "carousel",
+			"data-orientation": orientation,
+			"data-slot": "carousel",
+			"data-state": paused ? "paused" : "running",
+			role: "region",
+			tabIndex: disabled ? -1 : 0,
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) {
+					setFocusWithin(false);
+					if (pauseOnFocus) setPaused(false);
+				}
+				onBlur?.(event);
+			},
+			onFocus: (event) => {
+				setFocusWithin(true);
+				if (pauseOnFocus) setPaused(true);
+				onFocus?.(event);
+			},
+			onKeyDown: onRootKeyDown,
+			onPointerCancel: endSwipe,
+			onPointerDown: startSwipe,
+			onPointerEnter: (event) => {
+				if (pauseOnHover) setPaused(true);
+				onPointerEnter?.(event);
+			},
+			onPointerLeave: (event) => {
+				if (pauseOnHover && !(pauseOnFocus && focusWithin)) setPaused(false);
+				onPointerLeave?.(event);
+			},
+			onPointerMove: moveSwipe,
+			onPointerUp: endSwipe,
+			style: {
+				"--jaci-carousel-index": currentIndex,
+				...style
+			},
+			children
+		})
+	});
+});
+const CarouselViewport = forwardRef(function CarouselViewport({ className, ...props }, ref) {
+	const { styles } = useCarouselContext();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(styles.viewport, className),
+		"data-slot": "carousel-viewport"
+	});
+});
+const CarouselTrack = forwardRef(function CarouselTrack({ className, style, ...props }, ref) {
+	const { currentIndex, orientation, styles } = useCarouselContext();
+	const transform = orientation === "horizontal" ? `translateX(-${currentIndex * 100}%)` : `translateY(-${currentIndex * 100}%)`;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(styles.track, className),
+		"data-slot": "carousel-track",
+		style: {
+			transform,
+			...style
+		}
+	});
+});
+const CarouselItem = forwardRef(function CarouselItem({ children, className, index, ...props }, ref) {
+	const { currentIndex, registerIndex, styles } = useCarouselContext();
+	useEffect(() => registerIndex(index), [index, registerIndex]);
+	const active = currentIndex === index;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"aria-hidden": !active,
+		"aria-roledescription": "slide",
+		className: cx(styles.item, className),
+		"data-index": index,
+		"data-jaci-component": "carousel-item",
+		"data-selected": active || void 0,
+		"data-slot": "carousel-item",
+		role: "group",
+		tabIndex: active ? 0 : -1,
+		children
+	});
+});
+function createSimpleSlot(slot) {
+	return forwardRef(function CarouselSlot({ className, ...props }, ref) {
+		const { styles } = useCarouselContext();
+		if (slot === "title") return /* @__PURE__ */ jsx("h3", {
+			...props,
+			ref,
+			className: cx(styles.title, className),
+			"data-slot": `carousel-${slot}`
+		});
+		if (slot === "description") return /* @__PURE__ */ jsx("p", {
+			...props,
+			ref,
+			className: cx(styles.description, className),
+			"data-slot": `carousel-${slot}`
+		});
+		return /* @__PURE__ */ jsx("div", {
+			...props,
+			ref,
+			className: cx(styles[slot], className),
+			"data-slot": `carousel-${slot}`
+		});
+	});
+}
+const CarouselMedia = createSimpleSlot("media");
+const CarouselCaption = createSimpleSlot("caption");
+const CarouselTitle = createSimpleSlot("title");
+const CarouselDescription = createSimpleSlot("description");
+const CarouselPrevious = forwardRef(function CarouselPrevious({ "aria-label": ariaLabel = "Previous slide", children, className, disabled, ...props }, ref) {
+	const { disabled: contextDisabled, getNextIndex, orientation, setIndex, styles } = useCarouselContext();
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		"aria-label": ariaLabel,
+		className: cx(styles.control, className),
+		"data-slot": "carousel-previous",
+		disabled: disabled ?? contextDisabled,
+		onClick: () => setIndex(getNextIndex(-1)),
+		type: "button",
+		children: children ?? (orientation === "vertical" ? "↑" : "‹")
+	});
+});
+const CarouselNext = forwardRef(function CarouselNext({ "aria-label": ariaLabel = "Next slide", children, className, disabled, ...props }, ref) {
+	const { disabled: contextDisabled, getNextIndex, orientation, setIndex, styles } = useCarouselContext();
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		"aria-label": ariaLabel,
+		className: cx(styles.control, className),
+		"data-slot": "carousel-next",
+		disabled: disabled ?? contextDisabled,
+		onClick: () => setIndex(getNextIndex(1)),
+		type: "button",
+		children: children ?? (orientation === "vertical" ? "↓" : "›")
+	});
+});
+const CarouselIndicator = forwardRef(function CarouselIndicator({ "aria-label": ariaLabel, className, index, ...props }, ref) {
+	const { currentIndex, disabled, setIndex, styles } = useCarouselContext();
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		"aria-label": ariaLabel ?? `Go to slide ${index + 1}`,
+		"aria-selected": currentIndex === index,
+		className: cx(styles.indicator, className),
+		"data-selected": currentIndex === index || void 0,
+		"data-slot": "carousel-indicator",
+		disabled,
+		onClick: () => setIndex(index),
+		role: "tab",
+		type: "button"
+	});
+});
+const CarouselIndicators = forwardRef(function CarouselIndicators({ children, className, ...props }, ref) {
+	const { indexCount, styles } = useCarouselContext();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"aria-label": "Slides",
+		className: cx(styles.indicators, className),
+		"data-slot": "carousel-indicators",
+		role: "tablist",
+		children: children ?? Array.from({ length: indexCount }, (_, index) => /* @__PURE__ */ jsx(CarouselIndicator, { index }, `indicator-${index}`))
+	});
+});
+const Carousel = {
+	Root: CarouselRoot,
+	Viewport: CarouselViewport,
+	Track: CarouselTrack,
+	Item: CarouselItem,
+	Media: CarouselMedia,
+	Caption: CarouselCaption,
+	Title: CarouselTitle,
+	Description: CarouselDescription,
+	Previous: CarouselPrevious,
+	Next: CarouselNext,
+	Indicators: CarouselIndicators,
+	Indicator: CarouselIndicator
+};
+//#endregion
+export { Carousel, CarouselCaption, CarouselDescription, CarouselIndicator, CarouselIndicators, CarouselItem, CarouselMedia, CarouselNext, CarouselPrevious, CarouselRoot, CarouselTitle, CarouselTrack, CarouselViewport };
+
+//# sourceMappingURL=carousel.js.map

package/dist/components/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../../../src/components/carousel/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  PointerEvent,\n  ReactNode,\n  Ref,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { carousel } from \"../../styled-system/recipes\";\n\nexport type CarouselOrientation = \"horizontal\" | \"vertical\";\n\ninterface CarouselContextValue {\n  currentIndex: number;\n  disabled: boolean;\n  getNextIndex: (direction: -1 | 1) => number;\n  indexCount: number;\n  loop: boolean;\n  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  registerIndex: (index: number) => () => void;\n  setIndex: (index: number) => void;\n  startSwipe: (event: PointerEvent<HTMLElement>) => void;\n  moveSwipe: (event: PointerEvent<HTMLElement>) => void;\n  endSwipe: (event: PointerEvent<HTMLElement>) => void;\n  orientation: CarouselOrientation;\n  styles: ReturnType<typeof carousel>;\n}\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nfunction useCarouselContext() {\n  const context = useContext(CarouselContext);\n  if (!context) throw new Error(\"Carousel parts must be rendered inside Carousel.Root.\");\n  return context;\n}\n\nexport interface CarouselRootProps extends ComponentPropsWithoutRef<\"section\"> {\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  orientation?: CarouselOrientation;\n  loop?: boolean;\n  swipeable?: boolean;\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  pauseOnHover?: boolean;\n  pauseOnFocus?: boolean;\n  disabled?: boolean;\n}\n\nexport const CarouselRoot = forwardRef<HTMLElement, CarouselRootProps>(function CarouselRoot(\n  {\n    autoplay = false,\n    autoplayInterval = 5000,\n    children,\n    className,\n    defaultIndex = 0,\n    disabled = false,\n    index,\n    onBlur,\n    onFocus,\n    loop = true,\n    onIndexChange,\n    onKeyDown,\n    onPointerEnter,\n    onPointerLeave,\n    orientation = \"horizontal\",\n    pauseOnFocus = true,\n    pauseOnHover = true,\n    style,\n    swipeable = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledIndex, setUncontrolledIndex] = useState(Math.max(0, defaultIndex));\n  const [registered, setRegistered] = useState<Set<number>>(() => new Set());\n  const [paused, setPaused] = useState(false);\n  const [focusWithin, setFocusWithin] = useState(false);\n  const swipeRef = useRef<{ pointerId: number; startX: number; startY: number } | null>(null);\n  const isControlled = index !== undefined;\n  const indexCount = registered.size ? Math.max(...registered) + 1 : 0;\n  const currentIndex = Math.max(\n    0,\n    Math.min(indexCount ? indexCount - 1 : 0, index ?? uncontrolledIndex),\n  );\n  const styles = carousel({ orientation, active: true });\n\n  const setIndex = useCallback(\n    (nextIndex: number) => {\n      if (disabled || !indexCount) return;\n      const next = loop\n        ? (nextIndex + indexCount) % indexCount\n        : Math.max(0, Math.min(indexCount - 1, nextIndex));\n      if (!isControlled) setUncontrolledIndex(next);\n      if (next !== currentIndex) onIndexChange?.(next);\n    },\n    [currentIndex, disabled, indexCount, isControlled, loop, onIndexChange],\n  );\n\n  const getNextIndex = useCallback((direction: -1 | 1) => currentIndex + direction, [currentIndex]);\n\n  const registerIndex = useCallback((itemIndex: number) => {\n    setRegistered((previous) => {\n      if (previous.has(itemIndex)) return previous;\n      const next = new Set(previous);\n      next.add(itemIndex);\n      return next;\n    });\n    return () =>\n      setRegistered((previous) => {\n        if (!previous.has(itemIndex)) return previous;\n        const next = new Set(previous);\n        next.delete(itemIndex);\n        return next;\n      });\n  }, []);\n\n  const onRootKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (disabled) return;\n      const forward =\n        orientation === \"horizontal\" ? event.key === \"ArrowRight\" : event.key === \"ArrowDown\";\n      const backward =\n        orientation === \"horizontal\" ? event.key === \"ArrowLeft\" : event.key === \"ArrowUp\";\n      if (forward || backward) {\n        event.preventDefault();\n        setIndex(getNextIndex(forward ? 1 : -1));\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setIndex(0);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setIndex(indexCount - 1);\n      }\n      onKeyDown?.(event);\n    },\n    [disabled, getNextIndex, indexCount, onKeyDown, orientation, setIndex],\n  );\n\n  const startSwipe = useCallback(\n    (event: PointerEvent<HTMLElement>) => {\n      if (!swipeable || disabled || event.pointerType === \"mouse\") return;\n      swipeRef.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startY: event.clientY,\n      };\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n    },\n    [disabled, swipeable],\n  );\n\n  const moveSwipe = useCallback(() => undefined, []);\n\n  const endSwipe = useCallback(\n    (event: PointerEvent<HTMLElement>) => {\n      const start = swipeRef.current;\n      swipeRef.current = null;\n      if (!start || start.pointerId !== event.pointerId) return;\n      const delta =\n        orientation === \"horizontal\" ? event.clientX - start.startX : event.clientY - start.startY;\n      if (Math.abs(delta) < 40) return;\n      setIndex(getNextIndex(delta < 0 ? 1 : -1));\n    },\n    [getNextIndex, orientation, setIndex],\n  );\n\n  useEffect(() => {\n    if (!autoplay || paused || disabled || indexCount < 2) return;\n    const interval =\n      Number.isFinite(autoplayInterval) && autoplayInterval > 0 ? autoplayInterval : 5000;\n    const timer = window.setInterval(() => setIndex(getNextIndex(1)), interval);\n    return () => window.clearInterval(timer);\n  }, [autoplay, autoplayInterval, disabled, getNextIndex, indexCount, paused, setIndex]);\n\n  const value = useMemo<CarouselContextValue>(\n    () => ({\n      currentIndex,\n      disabled,\n      endSwipe,\n      getNextIndex,\n      indexCount,\n      loop,\n      moveSwipe,\n      onKeyDown: onRootKeyDown,\n      orientation,\n      registerIndex,\n      setIndex,\n      startSwipe,\n      styles,\n    }),\n    [\n      currentIndex,\n      disabled,\n      endSwipe,\n      getNextIndex,\n      indexCount,\n      loop,\n      moveSwipe,\n      onRootKeyDown,\n      orientation,\n      registerIndex,\n      setIndex,\n      startSwipe,\n      styles,\n    ],\n  );\n\n  return (\n    <CarouselContext.Provider value={value}>\n      <section\n        {...props}\n        ref={ref}\n        aria-roledescription=\"carousel\"\n        className={cx(styles.root, className)}\n        data-jaci-component=\"carousel\"\n        data-orientation={orientation}\n        data-slot=\"carousel\"\n        data-state={paused ? \"paused\" : \"running\"}\n        role=\"region\"\n        tabIndex={disabled ? -1 : 0}\n        onBlur={(event: FocusEvent<HTMLElement>) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n            setFocusWithin(false);\n            if (pauseOnFocus) setPaused(false);\n          }\n          onBlur?.(event);\n        }}\n        onFocus={(event: FocusEvent<HTMLElement>) => {\n          setFocusWithin(true);\n          if (pauseOnFocus) {\n            setPaused(true);\n          }\n          onFocus?.(event);\n        }}\n        onKeyDown={onRootKeyDown}\n        onPointerCancel={endSwipe}\n        onPointerDown={startSwipe}\n        onPointerEnter={(event) => {\n          if (pauseOnHover) setPaused(true);\n          onPointerEnter?.(event);\n        }}\n        onPointerLeave={(event) => {\n          if (pauseOnHover && !(pauseOnFocus && focusWithin)) setPaused(false);\n          onPointerLeave?.(event);\n        }}\n        onPointerMove={moveSwipe}\n        onPointerUp={endSwipe}\n        style={{ \"--jaci-carousel-index\": currentIndex, ...style } as CSSProperties}\n      >\n        {children}\n      </section>\n    </CarouselContext.Provider>\n  );\n});\n\nexport type CarouselViewportProps = ComponentPropsWithoutRef<\"div\">;\nexport const CarouselViewport = forwardRef<HTMLDivElement, CarouselViewportProps>(\n  function CarouselViewport({ className, ...props }, ref) {\n    const { styles } = useCarouselContext();\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(styles.viewport, className)}\n        data-slot=\"carousel-viewport\"\n      />\n    );\n  },\n);\n\nexport type CarouselTrackProps = ComponentPropsWithoutRef<\"div\">;\nexport const CarouselTrack = forwardRef<HTMLDivElement, CarouselTrackProps>(function CarouselTrack(\n  { className, style, ...props },\n  ref,\n) {\n  const { currentIndex, orientation, styles } = useCarouselContext();\n  const transform =\n    orientation === \"horizontal\"\n      ? `translateX(-${currentIndex * 100}%)`\n      : `translateY(-${currentIndex * 100}%)`;\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(styles.track, className)}\n      data-slot=\"carousel-track\"\n      style={{ transform, ...style }}\n    />\n  );\n});\n\nexport interface CarouselItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  index: number;\n}\nexport const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(function CarouselItem(\n  { children, className, index, ...props },\n  ref,\n) {\n  const { currentIndex, registerIndex, styles } = useCarouselContext();\n  useEffect(() => registerIndex(index), [index, registerIndex]);\n  const active = currentIndex === index;\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: carousel slides use the ARIA group role.\n    <div\n      {...props}\n      ref={ref}\n      aria-hidden={!active}\n      aria-roledescription=\"slide\"\n      className={cx(styles.item, className)}\n      data-index={index}\n      data-jaci-component=\"carousel-item\"\n      data-selected={active || undefined}\n      data-slot=\"carousel-item\"\n      role=\"group\"\n      tabIndex={active ? 0 : -1}\n    >\n      {children}\n    </div>\n  );\n});\n\nfunction createSimpleSlot(slot: \"media\" | \"caption\" | \"title\" | \"description\") {\n  return forwardRef<HTMLElement, ComponentPropsWithoutRef<\"div\">>(function CarouselSlot(\n    { className, ...props },\n    ref,\n  ) {\n    const { styles } = useCarouselContext();\n    if (slot === \"title\")\n      return (\n        <h3\n          {...props}\n          ref={ref as Ref<HTMLHeadingElement>}\n          className={cx(styles.title, className)}\n          data-slot={`carousel-${slot}`}\n        />\n      );\n    if (slot === \"description\")\n      return (\n        <p\n          {...props}\n          ref={ref as Ref<HTMLParagraphElement>}\n          className={cx(styles.description, className)}\n          data-slot={`carousel-${slot}`}\n        />\n      );\n    return (\n      <div\n        {...props}\n        ref={ref as Ref<HTMLDivElement>}\n        className={cx(styles[slot], className)}\n        data-slot={`carousel-${slot}`}\n      />\n    );\n  });\n}\n\nexport const CarouselMedia = createSimpleSlot(\"media\");\nexport const CarouselCaption = createSimpleSlot(\"caption\");\nexport const CarouselTitle = createSimpleSlot(\"title\");\nexport const CarouselDescription = createSimpleSlot(\"description\");\n\nexport interface CarouselControlProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const CarouselPrevious = forwardRef<HTMLButtonElement, CarouselControlProps>(\n  function CarouselPrevious(\n    { \"aria-label\": ariaLabel = \"Previous slide\", children, className, disabled, ...props },\n    ref,\n  ) {\n    const {\n      disabled: contextDisabled,\n      getNextIndex,\n      orientation,\n      setIndex,\n      styles,\n    } = useCarouselContext();\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cx(styles.control, className)}\n        data-slot=\"carousel-previous\"\n        disabled={disabled ?? contextDisabled}\n        onClick={() => setIndex(getNextIndex(-1))}\n        type=\"button\"\n      >\n        {children ?? (orientation === \"vertical\" ? \"↑\" : \"‹\")}\n      </button>\n    );\n  },\n);\n\nexport const CarouselNext = forwardRef<HTMLButtonElement, CarouselControlProps>(\n  function CarouselNext(\n    { \"aria-label\": ariaLabel = \"Next slide\", children, className, disabled, ...props },\n    ref,\n  ) {\n    const {\n      disabled: contextDisabled,\n      getNextIndex,\n      orientation,\n      setIndex,\n      styles,\n    } = useCarouselContext();\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cx(styles.control, className)}\n        data-slot=\"carousel-next\"\n        disabled={disabled ?? contextDisabled}\n        onClick={() => setIndex(getNextIndex(1))}\n        type=\"button\"\n      >\n        {children ?? (orientation === \"vertical\" ? \"↓\" : \"›\")}\n      </button>\n    );\n  },\n);\n\nexport interface CarouselIndicatorProps extends ComponentPropsWithoutRef<\"button\"> {\n  index: number;\n}\nexport const CarouselIndicator = forwardRef<HTMLButtonElement, CarouselIndicatorProps>(\n  function CarouselIndicator({ \"aria-label\": ariaLabel, className, index, ...props }, ref) {\n    const { currentIndex, disabled, setIndex, styles } = useCarouselContext();\n    return (\n      <button\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel ?? `Go to slide ${index + 1}`}\n        aria-selected={currentIndex === index}\n        className={cx(styles.indicator, className)}\n        data-selected={currentIndex === index || undefined}\n        data-slot=\"carousel-indicator\"\n        disabled={disabled}\n        onClick={() => setIndex(index)}\n        role=\"tab\"\n        type=\"button\"\n      />\n    );\n  },\n);\n\nexport const CarouselIndicators = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n  function CarouselIndicators({ children, className, ...props }, ref) {\n    const { indexCount, styles } = useCarouselContext();\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-label=\"Slides\"\n        className={cx(styles.indicators, className)}\n        data-slot=\"carousel-indicators\"\n        role=\"tablist\"\n      >\n        {children ??\n          Array.from({ length: indexCount }, (_, index) => (\n            // biome-ignore lint/suspicious/noArrayIndexKey: indicators are stable by slide index.\n            <CarouselIndicator index={index} key={`indicator-${index}`} />\n          ))}\n      </div>\n    );\n  },\n);\n\nexport const Carousel = {\n  Root: CarouselRoot,\n  Viewport: CarouselViewport,\n  Track: CarouselTrack,\n  Item: CarouselItem,\n  Media: CarouselMedia,\n  Caption: CarouselCaption,\n  Title: CarouselTitle,\n  Description: CarouselDescription,\n  Previous: CarouselPrevious,\n  Next: CarouselNext,\n  Indicators: CarouselIndicators,\n  Indicator: CarouselIndicator,\n};\n"],"mappings":"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"}

package/dist/components/carousel/index.d.cts

@@ -0,0 +1,2 @@
+import { Carousel, CarouselControlProps, CarouselIndicatorProps, CarouselItemProps, CarouselOrientation, CarouselRootProps, CarouselTrackProps, CarouselViewportProps } from "./carousel.cjs";
+export { Carousel, type CarouselControlProps, type CarouselIndicatorProps, type CarouselItemProps, type CarouselOrientation, type CarouselRootProps, type CarouselTrackProps, type CarouselViewportProps };

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { Carousel, CarouselControlProps, CarouselIndicatorProps, CarouselItemProps, CarouselOrientation, CarouselRootProps, CarouselTrackProps, CarouselViewportProps } from "./carousel.js";
+export { Carousel, type CarouselControlProps, type CarouselIndicatorProps, type CarouselItemProps, type CarouselOrientation, type CarouselRootProps, type CarouselTrackProps, type CarouselViewportProps };

package/dist/components/code/code.cjs

@@ -3,24 +3,51 @@ const require_code = require("../../styled-system/recipes/code.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/code/code.tsx
-const Code = (0, react.forwardRef)(function Code({ children, className, language, truncate = false, variant = "inline", wrap = false, ...props }, ref) {
+function getTextLines(children) {
+	const nodes = react.Children.toArray(children);
+	if (!nodes.every((node) => typeof node === "string" || typeof node === "number")) return null;
+	return nodes.map(String).join("").split("\n");
+}
+function getLineKeys(lines) {
+	const occurrences = /* @__PURE__ */ new Map();
+	return lines.map((line) => {
+		const occurrence = occurrences.get(line) ?? 0;
+		occurrences.set(line, occurrence + 1);
+		return `line-${line}-${occurrence}`;
+	});
+}
+const Code = (0, react.forwardRef)(function Code({ children, className, language, lineNumbers = false, truncate = false, variant = "inline", wrap = false, ...props }, ref) {
+	const lines = variant === "block" && lineNumbers ? getTextLines(children) : null;
+	const lineKeys = lines ? getLineKeys(lines) : null;
 	const classNames = require_cx.cx(require_code.code({
+		lineNumbers: Boolean(lines),
 		truncate,
 		variant,
 		wrap
 	}), className);
-	if (variant === "block") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+	if (variant === "block") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("pre", {
 		...props,
 		ref,
 		className: classNames,
 		"data-jaci-component": "code",
 		"data-language": language || void 0,
+		"data-line-numbers": lines ? "true" : void 0,
 		"data-slot": "code",
 		"data-variant": variant,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+		children: [lines ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			"data-slot": "code-gutter",
+			children: lines.map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-slot": "code-line-number",
+				children: index + 1
+			}, lineKeys?.[index]))
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 			"data-slot": "code-content",
-			children
-		})
+			children: lines ? lines.map((line, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				"data-slot": "code-line",
+				children: [line, index < lines.length - 1 ? "\n" : null]
+			}, lineKeys?.[index])) : children
+		})]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 		...props,

package/dist/components/code/code.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"code.cjs","names":["cx","code"],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { code } from \"../../styled-system/recipes\";\n\nexport type CodeVariant = \"inline\" | \"block\";\n\nexport interface CodeProps extends Omit<ComponentPropsWithoutRef<\"code\">, \"children\"> {\n  children?: ReactNode;\n  variant?: CodeVariant;\n  language?: string;\n  wrap?: boolean;\n  truncate?: boolean;\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  { children, className, language, truncate = false, variant = \"inline\", wrap = false, ...props },\n  ref,\n) {\n  const classNames = cx(code({ truncate, variant, wrap }), className);\n\n  if (variant === \"block\") {\n    return (\n      <pre\n        {...props}\n        ref={ref as React.Ref<HTMLPreElement>}\n        className={classNames}\n        data-jaci-component=\"code\"\n        data-language={language || undefined}\n        data-slot=\"code\"\n        data-variant={variant}\n      >\n        <code data-slot=\"code-content\">{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <code\n      {...props}\n      ref={ref as React.Ref<HTMLElement>}\n      className={classNames}\n      data-jaci-component=\"code\"\n      data-language={language || undefined}\n      data-slot=\"code\"\n      data-variant={variant}\n    >\n      {children}\n    </code>\n  );\n});\n"],"mappings":";;;;;AAgBA,MAAa,QAAA,GAAA,MAAA,WAAA,CAA0C,SAAS,KAC9D,EAAE,UAAU,WAAW,UAAU,WAAW,OAAO,UAAU,UAAU,OAAO,OAAO,GAAG,SACxF,KACA;CACA,MAAM,aAAaA,WAAAA,GAAGC,aAAAA,KAAK;EAAE;EAAU;EAAS;CAAK,CAAC,GAAG,SAAS;CAElE,IAAI,YAAY,SACd,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;YAEd,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,aAAU;GAAgB;EAAe,CAAA;CAC5C,CAAA;CAIT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;EAEb;CACG,CAAA;AAEV,CAAC"}
+{"version":3,"file":"code.cjs","names":["Children","cx","code"],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["import { Children, forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { code } from \"../../styled-system/recipes\";\n\nexport type CodeVariant = \"inline\" | \"block\";\n\nexport interface CodeProps extends Omit<ComponentPropsWithoutRef<\"code\">, \"children\"> {\n  children?: ReactNode;\n  variant?: CodeVariant;\n  language?: string;\n  wrap?: boolean;\n  truncate?: boolean;\n  lineNumbers?: boolean;\n}\n\nfunction getTextLines(children: ReactNode) {\n  const nodes = Children.toArray(children);\n  if (!nodes.every((node) => typeof node === \"string\" || typeof node === \"number\")) return null;\n  return nodes.map(String).join(\"\").split(\"\\n\");\n}\n\nfunction getLineKeys(lines: readonly string[]) {\n  const occurrences = new Map<string, number>();\n  return lines.map((line) => {\n    const occurrence = occurrences.get(line) ?? 0;\n    occurrences.set(line, occurrence + 1);\n    return `line-${line}-${occurrence}`;\n  });\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  {\n    children,\n    className,\n    language,\n    lineNumbers = false,\n    truncate = false,\n    variant = \"inline\",\n    wrap = false,\n    ...props\n  },\n  ref,\n) {\n  const lines = variant === \"block\" && lineNumbers ? getTextLines(children) : null;\n  const lineKeys = lines ? getLineKeys(lines) : null;\n  const classNames = cx(code({ lineNumbers: Boolean(lines), truncate, variant, wrap }), className);\n\n  if (variant === \"block\") {\n    return (\n      <pre\n        {...props}\n        ref={ref as React.Ref<HTMLPreElement>}\n        className={classNames}\n        data-jaci-component=\"code\"\n        data-language={language || undefined}\n        data-line-numbers={lines ? \"true\" : undefined}\n        data-slot=\"code\"\n        data-variant={variant}\n      >\n        {lines ? (\n          <span aria-hidden=\"true\" data-slot=\"code-gutter\">\n            {lines.map((_, index) => (\n              <span data-slot=\"code-line-number\" key={lineKeys?.[index]}>\n                {index + 1}\n              </span>\n            ))}\n          </span>\n        ) : null}\n        <code data-slot=\"code-content\">\n          {lines\n            ? lines.map((line, index) => (\n                <span data-slot=\"code-line\" key={lineKeys?.[index]}>\n                  {line}\n                  {index < lines.length - 1 ? \"\\n\" : null}\n                </span>\n              ))\n            : children}\n        </code>\n      </pre>\n    );\n  }\n\n  return (\n    <code\n      {...props}\n      ref={ref as React.Ref<HTMLElement>}\n      className={classNames}\n      data-jaci-component=\"code\"\n      data-language={language || undefined}\n      data-slot=\"code\"\n      data-variant={variant}\n    >\n      {children}\n    </code>\n  );\n});\n"],"mappings":";;;;;AAiBA,SAAS,aAAa,UAAqB;CACzC,MAAM,QAAQA,MAAAA,SAAS,QAAQ,QAAQ;CACvC,IAAI,CAAC,MAAM,OAAO,SAAS,OAAO,SAAS,YAAY,OAAO,SAAS,QAAQ,GAAG,OAAO;CACzF,OAAO,MAAM,IAAI,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,IAAI;AAC9C;AAEA,SAAS,YAAY,OAA0B;CAC7C,MAAM,8BAAc,IAAI,IAAoB;CAC5C,OAAO,MAAM,KAAK,SAAS;EACzB,MAAM,aAAa,YAAY,IAAI,IAAI,KAAK;EAC5C,YAAY,IAAI,MAAM,aAAa,CAAC;EACpC,OAAO,QAAQ,KAAK,GAAG;CACzB,CAAC;AACH;AAEA,MAAa,QAAA,GAAA,MAAA,WAAA,CAA0C,SAAS,KAC9D,EACE,UACA,WACA,UACA,cAAc,OACd,WAAW,OACX,UAAU,UACV,OAAO,OACP,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,YAAY,WAAW,cAAc,aAAa,QAAQ,IAAI;CAC5E,MAAM,WAAW,QAAQ,YAAY,KAAK,IAAI;CAC9C,MAAM,aAAaC,WAAAA,GAAGC,aAAAA,KAAK;EAAE,aAAa,QAAQ,KAAK;EAAG;EAAU;EAAS;CAAK,CAAC,GAAG,SAAS;CAE/F,IAAI,YAAY,SACd,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,QAAQ,SAAS,KAAA;EACpC,aAAU;EACV,gBAAc;YARhB,CAUG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,eAAY;GAAO,aAAU;aAChC,MAAM,KAAK,GAAG,UACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,aAAU;cACb,QAAQ;GACL,GAFkC,WAAW,MAE7C,CACP;EACG,CAAA,IACJ,MACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,aAAU;aACb,QACG,MAAM,KAAK,MAAM,UACf,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAM,aAAU;cAAhB,CACG,MACA,QAAQ,MAAM,SAAS,IAAI,OAAO,IAC/B;MAH2B,WAAW,MAGtC,CACP,IACD;EACA,CAAA,CACH;;CAIT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;EAEb;CACG,CAAA;AAEV,CAAC"}

package/dist/components/code/code.d.cts

@@ -7,6 +7,7 @@ interface CodeProps extends Omit<ComponentPropsWithoutRef<"code">, "children"> {
   language?: string;
   wrap?: boolean;
   truncate?: boolean;
+  lineNumbers?: boolean;
 }
 declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion

package/dist/components/code/code.d.ts

@@ -7,6 +7,7 @@ interface CodeProps extends Omit<ComponentPropsWithoutRef<"code">, "children"> {
   language?: string;
   wrap?: boolean;
   truncate?: boolean;
+  lineNumbers?: boolean;
 }
 declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion

package/dist/components/code/code.js

@@ -1,26 +1,53 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { code } from "../../styled-system/recipes/code.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Children, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/code/code.tsx
-const Code = forwardRef(function Code({ children, className, language, truncate = false, variant = "inline", wrap = false, ...props }, ref) {
+function getTextLines(children) {
+	const nodes = Children.toArray(children);
+	if (!nodes.every((node) => typeof node === "string" || typeof node === "number")) return null;
+	return nodes.map(String).join("").split("\n");
+}
+function getLineKeys(lines) {
+	const occurrences = /* @__PURE__ */ new Map();
+	return lines.map((line) => {
+		const occurrence = occurrences.get(line) ?? 0;
+		occurrences.set(line, occurrence + 1);
+		return `line-${line}-${occurrence}`;
+	});
+}
+const Code = forwardRef(function Code({ children, className, language, lineNumbers = false, truncate = false, variant = "inline", wrap = false, ...props }, ref) {
+	const lines = variant === "block" && lineNumbers ? getTextLines(children) : null;
+	const lineKeys = lines ? getLineKeys(lines) : null;
 	const classNames = cx(code({
+		lineNumbers: Boolean(lines),
 		truncate,
 		variant,
 		wrap
 	}), className);
-	if (variant === "block") return /* @__PURE__ */ jsx("pre", {
+	if (variant === "block") return /* @__PURE__ */ jsxs("pre", {
 		...props,
 		ref,
 		className: classNames,
 		"data-jaci-component": "code",
 		"data-language": language || void 0,
+		"data-line-numbers": lines ? "true" : void 0,
 		"data-slot": "code",
 		"data-variant": variant,
-		children: /* @__PURE__ */ jsx("code", {
+		children: [lines ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "code-gutter",
+			children: lines.map((_, index) => /* @__PURE__ */ jsx("span", {
+				"data-slot": "code-line-number",
+				children: index + 1
+			}, lineKeys?.[index]))
+		}) : null, /* @__PURE__ */ jsx("code", {
 			"data-slot": "code-content",
-			children
-		})
+			children: lines ? lines.map((line, index) => /* @__PURE__ */ jsxs("span", {
+				"data-slot": "code-line",
+				children: [line, index < lines.length - 1 ? "\n" : null]
+			}, lineKeys?.[index])) : children
+		})]
 	});
 	return /* @__PURE__ */ jsx("code", {
 		...props,

package/dist/components/code/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { code } from \"../../styled-system/recipes\";\n\nexport type CodeVariant = \"inline\" | \"block\";\n\nexport interface CodeProps extends Omit<ComponentPropsWithoutRef<\"code\">, \"children\"> {\n  children?: ReactNode;\n  variant?: CodeVariant;\n  language?: string;\n  wrap?: boolean;\n  truncate?: boolean;\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  { children, className, language, truncate = false, variant = \"inline\", wrap = false, ...props },\n  ref,\n) {\n  const classNames = cx(code({ truncate, variant, wrap }), className);\n\n  if (variant === \"block\") {\n    return (\n      <pre\n        {...props}\n        ref={ref as React.Ref<HTMLPreElement>}\n        className={classNames}\n        data-jaci-component=\"code\"\n        data-language={language || undefined}\n        data-slot=\"code\"\n        data-variant={variant}\n      >\n        <code data-slot=\"code-content\">{children}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <code\n      {...props}\n      ref={ref as React.Ref<HTMLElement>}\n      className={classNames}\n      data-jaci-component=\"code\"\n      data-language={language || undefined}\n      data-slot=\"code\"\n      data-variant={variant}\n    >\n      {children}\n    </code>\n  );\n});\n"],"mappings":";;;;;AAgBA,MAAa,OAAO,WAAmC,SAAS,KAC9D,EAAE,UAAU,WAAW,UAAU,WAAW,OAAO,UAAU,UAAU,OAAO,OAAO,GAAG,SACxF,KACA;CACA,MAAM,aAAa,GAAG,KAAK;EAAE;EAAU;EAAS;CAAK,CAAC,GAAG,SAAS;CAElE,IAAI,YAAY,SACd,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;YAEd,oBAAC,QAAD;GAAM,aAAU;GAAgB;EAAe,CAAA;CAC5C,CAAA;CAIT,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;EAEb;CACG,CAAA;AAEV,CAAC"}
+{"version":3,"file":"code.js","names":[],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["import { Children, forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { code } from \"../../styled-system/recipes\";\n\nexport type CodeVariant = \"inline\" | \"block\";\n\nexport interface CodeProps extends Omit<ComponentPropsWithoutRef<\"code\">, \"children\"> {\n  children?: ReactNode;\n  variant?: CodeVariant;\n  language?: string;\n  wrap?: boolean;\n  truncate?: boolean;\n  lineNumbers?: boolean;\n}\n\nfunction getTextLines(children: ReactNode) {\n  const nodes = Children.toArray(children);\n  if (!nodes.every((node) => typeof node === \"string\" || typeof node === \"number\")) return null;\n  return nodes.map(String).join(\"\").split(\"\\n\");\n}\n\nfunction getLineKeys(lines: readonly string[]) {\n  const occurrences = new Map<string, number>();\n  return lines.map((line) => {\n    const occurrence = occurrences.get(line) ?? 0;\n    occurrences.set(line, occurrence + 1);\n    return `line-${line}-${occurrence}`;\n  });\n}\n\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  {\n    children,\n    className,\n    language,\n    lineNumbers = false,\n    truncate = false,\n    variant = \"inline\",\n    wrap = false,\n    ...props\n  },\n  ref,\n) {\n  const lines = variant === \"block\" && lineNumbers ? getTextLines(children) : null;\n  const lineKeys = lines ? getLineKeys(lines) : null;\n  const classNames = cx(code({ lineNumbers: Boolean(lines), truncate, variant, wrap }), className);\n\n  if (variant === \"block\") {\n    return (\n      <pre\n        {...props}\n        ref={ref as React.Ref<HTMLPreElement>}\n        className={classNames}\n        data-jaci-component=\"code\"\n        data-language={language || undefined}\n        data-line-numbers={lines ? \"true\" : undefined}\n        data-slot=\"code\"\n        data-variant={variant}\n      >\n        {lines ? (\n          <span aria-hidden=\"true\" data-slot=\"code-gutter\">\n            {lines.map((_, index) => (\n              <span data-slot=\"code-line-number\" key={lineKeys?.[index]}>\n                {index + 1}\n              </span>\n            ))}\n          </span>\n        ) : null}\n        <code data-slot=\"code-content\">\n          {lines\n            ? lines.map((line, index) => (\n                <span data-slot=\"code-line\" key={lineKeys?.[index]}>\n                  {line}\n                  {index < lines.length - 1 ? \"\\n\" : null}\n                </span>\n              ))\n            : children}\n        </code>\n      </pre>\n    );\n  }\n\n  return (\n    <code\n      {...props}\n      ref={ref as React.Ref<HTMLElement>}\n      className={classNames}\n      data-jaci-component=\"code\"\n      data-language={language || undefined}\n      data-slot=\"code\"\n      data-variant={variant}\n    >\n      {children}\n    </code>\n  );\n});\n"],"mappings":";;;;;AAiBA,SAAS,aAAa,UAAqB;CACzC,MAAM,QAAQ,SAAS,QAAQ,QAAQ;CACvC,IAAI,CAAC,MAAM,OAAO,SAAS,OAAO,SAAS,YAAY,OAAO,SAAS,QAAQ,GAAG,OAAO;CACzF,OAAO,MAAM,IAAI,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,IAAI;AAC9C;AAEA,SAAS,YAAY,OAA0B;CAC7C,MAAM,8BAAc,IAAI,IAAoB;CAC5C,OAAO,MAAM,KAAK,SAAS;EACzB,MAAM,aAAa,YAAY,IAAI,IAAI,KAAK;EAC5C,YAAY,IAAI,MAAM,aAAa,CAAC;EACpC,OAAO,QAAQ,KAAK,GAAG;CACzB,CAAC;AACH;AAEA,MAAa,OAAO,WAAmC,SAAS,KAC9D,EACE,UACA,WACA,UACA,cAAc,OACd,WAAW,OACX,UAAU,UACV,OAAO,OACP,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,YAAY,WAAW,cAAc,aAAa,QAAQ,IAAI;CAC5E,MAAM,WAAW,QAAQ,YAAY,KAAK,IAAI;CAC9C,MAAM,aAAa,GAAG,KAAK;EAAE,aAAa,QAAQ,KAAK;EAAG;EAAU;EAAS;CAAK,CAAC,GAAG,SAAS;CAE/F,IAAI,YAAY,SACd,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,qBAAmB,QAAQ,SAAS,KAAA;EACpC,aAAU;EACV,gBAAc;YARhB,CAUG,QACC,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;aAChC,MAAM,KAAK,GAAG,UACb,oBAAC,QAAD;IAAM,aAAU;cACb,QAAQ;GACL,GAFkC,WAAW,MAE7C,CACP;EACG,CAAA,IACJ,MACJ,oBAAC,QAAD;GAAM,aAAU;aACb,QACG,MAAM,KAAK,MAAM,UACf,qBAAC,QAAD;IAAM,aAAU;cAAhB,CACG,MACA,QAAQ,MAAM,SAAS,IAAI,OAAO,IAC/B;MAH2B,WAAW,MAGtC,CACP,IACD;EACA,CAAA,CACH;;CAIT,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,uBAAoB;EACpB,iBAAe,YAAY,KAAA;EAC3B,aAAU;EACV,gBAAc;EAEb;CACG,CAAA;AAEV,CAAC"}

package/dist/components/color-picker/color-picker.cjs

@@ -2,6 +2,7 @@
 const require_cx = require("../../styled-system/css/cx.cjs");
 const require_base_ui = require("../base-ui.cjs");
 const require_color_picker = require("../../styled-system/recipes/color-picker.cjs");
+const require_theme_scope = require("../../theme/theme-scope.cjs");
 const require_color_utils = require("./color-utils.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -102,7 +103,9 @@ const ColorPickerValue = (0, react.forwardRef)(function ColorPickerValue({ class
 		children: props.children ?? value
 	});
 });
-const ColorPickerPortal = _base_ui_react_popover.Popover.Portal;
+function ColorPickerPortal(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, { ...require_theme_scope.useThemePortalProps(props) });
+}
 const ColorPickerPositioner = (0, react.forwardRef)(function ColorPickerPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
 		...props,