@temp-spotwork/ui 1.7.6 → 1.7.8

package/dist/components/atoms/badge/badge.d.ts

@@ -18,6 +18,8 @@ export declare const badgeColorVariants: {
     warningInverted: string;
     alert: string;
     alertInverted: string;
+    paidBackup: string;
+    paidBackupInverted: string;
     disabled: string;
     disabledInverted: string;
 };

package/dist/components/atoms/badge/badge.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Typography as i } from "../../styles/typography/typography.js";
-const t = {
+import { Typography as d } from "../../styles/typography/typography.js";
+const a = {
   active: "active",
   affirmative: "active",
   affirmativeInverted: "activeInverted",
@@ -10,20 +10,22 @@ const t = {
   warningInverted: "warningInverted",
   alert: "alert",
   alertInverted: "alertInverted",
+  paidBackup: "paidBackup",
+  paidBackupInverted: "paidBackupInverted",
   disabled: "disabled",
   disabledInverted: "disabledInverted"
 };
-function c({ text: a, color: r }) {
-  const n = t[r];
+function s({ text: t, color: r }) {
+  const n = a[r];
   return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
     "div",
     {
       "data-testid": "Badge-container",
-      className: `px-[0.5rem] py-[0.2rem] bg-surface-${t[r]} rounded-[0.9rem] min-w-[1.8rem] max-w-max h-[1.8rem] flex items-center place-content-around m-[0.1rem]`,
+      className: `px-[0.5rem] py-[0.2rem] bg-surface-${a[r]} rounded-[0.9rem] min-w-[1.8rem] max-w-max h-[1.8rem] flex items-center place-content-around m-[0.1rem]`,
       children: /* @__PURE__ */ e(
-        i,
+        d,
         {
-          children: `${a}`.trim().toUpperCase(),
+          children: `${t}`.trim().toUpperCase(),
           color: n,
           swStyle: 6,
           lineHeight: 1.4
@@ -33,6 +35,6 @@ function c({ text: a, color: r }) {
   ) });
 }
 export {
-  c as Badge,
-  t as badgeColorVariants
+  s as Badge,
+  a as badgeColorVariants
 };

package/dist/components/atoms/badge/badge.stories.d.ts

@@ -5,3 +5,4 @@ declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const PaidBackup: Story;

package/dist/components/atoms/badge/badge.stories.js

@@ -1,8 +1,8 @@
 import { f as o } from "../../../index-Dpx0xQmQ.js";
-import { Badge as t } from "./badge.js";
+import { Badge as a } from "./badge.js";
 const e = {
   title: "@spotwork-ui/badge",
-  component: t,
+  component: a,
   parameters: {
     layout: "centered"
   },
@@ -11,13 +11,19 @@ const e = {
     backgroundColor: { control: "color" }
   },
   args: { onClick: o() }
-}, s = {
+}, c = {
   args: {
     text: "badge item",
     color: "affirmative"
   }
+}, s = {
+  args: {
+    text: "Paid Backup",
+    color: "paidBackup"
+  }
 };
 export {
-  s as Primary,
+  s as PaidBackup,
+  c as Primary,
   e as default
 };

package/dist/components/atoms/form/chips/chips.stories.d.ts

@@ -5,3 +5,5 @@ declare const meta: Meta<typeof Chips>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const PaidBackupLargeReadOnly: Story;
+export declare const PaidBackupPill: Story;

package/dist/components/atoms/form/chips/chips.stories.js

@@ -1,8 +1,8 @@
-import { f as o } from "../../../../index-Dpx0xQmQ.js";
-import { Chips as r } from "./chips.js";
-const a = {
+import { f as a } from "../../../../index-Dpx0xQmQ.js";
+import { Chips as o } from "./chips.js";
+const t = {
   title: "@spotwork-ui/chips",
-  component: r,
+  component: o,
   parameters: {
     layout: "centered"
   },
@@ -10,15 +10,33 @@ const a = {
   argTypes: {
     backgroundColor: { control: "color" }
   },
-  args: { onClick: o() }
-}, s = {
+  args: { onClick: a() }
+}, c = {
   args: {
+    id: "primary",
     chipText: "some chips",
     color: "affirmative",
     chipSelected: !1
   }
+}, e = {
+  args: {
+    id: "paid-backup-readonly",
+    chipText: "Ready to Work",
+    color: "paidBackup",
+    variant: "largeReadOnly",
+    infoBubbleContent: "icons:WaitingSmall"
+  }
+}, p = {
+  args: {
+    id: "paid-backup-pill",
+    chipText: "Paid Backup",
+    color: "paidBackup",
+    variant: "pill"
+  }
 };
 export {
-  s as Primary,
-  a as default
+  e as PaidBackupLargeReadOnly,
+  p as PaidBackupPill,
+  c as Primary,
+  t as default
 };

package/dist/components/atoms/form/chips/styles.d.ts

@@ -67,6 +67,7 @@ export declare const colorVariants: {
     success: string;
     warning: string;
     alert: string;
+    paidBackup: string;
     disabled: string;
 };
 export type ColorVariants = keyof typeof colorVariants;

package/dist/components/atoms/form/chips/styles.js

@@ -34,12 +34,14 @@ const n = (e) => ({
   success: "success",
   warning: "warning",
   alert: "alert",
+  paidBackup: "paidBackup",
   disabled: "disabled"
 }, i = {
   affirmative: "affirmativeInverted",
   success: "successInverted",
   warning: "warningInverted",
   alert: "alertInverted",
+  paidBackup: "paidBackupInverted",
   disabled: "disabledInverted"
 };
 export {

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;