@eyesee/ui-components 0.2.0 → 0.4.0

package/README.md

@@ -14,12 +14,14 @@ npm install @eyesee/ui-components
 
 ### Peer dependencies
 
-Install these in your consuming application if not already present:
+npm 7+ installs these automatically when you add the package. Install manually only if your setup does not resolve peers:
 
 ```bash
-npm install react react-dom clsx react-hook-form react-toastify
+npm install react react-dom clsx react-hook-form react-toastify sass
 ```
 
+`sass` is required when you use the SCSS mixins entry point (`@eyesee/ui-components/mixins`) in your own stylesheets.
+
 ---
 
 ## Setup
@@ -36,15 +38,15 @@ import '@eyesee/ui-components/styles';
 
 Add `alias--main` and exactly one profile class to a common ancestor element — ideally `<body>`. The profile class controls the visual theme of the library:
 
-| Class | Use for |
-|---|---|
-| `alias--main` | Always required |
-| `mapped--internal` | Internal EyeSee tools |
+| Class              | Use for                      |
+| ------------------ | ---------------------------- |
+| `alias--main`      | Always required              |
+| `mapped--internal` | Internal EyeSee tools        |
 | `mapped--external` | External-facing applications |
 
 ```html
 <body class="alias--main mapped--internal">
-  ...
+    ...
 </body>
 ```
 
@@ -80,60 +82,60 @@ import { PlusIcon, DeleteIcon, EditIcon } from '@eyesee/ui-components/icons';
 
 ### Layout & Feedback
 
-| Component | Description |
-|---|---|
-| `Modal` | Dialog overlay with title, description, icon, and footer slots |
-| `Infobox` | Inline status message with icon, title, and body text |
-| `ProgressBar` | Determinate progress indicator with optional label and percentage |
-| `ExpandableItem` | Collapsible `<details>`-based section with a summary title |
+| Component        | Description                                                       |
+| ---------------- | ----------------------------------------------------------------- |
+| `Modal`          | Dialog overlay with title, description, icon, and footer slots    |
+| `Infobox`        | Inline status message with icon, title, and body text             |
+| `ProgressBar`    | Determinate progress indicator with optional label and percentage |
+| `ExpandableItem` | Collapsible `<details>`-based section with a summary title        |
 
 ### Navigation & Selection
 
-| Component | Description |
-|---|---|
-| `Tabs` | Tab group managing selection state; wraps `Tab` |
-| `Tab` | Individual tab rendered as a button or span |
+| Component | Description                                     |
+| --------- | ----------------------------------------------- |
+| `Tabs`    | Tab group managing selection state; wraps `Tab` |
+| `Tab`     | Individual tab rendered as a button or span     |
 
 ### Inputs & Form Fields
 
-| Component | Description |
-|---|---|
-| `InputField` | Single-line text input with label, icons, error, and info text |
-| `TextField` | Multi-line textarea with label, action buttons, error, and info text |
-| `SelectField` | Dropdown select with label and error support |
-| `Checkbox` | Checkbox with label, indeterminate state, and size variants |
-| `Radio` | Radio button with label and size variants |
-| `Toggle` | Switch (checkbox) with label and size variants |
+| Component     | Description                                                          |
+| ------------- | -------------------------------------------------------------------- |
+| `InputField`  | Single-line text input with label, icons, error, and info text       |
+| `TextField`   | Multi-line textarea with label, action buttons, error, and info text |
+| `SelectField` | Dropdown select with label and error support                         |
+| `Checkbox`    | Checkbox with label, indeterminate state, and size variants          |
+| `Radio`       | Radio button with label and size variants                            |
+| `Toggle`      | Switch (checkbox) with label and size variants                       |
 
 ### Buttons & Actions
 
-| Component | Description |
-|---|---|
-| `Button` | Primary action button with optional dropdown menu |
+| Component      | Description                                            |
+| -------------- | ------------------------------------------------------ |
+| `Button`       | Primary action button with optional dropdown menu      |
 | `DropdownList` | Scrollable menu container; used by `Button` internally |
 
 ### Display
 
-| Component | Description |
-|---|---|
-| `Avatar` | User avatar as initials or photo with size and corner variants |
-| `Badge` | Numeric or text badge in rectangle or pill shape |
-| `Pill` | Status indicator with icon and color/status variants |
-| `Tag` | Label chip with optional dismiss button |
-| `ListItem` | Row with title, description, trailing action icons, and slots |
-| `FileType` | File type icon indicator |
-| `ImagePlaceholder` | Placeholder shown while an image loads |
-| `ImageWithData` | Image with overlaid metadata |
-| `TextHoverable` | Text that reveals additional content on hover |
-| `Tooltip` | Floating label anchored to a trigger element |
-| `EllipsisTooltip` | Tooltip that only activates when text is truncated |
+| Component          | Description                                                    |
+| ------------------ | -------------------------------------------------------------- |
+| `Avatar`           | User avatar as initials or photo with size and corner variants |
+| `Badge`            | Numeric or text badge in rectangle or pill shape               |
+| `Pill`             | Status indicator with icon and color/status variants           |
+| `Tag`              | Label chip with optional dismiss button                        |
+| `ListItem`         | Row with title, description, trailing action icons, and slots  |
+| `FileType`         | File type icon indicator                                       |
+| `ImagePlaceholder` | Placeholder shown while an image loads                         |
+| `ImageWithData`    | Image with overlaid metadata                                   |
+| `TextHoverable`    | Text that reveals additional content on hover                  |
+| `Tooltip`          | Floating label anchored to a trigger element                   |
+| `EllipsisTooltip`  | Tooltip that only activates when text is truncated             |
 
 ### Notifications
 
-| Component | Description |
-|---|---|
-| `Notifications` | Toast notification card (title, text, type, actions) |
-| `useNotifications` | Hook for triggering toasts imperatively |
+| Component          | Description                                          |
+| ------------------ | ---------------------------------------------------- |
+| `Notifications`    | Toast notification card (title, text, type, actions) |
+| `useNotifications` | Hook for triggering toasts imperatively              |
 
 Notifications require a single `<ToastContainer>` from `react-toastify` in your app:
 
@@ -154,7 +156,11 @@ function SomeComponent() {
     const { notify } = useNotifications();
 
     return (
-        <button onClick={() => notify({ title: 'Saved!', text: 'Your changes were saved.', type: 'success' })}>
+        <button
+            onClick={() =>
+                notify({ title: 'Saved!', text: 'Your changes were saved.', type: 'success' })
+            }
+        >
             Save
         </button>
     );
@@ -195,7 +201,7 @@ const options = [
     variant="primary"
     options={options}
     onClick={(option) => console.log(option.value)}
-/>
+/>;
 ```
 
 ### Form fields
@@ -240,11 +246,56 @@ import { Modal, Button } from '@eyesee/ui-components';
     onClose={() => setIsOpen(false)}
     footer={
         <>
-            <Button text="Cancel" variant="neutral" type="outline" onClick={() => setIsOpen(false)} />
+            <Button
+                text="Cancel"
+                variant="neutral"
+                type="outline"
+                onClick={() => setIsOpen(false)}
+            />
             <Button text="Delete" variant="destructive" onClick={handleDelete} />
         </>
     }
-/>
+/>;
+```
+
+Use `bodyLayout="fixed"` when the footer can grow (e.g. error Infobox) while content scrolls inside the body. Default body height is `480px` (`360px` below 1536px); override with `bodyHeight` like `maxWidth`. Pass direct children (no single wrapper around all content). Static sections use `flexShrink: 0`; scrollable sections use `flex: 1`, `minHeight: 0`, and `overflowY: 'auto'`. For multi-section layouts, use a flex parent with `display: 'flex'`, `flex: 1`, `minHeight: 0`, and `overflow: 'hidden'`. See the `FixedBodyLayout` Storybook story.
+
+```jsx
+import { Modal, Button, Infobox, InputField, ListItem } from '@eyesee/ui-components';
+
+<Modal
+    visible={isOpen}
+    title="Create shelf"
+    bodyLayout="fixed"
+    bodyHeight={{ default: '520px', mediaQuery: '400px' }}
+    maxWidth={{ default: '720px', mediaQuery: '640px' }}
+    onClose={() => setIsOpen(false)}
+    footer={
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {uploadError && (
+                <Infobox status="error" title="Upload failed" text={uploadError} fullWidth />
+            )}
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+                <Button
+                    text="Cancel"
+                    variant="neutral"
+                    type="outline"
+                    onClick={() => setIsOpen(false)}
+                />
+                <Button text="Create" onClick={handleCreate} />
+            </div>
+        </div>
+    }
+>
+    <div style={{ flexShrink: 0 }}>
+        <InputField label="Shelf name" value={name} onChange={handleNameChange} />
+    </div>
+    <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
+        {items.map((item) => (
+            <ListItem key={item.id} title={item.title} />
+        ))}
+    </div>
+</Modal>;
 ```
 
 ### ListItem with trailing actions
@@ -261,7 +312,7 @@ import { EditIcon, DeleteIcon } from '@eyesee/ui-components/icons';
         { type: 'edit', icon: <EditIcon />, onClick: (item) => handleEdit(item) },
         { type: 'delete', icon: <DeleteIcon />, onClick: (item) => handleDelete(item) },
     ]}
-/>
+/>;
 ```
 
 ---

package/dist/components/Badge/Badge.js

@@ -4,14 +4,7 @@ import c from "./Badge.module.scss.js";
 const g = ({ label: r, shape: o = "rectangle", state: e = "neutral" }) => {
   if (r == null || r === "") return null;
   const { backgroundColor: t, color: n, borderRadius: s } = a(o, e);
-  return /* @__PURE__ */ l(
-    "span",
-    {
-      className: c.badge,
-      style: { backgroundColor: t, color: n, borderRadius: s },
-      children: r
-    }
-  );
+  return /* @__PURE__ */ l("span", { className: c.badge, style: { backgroundColor: t, color: n, borderRadius: s }, children: r });
 };
 export {
   g as Badge

package/dist/components/ImagePlaceholder/ImagePlaceholder.js

@@ -43,103 +43,93 @@ const to = ({
         return null;
     }
   }, f = !a || t === x.outside ? "8px" : "8px 8px 0 0", w = Number(C), L = n(e.contentText, e.contentTextClamped), A = { WebkitLineClamp: w };
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      className: n(
-        e.imagePlaceholder,
-        m && e.disabled
-      ),
-      children: [
-        /* @__PURE__ */ c(
-          "div",
-          {
-            className: n(
-              e.imageArea,
-              s === "checkbox" && e.clickable,
-              s === "checkbox" && !i && e.checkboxSelectable
-            ),
-            style: { borderRadius: f },
-            onClick: s === "checkbox" && !i && !m ? p : void 0,
-            children: [
-              /* @__PURE__ */ o(
-                "div",
+  return /* @__PURE__ */ c("div", { className: n(e.imagePlaceholder, m && e.disabled), children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: n(
+          e.imageArea,
+          s === "checkbox" && e.clickable,
+          s === "checkbox" && !i && e.checkboxSelectable
+        ),
+        style: { borderRadius: f },
+        onClick: s === "checkbox" && !i && !m ? p : void 0,
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: e.imageFrame,
+              style: { aspectRatio: N[v], borderRadius: f },
+              children: i ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
+                _,
                 {
-                  className: e.imageFrame,
-                  style: { aspectRatio: N[v], borderRadius: f },
-                  children: i ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
-                    _,
-                    {
-                      iconSize: "l",
-                      strokeColor: "var(--color--icon--disabled--default)"
-                    }
-                  ) }) : /* @__PURE__ */ o(
-                    "img",
-                    {
-                      className: e.image,
-                      src: k,
-                      alt: a,
-                      onError: () => P(!0)
-                    }
-                  )
+                  iconSize: "l",
+                  strokeColor: "var(--color--icon--disabled--default)"
                 }
-              ),
-              !a && T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: u() }) : null,
-              z.has(s) && /* @__PURE__ */ c("div", { className: e.overlay, onClick: (l) => l.stopPropagation(), children: [
-                s === "checkbox" && !i ? /* @__PURE__ */ o(
-                  y,
-                  {
-                    checked: S,
-                    onChange: p,
-                    size: "lg",
-                    disabled: m
-                  }
-                ) : null,
-                s === "close" ? /* @__PURE__ */ o(
-                  X,
-                  {
-                    icon: /* @__PURE__ */ o(B, {}),
-                    size: "xxs",
-                    variant: "fill",
-                    type: "neutral",
-                    onClick: E
-                  }
-                ) : null
-              ] })
-            ]
-          }
-        ),
-        a ? /* @__PURE__ */ c("div", { className: n(e.belowImage, e[t]), children: [
-          T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: u() }) : null,
-          /* @__PURE__ */ c("div", { className: e.content, children: [
-            /* @__PURE__ */ o(
-              Y,
+              ) }) : /* @__PURE__ */ o(
+                "img",
+                {
+                  className: e.image,
+                  src: k,
+                  alt: a,
+                  onError: () => P(!0)
+                }
+              )
+            }
+          ),
+          !a && T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: u() }) : null,
+          z.has(s) && /* @__PURE__ */ c("div", { className: e.overlay, onClick: (l) => l.stopPropagation(), children: [
+            s === "checkbox" && !i ? /* @__PURE__ */ o(
+              y,
               {
-                position: "bottom",
-                showArrow: !0,
-                className: L,
-                wrapperStyle: A,
-                children: a
+                checked: S,
+                onChange: p,
+                size: "lg",
+                disabled: m
               }
-            ),
-            d && /* @__PURE__ */ c("div", { className: e.menu, children: [
-              /* @__PURE__ */ o("span", { onClick: () => g(!h), children: /* @__PURE__ */ o(j, {}) }),
-              h && /* @__PURE__ */ o(D, { children: d.map((l) => /* @__PURE__ */ o(
-                G,
-                {
-                  title: l == null ? void 0 : l.title,
-                  value: l == null ? void 0 : l.value,
-                  item: l
-                },
-                l == null ? void 0 : l.value
-              )) })
-            ] })
+            ) : null,
+            s === "close" ? /* @__PURE__ */ o(
+              X,
+              {
+                icon: /* @__PURE__ */ o(B, {}),
+                size: "xxs",
+                variant: "fill",
+                type: "neutral",
+                onClick: E
+              }
+            ) : null
           ] })
-        ] }) : null
-      ]
-    },
-    I
-  );
+        ]
+      }
+    ),
+    a ? /* @__PURE__ */ c("div", { className: n(e.belowImage, e[t]), children: [
+      T.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: u() }) : null,
+      /* @__PURE__ */ c("div", { className: e.content, children: [
+        /* @__PURE__ */ o(
+          Y,
+          {
+            position: "bottom",
+            showArrow: !0,
+            className: L,
+            wrapperStyle: A,
+            children: a
+          }
+        ),
+        d && /* @__PURE__ */ c("div", { className: e.menu, children: [
+          /* @__PURE__ */ o("span", { onClick: () => g(!h), children: /* @__PURE__ */ o(j, {}) }),
+          h && /* @__PURE__ */ o(D, { children: d.map((l) => /* @__PURE__ */ o(
+            G,
+            {
+              title: l == null ? void 0 : l.title,
+              value: l == null ? void 0 : l.value,
+              item: l
+            },
+            l == null ? void 0 : l.value
+          )) })
+        ] })
+      ] })
+    ] }) : null
+  ] }, I);
 };
 export {
   to as default

package/dist/components/ImageWithData/ImageWithData.js

@@ -42,104 +42,94 @@ const ae = ({
         return null;
     }
   }, u = !s || t === x.outside ? "8px" : "8px 8px 0 0", A = Number(S), O = n(e.contentText, e.contentTextClamped), w = { WebkitLineClamp: A }, l = C || m;
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: n(
-        e.imagePlaceholder,
-        m && e.disabled
-      ),
-      children: [
-        /* @__PURE__ */ a(
-          "div",
-          {
-            className: n(
-              e.imageArea,
-              i === "checkbox" && e.clickable,
-              i === "checkbox" && !c && e.checkboxSelectable
-            ),
-            style: { borderRadius: u },
-            onClick: i === "checkbox" && !c && !m ? d : void 0,
-            children: [
-              /* @__PURE__ */ o(
-                "div",
+  return /* @__PURE__ */ a("div", { className: n(e.imagePlaceholder, m && e.disabled), children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: n(
+          e.imageArea,
+          i === "checkbox" && e.clickable,
+          i === "checkbox" && !c && e.checkboxSelectable
+        ),
+        style: { borderRadius: u },
+        onClick: i === "checkbox" && !c && !m ? d : void 0,
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: e.imageFrame,
+              style: { aspectRatio: f[I], borderRadius: u },
+              children: c ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
+                W,
                 {
-                  className: e.imageFrame,
-                  style: { aspectRatio: f[I], borderRadius: u },
-                  children: c ? /* @__PURE__ */ o("div", { className: e.imageError, children: /* @__PURE__ */ o(
-                    W,
-                    {
-                      iconSize: "l",
-                      strokeColor: "var(--color--icon--disabled--default)"
-                    }
-                  ) }) : /* @__PURE__ */ o(
-                    "img",
-                    {
-                      className: e.image,
-                      src: k,
-                      alt: s,
-                      onError: () => y(!0)
-                    }
-                  )
+                  iconSize: "l",
+                  strokeColor: "var(--color--icon--disabled--default)"
                 }
-              ),
-              !s && b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: h() }) : null,
-              B.has(i) && /* @__PURE__ */ a("div", { className: e.overlay, onClick: (L) => L.stopPropagation(), children: [
-                i === "checkbox" && !c ? /* @__PURE__ */ o(
-                  F,
-                  {
-                    checked: v,
-                    onChange: l ? void 0 : d,
-                    size: "lg",
-                    disabled: l
-                  }
-                ) : null,
-                i === "close" ? /* @__PURE__ */ o(
-                  N,
-                  {
-                    icon: /* @__PURE__ */ o(X, {}),
-                    size: "xxs",
-                    variant: "fill",
-                    type: "neutral",
-                    disabled: l,
-                    onClick: l ? void 0 : E
-                  }
-                ) : null,
-                i === "icon" && /* @__PURE__ */ o(
-                  N,
-                  {
-                    icon: g,
-                    size: "xs",
-                    variant: "fill",
-                    type: "neutral",
-                    disabled: l,
-                    onClick: l ? void 0 : P
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        s ? /* @__PURE__ */ a("div", { className: n(e.belowImage, e[t]), children: [
-          b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: h() }) : null,
-          /* @__PURE__ */ a("div", { className: e.content, children: [
-            /* @__PURE__ */ o(
-              Y,
+              ) }) : /* @__PURE__ */ o(
+                "img",
+                {
+                  className: e.image,
+                  src: k,
+                  alt: s,
+                  onError: () => y(!0)
+                }
+              )
+            }
+          ),
+          !s && b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { className: e.tagInImage, children: h() }) : null,
+          B.has(i) && /* @__PURE__ */ a("div", { className: e.overlay, onClick: (L) => L.stopPropagation(), children: [
+            i === "checkbox" && !c ? /* @__PURE__ */ o(
+              F,
               {
-                position: "bottom",
-                showArrow: !0,
-                className: O,
-                wrapperStyle: w,
-                children: s
+                checked: v,
+                onChange: l ? void 0 : d,
+                size: "lg",
+                disabled: l
               }
-            ),
-            p && /* @__PURE__ */ o("div", { className: e.number, children: p })
+            ) : null,
+            i === "close" ? /* @__PURE__ */ o(
+              N,
+              {
+                icon: /* @__PURE__ */ o(X, {}),
+                size: "xxs",
+                variant: "fill",
+                type: "neutral",
+                disabled: l,
+                onClick: l ? void 0 : E
+              }
+            ) : null,
+            i === "icon" && /* @__PURE__ */ o(
+              N,
+              {
+                icon: g,
+                size: "xs",
+                variant: "fill",
+                type: "neutral",
+                disabled: l,
+                onClick: l ? void 0 : P
+              }
+            )
           ] })
-        ] }) : null
-      ]
-    },
-    T
-  );
+        ]
+      }
+    ),
+    s ? /* @__PURE__ */ a("div", { className: n(e.belowImage, e[t]), children: [
+      b.has(r == null ? void 0 : r.type) ? /* @__PURE__ */ o("div", { children: h() }) : null,
+      /* @__PURE__ */ a("div", { className: e.content, children: [
+        /* @__PURE__ */ o(
+          Y,
+          {
+            position: "bottom",
+            showArrow: !0,
+            className: O,
+            wrapperStyle: w,
+            children: s
+          }
+        ),
+        p && /* @__PURE__ */ o("div", { className: e.number, children: p })
+      ] })
+    ] }) : null
+  ] }, T);
 };
 export {
   ae as default