@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/infinite-scroll.cjs

@@ -0,0 +1,95 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var infinite_scroll_exports = {};
+__export(infinite_scroll_exports, {
+  InfiniteScroll: () => InfiniteScroll
+});
+module.exports = __toCommonJS(infinite_scroll_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_react = require("react");
+const InfiniteScroll = (0, import_react.forwardRef)(
+  function InfiniteScroll2({
+    children,
+    loading = false,
+    hasMore = true,
+    onLoadMore,
+    threshold = "200px",
+    loadingIndicator,
+    endMessage,
+    className,
+    sentinelClassName
+  }, ref) {
+    const sentinelRef = (0, import_react.useRef)(null);
+    const onLoadMoreRef = (0, import_react.useRef)(onLoadMore);
+    (0, import_react.useEffect)(() => {
+      onLoadMoreRef.current = onLoadMore;
+    }, [onLoadMore]);
+    (0, import_react.useEffect)(() => {
+      const sentinel = sentinelRef.current;
+      if (!sentinel || !hasMore || loading) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry?.isIntersecting) {
+            onLoadMoreRef.current();
+          }
+        },
+        {
+          rootMargin: `0px 0px ${threshold} 0px`,
+          threshold: 0
+        }
+      );
+      observer.observe(sentinel);
+      return () => observer.disconnect();
+    }, [hasMore, loading, threshold]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_cn.cn)(className),
+        "data-ds": "",
+        "data-ds-component": "infinite-scroll",
+        "aria-busy": loading || void 0,
+        children: [
+          children,
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: sentinelRef,
+              className: (0, import_cn.cn)("w-full", sentinelClassName),
+              "aria-hidden": "true"
+            }
+          ),
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center py-4", children: loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-primary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading more..." })
+          ] }) }),
+          !hasMore && !loading && endMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "py-4", children: endMessage })
+        ]
+      }
+    );
+  }
+);
+InfiniteScroll.displayName = "InfiniteScroll";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InfiniteScroll
+});

package/dist/components/infinite-scroll.d.cts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface InfiniteScrollProps {
+    /** Content to render (the list items). */
+    children: ReactNode;
+    /** Whether more data is currently being loaded. */
+    loading?: boolean;
+    /** Whether there is more data to load. */
+    hasMore?: boolean;
+    /** Callback to trigger loading more data. */
+    onLoadMore: () => void;
+    /**
+     * IntersectionObserver rootMargin value. Controls how far from the
+     * bottom the trigger fires.
+     * @default "200px"
+     */
+    threshold?: string;
+    /** Custom loading indicator. */
+    loadingIndicator?: ReactNode;
+    /** Content to show when all data has been loaded. */
+    endMessage?: ReactNode;
+    /** Additional CSS classes on the container. */
+    className?: string;
+    /** Additional CSS classes on the sentinel element. */
+    sentinelClassName?: string;
+}
+/**
+ * `InfiniteScroll` — scroll-triggered infinite loading.
+ *
+ * Renders children with a sentinel element at the bottom. When the
+ * sentinel enters the viewport (via IntersectionObserver), it calls
+ * `onLoadMore`. Shows a loading indicator while fetching and an optional
+ * end message when `hasMore` is false.
+ *
+ * @example
+ * ```tsx
+ * const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(...);
+ *
+ * <InfiniteScroll
+ *   loading={isFetchingNextPage}
+ *   hasMore={hasNextPage}
+ *   onLoadMore={fetchNextPage}
+ *   endMessage={<p className="text-center text-sm text-muted-foreground py-4">That's all!</p>}
+ * >
+ *   {data.pages.flat().map(item => (
+ *     <Card key={item.id}>{item.name}</Card>
+ *   ))}
+ * </InfiniteScroll>
+ * ```
+ */
+declare const InfiniteScroll: react.ForwardRefExoticComponent<InfiniteScrollProps & react.RefAttributes<HTMLDivElement>>;
+
+export { InfiniteScroll, type InfiniteScrollProps };

package/dist/components/infinite-scroll.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface InfiniteScrollProps {
+    /** Content to render (the list items). */
+    children: ReactNode;
+    /** Whether more data is currently being loaded. */
+    loading?: boolean;
+    /** Whether there is more data to load. */
+    hasMore?: boolean;
+    /** Callback to trigger loading more data. */
+    onLoadMore: () => void;
+    /**
+     * IntersectionObserver rootMargin value. Controls how far from the
+     * bottom the trigger fires.
+     * @default "200px"
+     */
+    threshold?: string;
+    /** Custom loading indicator. */
+    loadingIndicator?: ReactNode;
+    /** Content to show when all data has been loaded. */
+    endMessage?: ReactNode;
+    /** Additional CSS classes on the container. */
+    className?: string;
+    /** Additional CSS classes on the sentinel element. */
+    sentinelClassName?: string;
+}
+/**
+ * `InfiniteScroll` — scroll-triggered infinite loading.
+ *
+ * Renders children with a sentinel element at the bottom. When the
+ * sentinel enters the viewport (via IntersectionObserver), it calls
+ * `onLoadMore`. Shows a loading indicator while fetching and an optional
+ * end message when `hasMore` is false.
+ *
+ * @example
+ * ```tsx
+ * const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(...);
+ *
+ * <InfiniteScroll
+ *   loading={isFetchingNextPage}
+ *   hasMore={hasNextPage}
+ *   onLoadMore={fetchNextPage}
+ *   endMessage={<p className="text-center text-sm text-muted-foreground py-4">That's all!</p>}
+ * >
+ *   {data.pages.flat().map(item => (
+ *     <Card key={item.id}>{item.name}</Card>
+ *   ))}
+ * </InfiniteScroll>
+ * ```
+ */
+declare const InfiniteScroll: react.ForwardRefExoticComponent<InfiniteScrollProps & react.RefAttributes<HTMLDivElement>>;
+
+export { InfiniteScroll, type InfiniteScrollProps };

package/dist/components/infinite-scroll.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { forwardRef, useEffect, useRef } from "react";
+const InfiniteScroll = forwardRef(
+  function InfiniteScroll2({
+    children,
+    loading = false,
+    hasMore = true,
+    onLoadMore,
+    threshold = "200px",
+    loadingIndicator,
+    endMessage,
+    className,
+    sentinelClassName
+  }, ref) {
+    const sentinelRef = useRef(null);
+    const onLoadMoreRef = useRef(onLoadMore);
+    useEffect(() => {
+      onLoadMoreRef.current = onLoadMore;
+    }, [onLoadMore]);
+    useEffect(() => {
+      const sentinel = sentinelRef.current;
+      if (!sentinel || !hasMore || loading) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry?.isIntersecting) {
+            onLoadMoreRef.current();
+          }
+        },
+        {
+          rootMargin: `0px 0px ${threshold} 0px`,
+          threshold: 0
+        }
+      );
+      observer.observe(sentinel);
+      return () => observer.disconnect();
+    }, [hasMore, loading, threshold]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        "data-ds": "",
+        "data-ds-component": "infinite-scroll",
+        "aria-busy": loading || void 0,
+        children: [
+          children,
+          hasMore && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: sentinelRef,
+              className: cn("w-full", sentinelClassName),
+              "aria-hidden": "true"
+            }
+          ),
+          loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: loadingIndicator ?? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-primary" }),
+            /* @__PURE__ */ jsx("span", { children: "Loading more..." })
+          ] }) }),
+          !hasMore && !loading && endMessage && /* @__PURE__ */ jsx("div", { className: "py-4", children: endMessage })
+        ]
+      }
+    );
+  }
+);
+InfiniteScroll.displayName = "InfiniteScroll";
+export {
+  InfiniteScroll
+};

package/dist/components/input-group.cjs

@@ -0,0 +1,202 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var input_group_exports = {};
+__export(input_group_exports, {
+  InputGroup: () => InputGroup
+});
+module.exports = __toCommonJS(input_group_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+const containerVariants = (0, import_class_variance_authority.cva)(
+  [
+    "flex w-full items-stretch overflow-hidden",
+    "rounded-md border bg-background",
+    "transition-[border-color,box-shadow] duration-fast",
+    "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20",
+    "has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-input",
+        filled: "border-transparent bg-muted"
+      },
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-9 text-sm",
+        lg: "h-10 text-sm"
+      },
+      error: {
+        true: "border-danger focus-within:border-danger focus-within:ring-danger/20",
+        false: ""
+      }
+    },
+    defaultVariants: { variant: "default", size: "md", error: false }
+  }
+);
+const addonVariants = (0, import_class_variance_authority.cva)(
+  [
+    "inline-flex items-center justify-center shrink-0",
+    "bg-muted text-muted-foreground font-medium",
+    "select-none",
+    "border-border"
+  ],
+  {
+    variants: {
+      position: {
+        left: "border-r",
+        right: "border-l"
+      },
+      size: {
+        sm: "text-xs px-2",
+        md: "text-sm px-3",
+        lg: "text-sm px-3"
+      }
+    },
+    defaultVariants: { position: "left", size: "md" }
+  }
+);
+const iconSizeMap = {
+  sm: "[&>svg]:size-3.5",
+  md: "[&>svg]:size-4",
+  lg: "[&>svg]:size-4"
+};
+const prefixPaddingMap = {
+  sm: "pl-2",
+  md: "pl-3",
+  lg: "pl-3"
+};
+const suffixPaddingMap = {
+  sm: "pr-2",
+  md: "pr-3",
+  lg: "pr-3"
+};
+const inputLeftPaddingWithPrefix = {
+  sm: "pl-1.5",
+  md: "pl-2",
+  lg: "pl-2"
+};
+const inputLeftPaddingWithAddon = {
+  sm: "pl-2",
+  md: "pl-3",
+  lg: "pl-3"
+};
+const inputLeftPaddingWithoutPrefix = {
+  sm: "pl-2",
+  md: "pl-3",
+  lg: "pl-3"
+};
+const inputRightPaddingWithSuffix = {
+  sm: "pr-1.5",
+  md: "pr-2",
+  lg: "pr-2"
+};
+const inputRightPaddingWithAddon = {
+  sm: "pr-2",
+  md: "pr-3",
+  lg: "pr-3"
+};
+const inputRightPaddingWithoutSuffix = {
+  sm: "pr-2",
+  md: "pr-3",
+  lg: "pr-3"
+};
+const InputGroup = (0, import_react.forwardRef)(
+  function InputGroup2({
+    size = "md",
+    variant = "default",
+    prefix,
+    suffix,
+    addonLeft,
+    addonRight,
+    disabled = false,
+    error = false,
+    className,
+    inputClassName,
+    inputProps,
+    children
+  }, ref) {
+    const hasPrefix = !!prefix;
+    const hasSuffix = !!suffix;
+    const hasAddonRight = !!addonRight;
+    const inputPaddingLeft = hasPrefix ? inputLeftPaddingWithPrefix[size] : addonLeft ? inputLeftPaddingWithAddon[size] : inputLeftPaddingWithoutPrefix[size];
+    const inputPaddingRight = hasSuffix ? inputRightPaddingWithSuffix[size] : hasAddonRight ? inputRightPaddingWithAddon[size] : inputRightPaddingWithoutSuffix[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_cn.cn)(containerVariants({ variant, size, error }), className),
+        "data-ds": "",
+        "data-ds-component": "input-group",
+        "data-ds-size": size,
+        "data-ds-error": error ? "" : void 0,
+        children: [
+          addonLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)(addonVariants({ position: "left", size })), children: addonLeft }),
+          prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: (0, import_cn.cn)(
+                "inline-flex items-center justify-center shrink-0",
+                "text-muted-foreground pointer-events-none",
+                prefixPaddingMap[size],
+                iconSizeMap[size]
+              ),
+              children: prefix
+            }
+          ),
+          children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 flex items-center min-w-0", children }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              disabled,
+              className: (0, import_cn.cn)(
+                "flex-1 h-full bg-transparent outline-none text-foreground min-w-0",
+                "placeholder:text-muted-foreground",
+                inputPaddingLeft,
+                inputPaddingRight,
+                inputClassName
+              ),
+              ...inputProps
+            }
+          ),
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: (0, import_cn.cn)(
+                "inline-flex items-center justify-center shrink-0",
+                "text-muted-foreground pointer-events-none",
+                suffixPaddingMap[size],
+                iconSizeMap[size]
+              ),
+              children: suffix
+            }
+          ),
+          addonRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)(addonVariants({ position: "right", size })), children: addonRight })
+        ]
+      }
+    );
+  }
+);
+InputGroup.displayName = "InputGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputGroup
+});

package/dist/components/input-group.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes } from 'react';
+
+type InputGroupSize = "sm" | "md" | "lg";
+type InputGroupVariant = "default" | "filled";
+interface InputGroupProps {
+    size?: InputGroupSize;
+    variant?: InputGroupVariant;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    addonLeft?: ReactNode;
+    addonRight?: ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    inputClassName?: string;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    children?: ReactNode;
+}
+declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+export { InputGroup, type InputGroupProps, type InputGroupSize, type InputGroupVariant };

package/dist/components/input-group.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode, InputHTMLAttributes } from 'react';
+
+type InputGroupSize = "sm" | "md" | "lg";
+type InputGroupVariant = "default" | "filled";
+interface InputGroupProps {
+    size?: InputGroupSize;
+    variant?: InputGroupVariant;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    addonLeft?: ReactNode;
+    addonRight?: ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    inputClassName?: string;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    children?: ReactNode;
+}
+declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+export { InputGroup, type InputGroupProps, type InputGroupSize, type InputGroupVariant };