@latty-ds/react 0.7.0 → 0.8.0

package/dist/components/Image/Image.d.ts

@@ -5,10 +5,26 @@ export type ImageProps = HTMLAttributes<ImageEl> & {
     alt?: string;
     rounded?: ImageEl['rounded'];
     responsive?: boolean;
+    loading?: ImageEl['loading'];
+    onName?: () => void;
+    onLoad?: (detail: {
+        src: string;
+    }) => void;
+    onError?: (detail: {
+        src: string;
+    }) => void;
 };
 export declare const Image: import("react").ForwardRefExoticComponent<HTMLAttributes<ImageEl> & {
     src?: string;
     alt?: string;
     rounded?: ImageEl["rounded"];
     responsive?: boolean;
+    loading?: ImageEl["loading"];
+    onName?: () => void;
+    onLoad?: (detail: {
+        src: string;
+    }) => void;
+    onError?: (detail: {
+        src: string;
+    }) => void;
 } & import("react").RefAttributes<ImageEl>>;

package/dist/components/ListItem/ListItem.d.ts

@@ -3,8 +3,18 @@ import type { ListItem as ListItemEl, LattyIconName } from '@latty-ds/web';
 export type ListItemProps = HTMLAttributes<ListItemEl> & {
     iconStart?: LattyIconName;
     iconEnd?: LattyIconName;
+    clickable?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
 };
 export declare const ListItem: import("react").ForwardRefExoticComponent<HTMLAttributes<ListItemEl> & {
     iconStart?: LattyIconName;
     iconEnd?: LattyIconName;
+    clickable?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
 } & import("react").RefAttributes<ListItemEl>>;

package/dist/index.cjs

@@ -403,9 +403,30 @@ IconButton.displayName = "IconButton";
 // src/components/Image/Image.tsx
 var import_react21 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Image = (0, import_react21.forwardRef)(function Image2({ children, ...props }, forwardedRef) {
+var Image = (0, import_react21.forwardRef)(function Image2({ onName, onLoad, onError, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react21.useRef)(null);
   (0, import_react21.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react21.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onName) return;
+    const h = () => onName();
+    el.addEventListener("name", h);
+    return () => el.removeEventListener("name", h);
+  }, [onName]);
+  (0, import_react21.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onLoad) return;
+    const h = (ev) => onLoad(ev.detail);
+    el.addEventListener("lt-load", h);
+    return () => el.removeEventListener("lt-load", h);
+  }, [onLoad]);
+  (0, import_react21.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onError) return;
+    const h = (ev) => onError(ev.detail);
+    el.addEventListener("lt-error", h);
+    return () => el.removeEventListener("lt-error", h);
+  }, [onError]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("lt-image", { ref: innerRef, ...props, children });
 });
 Image.displayName = "Image";

package/dist/index.js

@@ -333,11 +333,32 @@ var IconButton = forwardRef20(function IconButton2({ children, ...props }, forwa
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useRef as useRef21, useImperativeHandle as useImperativeHandle21, forwardRef as forwardRef21 } from "react";
+import { useRef as useRef21, useEffect as useEffect13, useImperativeHandle as useImperativeHandle21, forwardRef as forwardRef21 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var Image = forwardRef21(function Image2({ children, ...props }, forwardedRef) {
+var Image = forwardRef21(function Image2({ onName, onLoad, onError, children, ...props }, forwardedRef) {
   const innerRef = useRef21(null);
   useImperativeHandle21(forwardedRef, () => innerRef.current);
+  useEffect13(() => {
+    const el = innerRef.current;
+    if (!el || !onName) return;
+    const h = () => onName();
+    el.addEventListener("name", h);
+    return () => el.removeEventListener("name", h);
+  }, [onName]);
+  useEffect13(() => {
+    const el = innerRef.current;
+    if (!el || !onLoad) return;
+    const h = (ev) => onLoad(ev.detail);
+    el.addEventListener("lt-load", h);
+    return () => el.removeEventListener("lt-load", h);
+  }, [onLoad]);
+  useEffect13(() => {
+    const el = innerRef.current;
+    if (!el || !onError) return;
+    const h = (ev) => onError(ev.detail);
+    el.addEventListener("lt-error", h);
+    return () => el.removeEventListener("lt-error", h);
+  }, [onError]);
   return /* @__PURE__ */ jsx21("lt-image", { ref: innerRef, ...props, children });
 });
 Image.displayName = "Image";
@@ -383,26 +404,26 @@ var Nav = forwardRef25(function Nav2({ children, ...props }, forwardedRef) {
 Nav.displayName = "Nav";
 
 // src/components/NavItem/NavItem.tsx
-import { useRef as useRef26, useEffect as useEffect13, useImperativeHandle as useImperativeHandle26, forwardRef as forwardRef26 } from "react";
+import { useRef as useRef26, useEffect as useEffect14, useImperativeHandle as useImperativeHandle26, forwardRef as forwardRef26 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var NavItem = forwardRef26(function NavItem2({ onNavItemClick, onNavCollapse, iconStart, children, ...props }, forwardedRef) {
   const innerRef = useRef26(null);
   useImperativeHandle26(forwardedRef, () => innerRef.current);
-  useEffect13(() => {
+  useEffect14(() => {
     const el = innerRef.current;
     if (!el || !onNavItemClick) return;
     const h = (ev) => onNavItemClick(ev);
     el.addEventListener("nav-item-click", h);
     return () => el.removeEventListener("nav-item-click", h);
   }, [onNavItemClick]);
-  useEffect13(() => {
+  useEffect14(() => {
     const el = innerRef.current;
     if (!el || !onNavCollapse) return;
     const h = (ev) => onNavCollapse(ev);
     el.addEventListener("nav-collapse", h);
     return () => el.removeEventListener("nav-collapse", h);
   }, [onNavCollapse]);
-  useEffect13(() => {
+  useEffect14(() => {
     const el = innerRef.current;
     if (!el) return;
     if (iconStart) el.setAttribute("icon-start", iconStart);
@@ -413,12 +434,12 @@ var NavItem = forwardRef26(function NavItem2({ onNavItemClick, onNavCollapse, ic
 NavItem.displayName = "NavItem";
 
 // src/components/Pagination/Pagination.tsx
-import { useRef as useRef27, useEffect as useEffect14, useImperativeHandle as useImperativeHandle27, forwardRef as forwardRef27 } from "react";
+import { useRef as useRef27, useEffect as useEffect15, useImperativeHandle as useImperativeHandle27, forwardRef as forwardRef27 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var Pagination = forwardRef27(function Pagination2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef27(null);
   useImperativeHandle27(forwardedRef, () => innerRef.current);
-  useEffect14(() => {
+  useEffect15(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -440,12 +461,12 @@ var Progress = forwardRef28(function Progress2({ children, ...props }, forwarded
 Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
-import { useRef as useRef29, useEffect as useEffect15, useImperativeHandle as useImperativeHandle29, forwardRef as forwardRef29 } from "react";
+import { useRef as useRef29, useEffect as useEffect16, useImperativeHandle as useImperativeHandle29, forwardRef as forwardRef29 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Radio = forwardRef29(function Radio2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef29(null);
   useImperativeHandle29(forwardedRef, () => innerRef.current);
-  useEffect15(() => {
+  useEffect16(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -457,12 +478,12 @@ var Radio = forwardRef29(function Radio2({ onChange, children, ...props }, forwa
 Radio.displayName = "Radio";
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { useRef as useRef30, useEffect as useEffect16, useImperativeHandle as useImperativeHandle30, forwardRef as forwardRef30 } from "react";
+import { useRef as useRef30, useEffect as useEffect17, useImperativeHandle as useImperativeHandle30, forwardRef as forwardRef30 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var RadioGroup = forwardRef30(function RadioGroup2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef30(null);
   useImperativeHandle30(forwardedRef, () => innerRef.current);
-  useEffect16(() => {
+  useEffect17(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -474,12 +495,12 @@ var RadioGroup = forwardRef30(function RadioGroup2({ onChange, children, ...prop
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Select.tsx
-import { useRef as useRef31, useEffect as useEffect17, useImperativeHandle as useImperativeHandle31, forwardRef as forwardRef31 } from "react";
+import { useRef as useRef31, useEffect as useEffect18, useImperativeHandle as useImperativeHandle31, forwardRef as forwardRef31 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var Select = forwardRef31(function Select2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef31(null);
   useImperativeHandle31(forwardedRef, () => innerRef.current);
-  useEffect17(() => {
+  useEffect18(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -491,19 +512,19 @@ var Select = forwardRef31(function Select2({ onChange, children, ...props }, for
 Select.displayName = "Select";
 
 // src/components/SidePanel/SidePanel.tsx
-import { useRef as useRef32, useEffect as useEffect18, useImperativeHandle as useImperativeHandle32, forwardRef as forwardRef32 } from "react";
+import { useRef as useRef32, useEffect as useEffect19, useImperativeHandle as useImperativeHandle32, forwardRef as forwardRef32 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var SidePanel = forwardRef32(function SidePanel2({ onClose, noCloseButton, children, ...props }, forwardedRef) {
   const innerRef = useRef32(null);
   useImperativeHandle32(forwardedRef, () => innerRef.current);
-  useEffect18(() => {
+  useEffect19(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
     const h = (ev) => onClose(ev);
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  useEffect18(() => {
+  useEffect19(() => {
     const el = innerRef.current;
     if (!el) return;
     if (noCloseButton) el.setAttribute("no-close-button", "");
@@ -524,19 +545,19 @@ var Skeleton = forwardRef33(function Skeleton2({ children, ...props }, forwarded
 Skeleton.displayName = "Skeleton";
 
 // src/components/Slider/Slider.tsx
-import { useRef as useRef34, useEffect as useEffect19, useImperativeHandle as useImperativeHandle34, forwardRef as forwardRef34 } from "react";
+import { useRef as useRef34, useEffect as useEffect20, useImperativeHandle as useImperativeHandle34, forwardRef as forwardRef34 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var Slider = forwardRef34(function Slider2({ onInput, onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef34(null);
   useImperativeHandle34(forwardedRef, () => innerRef.current);
-  useEffect19(() => {
+  useEffect20(() => {
     const el = innerRef.current;
     if (!el || !onInput) return;
     const h = (ev) => onInput(ev.detail);
     el.addEventListener("input", h);
     return () => el.removeEventListener("input", h);
   }, [onInput]);
-  useEffect19(() => {
+  useEffect20(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -548,26 +569,26 @@ var Slider = forwardRef34(function Slider2({ onInput, onChange, children, ...pro
 Slider.displayName = "Slider";
 
 // src/components/Snackbar/Snackbar.tsx
-import { useRef as useRef35, useEffect as useEffect20, useImperativeHandle as useImperativeHandle35, forwardRef as forwardRef35 } from "react";
+import { useRef as useRef35, useEffect as useEffect21, useImperativeHandle as useImperativeHandle35, forwardRef as forwardRef35 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var Snackbar = forwardRef35(function Snackbar2({ onShow, onHide, onAction, children, ...props }, forwardedRef) {
   const innerRef = useRef35(null);
   useImperativeHandle35(forwardedRef, () => innerRef.current);
-  useEffect20(() => {
+  useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onShow) return;
     const h = () => onShow();
     el.addEventListener("show", h);
     return () => el.removeEventListener("show", h);
   }, [onShow]);
-  useEffect20(() => {
+  useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onHide) return;
     const h = () => onHide();
     el.addEventListener("hide", h);
     return () => el.removeEventListener("hide", h);
   }, [onHide]);
-  useEffect20(() => {
+  useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onAction) return;
     const h = () => onAction();
@@ -599,12 +620,12 @@ var Surface = forwardRef37(function Surface2({ children, ...props }, forwardedRe
 Surface.displayName = "Surface";
 
 // src/components/Switch/Switch.tsx
-import { useRef as useRef38, useEffect as useEffect21, useImperativeHandle as useImperativeHandle38, forwardRef as forwardRef38 } from "react";
+import { useRef as useRef38, useEffect as useEffect22, useImperativeHandle as useImperativeHandle38, forwardRef as forwardRef38 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var Switch = forwardRef38(function Switch2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef38(null);
   useImperativeHandle38(forwardedRef, () => innerRef.current);
-  useEffect21(() => {
+  useEffect22(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -616,12 +637,12 @@ var Switch = forwardRef38(function Switch2({ onChange, children, ...props }, for
 Switch.displayName = "Switch";
 
 // src/components/Tab/Tab.tsx
-import { useRef as useRef39, useEffect as useEffect22, useImperativeHandle as useImperativeHandle39, forwardRef as forwardRef39 } from "react";
+import { useRef as useRef39, useEffect as useEffect23, useImperativeHandle as useImperativeHandle39, forwardRef as forwardRef39 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
 var Tab = forwardRef39(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
   const innerRef = useRef39(null);
   useImperativeHandle39(forwardedRef, () => innerRef.current);
-  useEffect22(() => {
+  useEffect23(() => {
     const el = innerRef.current;
     if (!el || !onTabClick) return;
     const h = (ev) => onTabClick(ev);
@@ -633,12 +654,12 @@ var Tab = forwardRef39(function Tab2({ onTabClick, children, ...props }, forward
 Tab.displayName = "Tab";
 
 // src/components/TabGroup/TabGroup.tsx
-import { useRef as useRef40, useEffect as useEffect23, useImperativeHandle as useImperativeHandle40, forwardRef as forwardRef40 } from "react";
+import { useRef as useRef40, useEffect as useEffect24, useImperativeHandle as useImperativeHandle40, forwardRef as forwardRef40 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var TabGroup = forwardRef40(function TabGroup2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef40(null);
   useImperativeHandle40(forwardedRef, () => innerRef.current);
-  useEffect23(() => {
+  useEffect24(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -650,12 +671,12 @@ var TabGroup = forwardRef40(function TabGroup2({ onChange, children, ...props },
 TabGroup.displayName = "TabGroup";
 
 // src/components/Table/Table.tsx
-import { useRef as useRef41, useEffect as useEffect24, useImperativeHandle as useImperativeHandle41, forwardRef as forwardRef41 } from "react";
+import { useRef as useRef41, useEffect as useEffect25, useImperativeHandle as useImperativeHandle41, forwardRef as forwardRef41 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var Table = forwardRef41(function Table2({ onSortChange, children, ...props }, forwardedRef) {
   const innerRef = useRef41(null);
   useImperativeHandle41(forwardedRef, () => innerRef.current);
-  useEffect24(() => {
+  useEffect25(() => {
     const el = innerRef.current;
     if (!el || !onSortChange) return;
     const h = () => onSortChange();
@@ -687,19 +708,19 @@ var Text = forwardRef43(function Text2({ children, ...props }, forwardedRef) {
 Text.displayName = "Text";
 
 // src/components/Textfield/Textfield.tsx
-import { useRef as useRef44, useEffect as useEffect25, useImperativeHandle as useImperativeHandle44, forwardRef as forwardRef44 } from "react";
+import { useRef as useRef44, useEffect as useEffect26, useImperativeHandle as useImperativeHandle44, forwardRef as forwardRef44 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var Textfield = forwardRef44(function Textfield2({ onInput, onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef44(null);
   useImperativeHandle44(forwardedRef, () => innerRef.current);
-  useEffect25(() => {
+  useEffect26(() => {
     const el = innerRef.current;
     if (!el || !onInput) return;
     const h = (ev) => onInput(ev.detail);
     el.addEventListener("input", h);
     return () => el.removeEventListener("input", h);
   }, [onInput]);
-  useEffect25(() => {
+  useEffect26(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React wrappers for the Latty design system — typed React components backed by @latty-ds/web",
   "license": "MIT",
   "repository": {
@@ -56,8 +56,8 @@
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@latty-ds/icons": "0.7.0",
-    "@latty-ds/web": "0.7.0"
+    "@latty-ds/icons": "0.8.0",
+    "@latty-ds/web": "0.8.0"
   },
-  "gitHead": "40d5903d30b50455ed244d5f0fd75fbd84934c46"
+  "gitHead": "144dd8d2f7440fd5fd8ecb4f396407c4ce3be9f2"
 }