@fluidattacks/design 9.1.1 → 9.2.0

package/dist/components/inputs/fields/combobox/option/index.js

@@ -1,121 +1,125 @@
-import { jsx as d, jsxs as E } from "react/jsx-runtime";
-import { useRef as G, useMemo as h, useCallback as k } from "react";
-import { useOption as H } from "../../../../../node_modules/react-aria/dist/private/listbox/useOption.js";
-import { useTheme as J } from "styled-components";
-import { StyledOption as Q } from "../styles.js";
-import { describeSelection as W } from "../utils.js";
-import { Checkbox as T } from "../../../../checkbox/index.js";
-import { Icon as X } from "../../../../icon/index.js";
-import { Link as Y } from "../../../../link/index.js";
-import { Tag as Z } from "../../../../tag/index.js";
+import { jsx as l, jsxs as G } from "react/jsx-runtime";
+import { useRef as H, useMemo as f, useCallback as k } from "react";
+import { useOption as J } from "../../../../../node_modules/react-aria/dist/private/listbox/useOption.js";
+import { useTheme as Q } from "styled-components";
+import { StyledOption as W } from "../styles.js";
+import { describeSelection as X, toSelection as j } from "../utils.js";
+import { Checkbox as u } from "../../../../checkbox/index.js";
+import { Icon as Y } from "../../../../icon/index.js";
+import { Link as Z } from "../../../../link/index.js";
+import { Tag as _ } from "../../../../tag/index.js";
 import "../../../../typography/heading/index.js";
 import "../../../../typography/span/index.js";
-import { Text as _ } from "../../../../typography/text/index.js";
-import { useClickOutside as I } from "../../../../../hooks/use-click-outside.js";
-import { openUrl as V } from "../../../../../utils/open-url.js";
-const yo = ({
-  allItemKeys: g,
-  containerRef: j,
+import { Text as I } from "../../../../typography/text/index.js";
+import { useClickOutside as V } from "../../../../../hooks/use-click-outside.js";
+import { openUrl as oo } from "../../../../../utils/open-url.js";
+const Co = ({
+  allItemKeys: a,
+  containerRef: D,
   item: o,
-  multiSelection: p,
-  name: r,
-  popoverRef: D,
-  setInputValue: t,
+  multiSelection: s,
+  name: e,
+  popoverRef: w,
+  setInputValue: i,
   setValue: n,
   state: c,
-  watch: f
+  tag: C,
+  watch: h
 }) => {
-  const w = J(), O = G(null), a = o.props.hrefLang, y = c.disabledKeys, C = g.filter(
-    (e) => !Array.from(y).includes(e) && e !== "All"
-  ), { optionProps: z, isSelected: $, isFocused: F, isDisabled: A } = H(
+  const z = Q(), y = H(null), d = o.props.hrefLang, g = c.disabledKeys, A = a.filter(
+    (r) => !Array.from(g).includes(r) && r !== "All"
+  ), { optionProps: F, isSelected: $, isFocused: q, isDisabled: O } = J(
     { key: o.key },
     c,
-    O
-  ), b = h(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), q = [
+    y
+  ), m = f(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), B = [
     $ ? "selected" : "",
-    F ? "focused" : "",
-    A ? "disabled" : ""
-  ].join(" "), S = k(
-    (e) => {
-      const { allSelected: s, text: i } = W(
-        e,
+    q ? "focused" : "",
+    O ? "disabled" : ""
+  ].join(" "), b = k(
+    (r) => {
+      const { allSelected: t, text: p } = X(
+        r,
+        a,
         g,
-        y,
-        b
+        m
       );
-      n?.(`${r}CheckAll`, s ? i : ""), t(i);
+      n?.(`${e}CheckAll`, t ? p : ""), i(p);
     },
-    [g, b, y, r, t, n]
-  ), B = k(
-    (e) => {
-      if (e.target.checked) {
-        const s = [...C].sort();
-        n?.(`${r}Options`, s), n?.(`${r}CheckAll`, e.target.value), t(e.target.value);
+    [a, m, g, e, i, n]
+  ), K = k(
+    (r) => {
+      if (r.target.checked) {
+        const t = [...A].sort();
+        n?.(`${e}Options`, t), n?.(`${e}CheckAll`, r.target.value), i(r.target.value);
       } else
-        n?.(`${r}Options`, []), n?.(`${r}CheckAll`, ""), t("");
+        n?.(`${e}Options`, []), n?.(`${e}CheckAll`, ""), i("");
     },
-    [C, r, t, n]
-  ), K = k(
-    (e) => {
-      const s = e.target.value, i = f?.(`${r}Options`) ?? [], v = Array.isArray(i) ? i : i ? [i] : [], L = e.target.checked ? [...v, s] : v.filter((U) => U !== s);
-      n?.(`${r}Options`, L), S(L);
+    [A, e, i, n]
+  ), M = k(
+    (r) => {
+      const t = r.target.value, p = j(h?.(`${e}Options`)), T = r.target.checked ? [...p, t] : p.filter((E) => E !== t);
+      n?.(`${e}Options`, T), b(T);
     },
-    [r, n, f, S]
-  ), l = f?.(`${r}Options`), m = h(() => Array.isArray(l) ? l : typeof l == "string" && l ? [l] : [], [l]), M = h(
-    () => m.includes(o.key.toString()),
-    [m, o.key]
-  ), x = f?.(`${r}CheckAll`), N = h(() => !!x, [x]), P = o.key === "All" ? /* @__PURE__ */ d(
-    T,
+    [e, n, h, b]
+  ), S = h?.(`${e}Options`), v = f(
+    () => j(S),
+    [S]
+  ), N = f(
+    () => v.includes(o.key.toString()),
+    [v, o.key]
+  ), x = h?.(`${e}CheckAll`), P = f(() => !!x, [x]), R = o.key === "All" ? /* @__PURE__ */ l(
+    u,
     {
-      checked: N,
+      checked: P,
       label: o.rendered?.toString(),
-      name: `${r}CheckAll`,
-      onChange: B,
+      name: `${e}CheckAll`,
+      onChange: K,
       value: o.rendered?.toString()
     }
-  ) : /* @__PURE__ */ d(
-    T,
+  ) : /* @__PURE__ */ l(
+    u,
     {
-      checked: M,
+      checked: N,
       label: o.rendered?.toString(),
-      name: `${r}Options`,
-      onChange: K,
+      name: `${e}Options`,
+      onChange: M,
       value: o.key.toString()
     }
-  ), u = p && !A ? P : /* @__PURE__ */ d(
-    _,
+  ), L = s && !O ? R : /* @__PURE__ */ l(
+    I,
     {
-      color: w.palette.gray[800],
+      color: z.palette.gray[800],
       size: "md",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
       children: o.rendered
     }
-  ), R = k(
-    (e) => {
-      e.preventDefault(), t(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
+  ), U = k(
+    (r) => {
+      r.preventDefault(), i(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
         c.setOpen(!1);
-      }), V(a);
+      }), oo(d);
     },
-    [a, o.key, o.rendered, c, t]
+    [d, o.key, o.rendered, c, i]
   );
-  return I(D, () => {
-    p && c.close();
-  }, [j]), /* @__PURE__ */ E(
-    Q,
+  return V(w, () => {
+    s && c.close();
+  }, [D]), /* @__PURE__ */ G(
+    W,
     {
-      ...!p && !a ? z : {},
-      $multiSelection: p,
-      className: q,
-      ref: O,
+      ...!s && !d ? F : {},
+      $multiSelection: s,
+      className: B,
+      ref: y,
       children: [
-        a ? /* @__PURE__ */ d(Y, { href: a, onClick: R, children: u }) : u,
-        $ && !A && !p ? /* @__PURE__ */ d(X, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
-        o.rendered === o.textValue ? void 0 : /* @__PURE__ */ d(Z, { tagLabel: o.textValue, variant: "inactive" })
+        d ? /* @__PURE__ */ l(Z, { href: d, onClick: U, children: L }) : L,
+        $ && !O && !s ? /* @__PURE__ */ l(Y, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
+        C === void 0 ? void 0 : /* @__PURE__ */ l(_, { tagLabel: C, variant: "inactive" })
       ]
     }
   );
 };
 export {
-  yo as Option
+  Co as Option
 };

package/dist/components/inputs/fields/combobox/types.d.ts

@@ -28,6 +28,7 @@ interface IItem {
  * @property { string } name - The name of the Select.
  * @property { MutableRefObject } popoverRef - The ref of the options popover.
  * @property { ComboBoxState<T> } state - The state of the ComboBox.
+ * @property { string } [tag] - Optional tag shown next to the option.
  */
 interface IOptionProps<T> {
     allItemKeys: string[];
@@ -39,6 +40,7 @@ interface IOptionProps<T> {
     setInputValue: React.Dispatch<React.SetStateAction<string>>;
     state: ComboBoxState<T>;
     setValue?: UseFormSetValue<any>;
+    tag?: string;
     watch?: UseFormWatch<any>;
 }
 /**

package/dist/components/stepper/index.d.ts

@@ -0,0 +1,4 @@
+import { IStepperProps, IStepperStep } from './types';
+declare const Stepper: ({ completedLabel, currentStep, steps, }: Readonly<IStepperProps>) => JSX.Element;
+export { Stepper };
+export type { IStepperProps, IStepperStep };

package/dist/components/stepper/index.js

@@ -0,0 +1,50 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { Fragment as d } from "react";
+import { VisuallyHidden as a } from "../../node_modules/react-aria/dist/private/visually-hidden/VisuallyHidden.js";
+import { useTheme as s } from "styled-components";
+import { StyledStepRow as h, StyledStepItem as u, StyledStepIndicator as f, StyledStepConnector as g } from "./styles.js";
+import { Icon as S } from "../icon/index.js";
+import "../typography/heading/index.js";
+import "../typography/span/index.js";
+import { Text as y } from "../typography/text/index.js";
+const $ = (n, e) => n < e ? "completed" : n === e ? "current" : "upcoming", C = ({
+  completedLabel: n = "completed",
+  currentStep: e,
+  steps: c
+}) => {
+  const l = s();
+  return /* @__PURE__ */ m(d, { children: [
+    /* @__PURE__ */ t(h, { children: c.map((r, o) => {
+      const i = $(o, e), p = i === "upcoming";
+      return /* @__PURE__ */ m(
+        u,
+        {
+          "aria-current": i === "current" ? "step" : void 0,
+          children: [
+            /* @__PURE__ */ t(f, { $status: i, children: i === "completed" ? /* @__PURE__ */ t(S, { icon: "check", iconSize: "sm", iconType: "fa-solid" }) : o + 1 }),
+            /* @__PURE__ */ m(
+              y,
+              {
+                color: p ? l.palette.gray[400] : l.palette.gray[800],
+                display: "inline",
+                fontWeight: p ? "regular" : "bold",
+                size: "md",
+                whiteSpace: "nowrap",
+                children: [
+                  r.title,
+                  i === "completed" && /* @__PURE__ */ t(a, { children: ` (${n})` })
+                ]
+              }
+            ),
+            o < c.length - 1 && /* @__PURE__ */ t(g, { "aria-hidden": !0 })
+          ]
+        },
+        r.title
+      );
+    }) }),
+    c.map((r, o) => /* @__PURE__ */ t("div", { hidden: o !== e, children: r.content }, r.title))
+  ] });
+};
+export {
+  C as Stepper
+};

package/dist/components/stepper/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react-vite';
+import { IStepperProps } from './types';
+declare const config: Meta;
+declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IStepperProps>;
+export { Default };
+export default config;

package/dist/components/stepper/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/stepper/styles.d.ts

@@ -0,0 +1,10 @@
+import { TStepperStatus } from './types';
+declare const StyledStepRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>>> & string;
+declare const StyledStepItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
+declare const StyledStepIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$status"> & {
+    $status: TStepperStatus;
+}, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$status"> & {
+    $status: TStepperStatus;
+}, never>>> & string;
+declare const StyledStepConnector: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export { StyledStepConnector, StyledStepIndicator, StyledStepItem, StyledStepRow, };

package/dist/components/stepper/styles.js

@@ -0,0 +1,65 @@
+import { styled as i } from "styled-components";
+import { variantBuilder as a } from "../@core/variants/utils.js";
+const { getVariant: n } = a(
+  (t) => ({
+    completed: `
+      background-color: ${t.palette.success[500]};
+      color: ${t.palette.white};
+    `,
+    current: `
+      background-color: ${t.palette.gray[800]};
+      color: ${t.palette.white};
+    `,
+    upcoming: `
+      background-color: ${t.palette.white};
+      border: 1px solid ${t.palette.gray[400]};
+      color: ${t.palette.gray[400]};
+    `
+  })
+), r = i.ol`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme: t }) => t.spacing[0.75]};
+  list-style: none;
+  margin: 0;
+  margin-bottom: ${({ theme: t }) => t.spacing[1.5]};
+  padding: 0;
+`, p = i.li`
+  align-items: center;
+  display: flex;
+  flex: 1 1 0;
+  gap: ${({ theme: t }) => t.spacing[0.75]};
+  min-width: 0;
+
+  &:last-child {
+    flex: 0 0 auto;
+  }
+`, c = i.span`
+  ${({ theme: t, $status: o }) => `
+    align-items: center;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    font-family: ${t.typography.type.primary};
+    font-size: ${t.typography.text.md};
+    font-weight: ${t.typography.weight.bold};
+    line-height: ${t.spacing[1.25]};
+    height: ${t.spacing[1.5]};
+    justify-content: center;
+    width: ${t.spacing[1.5]};
+
+    ${n(t, o)}
+  `}
+`, g = i.span`
+  background-color: ${({ theme: t }) => t.palette.gray[300]};
+  flex: 1 1 auto;
+  height: 1px;
+  min-width: ${({ theme: t }) => t.spacing[1]};
+`;
+export {
+  g as StyledStepConnector,
+  c as StyledStepIndicator,
+  p as StyledStepItem,
+  r as StyledStepRow
+};

package/dist/components/stepper/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+type TStepperStatus = "completed" | "current" | "upcoming";
+/**
+ * Stepper step props.
+ * @interface IStepperStep
+ * @property { ReactNode } content - The step's panel. It stays mounted while other steps are current, so form fields keep their registration and values.
+ * @property { string } title - The step's label in the progress row; must be unique among the steps.
+ */
+interface IStepperStep {
+    content: ReactNode;
+    title: string;
+}
+/**
+ * Stepper component props.
+ * @interface IStepperProps
+ * @property { string } [completedLabel] - Screen-reader suffix announced after each completed step's title. Defaults to "completed".
+ * @property { number } currentStep - Zero-based index of the current step, owned by the consumer: steps before it render as completed, steps after it as upcoming.
+ * @property { IStepperStep[] } steps - The steps, in order.
+ */
+interface IStepperProps {
+    completedLabel?: string;
+    currentStep: number;
+    steps: IStepperStep[];
+}
+export type { IStepperProps, IStepperStep, TStepperStatus };

package/dist/index.d.ts

@@ -72,6 +72,7 @@ export * from './components/show-on-hover';
 export * from './components/slide-out-menu';
 export * from './components/slider';
 export * from './components/step-lapse';
+export * from './components/stepper';
 export * from './components/summary-card';
 export * from './components/table';
 export * from './components/table-button';