@manifest-editor/components 1.0.2 → 1.1.0

package/dist/index.cjs

@@ -104,7 +104,7 @@ function ActionButton({
     {
       className: cn(
         //
-        "flex gap-1 items-center px-2 py-1 bg-gray-100 text-me-primary-500 text-sm rounded hover:bg-gray-200",
+        "border-none flex gap-1 items-center px-2 py-1 bg-gray-100 text-me-primary-500 text-sm rounded hover:bg-gray-200",
         primary ? "bg-me-primary-500 text-white hover:bg-me-primary-600" : "",
         center ? "place-content-center" : "",
         className2
@@ -228,8 +228,12 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 function Sidebar({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full h-full flex flex-col overflow-hidden", children });
 }
-function SidebarContent({ children, className: className2 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("flex-1 min-h-0 overflow-y-auto", className2), children });
+function SidebarContent({
+  children,
+  className: className2,
+  padding
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("flex-1 min-h-0 overflow-y-auto", className2, padding && "p-3"), children });
 }
 function SidebarHeader(props) {
   const { actions, title } = props;
@@ -267,7 +271,7 @@ function PanelSideMenuItem(props) {
     "button",
     {
       className: cn(
-        "aspect-square w-full flex justify-center items-center hover:bg-me-primary-100 hover:text-black [&>svg]:text-2xl cursor-default",
+        "border-none aspect-square w-full flex justify-center items-center hover:bg-me-primary-100 hover:text-black [&>svg]:text-2xl cursor-default",
         props.selected ? "bg-me-primary-500 hover:bg-me-primary-600 hover:text-white text-white" : "text-me-gray-700"
       ),
       onMouseDown: props.onClick,
@@ -282,7 +286,7 @@ function PanelSideMenuItem(props) {
 // src/PanelSideMenu.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function PanelSideMenu(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bg-white border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime5.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bg-white border-me-gray-300 border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime5.Fragment, { children: [
     panel.divide ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 block w-2 min-h-1" }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       PanelSideMenuItem,
@@ -516,10 +520,10 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 function Modal({ id, title, open = true, onClose, actions, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.Dialog, { open, onClose, id, className: "relative z-[500]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `fixed inset-0 bg-black/30 animate-fadeIn z-[501]`, "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative p-4 w-full max-w-3xl max-h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl dark:bg-gray-700 max-h-[80vh] flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex  items-center justify-between p-4 md:p-5 rounded-t-lg dark:border-gray-600 sticky top-0 bg-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react4.DialogTitle, { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.CloseButton, { className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative p-4 w-full max-w-3xl max-h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl max-h-[80vh] flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex  items-center justify-between p-4 md:p-5 rounded-t-lg sticky top-0 bg-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react4.DialogTitle, { className: "text-xl font-semibold text-gray-900 ", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.CloseButton, { className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "svg",
             {
@@ -544,7 +548,7 @@ function Modal({ id, title, open = true, onClose, actions, children }) {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react4.Description, { className: "flex-1 min-h-0 overflow-y-auto", children }),
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600 justify-end", children: actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b justify-end", children: actions }) : null
     ] }) }) })
   ] }) });
 }
@@ -670,7 +674,7 @@ function CreatorGridItem(props) {
       id: props.id,
       onAction: props.onClick,
       className: ($s) => (0, import_tailwind_merge3.twMerge)(
-        "bg-white p-2 rounded-md border hover:border-me-primary-500",
+        "bg-white p-2 border-me-gray-300 rounded-md border hover:border-me-primary-500",
         $s.isFocused && "border-me-primary-500 outline-me-primary-500 outline-2"
       ),
       children: [
@@ -1061,7 +1065,7 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
               import_react_aria_components7.Button,
               {
                 className: cn(
-                  "rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
+                  "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
                   selectedIndex > hidden && "bg-me-primary-500 text-white rounded"
                 ),
                 children: "MORE"

package/dist/index.css

@@ -305,6 +305,9 @@
 .border-dotted {
   border-style: dotted;
 }
+.border-none {
+  border-style: none;
+}
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -317,6 +320,10 @@
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
+.border-me-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(217 217 217 / var(--tw-border-opacity));
+}
 .border-me-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(184 76 116 / var(--tw-border-opacity));
@@ -393,6 +400,9 @@
 .p-2 {
   padding: 0.5rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -778,28 +788,6 @@
     padding: 1.25rem;
   }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:border-gray-600 {
-    --tw-border-opacity: 1;
-    border-color: rgb(75 85 99 / var(--tw-border-opacity));
-  }
-  .dark\:bg-gray-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  }
-  .dark\:text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-  .dark\:hover\:bg-gray-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-  .dark\:hover\:text-white:hover {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-}
 .\[\&\>svg\]\:h-16 > svg {
   height: 4rem;
 }

package/dist/index.d.cts

@@ -17,9 +17,10 @@ declare function ActionButton({ className, primary, center, children, ...props }
 declare function Sidebar({ children }: {
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarContent({ children, className }: {
+declare function SidebarContent({ children, className, padding, }: {
     children: React.ReactNode;
     className?: string;
+    padding?: boolean;
 }): react_jsx_runtime.JSX.Element;
 interface SidebarHeaderProps {
     actions?: Array<{

package/dist/index.d.ts

@@ -17,9 +17,10 @@ declare function ActionButton({ className, primary, center, children, ...props }
 declare function Sidebar({ children }: {
     children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function SidebarContent({ children, className }: {
+declare function SidebarContent({ children, className, padding, }: {
     children: React.ReactNode;
     className?: string;
+    padding?: boolean;
 }): react_jsx_runtime.JSX.Element;
 interface SidebarHeaderProps {
     actions?: Array<{

package/dist/index.js

@@ -24,7 +24,7 @@ function ActionButton({
     {
       className: cn(
         //
-        "flex gap-1 items-center px-2 py-1 bg-gray-100 text-me-primary-500 text-sm rounded hover:bg-gray-200",
+        "border-none flex gap-1 items-center px-2 py-1 bg-gray-100 text-me-primary-500 text-sm rounded hover:bg-gray-200",
         primary ? "bg-me-primary-500 text-white hover:bg-me-primary-600" : "",
         center ? "place-content-center" : "",
         className2
@@ -161,8 +161,12 @@ import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function Sidebar({ children }) {
   return /* @__PURE__ */ jsx3("div", { className: "w-full h-full flex flex-col overflow-hidden", children });
 }
-function SidebarContent({ children, className: className2 }) {
-  return /* @__PURE__ */ jsx3("div", { className: cn("flex-1 min-h-0 overflow-y-auto", className2), children });
+function SidebarContent({
+  children,
+  className: className2,
+  padding
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: cn("flex-1 min-h-0 overflow-y-auto", className2, padding && "p-3"), children });
 }
 function SidebarHeader(props) {
   const { actions, title } = props;
@@ -200,7 +204,7 @@ function PanelSideMenuItem(props) {
     "button",
     {
       className: cn(
-        "aspect-square w-full flex justify-center items-center hover:bg-me-primary-100 hover:text-black [&>svg]:text-2xl cursor-default",
+        "border-none aspect-square w-full flex justify-center items-center hover:bg-me-primary-100 hover:text-black [&>svg]:text-2xl cursor-default",
         props.selected ? "bg-me-primary-500 hover:bg-me-primary-600 hover:text-white text-white" : "text-me-gray-700"
       ),
       onMouseDown: props.onClick,
@@ -215,7 +219,7 @@ function PanelSideMenuItem(props) {
 // src/PanelSideMenu.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function PanelSideMenu(props) {
-  return /* @__PURE__ */ jsx5("div", { className: "bg-white border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsx5("div", { className: "bg-white border-me-gray-300 border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ jsxs3(Fragment, { children: [
     panel.divide ? /* @__PURE__ */ jsx5("div", { className: "flex-1 block w-2 min-h-1" }) : null,
     /* @__PURE__ */ jsx5(
       PanelSideMenuItem,
@@ -449,10 +453,10 @@ import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-ru
 function Modal({ id, title, open = true, onClose, actions, children }) {
   return /* @__PURE__ */ jsx12(Fragment2, { children: /* @__PURE__ */ jsxs8(Dialog, { open, onClose, id, className: "relative z-[500]", children: [
     /* @__PURE__ */ jsx12("div", { className: `fixed inset-0 bg-black/30 animate-fadeIn z-[501]`, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ jsx12("div", { className: "relative p-4 w-full max-w-3xl max-h-full", children: /* @__PURE__ */ jsxs8(DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl dark:bg-gray-700 max-h-[80vh] flex flex-col", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex  items-center justify-between p-4 md:p-5 rounded-t-lg dark:border-gray-600 sticky top-0 bg-white", children: [
-        /* @__PURE__ */ jsx12(DialogTitle, { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
-        /* @__PURE__ */ jsxs8(CloseButton, { className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [
+    /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ jsx12("div", { className: "relative p-4 w-full max-w-3xl max-h-full", children: /* @__PURE__ */ jsxs8(DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl max-h-[80vh] flex flex-col", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex  items-center justify-between p-4 md:p-5 rounded-t-lg sticky top-0 bg-white", children: [
+        /* @__PURE__ */ jsx12(DialogTitle, { className: "text-xl font-semibold text-gray-900 ", children: title }),
+        /* @__PURE__ */ jsxs8(CloseButton, { className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center", children: [
           /* @__PURE__ */ jsx12(
             "svg",
             {
@@ -477,7 +481,7 @@ function Modal({ id, title, open = true, onClose, actions, children }) {
         ] })
       ] }),
       /* @__PURE__ */ jsx12(Description, { className: "flex-1 min-h-0 overflow-y-auto", children }),
-      actions ? /* @__PURE__ */ jsx12("div", { className: "flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600 justify-end", children: actions }) : null
+      actions ? /* @__PURE__ */ jsx12("div", { className: "flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b justify-end", children: actions }) : null
     ] }) }) })
   ] }) });
 }
@@ -608,7 +612,7 @@ function CreatorGridItem(props) {
       id: props.id,
       onAction: props.onClick,
       className: ($s) => twMerge3(
-        "bg-white p-2 rounded-md border hover:border-me-primary-500",
+        "bg-white p-2 border-me-gray-300 rounded-md border hover:border-me-primary-500",
         $s.isFocused && "border-me-primary-500 outline-me-primary-500 outline-2"
       ),
       children: [
@@ -999,7 +1003,7 @@ function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
               Button5,
               {
                 className: cn(
-                  "rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
+                  "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
                   selectedIndex > hidden && "bg-me-primary-500 text-white rounded"
                 ),
                 children: "MORE"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manifest-editor/components",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "bugs": "https://github.com/digirati-co-uk/iiif-manifest-editor/issues",
   "repository": {
@@ -51,10 +51,10 @@
     "@iiif/presentation-3": "^2.2.3",
     "clsx": "^2.1.1",
     "polygon-editor": "^0.0.4",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-aria": "^3.33.1",
     "react-aria-components": "^1.2.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-iiif-vault": "^1.2.1",
     "react-lazy-load-image-component": "^1.6.0",
     "tailwind-merge": "^2.3.0"
@@ -63,18 +63,18 @@
     "@repo/eslint-config": "0.0.0",
     "@storylite/storylite": "^0.15.1",
     "@storylite/vite-plugin": "^0.15.0",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.24",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-lazy-load-image-component": "^1.6.4",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "tsup": "^8.0.2",
-    "vite": "^5.2.8"
+    "vite": "^5.4.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "globalName": "ClientVault",
-  "gitHead": "083fd2ce7d40755fb1857490e006e9854906d031"
+  "gitHead": "64dd0a345330544398ac49a35484f45171488b4e"
 }