@apipass/design-system 1.18.1 → 1.20.0

package/dist/lib/ui/primitives/Search/Search.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("../../../vendor/clsx/dist/clsx.cjs"),a=require("react"),l=require("react-aria-components");;/* empty css             */const p=require("../Input/Input.cjs"),q=require("../../icons/IconX.cjs"),b=require("../../icons/IconSearch.cjs"),S=require("../Fieldset/Fieldset.cjs"),h=require("../IconButton/IconButton.cjs"),x=require("../ListBox/ListBox.cjs"),f=a.forwardRef(function({className:m,results:s,onSearch:o,...i},n){const[u,j]=a.useState(""),c=a.useRef(null),t=e=>{j(e),o&&o(e)},I=d.clsx(m,"search-input-container");return r.jsxs(l.ComboBox,{className:I,children:[r.jsx(S.Label,{hidden:!0,children:i["aria-label"]||"Search"}),r.jsx(p.Input,{type:"search",className:"search-input",value:u,onInput:e=>t(e.currentTarget.value),ref:e=>{c.current=e,typeof n=="function"?n(e):n&&(n.current=e)},...i}),r.jsx("span",{className:"search-icon",children:u?r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>t(""),size:"small",variant:"subtle",children:r.jsx(q.IconX,{})}):r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>{var e;return(e=c==null?void 0:c.current)==null?void 0:e.focus()},size:"small",variant:"subtle",children:r.jsx(b.IconSearch,{})})}),r.jsx(l.Popover,{children:r.jsx(x.ListBox,{children:s==null?void 0:s.map(e=>r.jsx(x.ListBoxItem,{onAction:()=>t(e),children:e},e))})})]})});exports.Search=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("../../../vendor/clsx/dist/clsx.cjs"),a=require("react"),l=require("react-aria-components");;/* empty css             */const p=require("../../icons/IconX.cjs"),q=require("../../icons/IconSearch.cjs"),b=require("../Fieldset/Fieldset.cjs"),S=require("../Input/Input.cjs"),h=require("../IconButton/IconButton.cjs"),x=require("../ListBox/ListBox.cjs"),f=a.forwardRef(function({className:m,results:s,onSearch:o,...i},n){const[u,j]=a.useState(""),c=a.useRef(null),t=e=>{j(e),o&&o(e)},I=d.clsx(m,"search-input-container");return r.jsxs(l.ComboBox,{className:I,children:[r.jsx(b.Label,{hidden:!0,children:i["aria-label"]||"Search"}),r.jsx(S.Input,{type:"search",className:"search-input",value:u,onInput:e=>t(e.currentTarget.value),ref:e=>{c.current=e,typeof n=="function"?n(e):n&&(n.current=e)},...i}),r.jsx("span",{className:"search-icon",children:u?r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>t(""),size:"small",variant:"subtle",children:r.jsx(p.IconX,{})}):r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>{var e;return(e=c==null?void 0:c.current)==null?void 0:e.focus()},size:"small",variant:"subtle",children:r.jsx(q.IconSearch,{})})}),r.jsx(l.Popover,{children:r.jsx(x.ListBox,{children:s==null?void 0:s.map(e=>r.jsx(x.ListBoxItem,{onAction:()=>t(e),children:e},e))})})]})});exports.Search=f;
 //# sourceMappingURL=Search.cjs.map

package/dist/lib/ui/primitives/Search/Search.js

@@ -3,10 +3,10 @@ import { clsx as f } from "../../../vendor/clsx/dist/clsx.js";
 import d, { useState as I, useRef as b } from "react";
 import { ComboBox as x, Popover as v } from "react-aria-components";
 /* empty css           */
-import { Input as B } from "../Input/Input.js";
-import { IconX as S } from "../../icons/IconX.js";
-import { IconSearch as N } from "../../icons/IconSearch.js";
-import { Label as C } from "../Fieldset/Fieldset.js";
+import { IconX as B } from "../../icons/IconX.js";
+import { IconSearch as S } from "../../icons/IconSearch.js";
+import { Label as N } from "../Fieldset/Fieldset.js";
+import { Input as C } from "../Input/Input.js";
 import { IconButton as m } from "../IconButton/IconButton.js";
 import { ListBox as L, ListBoxItem as P } from "../ListBox/ListBox.js";
 const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i }, o) {
@@ -14,9 +14,9 @@ const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i },
     p(r), n && n(r);
   }, h = f(l, "search-input-container");
   return /* @__PURE__ */ u(x, { className: h, children: [
-    /* @__PURE__ */ e(C, { hidden: !0, children: i["aria-label"] || "Search" }),
+    /* @__PURE__ */ e(N, { hidden: !0, children: i["aria-label"] || "Search" }),
     /* @__PURE__ */ e(
-      B,
+      C,
       {
         type: "search",
         className: "search-input",
@@ -35,7 +35,7 @@ const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i },
         onPress: () => c(""),
         size: "small",
         variant: "subtle",
-        children: /* @__PURE__ */ e(S, {})
+        children: /* @__PURE__ */ e(B, {})
       }
     ) : /* @__PURE__ */ e(
       m,
@@ -47,7 +47,7 @@ const D = d.forwardRef(function({ className: l, results: a, onSearch: n, ...i },
         },
         size: "small",
         variant: "subtle",
-        children: /* @__PURE__ */ e(N, {})
+        children: /* @__PURE__ */ e(S, {})
       }
     ) }),
     /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(L, { children: a == null ? void 0 : a.map((r) => /* @__PURE__ */ e(P, { onAction: () => c(r), children: r }, r)) }) })

package/dist/types/ui/components/Widget/Widget.d.ts

@@ -1,12 +1,15 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 import "./widget.css";
-export type WidgetProps = ComponentPropsWithoutRef<"div"> & {
-    title: string;
-    description?: ReactNode;
-    headerActions?: ReactNode;
+type WidgetDescriptionProps = {
+    description?: undefined;
+    descriptionButtonLabel?: undefined;
+} | {
+    description: ReactNode;
+    descriptionButtonLabel: string;
 };
-export declare const Widget: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    title: string;
-    description?: ReactNode;
+export type WidgetProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & WidgetDescriptionProps & {
+    title: ReactNode;
     headerActions?: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const Widget: import("react").ForwardRefExoticComponent<WidgetProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/ui/components/WidgetEmptyState/WidgetEmptyState.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentPropsWithoutRef } from "react";
+import "./widget-empty-state.css";
+export type WidgetEmptyStateProps = ComponentPropsWithoutRef<"div"> & {
+    message: string;
+};
+export declare function WidgetEmptyState({ message, className, ...props }: WidgetEmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/WidgetErrorState/WidgetErrorState.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef } from "react";
+import "./widget-error-state.css";
+export type WidgetErrorStateProps = ComponentPropsWithoutRef<"div"> & {
+    message: string;
+    retryLabel: string;
+    onRetry?: () => void;
+};
+export declare function WidgetErrorState({ message, retryLabel, onRetry, className, ...props }: WidgetErrorStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/WidgetGrid/WidgetGrid.d.ts

@@ -15,8 +15,10 @@ export interface WidgetGridProps {
     cols?: number;
     rowHeight?: number;
     isEditable?: boolean;
+    isDraggable?: boolean;
+    isResizable?: boolean;
     className?: string;
     style?: CSSProperties;
     children: ReactNode;
 }
-export declare function WidgetGrid({ layout, onLayoutChange, cols, rowHeight, isEditable, className, style, children, }: WidgetGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetGrid({ layout, onLayoutChange, cols, rowHeight, isEditable, isDraggable, isResizable, className, style, children, }: WidgetGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/WidgetLoadingState/WidgetLoadingState.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentPropsWithoutRef } from "react";
+import "./widget-loading-state.css";
+export type WidgetLoadingStateProps = ComponentPropsWithoutRef<"div"> & {
+    message: string;
+};
+export declare function WidgetLoadingState({ message, className, ...props }: WidgetLoadingStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/index.d.ts

@@ -6,4 +6,7 @@ export * from "./FormModal/FormModal";
 export * from "./PageHeader/PageHeader";
 export * from "./Sidebar/Sidebar";
 export * from "./Widget/Widget";
+export * from "./WidgetEmptyState/WidgetEmptyState";
+export * from "./WidgetErrorState/WidgetErrorState";
 export * from "./WidgetGrid/WidgetGrid";
+export * from "./WidgetLoadingState/WidgetLoadingState";

package/dist/types/ui/primitives/ComboBox/ComboBox.d.ts

@@ -0,0 +1,12 @@
+import { SharedFieldProps, type ListBoxItemProps } from "primitives";
+import { type ComboBoxProps as RACComboBoxProps } from "react-aria-components";
+import "./combobox.css";
+export interface ComboBoxFieldProps<T extends object> extends Omit<ComboBoxProps<T>, "children">, SharedFieldProps {
+    items?: Iterable<T>;
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+}
+export declare function ComboBoxField<T extends object>({ className, label, description, errorMessage, placeholder, children, items, ...props }: ComboBoxFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export type ComboBoxProps<T extends object> = RACComboBoxProps<T>;
+export declare function ComboBox<T extends object>({ ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export type ComboBoxItemProps = ListBoxItemProps;
+export declare function ComboBoxItem({ children, className, ...props }: ComboBoxItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/primitives/index.d.ts

@@ -5,6 +5,7 @@ export * from "./CodeEditor/CodeEditor";
 export * from "./Avatar/Avatar";
 export * from "./Button/Button";
 export * from "./Checkbox/Checkbox";
+export * from "./ComboBox/ComboBox";
 export * from "./DateRangePicker/DateRangePicker";
 export * from "./DateRangePicker/dateRangePresets";
 export * from "./Dialog/Dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "1.18.1",
+  "version": "1.20.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [