@syscore/ui-library 1.9.1 → 1.10.1

package/dist/index.d.ts

@@ -72,8 +72,10 @@ import { CommandItem } from '../client/components/ui/command';
 import { CommandList } from '../client/components/ui/command';
 import { CommandSeparator } from '../client/components/ui/command';
 import { CommandShortcut } from '../client/components/ui/command';
+import { CONCEPT_ICONS } from '../client/lib/concept-icons';
 import { ConceptColor } from '../client/components/icons/ConceptIcons';
 import { conceptColors } from '../client/lib/concept-colors';
+import { conceptOrder } from '../client/lib/concept-icons';
 import { ContextMenu } from '../client/components/ui/context-menu';
 import { ContextMenuCheckboxItem } from '../client/components/ui/context-menu';
 import { ContextMenuContent } from '../client/components/ui/context-menu';
@@ -478,10 +480,14 @@ export { CommandSeparator }
 
 export { CommandShortcut }
 
+export { CONCEPT_ICONS }
+
 export { ConceptColor }
 
 export { conceptColors }
 
+export { conceptOrder }
+
 export { ContextMenu }
 
 export { ContextMenuCheckboxItem }

package/dist/index.es.js

@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { GripVertical, X as X$1, PanelLeft, Check, Circle, Dot, ChevronLeft, ChevronRight, XIcon, Search, MoreHorizontal, ChevronDown, ArrowLeft, ArrowRight } from "lucide-react";
+import { GripVertical, X as X$1, PanelLeft, Check, Circle, Dot, ChevronLeft, ChevronRight, Search, MoreHorizontal, ChevronDown, ArrowLeft, ArrowRight } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { Slot } from "@radix-ui/react-slot";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
@@ -315,20 +315,40 @@ const AccordionHeaderRow = React.forwardRef(({ title, className }, ref) => {
 });
 AccordionHeaderRow.displayName = "AccordionHeaderRow";
 const AccordionItem = React.forwardRef(
-  ({ value, children, className, ...props }, ref) => {
+  ({ value, children, className, noBorderOnOpen, ...props }, ref) => {
     const { isExpanded: isExpandedFn } = useAccordion();
     const isExpanded = isExpandedFn(value);
     const itemContextValue = React.useMemo(
-      () => ({ value, isExpanded }),
-      [value, isExpanded]
+      () => ({ value, isExpanded, noBorderOnOpen }),
+      [value, isExpanded, noBorderOnOpen]
     );
-    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn(className), ...props, children }) });
+    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        style: noBorderOnOpen && isExpanded ? { borderBottom: "none" } : void 0,
+        ...props,
+        children
+      }
+    ) });
   }
 );
 AccordionItem.displayName = "AccordionItem";
 const AccordionHeader = React.forwardRef(
-  ({ children, className, onClick, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, onClick, className: cn(className), ...props, children });
+  ({ children, className, onClick, transparentOnOpen, ...props }, ref) => {
+    const { isExpanded } = useAccordionItem();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        onClick,
+        className: cn(className),
+        style: transparentOnOpen && isExpanded ? { backgroundColor: "transparent" } : void 0,
+        ...props,
+        children
+      }
+    );
   }
 );
 AccordionHeader.displayName = "AccordionHeader";
@@ -367,7 +387,7 @@ const AccordionTrigger = React.forwardRef(({ className, onClick, ...props }, ref
 AccordionTrigger.displayName = "AccordionTrigger";
 const AccordionContent = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { isExpanded } = useAccordionItem();
+    const { isExpanded, noBorderOnOpen } = useAccordionItem();
     return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -376,7 +396,10 @@ const AccordionContent = React.forwardRef(
         exit: { height: 0, opacity: 0 },
         transition: { duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] },
         className: cn(className),
-        style: { willChange: "opacity" },
+        style: {
+          willChange: "opacity",
+          ...noBorderOnOpen ? { borderTop: "none" } : {}
+        },
         children: /* @__PURE__ */ jsx("div", { ref, ...props, children })
       }
     ) });
@@ -2276,6 +2299,50 @@ function Calendar({
   );
 }
 Calendar.displayName = "Calendar";
+const UtilityClose = ({ className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          className: cn("size-3 text-inherit"),
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M10.8002 1.19995L1.2002 10.8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M1.2002 1.19995L10.8002 10.8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 function Dialog({
   ...props
 }) {
@@ -2298,6 +2365,7 @@ function DialogClose({
 }
 function DialogOverlay({
   className,
+  children,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
@@ -2305,7 +2373,8 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn("dialog-overlay", className),
-      ...props
+      ...props,
+      children
     }
   );
 }
@@ -2315,31 +2384,28 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn("dialog-content", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "dialog-content-inner", children }),
-          showCloseButton && /* @__PURE__ */ jsxs(
-            SheetPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "dialog-close",
-              children: [
-                /* @__PURE__ */ jsx(XIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsx(DialogOverlay, { children: /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      "data-slot": "dialog-content",
+      className: cn("dialog-content", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "dialog-content-inner", children }),
+        showCloseButton && /* @__PURE__ */ jsxs(
+          SheetPrimitive.Close,
+          {
+            "data-slot": "dialog-close",
+            className: "dialog-close",
+            children: [
+              /* @__PURE__ */ jsx(UtilityClose, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
 }
 function DialogHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -2369,7 +2435,7 @@ function DialogTitle({
     SheetPrimitive.Title,
     {
       "data-slot": "dialog-title",
-      className: cn("dialog-title heading-xxsmall", className),
+      className: cn("dialog-title heading-xxsmall text-center", className),
       ...props
     }
   );
@@ -2560,10 +2626,17 @@ const Tag = React.forwardRef(
     status,
     colorScheme = "light",
     className,
+    minWidth,
+    minHeight,
     style,
     onClick,
     ...props
   }, ref) => {
+    const mergedStyle = {
+      minWidth,
+      minHeight,
+      ...style
+    };
     if (status) {
       const statusClass = getStatusClass(status, colorScheme);
       return /* @__PURE__ */ jsx(
@@ -2572,7 +2645,7 @@ const Tag = React.forwardRef(
           ref,
           onClick,
           className: cn("overline-medium", statusClass, className),
-          style,
+          style: mergedStyle,
           ...props,
           children
         }
@@ -2585,7 +2658,7 @@ const Tag = React.forwardRef(
           ref,
           onClick,
           className: cn("tag-code", className),
-          style,
+          style: mergedStyle,
           ...props,
           children: /* @__PURE__ */ jsx("span", { className: "number-small font-semibold", style: { color: "inherit" }, children })
         }
@@ -2601,7 +2674,7 @@ const Tag = React.forwardRef(
           active ? "tag-general--active" : "tag-general--inactive",
           className
         ),
-        style,
+        style: mergedStyle,
         ...props,
         children
       }
@@ -5478,6 +5551,33 @@ const IconConceptInnovation = ({
     }
   );
 };
+const CONCEPT_ICONS = {
+  air: IconConceptAir,
+  water: IconConceptWater,
+  nourishment: IconConceptNourishment,
+  light: IconConceptLight,
+  movement: IconConceptMovement,
+  thermal: IconConceptThermalComfort,
+  "thermal-comfort": IconConceptThermalComfort,
+  sound: IconConceptSound,
+  materials: IconConceptMaterials,
+  community: IconConceptCommunity,
+  mind: IconConceptMind,
+  innovation: IconConceptInnovation
+};
+const conceptOrder = [
+  "air",
+  "water",
+  "nourishment",
+  "light",
+  "movement",
+  "thermal-comfort",
+  "sound",
+  "materials",
+  "community",
+  "mind",
+  "innovation"
+];
 function UtilityAccordion({ className }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -5549,50 +5649,6 @@ const UtilityClassification = ({
     }
   );
 };
-const UtilityClose = ({ className }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "size-4 flex items-center justify-center text-gray-500",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "12",
-          height: "12",
-          viewBox: "0 0 12 12",
-          fill: "none",
-          className: cn("size-3 text-inherit"),
-          children: [
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M10.8002 1.19995L1.2002 10.8",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M1.2002 1.19995L10.8002 10.8",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
 const UtilityCompare = ({
   className
 }) => {
@@ -9601,6 +9657,7 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   Button,
+  CONCEPT_ICONS,
   Calendar,
   Card,
   CardContent,
@@ -9878,6 +9935,7 @@ export {
   capitalize,
   cn,
   conceptColors,
+  conceptOrder,
   navigationMenuTriggerStyle,
   useAccordion,
   useAccordionItem,

package/package.json

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