@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ui/tooltip.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "../../lib/utils";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/components/ui/tree.cjs

@@ -0,0 +1,131 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _radixui = require('radix-ui');
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _utils = require('../../lib/utils');
+const TreeContext = React.createContext({
+  currentItem: void 0,
+  indent: 20,
+  tree: void 0
+});
+function useTreeContext() {
+  return React.use(TreeContext);
+}
+function Tree({ indent = 20, tree, className, ...props }) {
+  const containerProps = tree && typeof tree.getContainerProps === "function" ? tree.getContainerProps() : {};
+  const mergedProps = { ...props, ...containerProps };
+  const { style: propStyle, ...otherProps } = mergedProps;
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-indent": `${indent}px`
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TreeContext.Provider, { value: { indent, tree }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "flex flex-col", className),
+      "data-slot": "tree",
+      style: mergedStyle,
+      ...otherProps
+    }
+  ) });
+}
+function TreeItem({
+  item,
+  className,
+  asChild,
+  children,
+  ...props
+}) {
+  const { indent } = useTreeContext();
+  const itemProps = typeof item.getProps === "function" ? item.getProps() : {};
+  const mergedProps = { ...props, ...itemProps };
+  const { style: propStyle, ...otherProps } = mergedProps;
+  const treePadding = item.getItemMeta().level * indent;
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-padding": `${treePadding}px`,
+    paddingInlineStart: `${treePadding}px`
+  };
+  const Comp = asChild ? _radixui.Slot.Root : "button";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TreeContext.Provider, { value: { currentItem: item, indent }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Comp,
+    {
+      "aria-expanded": item.isExpanded(),
+      className: _utils.cn.call(void 0, 
+        "z-10 w-full select-none ps-(--tree-padding) outline-hidden",
+        "transition-colors",
+        "focus:z-20 data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      "data-drag-target": typeof item.isDragTarget === "function" ? item.isDragTarget() || false : void 0,
+      "data-focus": typeof item.isFocused === "function" ? item.isFocused() || false : void 0,
+      "data-folder": typeof item.isFolder === "function" ? item.isFolder() || false : void 0,
+      "data-search-match": typeof item.isMatchingSearch === "function" ? item.isMatchingSearch() || false : void 0,
+      "data-selected": typeof item.isSelected === "function" ? item.isSelected() || false : void 0,
+      "data-slot": "tree-item",
+      style: mergedStyle,
+      ...otherProps,
+      children
+    }
+  ) });
+}
+function TreeItemLabel({
+  item: propItem,
+  children,
+  className,
+  ...props
+}) {
+  const { currentItem } = useTreeContext();
+  const item = propItem || currentItem;
+  if (!item) {
+    console.warn("TreeItemLabel: No item provided via props or context");
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "span",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex min-w-0 items-center gap-1 px-2 py-1",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      "data-slot": "tree-item-label",
+      ...props,
+      children: [
+        item.isFolder() && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDownIcon, { className: "in-aria-[expanded=false]:-rotate-90 size-4 shrink-0 text-muted-foreground" }),
+        children || (typeof item.getItemName === "function" ? item.getItemName() : null)
+      ]
+    }
+  );
+}
+function TreeDragLine({
+  className,
+  ...props
+}) {
+  const { tree } = useTreeContext();
+  if (!tree || typeof tree.getDragLineStyle !== "function") {
+    console.warn(
+      "TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method"
+    );
+    return null;
+  }
+  const dragLine = tree.getDragLineStyle();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "-mt-px before:-top-[3px] absolute z-30 h-0.5 w-[unset] bg-primary before:absolute before:left-0 before:size-2 before:rounded-full before:border-2 before:border-primary before:bg-background",
+        className
+      ),
+      style: dragLine,
+      ...props
+    }
+  );
+}
+
+
+
+
+
+exports.Tree = Tree; exports.TreeDragLine = TreeDragLine; exports.TreeItem = TreeItem; exports.TreeItemLabel = TreeItemLabel;

package/dist/components/ui/tree.d.cts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ItemInstance } from '@headless-tree/core';
+import * as React from 'react';
+
+interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+    indent?: number;
+    tree?: any;
+}
+declare function Tree({ indent, tree, className, ...props }: TreeProps): react_jsx_runtime.JSX.Element;
+interface TreeItemProps<T = any> extends React.HTMLAttributes<HTMLButtonElement> {
+    item: ItemInstance<T>;
+    indent?: number;
+    asChild?: boolean;
+}
+/**
+ * TreeItem, full-width row button.
+ *
+ * The row carries hover / selected / drag-target backgrounds so the
+ * highlight spans edge-to-edge (VSCode-style). Indentation is applied
+ * via `paddingInlineStart` so the background is unaffected.
+ */
+declare function TreeItem<T = any>({ item, className, asChild, children, ...props }: Omit<TreeItemProps<T>, "indent">): react_jsx_runtime.JSX.Element;
+interface TreeItemLabelProps<T = any> extends React.HTMLAttributes<HTMLSpanElement> {
+    item?: ItemInstance<T>;
+}
+/**
+ * TreeItemLabel, content wrapper inside a TreeItem.
+ *
+ * Layout-only (chevron + children). Background lives on the parent
+ * TreeItem so it spans the full row width.
+ */
+declare function TreeItemLabel<T = any>({ item: propItem, children, className, ...props }: TreeItemLabelProps<T>): react_jsx_runtime.JSX.Element | null;
+declare function TreeDragLine({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
+
+export { Tree, TreeDragLine, TreeItem, TreeItemLabel };

package/dist/components/ui/tree.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ItemInstance } from '@headless-tree/core';
+import * as React from 'react';
+
+interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+    indent?: number;
+    tree?: any;
+}
+declare function Tree({ indent, tree, className, ...props }: TreeProps): react_jsx_runtime.JSX.Element;
+interface TreeItemProps<T = any> extends React.HTMLAttributes<HTMLButtonElement> {
+    item: ItemInstance<T>;
+    indent?: number;
+    asChild?: boolean;
+}
+/**
+ * TreeItem, full-width row button.
+ *
+ * The row carries hover / selected / drag-target backgrounds so the
+ * highlight spans edge-to-edge (VSCode-style). Indentation is applied
+ * via `paddingInlineStart` so the background is unaffected.
+ */
+declare function TreeItem<T = any>({ item, className, asChild, children, ...props }: Omit<TreeItemProps<T>, "indent">): react_jsx_runtime.JSX.Element;
+interface TreeItemLabelProps<T = any> extends React.HTMLAttributes<HTMLSpanElement> {
+    item?: ItemInstance<T>;
+}
+/**
+ * TreeItemLabel, content wrapper inside a TreeItem.
+ *
+ * Layout-only (chevron + children). Background lives on the parent
+ * TreeItem so it spans the full row width.
+ */
+declare function TreeItemLabel<T = any>({ item: propItem, children, className, ...props }: TreeItemLabelProps<T>): react_jsx_runtime.JSX.Element | null;
+declare function TreeDragLine({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element | null;
+
+export { Tree, TreeDragLine, TreeItem, TreeItemLabel };

package/dist/components/ui/tree.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const TreeContext = React.createContext({
+  currentItem: void 0,
+  indent: 20,
+  tree: void 0
+});
+function useTreeContext() {
+  return React.use(TreeContext);
+}
+function Tree({ indent = 20, tree, className, ...props }) {
+  const containerProps = tree && typeof tree.getContainerProps === "function" ? tree.getContainerProps() : {};
+  const mergedProps = { ...props, ...containerProps };
+  const { style: propStyle, ...otherProps } = mergedProps;
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-indent": `${indent}px`
+  };
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value: { indent, tree }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col", className),
+      "data-slot": "tree",
+      style: mergedStyle,
+      ...otherProps
+    }
+  ) });
+}
+function TreeItem({
+  item,
+  className,
+  asChild,
+  children,
+  ...props
+}) {
+  const { indent } = useTreeContext();
+  const itemProps = typeof item.getProps === "function" ? item.getProps() : {};
+  const mergedProps = { ...props, ...itemProps };
+  const { style: propStyle, ...otherProps } = mergedProps;
+  const treePadding = item.getItemMeta().level * indent;
+  const mergedStyle = {
+    ...propStyle,
+    "--tree-padding": `${treePadding}px`,
+    paddingInlineStart: `${treePadding}px`
+  };
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value: { currentItem: item, indent }, children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "aria-expanded": item.isExpanded(),
+      className: cn(
+        "z-10 w-full select-none ps-(--tree-padding) outline-hidden",
+        "transition-colors",
+        "focus:z-20 data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      "data-drag-target": typeof item.isDragTarget === "function" ? item.isDragTarget() || false : void 0,
+      "data-focus": typeof item.isFocused === "function" ? item.isFocused() || false : void 0,
+      "data-folder": typeof item.isFolder === "function" ? item.isFolder() || false : void 0,
+      "data-search-match": typeof item.isMatchingSearch === "function" ? item.isMatchingSearch() || false : void 0,
+      "data-selected": typeof item.isSelected === "function" ? item.isSelected() || false : void 0,
+      "data-slot": "tree-item",
+      style: mergedStyle,
+      ...otherProps,
+      children
+    }
+  ) });
+}
+function TreeItemLabel({
+  item: propItem,
+  children,
+  className,
+  ...props
+}) {
+  const { currentItem } = useTreeContext();
+  const item = propItem || currentItem;
+  if (!item) {
+    console.warn("TreeItemLabel: No item provided via props or context");
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "flex min-w-0 items-center gap-1 px-2 py-1",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      "data-slot": "tree-item-label",
+      ...props,
+      children: [
+        item.isFolder() && /* @__PURE__ */ jsx(ChevronDownIcon, { className: "in-aria-[expanded=false]:-rotate-90 size-4 shrink-0 text-muted-foreground" }),
+        children || (typeof item.getItemName === "function" ? item.getItemName() : null)
+      ]
+    }
+  );
+}
+function TreeDragLine({
+  className,
+  ...props
+}) {
+  const { tree } = useTreeContext();
+  if (!tree || typeof tree.getDragLineStyle !== "function") {
+    console.warn(
+      "TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method"
+    );
+    return null;
+  }
+  const dragLine = tree.getDragLineStyle();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "-mt-px before:-top-[3px] absolute z-30 h-0.5 w-[unset] bg-primary before:absolute before:left-0 before:size-2 before:rounded-full before:border-2 before:border-primary before:bg-background",
+        className
+      ),
+      style: dragLine,
+      ...props
+    }
+  );
+}
+export {
+  Tree,
+  TreeDragLine,
+  TreeItem,
+  TreeItemLabel
+};

package/dist/hooks/use-mobile.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _react = require('react');
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    setIsMobile(mql.matches);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+
+
+exports.useIsMobile = useIsMobile;

package/dist/hooks/use-mobile.d.cts

@@ -0,0 +1,3 @@
+declare function useIsMobile(): boolean;
+
+export { useIsMobile };

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,3 @@
+declare function useIsMobile(): boolean;
+
+export { useIsMobile };

package/dist/hooks/use-mobile.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    setIsMobile(mql.matches);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+export {
+  useIsMobile
+};