@temp-spotwork/ui 1.7.7 → 1.7.9

package/dist/components/atoms/form/dropdown-item/dropdown-item.d.ts

@@ -0,0 +1,40 @@
+import { LabelValuePair } from '../form-types';
+
+export type SpotterDropdownOption = LabelValuePair & {
+    /**
+     * URL of the spotter profile image.
+     */
+    image?: string;
+    /**
+     * Optional secondary line (e.g. email, role, location).
+     */
+    subtitle?: string;
+};
+export type DropdownItemProps = {
+    /**
+     * Unique identifier for the avatar.
+     */
+    avatarId: string;
+    /**
+     * Spotter display name.
+     */
+    name: string;
+    /**
+     * URL of the spotter profile image.
+     */
+    image?: string;
+    /**
+     * Text abbreviation fallback when no image is provided.
+     */
+    textView?: string;
+    /**
+     * Optional secondary line displayed below the name.
+     */
+    subtitle?: string;
+    /**
+     * Optional classes for the container.
+     */
+    className?: string;
+};
+export declare function DropdownItem({ avatarId, name, image, textView, subtitle, className, }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function renderSpotterDropdownOption(option: string | LabelValuePair | SpotterDropdownOption): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/form/dropdown-item/dropdown-item.js

@@ -0,0 +1,49 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { t as c } from "../../../../bundle-mjs-BjFsLjkg.js";
+import { Avatar as p } from "../../avatar/avatar.js";
+import { Typography as s } from "../../../styles/typography/typography.js";
+import { getStyles as u } from "./styles.js";
+function n({
+  avatarId: e,
+  name: t,
+  image: l,
+  textView: m,
+  subtitle: i,
+  className: d
+}) {
+  const a = u();
+  return /* @__PURE__ */ o("div", { className: c(a.container, d), "data-testid": "dropdown-item", children: [
+    /* @__PURE__ */ r(
+      p,
+      {
+        id: e,
+        variant: "circular",
+        image: l,
+        textView: m ?? t,
+        size: 3.5
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: a.textContainer, children: [
+      /* @__PURE__ */ r(s, { swStyle: 5, color: "default", className: a.name, children: t }),
+      i && /* @__PURE__ */ r(s, { swStyle: 6, color: "subdued", className: a.subtitle, children: i })
+    ] })
+  ] });
+}
+function h(e) {
+  if (typeof e == "string")
+    return /* @__PURE__ */ r(n, { avatarId: e, name: e });
+  const t = e;
+  return /* @__PURE__ */ r(
+    n,
+    {
+      avatarId: t.value,
+      name: t.label,
+      image: t.image,
+      subtitle: t.subtitle
+    }
+  );
+}
+export {
+  n as DropdownItem,
+  h as renderSpotterDropdownOption
+};

package/dist/components/atoms/form/dropdown-item/dropdown-item.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DropdownItem } from './dropdown-item';
+
+declare const meta: Meta<typeof DropdownItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutImage: Story;
+export declare const WithoutSubtitle: Story;
+export declare const WithDropdownSearch: Story;
+export declare const WithTypeahead: Story;

package/dist/components/atoms/form/dropdown-item/dropdown-item.stories.js

@@ -0,0 +1,109 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { DropdownItem as l, renderSpotterDropdownOption as a } from "./dropdown-item.js";
+import { DropdownSearch as p } from "../dropdown-search/dropdown-search.js";
+import { Typeahead as c } from "../typeahead/typeahead.js";
+const s = [
+  {
+    label: "Sarah Johnson",
+    value: "spotter-1",
+    image: "https://i.pravatar.cc/150?u=spotter-1",
+    subtitle: "Toronto, ON"
+  },
+  {
+    label: "Michael Chen",
+    value: "spotter-2",
+    image: "https://i.pravatar.cc/150?u=spotter-2",
+    subtitle: "Vancouver, BC"
+  },
+  {
+    label: "Emily Rodriguez",
+    value: "spotter-3",
+    subtitle: "Calgary, AB"
+  },
+  {
+    label: "James Wilson",
+    value: "spotter-4",
+    image: "https://i.pravatar.cc/150?u=spotter-4"
+  }
+], g = {
+  title: "@spotwork-ui/atoms/form/DropdownItem",
+  component: l,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: "A reusable dropdown row for spotter search results. Displays an avatar, name, and optional subtitle using design tokens."
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    name: { control: "text" },
+    subtitle: { control: "text" },
+    image: { control: "text" }
+  }
+}, n = {
+  args: {
+    avatarId: "spotter-1",
+    name: "Sarah Johnson",
+    image: "https://i.pravatar.cc/150?u=spotter-1",
+    subtitle: "Toronto, ON"
+  },
+  decorators: [
+    (t) => /* @__PURE__ */ e("div", { className: "w-[32rem] border border-bcolor-subdued rounded", children: /* @__PURE__ */ e("div", { className: "min-h-[4rem] w-full flex items-center border-b border-bcolor-subdued py-[0.75rem] px-[1rem]", children: /* @__PURE__ */ e(t, {}) }) })
+  ]
+}, w = {
+  args: {
+    avatarId: "spotter-3",
+    name: "Emily Rodriguez",
+    subtitle: "Calgary, AB"
+  },
+  decorators: n.decorators
+}, y = {
+  args: {
+    avatarId: "spotter-4",
+    name: "James Wilson",
+    image: "https://i.pravatar.cc/150?u=spotter-4"
+  },
+  decorators: n.decorators
+}, i = () => {
+  const [t, r] = o("");
+  return /* @__PURE__ */ e("div", { className: "w-[36rem]", children: /* @__PURE__ */ e(
+    p,
+    {
+      label: "Search spotters",
+      placeholder: "Search by name...",
+      options: s,
+      value: t,
+      selectValue: r,
+      renderOption: a
+    }
+  ) });
+}, S = {
+  render: () => /* @__PURE__ */ e(i, {})
+}, d = () => {
+  const [t, r] = o("");
+  return /* @__PURE__ */ e("div", { className: "w-[36rem]", children: /* @__PURE__ */ e(
+    c,
+    {
+      label: "Search spotters",
+      placeholder: "Search by name...",
+      options: s,
+      value: t,
+      onChange: r,
+      selectValue: r,
+      renderOption: a
+    }
+  ) });
+}, f = {
+  render: () => /* @__PURE__ */ e(d, {})
+};
+export {
+  n as Default,
+  S as WithDropdownSearch,
+  f as WithTypeahead,
+  w as WithoutImage,
+  y as WithoutSubtitle,
+  g as default
+};

package/dist/components/atoms/form/dropdown-item/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownItem, renderSpotterDropdownOption } from './dropdown-item';
+export type { DropdownItemProps, SpotterDropdownOption } from './dropdown-item';

package/dist/components/atoms/form/dropdown-item/index.js

@@ -0,0 +1,5 @@
+import { DropdownItem as e, renderSpotterDropdownOption as p } from "./dropdown-item.js";
+export {
+  e as DropdownItem,
+  p as renderSpotterDropdownOption
+};

package/dist/components/atoms/form/dropdown-item/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const getStyles: () => {
+    container: string;
+    textContainer: string;
+    name: string;
+    subtitle: string;
+};

package/dist/components/atoms/form/dropdown-item/styles.js

@@ -0,0 +1,9 @@
+const e = () => ({
+  container: "flex items-center gap-md w-full min-w-0",
+  textContainer: "flex flex-col min-w-0 flex-1",
+  name: "truncate",
+  subtitle: "truncate"
+});
+export {
+  e as getStyles
+};

package/dist/components/atoms/form/dropdown-search/dropdown-search.stories.d.ts

@@ -16,6 +16,7 @@ export declare const Controlled: Story;
 export declare const ControlledWithExternalState: Story;
 export declare const WithAddValue: Story;
 export declare const CustomRenderOption: Story;
+export declare const SpotterSearch: Story;
 export declare const LargeDataset: Story;
 export declare const AutoFocus: Story;
 export declare const CustomNotFoundText: Story;

package/dist/components/atoms/form/dropdown-search/dropdown-search.stories.js

@@ -6,6 +6,7 @@ import { Typography as p } from "../../../styles/typography/typography.js";
 import { Icons as h } from "../../icons/icons.js";
 import "../../icons/iconsSVGs/Large/Profile.js";
 import "../../icons/iconsSVGs/Small/Profile.js";
+import { renderSpotterDropdownOption as g } from "../dropdown-item/dropdown-item.js";
 const t = [
   { label: "Apple", value: "apple" },
   { label: "Banana", value: "banana" },
@@ -15,7 +16,7 @@ const t = [
   { label: "Fig", value: "fig" },
   { label: "Grape", value: "grape" },
   { label: "Honeydew", value: "honeydew" }
-], g = [
+], m = [
   { label: "Canada", value: "CA" },
   { label: "United States", value: "US" },
   { label: "United Kingdom", value: "UK" },
@@ -26,7 +27,25 @@ const t = [
   { label: "Japan", value: "JP" },
   { label: "Australia", value: "AU" },
   { label: "Brazil", value: "BR" }
-], m = (e) => /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+], v = [
+  {
+    label: "Sarah Johnson",
+    value: "spotter-1",
+    image: "https://i.pravatar.cc/150?u=spotter-1",
+    subtitle: "Toronto, ON"
+  },
+  {
+    label: "Michael Chen",
+    value: "spotter-2",
+    image: "https://i.pravatar.cc/150?u=spotter-2",
+    subtitle: "Vancouver, BC"
+  },
+  {
+    label: "Emily Rodriguez",
+    value: "spotter-3",
+    subtitle: "Calgary, AB"
+  }
+], y = (e) => /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
   /* @__PURE__ */ o(h, { icon: "Building" }),
   /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ o(p, { swStyle: 5, color: "default", children: e.label }),
@@ -36,8 +55,8 @@ const t = [
     ] })
   ] })
 ] }), d = (e) => {
-  var r, s;
-  const [a, n] = u(e.value || "");
+  var n, s;
+  const [a, r] = u(e.value || "");
   return /* @__PURE__ */ l("div", { className: "space-y-4", children: [
     /* @__PURE__ */ o(
       c,
@@ -45,7 +64,7 @@ const t = [
         ...e,
         value: a,
         onChange: e.onChange,
-        selectValue: n
+        selectValue: r
       }
     ),
     /* @__PURE__ */ l("div", { className: "text-sm text-gray-600", children: [
@@ -55,11 +74,11 @@ const t = [
       ] }),
       /* @__PURE__ */ l("p", { children: [
         "Selected option: ",
-        /* @__PURE__ */ o("strong", { children: a ? ((s = (r = e.options) == null ? void 0 : r.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
+        /* @__PURE__ */ o("strong", { children: a ? ((s = (n = e.options) == null ? void 0 : n.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
       ] })
     ] })
   ] });
-}, A = {
+}, E = {
   title: "@spotwork-ui/atoms/form/DropdownSearch",
   component: c,
   parameters: {
@@ -137,25 +156,25 @@ const t = [
     placeholder: "Search options...",
     notFoundText: "No results found"
   }
-}, F = {
+}, D = {
   args: {
     options: t,
     label: "Select a fruit"
   }
-}, N = {
+}, k = {
   args: {
     options: t,
     label: "Choose your favorite fruit",
     placeholder: "Type to search fruits..."
   }
-}, E = {
+}, V = {
   args: {
     options: t,
     label: "Fruit Selection",
     helperText: "Select a fruit from the dropdown or search for one",
     placeholder: "Search fruits..."
   }
-}, k = {
+}, O = {
   args: {
     options: t,
     label: "Fruit Selection",
@@ -163,7 +182,7 @@ const t = [
     helperText: "Please select a valid fruit",
     placeholder: "Search fruits..."
   }
-}, D = {
+}, U = {
   args: {
     options: t,
     label: "Fruit Selection",
@@ -171,7 +190,7 @@ const t = [
     helperText: "Consider selecting a seasonal fruit",
     placeholder: "Search fruits..."
   }
-}, V = {
+}, L = {
   args: {
     options: t,
     label: "Fruit Selection",
@@ -179,7 +198,7 @@ const t = [
     value: "apple",
     placeholder: "Search fruits..."
   }
-}, U = {
+}, B = {
   args: {
     options: t,
     label: "Loading Options",
@@ -187,30 +206,30 @@ const t = [
     loadingIcon: /* @__PURE__ */ o(h, { icon: "Clock" }),
     placeholder: "Loading..."
   }
-}, L = {
+}, R = {
   args: {
     options: [],
     label: "No Options",
     placeholder: "No options available",
     notFoundText: "No options match your search"
   }
-}, O = {
+}, I = {
   render: (e) => /* @__PURE__ */ o(d, { ...e }),
   args: {
     options: t,
     label: "Controlled Dropdown",
     placeholder: "Type to search..."
   }
-}, I = {
+}, W = {
   render: (e) => {
-    var r, s;
-    const [a, n] = u("banana");
+    var n, s;
+    const [a, r] = u("banana");
     return /* @__PURE__ */ l("div", { className: "space-y-4", children: [
       /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => n("apple"),
+            onClick: () => r("apple"),
             className: "px-3 py-1 bg-blue-500 text-white rounded text-sm",
             children: "Set to Apple"
           }
@@ -218,7 +237,7 @@ const t = [
         /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => n("cherry"),
+            onClick: () => r("cherry"),
             className: "px-3 py-1 bg-blue-500 text-white rounded text-sm",
             children: "Set to Cherry"
           }
@@ -226,7 +245,7 @@ const t = [
         /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => n(""),
+            onClick: () => r(""),
             className: "px-3 py-1 bg-red-500 text-white rounded text-sm",
             children: "Clear"
           }
@@ -237,7 +256,7 @@ const t = [
         {
           ...e,
           value: a,
-          selectValue: n
+          selectValue: r
         }
       ),
       /* @__PURE__ */ l("div", { className: "text-sm text-gray-600", children: [
@@ -247,7 +266,7 @@ const t = [
         ] }),
         /* @__PURE__ */ l("p", { children: [
           "Selected option: ",
-          /* @__PURE__ */ o("strong", { children: a ? ((s = (r = e.options) == null ? void 0 : r.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
+          /* @__PURE__ */ o("strong", { children: a ? ((s = (n = e.options) == null ? void 0 : n.find((i) => i.value === a)) == null ? void 0 : s.label) || "not found" : "none" })
         ] })
       ] })
     ] });
@@ -264,7 +283,7 @@ const t = [
       }
     }
   }
-}, R = {
+}, K = {
   render: (e) => /* @__PURE__ */ o(d, { ...e }),
   args: {
     options: t,
@@ -272,14 +291,21 @@ const t = [
     placeholder: "Search or add new value...",
     addValue: b()
   }
-}, W = {
+}, P = {
   args: {
-    options: g,
+    options: m,
     label: "Select Country",
     placeholder: "Search countries...",
-    renderOption: m
+    renderOption: y
   }
-}, B = {
+}, j = {
+  args: {
+    options: v,
+    label: "Search spotters",
+    placeholder: "Search by name...",
+    renderOption: g
+  }
+}, z = {
   args: {
     options: Array.from({ length: 100 }, (e, a) => ({
       label: `Option ${a + 1}`,
@@ -288,28 +314,28 @@ const t = [
     label: "Large Dataset",
     placeholder: "Search through 100 options..."
   }
-}, K = {
+}, J = {
   args: {
     options: t,
     label: "Auto Focus",
     autoFocus: !0,
     placeholder: "This field is auto-focused"
   }
-}, P = {
+}, G = {
   args: {
     options: [],
     label: "Custom Not Found",
     placeholder: "Search for something...",
     notFoundText: "Sorry, we couldn't find what you're looking for. Try a different search term."
   }
-}, j = {
+}, H = {
   args: {
     options: t,
     label: "Preselected Value",
     value: "banana",
     placeholder: "Search fruits..."
   }
-}, z = {
+}, $ = {
   render: (e) => /* @__PURE__ */ o(d, { ...e }),
   args: {
     options: t,
@@ -324,7 +350,7 @@ const t = [
       }
     }
   }
-}, G = {
+}, M = {
   args: {
     options: t,
     label: "Accessible Dropdown",
@@ -340,23 +366,24 @@ const t = [
   }
 };
 export {
-  G as Accessibility,
-  K as AutoFocus,
-  O as Controlled,
-  I as ControlledWithExternalState,
-  P as CustomNotFoundText,
-  W as CustomRenderOption,
-  F as Default,
-  V as Disabled,
-  L as EmptyState,
-  k as ErrorState,
-  z as KeyboardNavigation,
-  B as LargeDataset,
-  U as Loading,
-  D as WarningState,
-  R as WithAddValue,
-  E as WithHelperText,
-  N as WithLabel,
-  j as WithPreselectedValue,
-  A as default
+  M as Accessibility,
+  J as AutoFocus,
+  I as Controlled,
+  W as ControlledWithExternalState,
+  G as CustomNotFoundText,
+  P as CustomRenderOption,
+  D as Default,
+  L as Disabled,
+  R as EmptyState,
+  O as ErrorState,
+  $ as KeyboardNavigation,
+  z as LargeDataset,
+  B as Loading,
+  j as SpotterSearch,
+  U as WarningState,
+  K as WithAddValue,
+  V as WithHelperText,
+  k as WithLabel,
+  H as WithPreselectedValue,
+  E as default
 };

package/dist/components/atoms/form/typeahead/typeahead.d.ts

@@ -79,5 +79,9 @@ export type TypeaheadProps = {
      * This prop added specially for Address Form Component when we render addresses from google API and don't need to filter them.
      */
     disableOptionsFiltering?: boolean;
+    /**
+     * Custom renderer for dropdown options.
+     */
+    renderOption?: (option: string | LabelValuePair) => React.ReactNode;
 };
-export declare function Typeahead({ error, warning, helperText, label, placeholder, disabled, options, value, selectValue, onChange, endIconClick, addValue, inputRef, onBlur, loadingIcon, autoFocus, expandOnFocus, notFoundText, disableOptionsFiltering, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+export declare function Typeahead({ error, warning, helperText, label, placeholder, disabled, options, value, selectValue, onChange, endIconClick, addValue, inputRef, onBlur, loadingIcon, autoFocus, expandOnFocus, notFoundText, disableOptionsFiltering, renderOption, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;