@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/navigation/link/index.js

@@ -0,0 +1,40 @@
+"use client";
+import "./link.css";
+import { cn } from "@puzzle-ui/core";
+import { createElement } from "react";
+import { useThemeComponents } from "@puzzle-ui/theme/components-context";
+// src/components/navigation/link/index.tsx
+const isThemeLinkComponentConfig = (value) => {
+	return typeof value === "object" && value !== null && "component" in value;
+};
+/**
+* Ensures links opening a new browsing context are protected
+* from reverse-tabnabbing.
+*/
+const resolveRel = (target, rel) => {
+	if (target !== "_blank") return rel;
+	const tokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+	tokens.add("noopener");
+	tokens.add("noreferrer");
+	return [...tokens].join(" ");
+};
+const Link = ({ href, className, componentProps, children, target, rel, ref, ...rest }) => {
+	const linkConfig = useThemeComponents()?.link;
+	const isConfigured = isThemeLinkComponentConfig(linkConfig);
+	const Component = isConfigured ? linkConfig.component : linkConfig ?? "a";
+	const hrefProp = isConfigured ? linkConfig.hrefProp ?? "href" : "href";
+	const classes = cn("puzzle-link", className);
+	const elementProps = {
+		...componentProps,
+		...rest,
+		[hrefProp]: href,
+		ref,
+		target,
+		rel: resolveRel(target, rel),
+		className: classes
+	};
+	return createElement(Component, elementProps, children);
+};
+export { Link };
+
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/navigation/link/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { useThemeComponents } from \"@puzzle-ui/theme/components-context\";\nimport type {\n  ThemeLinkComponent,\n  ThemeLinkComponentConfig,\n} from \"@puzzle-ui/theme\";\nimport type { LinkProps } from \"./types\";\nimport \"./link.css\";\n\nconst isThemeLinkComponentConfig = (\n  value: ThemeLinkComponent | undefined,\n): value is ThemeLinkComponentConfig => {\n  return typeof value === \"object\" && value !== null && \"component\" in value;\n};\n\n/**\n * Ensures links opening a new browsing context are protected\n * from reverse-tabnabbing.\n */\nconst resolveRel = (target?: string, rel?: string): string | undefined => {\n  if (target !== \"_blank\") {\n    return rel;\n  }\n\n  const tokens = new Set((rel ?? \"\").split(/\\s+/).filter(Boolean));\n\n  tokens.add(\"noopener\");\n  tokens.add(\"noreferrer\");\n\n  return [...tokens].join(\" \");\n};\n\nconst Link = ({\n  href,\n  className,\n  componentProps,\n  children,\n  target,\n  rel,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const components = useThemeComponents();\n  const linkConfig = components?.link;\n\n  const isConfigured = isThemeLinkComponentConfig(linkConfig);\n\n  const Component = isConfigured ? linkConfig.component : (linkConfig ?? \"a\");\n\n  const hrefProp = isConfigured ? (linkConfig.hrefProp ?? \"href\") : \"href\";\n\n  const classes = cn(\"puzzle-link\", className);\n\n  const elementProps = {\n    ...componentProps,\n    ...rest,\n    [hrefProp]: href,\n    ref,\n    target,\n    rel: resolveRel(target, rel),\n    className: classes,\n  };\n\n  return createElement(Component, elementProps as never, children);\n};\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;AAYA,MAAM,8BACJ,UACsC;CACtC,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,eAAe;AACvE;;;;;AAMA,MAAM,cAAc,QAAiB,QAAqC;CACxE,IAAI,WAAW,UACb,OAAO;CAGT,MAAM,SAAS,IAAI,KAAK,OAAO,GAAA,CAAI,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,CAAC;CAE/D,OAAO,IAAI,UAAU;CACrB,OAAO,IAAI,YAAY;CAEvB,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,KAAK,GAAG;AAC7B;AAEA,MAAM,QAAQ,EACZ,MACA,WACA,gBACA,UACA,QACA,KACA,KACA,GAAG,WACY;CAEf,MAAM,aADa,mBACS,CAAC,EAAE;CAE/B,MAAM,eAAe,2BAA2B,UAAU;CAE1D,MAAM,YAAY,eAAe,WAAW,YAAa,cAAc;CAEvE,MAAM,WAAW,eAAgB,WAAW,YAAY,SAAU;CAElE,MAAM,UAAU,GAAG,eAAe,SAAS;CAE3C,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;GACF,WAAW;EACZ;EACA;EACA,KAAK,WAAW,QAAQ,GAAG;EAC3B,WAAW;CACb;CAEA,OAAO,cAAc,WAAW,cAAuB,QAAQ;AACjE"}

package/dist/components/navigation/link/link.css

@@ -0,0 +1,31 @@
+.puzzle-link {
+  color: var(--puzzle-color-primary, #2563eb);
+  text-underline-offset: .16em;
+  text-decoration-skip-ink: auto;
+  cursor: pointer;
+  transition: color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        text-decoration-thickness var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  text-decoration-line: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: max(1px, .06em);
+}
+
+.puzzle-link:hover {
+  text-decoration-thickness: max(2px, .09em);
+}
+
+.puzzle-link:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring, currentColor);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.puzzle-link:active {
+  opacity: .8;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-link {
+    transition: none;
+  }
+}

package/dist/components/navigation/link/types.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from "react";
+type LinkProps = Omit<ComponentPropsWithRef<"a">, "href"> & {
+  /** Destination of the link. */
+  href: string;
+  /**
+   * Additional props forwarded to the configured Link component.
+   *
+   * Useful for router-specific props such as `params` or `search`.
+   */
+  componentProps?: Record<string, unknown>;
+};
+export type { LinkProps };

package/dist/components/navigation/link/types.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from "react";
+type LinkProps = Omit<ComponentPropsWithRef<"a">, "href"> & {
+  /** Destination of the link. */
+  href: string;
+  /**
+   * Additional props forwarded to the configured Link component.
+   *
+   * Useful for router-specific props such as `params` or `search`.
+   */
+  componentProps?: Record<string, unknown>;
+};
+export type { LinkProps };

package/dist/components/navigation/tabs/index.cjs

@@ -0,0 +1,111 @@
+"use client";
+;/* empty css           */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_hooks = require("@puzzle-ui/hooks");
+// src/components/navigation/tabs/index.tsx
+const isTabElement = (child) => (0, react.isValidElement)(child) && child.type === TabsTab;
+const TabsTab = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+const TabsRoot = ({ tabBarPosition = "top", initialActiveId, activeId, onActivate, forceMountContent = false, children, className, ...rootProps }) => {
+	const generatedId = (0, react.useId)();
+	const isControlled = activeId !== void 0;
+	const tabs = react.Children.toArray(children).filter(isTabElement);
+	const firstEnabledTabId = tabs.find((tab) => !tab.props.disabled)?.props.id;
+	const [uncontrolledActiveId, setUncontrolledActiveId] = (0, react.useState)(() => initialActiveId ?? firstEnabledTabId);
+	const requestedActiveId = isControlled ? activeId : uncontrolledActiveId;
+	const currentActiveId = tabs.some((tab) => tab.props.id === requestedActiveId && !tab.props.disabled) ? requestedActiveId : firstEnabledTabId;
+	const isVertical = tabBarPosition === "left" || tabBarPosition === "right";
+	const dir = rootProps.dir === "rtl" ? "rtl" : "ltr";
+	const previousActiveIndex = (0, react.useRef)(Math.max(0, tabs.findIndex((tab) => tab.props.id === currentActiveId)));
+	const currentActiveIndex = Math.max(0, tabs.findIndex((tab) => tab.props.id === currentActiveId));
+	const slideDirection = currentActiveIndex > previousActiveIndex.current ? 1 : currentActiveIndex < previousActiveIndex.current ? -1 : 0;
+	if (currentActiveId !== tabs[previousActiveIndex.current]?.props.id) previousActiveIndex.current = currentActiveIndex;
+	const rovingFocus = (0, _puzzle_ui_hooks.useRovingFocus)({
+		items: tabs.map((tab) => ({
+			id: tab.props.id,
+			disabled: tab.props.disabled
+		})),
+		orientation: isVertical ? "vertical" : "horizontal",
+		dir,
+		initialActiveId: currentActiveId
+	});
+	const isKeyboardNavigation = (0, react.useRef)(false);
+	const activateTab = (tabId) => {
+		if (!tabs.some((tab) => tab.props.id === tabId && !tab.props.disabled)) return;
+		if (!isControlled) setUncontrolledActiveId(tabId);
+		onActivate?.(tabId);
+	};
+	const getTabId = (tabId) => `${generatedId}-tab-${encodeURIComponent(tabId)}`;
+	const getPanelId = (tabId) => `${generatedId}-panel-${encodeURIComponent(tabId)}`;
+	const handleKeyDown = (event, id) => {
+		isKeyboardNavigation.current = true;
+		try {
+			rovingFocus.onItemKeyDown(event, id);
+		} finally {
+			isKeyboardNavigation.current = false;
+		}
+	};
+	const handleFocus = (id) => {
+		rovingFocus.onItemFocus(id);
+		if (isKeyboardNavigation.current) activateTab(id);
+	};
+	const handleClick = (id) => {
+		rovingFocus.onItemFocus(id);
+		activateTab(id);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...rootProps,
+		className: (0, _puzzle_ui_core.cn)("puzzle-tabs", `puzzle-tabs--${tabBarPosition}`, className),
+		"data-orientation": isVertical ? "vertical" : "horizontal",
+		"data-position": tabBarPosition,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "puzzle-tabs__list",
+			role: "tablist",
+			"aria-orientation": isVertical ? "vertical" : "horizontal",
+			children: tabs.map((tab) => {
+				const { id, tab: tabContent, disabled = false } = tab.props;
+				const isActive = id === currentActiveId;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					ref: rovingFocus.getItemRef(id),
+					id: getTabId(id),
+					type: "button",
+					role: "tab",
+					className: "puzzle-tabs__trigger",
+					disabled,
+					"aria-selected": isActive,
+					"aria-controls": getPanelId(id),
+					tabIndex: disabled ? -1 : isActive ? 0 : -1,
+					"data-state": isActive ? "active" : "inactive",
+					onClick: () => handleClick(id),
+					onFocus: () => handleFocus(id),
+					onKeyDown: (event) => handleKeyDown(event, id),
+					children: tabContent
+				}, id);
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "puzzle-tabs__content",
+			"data-direction": slideDirection,
+			"data-position": tabBarPosition,
+			children: tabs.map((tab) => {
+				const { id, children: content } = tab.props;
+				const isActive = id === currentActiveId;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					id: getPanelId(id),
+					role: "tabpanel",
+					"aria-labelledby": getTabId(id),
+					hidden: !isActive,
+					tabIndex: 0,
+					className: "puzzle-tabs__panel",
+					"data-state": isActive ? "active" : "inactive",
+					children: forceMountContent || isActive ? content : null
+				}, id);
+			})
+		})]
+	});
+};
+const Tabs = Object.assign(TabsRoot, { Tab: TabsTab });
+exports.Tabs = Tabs;
+exports.TabsTab = TabsTab;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/navigation/tabs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["isValidElement","useId","Children","useState","useRef","useRovingFocus","cn"],"sources":["../../../../src/components/navigation/tabs/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { cn } from \"@puzzle-ui/core\";\nimport {\n  Children,\n  isValidElement,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport \"./tabs.css\";\n\ntype TabElement = ReactElement<TabsTabProps, typeof TabsTab>;\n\nconst isTabElement = (child: ReactNode): child is TabElement =>\n  isValidElement<TabsTabProps>(child) && child.type === TabsTab;\n\ntype TabsPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ntype TabsTabProps = {\n  /** Unique identifier of the tab. */\n  id: string;\n\n  /** Prevents this tab from being selected or focused. */\n  disabled?: boolean;\n\n  /** Content rendered inside the tab trigger. */\n  tab: ReactNode;\n\n  /** Content rendered inside the tab panel. */\n  children: ReactNode;\n};\n\ntype TabsProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\" | \"onChange\"\n> & {\n  /** Position of the tab navigation. Defaults to top. */\n  tabBarPosition?: TabsPosition;\n\n  /** Initially active tab. Defaults to the first tab. */\n  initialActiveId?: string;\n\n  /** Active tab for controlled usage. */\n  activeId?: string;\n\n  /** Called whenever a tab is activated. */\n  onActivate?: (tabId: string) => void;\n\n  /** Keep all tab panel contents mounted. Defaults to false. */\n  forceMountContent?: boolean;\n\n  children: ReactNode;\n};\n\nconst TabsTab = ({ children }: TabsTabProps) => <>{children}</>;\n\nconst TabsRoot = ({\n  tabBarPosition = \"top\",\n  initialActiveId,\n  activeId,\n  onActivate,\n  forceMountContent = false,\n  children,\n  className,\n  ...rootProps\n}: TabsProps) => {\n  const generatedId = useId();\n  const isControlled = activeId !== undefined;\n\n  const tabs = Children.toArray(children).filter(isTabElement);\n\n  const firstEnabledTabId = tabs.find((tab) => !tab.props.disabled)?.props.id;\n\n  const [uncontrolledActiveId, setUncontrolledActiveId] = useState<\n    string | undefined\n  >(() => initialActiveId ?? firstEnabledTabId);\n\n  const requestedActiveId = isControlled ? activeId : uncontrolledActiveId;\n\n  const currentActiveId = tabs.some(\n    (tab) => tab.props.id === requestedActiveId && !tab.props.disabled,\n  )\n    ? requestedActiveId\n    : firstEnabledTabId;\n\n  const isVertical = tabBarPosition === \"left\" || tabBarPosition === \"right\";\n  const dir = rootProps.dir === \"rtl\" ? \"rtl\" : \"ltr\";\n\n  const previousActiveIndex = useRef(\n    Math.max(\n      0,\n      tabs.findIndex((tab) => tab.props.id === currentActiveId),\n    ),\n  );\n\n  const currentActiveIndex = Math.max(\n    0,\n    tabs.findIndex((tab) => tab.props.id === currentActiveId),\n  );\n\n  const slideDirection =\n    currentActiveIndex > previousActiveIndex.current\n      ? 1\n      : currentActiveIndex < previousActiveIndex.current\n        ? -1\n        : 0;\n\n  if (currentActiveId !== tabs[previousActiveIndex.current]?.props.id) {\n    previousActiveIndex.current = currentActiveIndex;\n  }\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: tabs.map((tab) => ({\n      id: tab.props.id,\n      disabled: tab.props.disabled,\n    })),\n    orientation: isVertical ? \"vertical\" : \"horizontal\",\n    dir,\n    initialActiveId: currentActiveId,\n  });\n\n  const isKeyboardNavigation = useRef(false);\n\n  const activateTab = (tabId: string) => {\n    if (\n      !tabs.some((tab) => tab.props.id === tabId && !tab.props.disabled)\n    ) {\n      return;\n    }\n\n    if (!isControlled) {\n      setUncontrolledActiveId(tabId);\n    }\n\n    onActivate?.(tabId);\n  };\n\n  const getTabId = (tabId: string) =>\n    `${generatedId}-tab-${encodeURIComponent(tabId)}`;\n\n  const getPanelId = (tabId: string) =>\n    `${generatedId}-panel-${encodeURIComponent(tabId)}`;\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    id: string,\n  ) => {\n    isKeyboardNavigation.current = true;\n\n    try {\n      rovingFocus.onItemKeyDown(event, id);\n    } finally {\n      isKeyboardNavigation.current = false;\n    }\n  };\n\n  const handleFocus = (id: string) => {\n    rovingFocus.onItemFocus(id);\n\n    // Tabs use automatic activation: moving keyboard focus also activates\n    // the newly focused tab.\n    if (isKeyboardNavigation.current) {\n      activateTab(id);\n    }\n  };\n\n  const handleClick = (id: string) => {\n    rovingFocus.onItemFocus(id);\n    activateTab(id);\n  };\n\n  return (\n    <div\n      {...rootProps}\n      className={cn(\"puzzle-tabs\", `puzzle-tabs--${tabBarPosition}`, className)}\n      data-orientation={isVertical ? \"vertical\" : \"horizontal\"}\n      data-position={tabBarPosition}\n    >\n      <div\n        className=\"puzzle-tabs__list\"\n        role=\"tablist\"\n        aria-orientation={isVertical ? \"vertical\" : \"horizontal\"}\n      >\n        {tabs.map((tab) => {\n          const { id, tab: tabContent, disabled = false } = tab.props;\n          const isActive = id === currentActiveId;\n\n          return (\n            <button\n              key={id}\n              ref={rovingFocus.getItemRef(id)}\n              id={getTabId(id)}\n              type=\"button\"\n              role=\"tab\"\n              className=\"puzzle-tabs__trigger\"\n              disabled={disabled}\n              aria-selected={isActive}\n              aria-controls={getPanelId(id)}\n              tabIndex={disabled ? -1 : isActive ? 0 : -1}\n              data-state={isActive ? \"active\" : \"inactive\"}\n              onClick={() => handleClick(id)}\n              onFocus={() => handleFocus(id)}\n              onKeyDown={(event) => handleKeyDown(event, id)}\n            >\n              {tabContent}\n            </button>\n          );\n        })}\n      </div>\n\n      <div\n        className=\"puzzle-tabs__content\"\n        data-direction={slideDirection}\n        data-position={tabBarPosition}\n      >\n        {tabs.map((tab) => {\n          const { id, children: content } = tab.props;\n          const isActive = id === currentActiveId;\n\n          // The panel element always exists so every tab's aria-controls\n          // resolves; only inactive content is unmounted.\n          return (\n            <div\n              key={id}\n              id={getPanelId(id)}\n              role=\"tabpanel\"\n              aria-labelledby={getTabId(id)}\n              hidden={!isActive}\n              tabIndex={0}\n              className=\"puzzle-tabs__panel\"\n              data-state={isActive ? \"active\" : \"inactive\"}\n            >\n              {forceMountContent || isActive ? content : null}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nconst Tabs = Object.assign(TabsRoot, {\n  Tab: TabsTab,\n});\n\nexport { Tabs, TabsTab, type TabsProps, type TabsTabProps, type TabsPosition };\n"],"mappings":";;;;;;;AAmBA,MAAM,gBAAgB,WAAA,GACpBA,MAAAA,eAAAA,CAA6B,KAAK,KAAK,MAAM,SAAS;AAwCxD,MAAM,WAAW,EAAE,eAA6B,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAG,SAAW,CAAA;AAE9D,MAAM,YAAY,EAChB,iBAAiB,OACjB,iBACA,UACA,YACA,oBAAoB,OACpB,UACA,WACA,GAAG,gBACY;CACf,MAAM,eAAA,GAAcC,MAAAA,MAAAA,CAAM;CAC1B,MAAM,eAAe,aAAa,KAAA;CAElC,MAAM,OAAOC,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,OAAO,YAAY;CAE3D,MAAM,oBAAoB,KAAK,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,CAAC,EAAE,MAAM;CAEzE,MAAM,CAAC,sBAAsB,4BAAA,GAA2BC,MAAAA,SAAAA,OAEhD,mBAAmB,iBAAiB;CAE5C,MAAM,oBAAoB,eAAe,WAAW;CAEpD,MAAM,kBAAkB,KAAK,MAC1B,QAAQ,IAAI,MAAM,OAAO,qBAAqB,CAAC,IAAI,MAAM,QAC5D,IACI,oBACA;CAEJ,MAAM,aAAa,mBAAmB,UAAU,mBAAmB;CACnE,MAAM,MAAM,UAAU,QAAQ,QAAQ,QAAQ;CAE9C,MAAM,uBAAA,GAAsBC,MAAAA,OAAAA,CAC1B,KAAK,IACH,GACA,KAAK,WAAW,QAAQ,IAAI,MAAM,OAAO,eAAe,CAC1D,CACF;CAEA,MAAM,qBAAqB,KAAK,IAC9B,GACA,KAAK,WAAW,QAAQ,IAAI,MAAM,OAAO,eAAe,CAC1D;CAEA,MAAM,iBACJ,qBAAqB,oBAAoB,UACrC,IACA,qBAAqB,oBAAoB,UACvC,KACA;CAER,IAAI,oBAAoB,KAAK,oBAAoB,QAAQ,EAAE,MAAM,IAC/D,oBAAoB,UAAU;CAGhC,MAAM,eAAA,GAAcC,iBAAAA,eAAAA,CAAkC;EACpD,OAAO,KAAK,KAAK,SAAS;GACxB,IAAI,IAAI,MAAM;GACd,UAAU,IAAI,MAAM;EACtB,EAAE;EACF,aAAa,aAAa,aAAa;EACvC;EACA,iBAAiB;CACnB,CAAC;CAED,MAAM,wBAAA,GAAuBD,MAAAA,OAAAA,CAAO,KAAK;CAEzC,MAAM,eAAe,UAAkB;EACrC,IACE,CAAC,KAAK,MAAM,QAAQ,IAAI,MAAM,OAAO,SAAS,CAAC,IAAI,MAAM,QAAQ,GAEjE;EAGF,IAAI,CAAC,cACH,wBAAwB,KAAK;EAG/B,aAAa,KAAK;CACpB;CAEA,MAAM,YAAY,UAChB,GAAG,YAAY,OAAO,mBAAmB,KAAK;CAEhD,MAAM,cAAc,UAClB,GAAG,YAAY,SAAS,mBAAmB,KAAK;CAElD,MAAM,iBACJ,OACA,OACG;EACH,qBAAqB,UAAU;EAE/B,IAAI;GACF,YAAY,cAAc,OAAO,EAAE;EACrC,UAAU;GACR,qBAAqB,UAAU;EACjC;CACF;CAEA,MAAM,eAAe,OAAe;EAClC,YAAY,YAAY,EAAE;EAI1B,IAAI,qBAAqB,SACvB,YAAY,EAAE;CAElB;CAEA,MAAM,eAAe,OAAe;EAClC,YAAY,YAAY,EAAE;EAC1B,YAAY,EAAE;CAChB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EACJ,YAAA,GAAWE,gBAAAA,GAAAA,CAAG,eAAe,gBAAgB,kBAAkB,SAAS;EACxE,oBAAkB,aAAa,aAAa;EAC5C,iBAAe;EAJjB,UAAA,CAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAU;GACV,MAAK;GACL,oBAAkB,aAAa,aAAa;GAE3C,UAAA,KAAK,KAAK,QAAQ;IACjB,MAAM,EAAE,IAAI,KAAK,YAAY,WAAW,UAAU,IAAI;IACtD,MAAM,WAAW,OAAO;IAExB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;KAEE,KAAK,YAAY,WAAW,EAAE;KAC9B,IAAI,SAAS,EAAE;KACf,MAAK;KACL,MAAK;KACL,WAAU;KACA;KACV,iBAAe;KACf,iBAAe,WAAW,EAAE;KAC5B,UAAU,WAAW,KAAK,WAAW,IAAI;KACzC,cAAY,WAAW,WAAW;KAClC,eAAe,YAAY,EAAE;KAC7B,eAAe,YAAY,EAAE;KAC7B,YAAY,UAAU,cAAc,OAAO,EAAE;KAE5C,UAAA;IACK,GAhBD,EAgBC;GAEZ,CAAC;EACE,CAAA,GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,WAAU;GACV,kBAAgB;GAChB,iBAAe;GAEd,UAAA,KAAK,KAAK,QAAQ;IACjB,MAAM,EAAE,IAAI,UAAU,YAAY,IAAI;IACtC,MAAM,WAAW,OAAO;IAIxB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAEE,IAAI,WAAW,EAAE;KACjB,MAAK;KACL,mBAAiB,SAAS,EAAE;KAC5B,QAAQ,CAAC;KACT,UAAU;KACV,WAAU;KACV,cAAY,WAAW,WAAW;KAEjC,UAAA,qBAAqB,WAAW,UAAU;IACxC,GAVE,EAUF;GAET,CAAC;EACE,CAAA,CACF;;AAET;AAEA,MAAM,OAAO,OAAO,OAAO,UAAU,EACnC,KAAK,QACP,CAAC"}

package/dist/components/navigation/tabs/index.d.cts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type TabsPosition = "top" | "bottom" | "left" | "right";
+type TabsTabProps = {
+  /** Unique identifier of the tab. */
+  id: string;
+  /** Prevents this tab from being selected or focused. */
+  disabled?: boolean;
+  /** Content rendered inside the tab trigger. */
+  tab: ReactNode;
+  /** Content rendered inside the tab panel. */
+  children: ReactNode;
+};
+type TabsProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> & {
+  /** Position of the tab navigation. Defaults to top. */
+  tabBarPosition?: TabsPosition;
+  /** Initially active tab. Defaults to the first tab. */
+  initialActiveId?: string;
+  /** Active tab for controlled usage. */
+  activeId?: string;
+  /** Called whenever a tab is activated. */
+  onActivate?: (tabId: string) => void;
+  /** Keep all tab panel contents mounted. Defaults to false. */
+  forceMountContent?: boolean;
+  children: ReactNode;
+};
+declare const TabsTab: ({ children }: TabsTabProps) => import("react").JSX.Element;
+declare const Tabs: (({ tabBarPosition, initialActiveId, activeId, onActivate, forceMountContent, children, className, ...rootProps }: TabsProps) => import("react").JSX.Element) & {
+  Tab: ({ children }: TabsTabProps) => import("react").JSX.Element;
+};
+export { Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps };

package/dist/components/navigation/tabs/index.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type TabsPosition = "top" | "bottom" | "left" | "right";
+type TabsTabProps = {
+  /** Unique identifier of the tab. */
+  id: string;
+  /** Prevents this tab from being selected or focused. */
+  disabled?: boolean;
+  /** Content rendered inside the tab trigger. */
+  tab: ReactNode;
+  /** Content rendered inside the tab panel. */
+  children: ReactNode;
+};
+type TabsProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> & {
+  /** Position of the tab navigation. Defaults to top. */
+  tabBarPosition?: TabsPosition;
+  /** Initially active tab. Defaults to the first tab. */
+  initialActiveId?: string;
+  /** Active tab for controlled usage. */
+  activeId?: string;
+  /** Called whenever a tab is activated. */
+  onActivate?: (tabId: string) => void;
+  /** Keep all tab panel contents mounted. Defaults to false. */
+  forceMountContent?: boolean;
+  children: ReactNode;
+};
+declare const TabsTab: ({ children }: TabsTabProps) => import("react").JSX.Element;
+declare const Tabs: (({ tabBarPosition, initialActiveId, activeId, onActivate, forceMountContent, children, className, ...rootProps }: TabsProps) => import("react").JSX.Element) & {
+  Tab: ({ children }: TabsTabProps) => import("react").JSX.Element;
+};
+export { Tabs, type TabsPosition, type TabsProps, TabsTab, type TabsTabProps };

package/dist/components/navigation/tabs/index.js

@@ -0,0 +1,110 @@
+"use client";
+import "./tabs.css";
+import { cn } from "@puzzle-ui/core";
+import { Children, isValidElement, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRovingFocus } from "@puzzle-ui/hooks";
+// src/components/navigation/tabs/index.tsx
+const isTabElement = (child) => isValidElement(child) && child.type === TabsTab;
+const TabsTab = ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children });
+const TabsRoot = ({ tabBarPosition = "top", initialActiveId, activeId, onActivate, forceMountContent = false, children, className, ...rootProps }) => {
+	const generatedId = useId();
+	const isControlled = activeId !== void 0;
+	const tabs = Children.toArray(children).filter(isTabElement);
+	const firstEnabledTabId = tabs.find((tab) => !tab.props.disabled)?.props.id;
+	const [uncontrolledActiveId, setUncontrolledActiveId] = useState(() => initialActiveId ?? firstEnabledTabId);
+	const requestedActiveId = isControlled ? activeId : uncontrolledActiveId;
+	const currentActiveId = tabs.some((tab) => tab.props.id === requestedActiveId && !tab.props.disabled) ? requestedActiveId : firstEnabledTabId;
+	const isVertical = tabBarPosition === "left" || tabBarPosition === "right";
+	const dir = rootProps.dir === "rtl" ? "rtl" : "ltr";
+	const previousActiveIndex = useRef(Math.max(0, tabs.findIndex((tab) => tab.props.id === currentActiveId)));
+	const currentActiveIndex = Math.max(0, tabs.findIndex((tab) => tab.props.id === currentActiveId));
+	const slideDirection = currentActiveIndex > previousActiveIndex.current ? 1 : currentActiveIndex < previousActiveIndex.current ? -1 : 0;
+	if (currentActiveId !== tabs[previousActiveIndex.current]?.props.id) previousActiveIndex.current = currentActiveIndex;
+	const rovingFocus = useRovingFocus({
+		items: tabs.map((tab) => ({
+			id: tab.props.id,
+			disabled: tab.props.disabled
+		})),
+		orientation: isVertical ? "vertical" : "horizontal",
+		dir,
+		initialActiveId: currentActiveId
+	});
+	const isKeyboardNavigation = useRef(false);
+	const activateTab = (tabId) => {
+		if (!tabs.some((tab) => tab.props.id === tabId && !tab.props.disabled)) return;
+		if (!isControlled) setUncontrolledActiveId(tabId);
+		onActivate?.(tabId);
+	};
+	const getTabId = (tabId) => `${generatedId}-tab-${encodeURIComponent(tabId)}`;
+	const getPanelId = (tabId) => `${generatedId}-panel-${encodeURIComponent(tabId)}`;
+	const handleKeyDown = (event, id) => {
+		isKeyboardNavigation.current = true;
+		try {
+			rovingFocus.onItemKeyDown(event, id);
+		} finally {
+			isKeyboardNavigation.current = false;
+		}
+	};
+	const handleFocus = (id) => {
+		rovingFocus.onItemFocus(id);
+		if (isKeyboardNavigation.current) activateTab(id);
+	};
+	const handleClick = (id) => {
+		rovingFocus.onItemFocus(id);
+		activateTab(id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		className: cn("puzzle-tabs", `puzzle-tabs--${tabBarPosition}`, className),
+		"data-orientation": isVertical ? "vertical" : "horizontal",
+		"data-position": tabBarPosition,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "puzzle-tabs__list",
+			role: "tablist",
+			"aria-orientation": isVertical ? "vertical" : "horizontal",
+			children: tabs.map((tab) => {
+				const { id, tab: tabContent, disabled = false } = tab.props;
+				const isActive = id === currentActiveId;
+				return /* @__PURE__ */ jsx("button", {
+					ref: rovingFocus.getItemRef(id),
+					id: getTabId(id),
+					type: "button",
+					role: "tab",
+					className: "puzzle-tabs__trigger",
+					disabled,
+					"aria-selected": isActive,
+					"aria-controls": getPanelId(id),
+					tabIndex: disabled ? -1 : isActive ? 0 : -1,
+					"data-state": isActive ? "active" : "inactive",
+					onClick: () => handleClick(id),
+					onFocus: () => handleFocus(id),
+					onKeyDown: (event) => handleKeyDown(event, id),
+					children: tabContent
+				}, id);
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "puzzle-tabs__content",
+			"data-direction": slideDirection,
+			"data-position": tabBarPosition,
+			children: tabs.map((tab) => {
+				const { id, children: content } = tab.props;
+				const isActive = id === currentActiveId;
+				return /* @__PURE__ */ jsx("div", {
+					id: getPanelId(id),
+					role: "tabpanel",
+					"aria-labelledby": getTabId(id),
+					hidden: !isActive,
+					tabIndex: 0,
+					className: "puzzle-tabs__panel",
+					"data-state": isActive ? "active" : "inactive",
+					children: forceMountContent || isActive ? content : null
+				}, id);
+			})
+		})]
+	});
+};
+const Tabs = Object.assign(TabsRoot, { Tab: TabsTab });
+export { Tabs, TabsTab };
+
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/navigation/tabs/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport { cn } from \"@puzzle-ui/core\";\nimport {\n  Children,\n  isValidElement,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport \"./tabs.css\";\n\ntype TabElement = ReactElement<TabsTabProps, typeof TabsTab>;\n\nconst isTabElement = (child: ReactNode): child is TabElement =>\n  isValidElement<TabsTabProps>(child) && child.type === TabsTab;\n\ntype TabsPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ntype TabsTabProps = {\n  /** Unique identifier of the tab. */\n  id: string;\n\n  /** Prevents this tab from being selected or focused. */\n  disabled?: boolean;\n\n  /** Content rendered inside the tab trigger. */\n  tab: ReactNode;\n\n  /** Content rendered inside the tab panel. */\n  children: ReactNode;\n};\n\ntype TabsProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\" | \"onChange\"\n> & {\n  /** Position of the tab navigation. Defaults to top. */\n  tabBarPosition?: TabsPosition;\n\n  /** Initially active tab. Defaults to the first tab. */\n  initialActiveId?: string;\n\n  /** Active tab for controlled usage. */\n  activeId?: string;\n\n  /** Called whenever a tab is activated. */\n  onActivate?: (tabId: string) => void;\n\n  /** Keep all tab panel contents mounted. Defaults to false. */\n  forceMountContent?: boolean;\n\n  children: ReactNode;\n};\n\nconst TabsTab = ({ children }: TabsTabProps) => <>{children}</>;\n\nconst TabsRoot = ({\n  tabBarPosition = \"top\",\n  initialActiveId,\n  activeId,\n  onActivate,\n  forceMountContent = false,\n  children,\n  className,\n  ...rootProps\n}: TabsProps) => {\n  const generatedId = useId();\n  const isControlled = activeId !== undefined;\n\n  const tabs = Children.toArray(children).filter(isTabElement);\n\n  const firstEnabledTabId = tabs.find((tab) => !tab.props.disabled)?.props.id;\n\n  const [uncontrolledActiveId, setUncontrolledActiveId] = useState<\n    string | undefined\n  >(() => initialActiveId ?? firstEnabledTabId);\n\n  const requestedActiveId = isControlled ? activeId : uncontrolledActiveId;\n\n  const currentActiveId = tabs.some(\n    (tab) => tab.props.id === requestedActiveId && !tab.props.disabled,\n  )\n    ? requestedActiveId\n    : firstEnabledTabId;\n\n  const isVertical = tabBarPosition === \"left\" || tabBarPosition === \"right\";\n  const dir = rootProps.dir === \"rtl\" ? \"rtl\" : \"ltr\";\n\n  const previousActiveIndex = useRef(\n    Math.max(\n      0,\n      tabs.findIndex((tab) => tab.props.id === currentActiveId),\n    ),\n  );\n\n  const currentActiveIndex = Math.max(\n    0,\n    tabs.findIndex((tab) => tab.props.id === currentActiveId),\n  );\n\n  const slideDirection =\n    currentActiveIndex > previousActiveIndex.current\n      ? 1\n      : currentActiveIndex < previousActiveIndex.current\n        ? -1\n        : 0;\n\n  if (currentActiveId !== tabs[previousActiveIndex.current]?.props.id) {\n    previousActiveIndex.current = currentActiveIndex;\n  }\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: tabs.map((tab) => ({\n      id: tab.props.id,\n      disabled: tab.props.disabled,\n    })),\n    orientation: isVertical ? \"vertical\" : \"horizontal\",\n    dir,\n    initialActiveId: currentActiveId,\n  });\n\n  const isKeyboardNavigation = useRef(false);\n\n  const activateTab = (tabId: string) => {\n    if (\n      !tabs.some((tab) => tab.props.id === tabId && !tab.props.disabled)\n    ) {\n      return;\n    }\n\n    if (!isControlled) {\n      setUncontrolledActiveId(tabId);\n    }\n\n    onActivate?.(tabId);\n  };\n\n  const getTabId = (tabId: string) =>\n    `${generatedId}-tab-${encodeURIComponent(tabId)}`;\n\n  const getPanelId = (tabId: string) =>\n    `${generatedId}-panel-${encodeURIComponent(tabId)}`;\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    id: string,\n  ) => {\n    isKeyboardNavigation.current = true;\n\n    try {\n      rovingFocus.onItemKeyDown(event, id);\n    } finally {\n      isKeyboardNavigation.current = false;\n    }\n  };\n\n  const handleFocus = (id: string) => {\n    rovingFocus.onItemFocus(id);\n\n    // Tabs use automatic activation: moving keyboard focus also activates\n    // the newly focused tab.\n    if (isKeyboardNavigation.current) {\n      activateTab(id);\n    }\n  };\n\n  const handleClick = (id: string) => {\n    rovingFocus.onItemFocus(id);\n    activateTab(id);\n  };\n\n  return (\n    <div\n      {...rootProps}\n      className={cn(\"puzzle-tabs\", `puzzle-tabs--${tabBarPosition}`, className)}\n      data-orientation={isVertical ? \"vertical\" : \"horizontal\"}\n      data-position={tabBarPosition}\n    >\n      <div\n        className=\"puzzle-tabs__list\"\n        role=\"tablist\"\n        aria-orientation={isVertical ? \"vertical\" : \"horizontal\"}\n      >\n        {tabs.map((tab) => {\n          const { id, tab: tabContent, disabled = false } = tab.props;\n          const isActive = id === currentActiveId;\n\n          return (\n            <button\n              key={id}\n              ref={rovingFocus.getItemRef(id)}\n              id={getTabId(id)}\n              type=\"button\"\n              role=\"tab\"\n              className=\"puzzle-tabs__trigger\"\n              disabled={disabled}\n              aria-selected={isActive}\n              aria-controls={getPanelId(id)}\n              tabIndex={disabled ? -1 : isActive ? 0 : -1}\n              data-state={isActive ? \"active\" : \"inactive\"}\n              onClick={() => handleClick(id)}\n              onFocus={() => handleFocus(id)}\n              onKeyDown={(event) => handleKeyDown(event, id)}\n            >\n              {tabContent}\n            </button>\n          );\n        })}\n      </div>\n\n      <div\n        className=\"puzzle-tabs__content\"\n        data-direction={slideDirection}\n        data-position={tabBarPosition}\n      >\n        {tabs.map((tab) => {\n          const { id, children: content } = tab.props;\n          const isActive = id === currentActiveId;\n\n          // The panel element always exists so every tab's aria-controls\n          // resolves; only inactive content is unmounted.\n          return (\n            <div\n              key={id}\n              id={getPanelId(id)}\n              role=\"tabpanel\"\n              aria-labelledby={getTabId(id)}\n              hidden={!isActive}\n              tabIndex={0}\n              className=\"puzzle-tabs__panel\"\n              data-state={isActive ? \"active\" : \"inactive\"}\n            >\n              {forceMountContent || isActive ? content : null}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nconst Tabs = Object.assign(TabsRoot, {\n  Tab: TabsTab,\n});\n\nexport { Tabs, TabsTab, type TabsProps, type TabsTabProps, type TabsPosition };\n"],"mappings":"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"}

package/dist/components/navigation/tabs/tabs.css

@@ -0,0 +1,216 @@
+.puzzle-tabs {
+  --puzzle-tabs-border-color: var(--puzzle-color-border, #e5e0d6);
+  --puzzle-tabs-indicator-color: var(--puzzle-color-primary);
+  --puzzle-tabs-indicator-size: 2px;
+  --puzzle-tabs-gap: var(--puzzle-space-2, .5rem);
+  --puzzle-tabs-duration: var(--puzzle-duration-fast, .15s);
+  --puzzle-tabs-easing: var(--puzzle-easing-standard, ease);
+  min-width: 0;
+  min-height: 0;
+  color: var(--puzzle-color-text, #171717);
+  display: flex;
+}
+
+.puzzle-tabs__list {
+  gap: var(--puzzle-tabs-gap);
+  user-select: none;
+  border-color: var(--puzzle-tabs-border-color);
+  flex: none;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-tabs__trigger {
+  min-width: 0;
+  padding: var(--puzzle-space-3, .75rem) var(--puzzle-space-4, 1rem);
+  color: var(--puzzle-color-text-muted);
+  font-family: var(--puzzle-font-family-subtitle1, inherit);
+  font-size: var(--puzzle-font-size-subtitle1, 1rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-subtitle1, 1.35);
+  letter-spacing: var(--puzzle-font-letter-spacing-subtitle1, 0);
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: color var(--puzzle-tabs-duration) var(--puzzle-tabs-easing),
+        background-color var(--puzzle-tabs-duration) var(--puzzle-tabs-easing);
+  background: none;
+  border: 0;
+  border-radius: 0;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+}
+
+.puzzle-tabs__trigger:hover:not(:disabled) {
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-tabs__trigger:disabled {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
+.puzzle-tabs__trigger:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: -3px;
+}
+
+.puzzle-tabs__trigger[data-state="active"] {
+  color: var(--puzzle-color-primary);
+}
+
+.puzzle-tabs--top .puzzle-tabs__list, .puzzle-tabs--bottom .puzzle-tabs__list {
+  user-select: none;
+  border-bottom: var(--puzzle-border-width, 1px) solid var(--puzzle-tabs-border-color);
+  flex-direction: row;
+  overflow: auto hidden;
+}
+
+.puzzle-tabs--top .puzzle-tabs__trigger:after, .puzzle-tabs--bottom .puzzle-tabs__trigger:after {
+  height: var(--puzzle-tabs-indicator-size);
+  background: var(--puzzle-tabs-indicator-color);
+  content: "";
+  transition: transform var(--puzzle-tabs-duration) var(--puzzle-tabs-easing);
+  position: absolute;
+  left: 0;
+  right: 0;
+  transform: scaleX(0);
+}
+
+.puzzle-tabs--top .puzzle-tabs__trigger:after {
+  bottom: calc(-1 * var(--puzzle-border-width, 1px));
+}
+
+.puzzle-tabs--bottom .puzzle-tabs__trigger:after {
+  top: calc(-1 * var(--puzzle-border-width, 1px));
+}
+
+.puzzle-tabs--top .puzzle-tabs__trigger[data-state="active"]:after, .puzzle-tabs--bottom .puzzle-tabs__trigger[data-state="active"]:after {
+  transform: scaleX(1);
+}
+
+.puzzle-tabs--left, .puzzle-tabs--right {
+  flex-direction: row;
+}
+
+.puzzle-tabs--left .puzzle-tabs__list, .puzzle-tabs--right .puzzle-tabs__list {
+  border-inline-end: var(--puzzle-border-width, 1px) solid var(--puzzle-tabs-border-color);
+  flex-direction: column;
+}
+
+.puzzle-tabs--right .puzzle-tabs__list {
+  border-inline-end: 0;
+  border-inline-start: var(--puzzle-border-width, 1px) solid var(--puzzle-tabs-border-color);
+  order: 1;
+}
+
+.puzzle-tabs--left .puzzle-tabs__trigger, .puzzle-tabs--right .puzzle-tabs__trigger {
+  text-align: start;
+  justify-content: flex-start;
+}
+
+.puzzle-tabs--left .puzzle-tabs__trigger:after, .puzzle-tabs--right .puzzle-tabs__trigger:after {
+  width: var(--puzzle-tabs-indicator-size);
+  background: var(--puzzle-tabs-indicator-color);
+  content: "";
+  transition: transform var(--puzzle-tabs-duration) var(--puzzle-tabs-easing);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  transform: scaleY(0);
+}
+
+.puzzle-tabs--left .puzzle-tabs__trigger:after {
+  right: calc(-1 * var(--puzzle-border-width, 1px));
+}
+
+.puzzle-tabs--right .puzzle-tabs__trigger:after {
+  left: calc(-1 * var(--puzzle-border-width, 1px));
+}
+
+.puzzle-tabs--left .puzzle-tabs__trigger[data-state="active"]:after, .puzzle-tabs--right .puzzle-tabs__trigger[data-state="active"]:after {
+  transform: scaleY(1);
+}
+
+.puzzle-tabs__content {
+  min-width: 0;
+  min-height: 0;
+  padding: var(--puzzle-space-4, 1rem);
+  flex: auto;
+  position: relative;
+}
+
+.puzzle-tabs__panel {
+  opacity: 1;
+  min-width: 0;
+  transition: opacity var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease),
+        transform var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease);
+  outline: none;
+  transform: translate3d(0, 0, 0);
+}
+
+.puzzle-tabs__panel[hidden] {
+  display: none;
+}
+
+.puzzle-tabs__panel[data-state="active"] {
+  animation: puzzle-tabs-slide-in var(--puzzle-duration-normal, .25s) var(--puzzle-easing-standard, ease) both;
+}
+
+.puzzle-tabs__content[data-position="top"] {
+  --puzzle-tabs-slide-x: 0;
+  --puzzle-tabs-slide-y: -12px;
+}
+
+.puzzle-tabs__content[data-position="bottom"] {
+  --puzzle-tabs-slide-x: 0;
+  --puzzle-tabs-slide-y: 12px;
+}
+
+.puzzle-tabs__content[data-position="left"] {
+  --puzzle-tabs-slide-x: -12px;
+  --puzzle-tabs-slide-y: 0;
+}
+
+.puzzle-tabs__content[data-position="right"] {
+  --puzzle-tabs-slide-x: 12px;
+  --puzzle-tabs-slide-y: 0;
+}
+
+.puzzle-tabs__content[data-direction="-1"] {
+  --puzzle-tabs-slide-x: calc(var(--puzzle-tabs-slide-x) * -1);
+  --puzzle-tabs-slide-y: calc(var(--puzzle-tabs-slide-y) * -1);
+}
+
+@keyframes puzzle-tabs-slide-in {
+  from {
+    opacity: 0;
+    transform: translate3d(var(--puzzle-tabs-slide-x), var(--puzzle-tabs-slide-y), 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.puzzle-tabs--top, .puzzle-tabs--bottom {
+  flex-direction: column;
+}
+
+.puzzle-tabs--bottom .puzzle-tabs__list {
+  border-top: var(--puzzle-border-width, 1px) solid var(--puzzle-tabs-border-color);
+  border-bottom: 0;
+  order: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-tabs__trigger, .puzzle-tabs__trigger:after, .puzzle-tabs__panel {
+    transition: none;
+    animation: none;
+  }
+}