@syscore/ui-library 1.4.0 → 1.5.0

package/dist/index.d.ts

@@ -170,6 +170,12 @@ import { navigationMenuTriggerStyle } from '../client/components/ui/navigation-m
 import { NavItem } from '../client/components/ui/navigation';
 import { NavLogo } from '../client/components/icons/NavLogo';
 import { Option as Option_2 } from '../client/components/ui/search';
+import { PageHeader } from '../client/components/ui/page-header';
+import { PageHeaderBadge } from '../client/components/ui/page-header';
+import { PageHeaderDescription } from '../client/components/ui/page-header';
+import { PageHeaderLeftContent } from '../client/components/ui/page-header';
+import { PageHeaderTitle } from '../client/components/ui/page-header';
+import { PageHeaderTopSection } from '../client/components/ui/page-header';
 import { Pagination } from '../client/components/ui/pagination';
 import { PaginationContent } from '../client/components/ui/pagination';
 import { PaginationEllipsis } from '../client/components/ui/pagination';
@@ -238,6 +244,14 @@ import { Slider } from '../client/components/ui/slider';
 import { Toaster as Sonner } from '../client/components/ui/sonner';
 import { StandardLogo } from '../client/components/icons/StandardLogo';
 import { StandardNavigation } from '../client/components/ui/standard-navigation';
+import { StandardTable } from '../client/components/ui/standard-table';
+import { StandardTableContainer } from '../client/components/ui/standard-table';
+import { StandardTableContent } from '../client/components/ui/standard-table';
+import { StandardTableHeader } from '../client/components/ui/standard-table';
+import { StandardTableHeaderRow } from '../client/components/ui/standard-table';
+import { StandardTableListRow } from '../client/components/ui/standard-table';
+import { StandardTableRow } from '../client/components/ui/standard-table';
+import { StandardTableTrigger } from '../client/components/ui/standard-table';
 import { Switch } from '../client/components/ui/switch';
 import { Tab } from '../client/hooks/use-tabs';
 import { Table } from '../client/components/ui/table';
@@ -648,6 +662,18 @@ export { NavLogo }
 
 export { Option_2 as Option }
 
+export { PageHeader }
+
+export { PageHeaderBadge }
+
+export { PageHeaderDescription }
+
+export { PageHeaderLeftContent }
+
+export { PageHeaderTitle }
+
+export { PageHeaderTopSection }
+
 export { Pagination }
 
 export { PaginationContent }
@@ -784,6 +810,22 @@ export { StandardLogo }
 
 export { StandardNavigation }
 
+export { StandardTable }
+
+export { StandardTableContainer }
+
+export { StandardTableContent }
+
+export { StandardTableHeader }
+
+export { StandardTableHeaderRow }
+
+export { StandardTableListRow }
+
+export { StandardTableRow }
+
+export { StandardTableTrigger }
+
 export { Switch }
 
 export { Tab }

package/dist/index.es.js

@@ -4629,6 +4629,363 @@ const CodeBadge = ({ code, className, style }) => {
     }
   );
 };
+const PageHeader = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("header", { ref, className: cn("page-header", className), ...props, children });
+  }
+);
+PageHeader.displayName = "PageHeader";
+const PageHeaderTopSection = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("page-header-top-section", className),
+      ...props,
+      children
+    }
+  );
+});
+PageHeaderTopSection.displayName = "PageHeaderTopSection";
+const PageHeaderLeftContent = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("page-header-left-content", className),
+      ...props,
+      children
+    }
+  );
+});
+PageHeaderLeftContent.displayName = "PageHeaderLeftContent";
+const PageHeaderBadge = React.forwardRef(
+  ({ children, animated = false, show = true, className, style, ...props }, ref) => {
+    if (animated) {
+      return /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.8 },
+          transition: { duration: 0.2 },
+          className,
+          style,
+          children
+        }
+      ) });
+    }
+    if (!show) return null;
+    return /* @__PURE__ */ jsx("div", { ref, className, style, ...props, children });
+  }
+);
+PageHeaderBadge.displayName = "PageHeaderBadge";
+const PageHeaderTitle = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("h1", { ref, className: cn("page-header-title", className), ...props, children });
+});
+PageHeaderTitle.displayName = "PageHeaderTitle";
+const PageHeaderDescription = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("page-header-description", className),
+      ...props,
+      children
+    }
+  );
+});
+PageHeaderDescription.displayName = "PageHeaderDescription";
+const StandardTableContext = React.createContext(null);
+const StandardTableRowContext = React.createContext(null);
+function useStandardTable() {
+  const context = React.useContext(StandardTableContext);
+  if (!context) {
+    throw new Error(
+      "StandardTable components must be used within <StandardTable>"
+    );
+  }
+  return context;
+}
+function useStandardTableRow() {
+  const context = React.useContext(StandardTableRowContext);
+  if (!context) {
+    throw new Error(
+      "StandardTableTrigger and StandardTableContent must be used within <StandardTableRow>"
+    );
+  }
+  return context;
+}
+const StandardTable = React.forwardRef(
+  ({
+    allowMultiple = false,
+    defaultExpanded,
+    expandedValues: controlledExpandedValues,
+    onExpandedChange,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const getInitialExpanded = () => {
+      if (!defaultExpanded) return /* @__PURE__ */ new Set();
+      if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
+      return /* @__PURE__ */ new Set([defaultExpanded]);
+    };
+    const [uncontrolledExpandedValues, setUncontrolledExpandedValues] = React.useState(getInitialExpanded);
+    const [isAllExpanded, setIsAllExpanded] = React.useState(false);
+    const isControlled = controlledExpandedValues !== void 0;
+    const expandedValues = isControlled ? controlledExpandedValues : uncontrolledExpandedValues;
+    const hasAnyExpanded = React.useMemo(
+      () => isAllExpanded || expandedValues.size > 0,
+      [isAllExpanded, expandedValues]
+    );
+    const isExpanded = React.useCallback(
+      (value) => isAllExpanded || expandedValues.has(value),
+      [isAllExpanded, expandedValues]
+    );
+    const toggle = React.useCallback(
+      (value) => {
+        const newValues = new Set(expandedValues);
+        if (newValues.has(value)) {
+          newValues.delete(value);
+        } else {
+          if (!allowMultiple) {
+            newValues.clear();
+          }
+          newValues.add(value);
+        }
+        if (!isControlled) {
+          setUncontrolledExpandedValues(newValues);
+        }
+        onExpandedChange == null ? void 0 : onExpandedChange(newValues);
+        setIsAllExpanded(false);
+      },
+      [allowMultiple, expandedValues, isControlled, onExpandedChange]
+    );
+    const expandAll = React.useCallback(() => {
+      setIsAllExpanded(true);
+      const emptySet = /* @__PURE__ */ new Set();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange == null ? void 0 : onExpandedChange(emptySet);
+    }, [isControlled, onExpandedChange]);
+    const collapseAll = React.useCallback(() => {
+      setIsAllExpanded(false);
+      const emptySet = /* @__PURE__ */ new Set();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange == null ? void 0 : onExpandedChange(emptySet);
+    }, [isControlled, onExpandedChange]);
+    const contextValue = React.useMemo(
+      () => ({
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple
+      }),
+      [
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple
+      ]
+    );
+    return /* @__PURE__ */ jsx(StandardTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border border-blue-200 rounded-xl overflow-hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+StandardTable.displayName = "StandardTable";
+const StandardTableHeader = React.forwardRef(({ title, hasExpanded, onToggleAll, className }, ref) => {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("standard-table-header", className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "standard-table-header__title body-large", children: title }),
+    onToggleAll && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        animate: { rotate: hasExpanded ? 180 : 0 },
+        transition: { duration: 0.2 },
+        className: "mx-6",
+        children: /* @__PURE__ */ jsx(Button, { size: "icon", onClick: onToggleAll, children: /* @__PURE__ */ jsx(UtilityChevronDown, {}) })
+      }
+    )
+  ] });
+});
+StandardTableHeader.displayName = "StandardTableHeader";
+const StandardTableHeaderRow = React.forwardRef(({ title, className }, ref) => {
+  const { hasAnyExpanded, expandAll, collapseAll } = useStandardTable();
+  const handleToggleAll = React.useCallback(() => {
+    if (hasAnyExpanded) {
+      collapseAll();
+    } else {
+      expandAll();
+    }
+  }, [hasAnyExpanded, collapseAll, expandAll]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("standard-table-header", className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "standard-table-header__title body-large", children: title }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        animate: { rotate: hasAnyExpanded ? 180 : 0 },
+        transition: { duration: 0.2 },
+        style: { willChange: "transform" },
+        children: /* @__PURE__ */ jsx(Button, { size: "icon", onClick: handleToggleAll, children: /* @__PURE__ */ jsx(UtilityChevronDown, {}) })
+      }
+    )
+  ] });
+});
+StandardTableHeaderRow.displayName = "StandardTableHeaderRow";
+const StandardTableRow = React.forwardRef(({ value, children, className, ...props }, ref) => {
+  const { isExpanded: isExpandedFn } = useStandardTable();
+  const isExpanded = isExpandedFn(value);
+  const rowContextValue = React.useMemo(
+    () => ({ value, isExpanded }),
+    [value, isExpanded]
+  );
+  return /* @__PURE__ */ jsx(StandardTableRowContext.Provider, { value: rowContextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("standard-table-row", className), ...props, children }) });
+});
+StandardTableRow.displayName = "StandardTableRow";
+const StandardTableRowHeader = React.forwardRef(({ children, className, onClick, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      onClick,
+      className: cn("standard-table-row-header", className),
+      ...props,
+      children
+    }
+  );
+});
+StandardTableRowHeader.displayName = "StandardTableRowHeader";
+const StandardTableTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggle } = useStandardTable();
+  const { value, isExpanded } = useStandardTableRow();
+  const handleClick = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      toggle(value);
+      onClick == null ? void 0 : onClick(e);
+    },
+    [toggle, value, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      animate: { rotate: isExpanded ? 180 : 0 },
+      transition: { duration: 0.2 },
+      style: { willChange: "transform" },
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          size: "icon",
+          variant: "clear",
+          onClick: handleClick,
+          className: cn("standard-table-trigger", className),
+          ...props,
+          children: /* @__PURE__ */ jsx(UtilityChevronDown, {})
+        }
+      )
+    }
+  );
+});
+StandardTableTrigger.displayName = "StandardTableTrigger";
+const StandardTableContent = React.forwardRef(({ children, className, ...props }, ref) => {
+  const { isExpanded } = useStandardTableRow();
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] },
+      className: cn("standard-table-content", className),
+      style: { willChange: "opacity" },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: "standard-table-content__inner",
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+});
+StandardTableContent.displayName = "StandardTableContent";
+const StandardTableListRow = React.forwardRef(
+  ({
+    icon,
+    badge,
+    title,
+    titleClassName,
+    rightContent,
+    onClick,
+    className,
+    variant: variant2 = "default",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        onClick,
+        className: cn(
+          "standard-table-list-row",
+          variant2 === "default" ? "standard-table-list-row--default" : "standard-table-list-row--nested",
+          className
+        ),
+        ...props,
+        children: [
+          icon,
+          badge,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "standard-table-list-row__title",
+                titleClassName || "body-large"
+              ),
+              children: title
+            }
+          ),
+          rightContent
+        ]
+      }
+    );
+  }
+);
+StandardTableListRow.displayName = "StandardTableListRow";
+const StandardTableContainer = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref,
+      className: cn("standard-table-container", className),
+      ...props,
+      children
+    }
+  );
+});
+StandardTableContainer.displayName = "StandardTableContainer";
 const Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
   return /* @__PURE__ */ jsx(
@@ -9597,6 +9954,12 @@ export {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
+  PageHeader,
+  PageHeaderBadge,
+  PageHeaderDescription,
+  PageHeaderLeftContent,
+  PageHeaderTitle,
+  PageHeaderTopSection,
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -9665,6 +10028,14 @@ export {
   Toaster as Sonner,
   StandardLogo,
   StandardNavigation,
+  StandardTable,
+  StandardTableContainer,
+  StandardTableContent,
+  StandardTableHeader,
+  StandardTableHeaderRow,
+  StandardTableListRow,
+  StandardTableRow,
+  StandardTableTrigger,
   Switch,
   Table,
   TableBody,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syscore/ui-library",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",