@fluidattacks/design 8.0.0 → 8.2.0

package/dist/components/table-content/item-content/index.js

@@ -1,6 +1,62 @@
-import "react/jsx-runtime";
-import "styled-components";
-import { a9 as e } from "../../../components-BgqdC3aZ.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useTheme as p } from "styled-components";
+import { Container as i } from "../../container/index.js";
+import { Tooltip as a } from "../../tooltip/index.js";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as d } from "../../typography/text/index.js";
+const y = ({
+  items: l,
+  spacing: e = 0.75
+}) => {
+  const r = p();
+  return /* @__PURE__ */ t(
+    i,
+    {
+      alignItems: "flex-start",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      children: l.map((o) => /* @__PURE__ */ n(
+        i,
+        {
+          alignItems: "center",
+          borderBottom: `1px solid ${r.palette.gray[200]}`,
+          display: "flex",
+          gap: 0.75,
+          justify: "flex-start",
+          pr: e,
+          py: e,
+          width: "100%",
+          children: [
+            /* @__PURE__ */ t(
+              d,
+              {
+                display: "inline-flex",
+                fontWeight: "bold",
+                size: "lg",
+                whiteSpace: "nowrap",
+                ...o.backgroundColor ? { bgGradient: o.backgroundColor, textFill: "transparent" } : {},
+                children: o.header
+              }
+            ),
+            o.tooltip ? /* @__PURE__ */ t(
+              a,
+              {
+                icon: "circle-info",
+                iconColor: r.palette.gray[700],
+                id: `tooltip-${o.header.toLowerCase().replace(/\s+/g, "-")}`,
+                tip: o.tooltip
+              }
+            ) : void 0,
+            o.content ?? void 0
+          ]
+        },
+        o.header
+      ))
+    }
+  );
+};
 export {
-  e as ItemContent
+  y as ItemContent
 };

package/dist/components/table-content/styles.js

@@ -0,0 +1,17 @@
+import { styled as i } from "styled-components";
+const s = i.div`
+  ${({ theme: a }) => `
+    align-items: flex-start;
+    display: flex;
+    background: ${a.palette.white};
+    border: 1px solid ${a.palette.gray[200]};
+    border-radius: ${a.spacing[1]};
+    box-shadow: ${a.shadows.sm};
+    flex-direction: column;
+    gap: ${a.spacing[1.25]};
+    padding: ${a.spacing[1.25]};
+  `}
+`;
+export {
+  s as TableContentContainer
+};

package/dist/components/table-of-contents/index.js

@@ -1,6 +1,44 @@
-import "react/jsx-runtime";
-import "react";
-import { aY as e } from "../../components-BgqdC3aZ.mjs";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useMemo as f, useCallback as v } from "react";
+import { TocList as h, TocItem as u, TocLink as g } from "./styles.js";
+import { Container as x } from "../container/index.js";
+import { Heading as T } from "../typography/heading/index.js";
+import "../typography/span/index.js";
+import "../typography/text/index.js";
+import { useActiveSection as $ } from "../../hooks/use-active-section.js";
+const D = ({
+  items: i,
+  title: n,
+  scrollMarginTop: l = 80,
+  variant: r = "default",
+  onItemClick: t
+}) => {
+  const a = f(
+    () => i.map((o) => o.id),
+    [i]
+  ), [s, c] = $(a, {
+    rootMarginTop: l
+  }), d = v(
+    (o) => (m) => {
+      m.preventDefault(), c(o), document.getElementById(o)?.scrollIntoView({ behavior: "smooth" }), t?.(o);
+    },
+    [t, c]
+  );
+  return /* @__PURE__ */ p(x, { as: "nav", display: "flex", flexDirection: "column", gap: 1.25, children: [
+    n === void 0 ? null : /* @__PURE__ */ e(T, { fontWeight: "bold", size: "sm", children: n }),
+    /* @__PURE__ */ e(h, { $variant: r, children: i.map((o) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
+      g,
+      {
+        $isActive: s === o.id,
+        $level: o.level ?? 0,
+        $variant: r,
+        href: `#${o.id}`,
+        onClick: d(o.id),
+        children: o.title
+      }
+    ) }, o.id)) })
+  ] });
+};
 export {
-  e as TableOfContents
+  D as TableOfContents
 };

package/dist/components/table-of-contents/styles.js

@@ -0,0 +1,77 @@
+import { styled as r } from "styled-components";
+const e = r.li`
+  list-style: none;
+  width: 100%;
+`, s = r.ul`
+  ${({ theme: t, $variant: a }) => `
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: ${t.spacing[1]};
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    ${a === "nav" ? `
+      border-left: 1px solid ${t.palette.gray[200]};
+      gap: ${t.spacing[0.75]};
+    ` : ""}
+  `}
+`, y = r.a`
+  ${({ theme: t, $isActive: a, $level: o, $variant: p }) => {
+  const n = `
+      cursor: pointer;
+      display: block;
+      font-family: ${t.typography.type.primary};
+      font-size: ${t.typography.text.lg};
+      line-height: ${t.spacing[1.5]};
+      text-decoration: none;
+    `;
+  if (p === "nav") {
+    const l = t.spacing[1], g = t.spacing[1];
+    return `
+        ${n}
+        color: ${a ? t.palette.primary[500] : t.palette.gray[600]};
+        font-weight: ${o === 0 ? t.typography.weight.bold : t.typography.weight.regular};
+        padding-left: calc(${l} + ${o} * ${g});
+        position: relative;
+
+        &::before {
+          background: ${t.palette.primary[500]};
+          bottom: 0;
+          content: "";
+          left: -1px;
+          position: absolute;
+          top: 0;
+          width: ${a ? "2px" : "0"};
+        }
+
+        &:hover {
+          color: ${a ? t.palette.primary[500] : t.palette.gray[400]};
+        }
+      `;
+  }
+  const i = a ? `
+        background: ${t.palette.gradient};
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      ` : "";
+  return `
+      ${n}
+      color: ${a ? "transparent" : t.palette.gray[600]};
+      font-weight: ${o > 0 ? t.typography.weight.regular : t.typography.weight.bold};
+      padding-left: ${o > 0 ? t.spacing[0.75] : "0"};
+      ${i}
+
+      &:hover {
+        color: ${a ? "transparent" : t.palette.gray[400]};
+      }
+    `;
+}}
+`;
+export {
+  e as TocItem,
+  y as TocLink,
+  s as TocList
+};

package/dist/components/tabs/index.js

@@ -1,6 +1,63 @@
-import "react/jsx-runtime";
-import "styled-components";
-import { aZ as p } from "../../components-BgqdC3aZ.mjs";
+import { jsx as n } from "react/jsx-runtime";
+import { useTheme as y } from "styled-components";
+import { Tab as h } from "./tab/index.js";
+import { Container as u } from "../container/index.js";
+const C = (o, e) => o ? [0, 0, 0, 0] : e ? [0.5, 1, 0.5, 1] : void 0, N = ({
+  items: o,
+  borders: e = !0,
+  box: t = !1,
+  variant: a = "primary"
+}) => {
+  const r = y(), i = a === "secondaryNav";
+  return /* @__PURE__ */ n(
+    u,
+    {
+      alignItems: "center",
+      bgColor: i ? r.palette.gray[50] : r.palette.white,
+      border: t ? "1px solid" : void 0,
+      borderBottom: e ? `1px solid ${r.palette.gray[300]}` : void 0,
+      borderColor: t ? r.palette.gray[200] : void 0,
+      borderRadius: t ? r.spacing[0.25] : void 0,
+      display: "inline-flex",
+      gap: i ? 0.75 : 0.25,
+      id: "tablist",
+      minHeight: i && !t ? "54px" : void 0,
+      padding: C(t, i),
+      pl: e ? 1.25 : void 0,
+      pr: e ? 1.25 : void 0,
+      role: "tablist",
+      width: t ? "max-content" : "100%",
+      children: o.map(
+        ({
+          end: p,
+          id: d,
+          isActive: l,
+          link: m,
+          label: s,
+          notificationSign: g,
+          onClick: c,
+          tag: v,
+          tooltip: f
+        }) => /* @__PURE__ */ n(
+          h,
+          {
+            end: p,
+            id: d,
+            isActive: l,
+            label: s,
+            link: m,
+            notificationSign: g,
+            onClick: c,
+            tag: v,
+            tooltip: f,
+            variant: a
+          },
+          d
+        )
+      )
+    }
+  );
+};
 export {
-  p as Tabs
+  N as Tabs
 };

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

@@ -5,6 +5,8 @@ declare const config: Meta;
 declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, React.PropsWithChildren<ITabsProps>>;
 declare const WithTooltips: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, React.PropsWithChildren<ITabsProps>>;
 declare const SecondaryTabs: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, React.PropsWithChildren<ITabsProps>>;
+declare const SecondaryNavTabs: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, React.PropsWithChildren<ITabsProps>>;
 declare const WithTag: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, React.PropsWithChildren<ITabsProps>>;
-export { Default, WithTooltips, SecondaryTabs, WithTag };
+declare const SecondaryTagTabs: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, React.PropsWithChildren<ITabsProps>>;
+export { Default, WithTooltips, SecondaryTabs, SecondaryNavTabs, WithTag, SecondaryTagTabs, };
 export default config;

package/dist/components/tabs/styles.js

@@ -0,0 +1,64 @@
+import { styled as o } from "styled-components";
+const e = (a, r, t) => t ? r === "secondary" ? `3px solid ${a.palette.primary[100]}` : `3px solid ${a.palette.primary[500]}` : "unset", n = (a, r) => `
+  background-color: ${r ? a.palette.gray[200] : a.palette.white};
+  border: 1px solid ${r ? a.palette.gray[300] : a.palette.gray[200]};
+  border-radius: ${a.spacing[0.25]};
+  padding: calc(${a.spacing[0.25]} - 1px) calc(${a.spacing[0.5]} - 1px);
+
+  &:hover:not([disabled]) {
+    background-color: ${r ? a.palette.gray[200] : a.palette.gray[100]};
+  }
+
+  a {
+    font-weight: ${r ? a.typography.weight.bold : a.typography.weight.regular};
+    line-height: 20px;
+  }
+`, l = o.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: a }) => a.spacing[0.25]};
+  border-bottom: ${({ theme: a, $borderButton: r, $variant: t }) => e(a, t, r)};
+  align-items: center;
+  padding: ${({ theme: a }) => a.spacing[0.625]}
+    ${({ theme: a }) => a.spacing[0.5]};
+  padding-bottom: ${({ theme: a, $borderButton: r }) => r ? `calc(${a.spacing[0.625]} - 2px)` : a.spacing[0.625]};
+
+  &:hover:not([disabled]) {
+    background-color: ${({ theme: a }) => a.palette.gray[100]};
+    color: ${({ theme: a }) => a.palette.gray[800]};
+  }
+
+  a {
+    align-items: center;
+    background: transparent;
+    color: ${({ theme: a }) => a.palette.gray[800]};
+    font-family: ${({ theme: a }) => a.typography.type.primary};
+    font-size: ${({ theme: a }) => a.typography.text.md};
+    display: flex;
+    font-weight: ${({ theme: a }) => a.typography.weight.regular};
+    position: relative;
+    text-align: center;
+    text-decoration: unset;
+    width: auto;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: ${({ theme: a }) => a.palette.gray[300]};
+      color: ${({ theme: a }) => a.palette.gray[300]};
+    }
+
+    &.active {
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  ${({ theme: a, $borderButton: r, $variant: t }) => t === "secondaryNav" ? n(a, r) : ""}
+`;
+export {
+  l as TabContainer
+};

package/dist/components/tabs/tab/index.js

@@ -1,6 +1,44 @@
-import "react/jsx-runtime";
-import "react-router";
-import { cf as t } from "../../../components-BgqdC3aZ.mjs";
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { useLocation as b, NavLink as h } from "react-router";
+import { TabContainer as v } from "../styles.js";
+import { NotificationSign as y } from "../../notification-sign/index.js";
+import { Tag as x } from "../../tag/index.js";
+import { Tooltip as N } from "../../tooltip/index.js";
+const I = ({
+  end: l = !1,
+  label: d,
+  id: a,
+  isActive: i = !1,
+  link: t,
+  notificationSign: r,
+  onClick: n,
+  tooltip: f = "",
+  variant: e = "primary",
+  tag: m
+}) => {
+  const { pathname: p } = b(), s = e === "secondaryNav", c = i || (e === "primary" ? p.includes(t) : p.endsWith(t));
+  return /* @__PURE__ */ o(N, { display: "flex", id: `${a}-tooltip`, tip: f, children: /* @__PURE__ */ u(v, { $borderButton: c, $variant: e, children: [
+    /* @__PURE__ */ o(h, { end: l, id: a, onClick: n, to: t, children: d }),
+    /* @__PURE__ */ o(
+      y,
+      {
+        left: r?.left,
+        numberIndicator: r?.numberIndicator,
+        show: r?.show,
+        top: r?.top,
+        variant: r?.variant
+      }
+    ),
+    m === void 0 ? null : /* @__PURE__ */ o(
+      x,
+      {
+        priority: s ? "low" : "default",
+        tagLabel: `${m}`,
+        variant: s ? "info" : "default"
+      }
+    )
+  ] }) });
+};
 export {
-  t as Tab
+  I as Tab
 };

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

@@ -1,5 +1,5 @@
 import { INotificationSignProps } from '../notification-sign/types';
-type TVariant = "primary" | "secondary";
+type TVariant = "primary" | "secondary" | "secondaryNav";
 /**
  * Individual tab props.
  * @property {boolean} [isActive] - Set the current tab active.
@@ -46,7 +46,7 @@ interface ITabProps extends IFixedTabProps {
  * @property {ITabProps[]} items - The lists of tabs to display.
  * @property {boolean} [borders] - Whether to add borders to set of tabs.
  * @property {boolean} [box] - Whether to add box container to set of tabs.
- * @property {"primary" | "secondary"} [variant] - The variant of the tabs items.
+ * @property {"primary" | "secondary" | "secondaryNav"} [variant] - The variant of the tabs items.
  */
 interface ITabsProps {
     items: ITabProps[];

package/dist/components/tag/index.js

@@ -1,6 +1,104 @@
-import "react/jsx-runtime";
-import "../../vendor-i-lggy4V.mjs";
-import { a_ as p } from "../../components-BgqdC3aZ.mjs";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { l as b } from "../../_virtual/lodash.js";
+import { StyledTag as k, StyledTagContent as E, StyledDot as j } from "./styles.js";
+import { Icon as K } from "../icon/index.js";
+import { IconButton as P } from "../icon-button/index.js";
+import { Link as C } from "../link/index.js";
+import "../typography/heading/index.js";
+import { Span as W } from "../typography/span/index.js";
+import "../typography/text/index.js";
+const R = ({
+  disabled: f,
+  dot: h = !1,
+  icon: c,
+  iconColor: u = "inherit",
+  iconType: v = "fa-light",
+  id: g = "close-tag",
+  filterId: x = "",
+  filterValues: d = "",
+  fontSize: y,
+  href: r,
+  linkLabel: S,
+  onBodyClick: i,
+  onClose: n,
+  priority: $ = "default",
+  selected: a,
+  tagTitle: p = "",
+  tagLabel: s,
+  truncate: T = !0,
+  variant: w = "default"
+}) => {
+  const z = s.length > 25 && T && b.isEmpty(p + d), D = `${s.slice(0, 25)}...`, I = (t) => {
+    t.target === t.currentTarget && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i?.());
+  }, N = (t) => {
+    t.stopPropagation(), n?.();
+  }, l = i !== void 0, m = l && typeof a == "boolean";
+  return /* @__PURE__ */ e(
+    W,
+    {
+      className: "gap-0.5",
+      color: "inherit",
+      display: r === void 0 ? "initial" : "flex",
+      size: "md",
+      children: [
+        /* @__PURE__ */ e(
+          k,
+          {
+            $fontSize: y,
+            $interactive: l,
+            $selectable: m,
+            $selected: a === !0,
+            $variant: w,
+            className: $,
+            "data-testid": x,
+            ...l && {
+              ...m ? { "aria-pressed": a } : {},
+              onClick: i,
+              onKeyDown: I,
+              role: "button",
+              tabIndex: 0
+            },
+            children: [
+              /* @__PURE__ */ e(E, { children: [
+                c ? /* @__PURE__ */ o(
+                  K,
+                  {
+                    icon: c,
+                    iconColor: u,
+                    iconSize: "sm",
+                    iconType: v
+                  }
+                ) : void 0,
+                h ? /* @__PURE__ */ o(j, { "data-testid": "tag-dot" }) : void 0,
+                /* @__PURE__ */ e("span", { className: "w-full", children: [
+                  /* @__PURE__ */ o("strong", { children: p }),
+                  /* @__PURE__ */ o("span", { children: z ? D : s }),
+                  /* @__PURE__ */ o("strong", { className: "w-full", children: d })
+                ] })
+              ] }),
+              n ? /* @__PURE__ */ o(
+                P,
+                {
+                  disabled: f,
+                  icon: "xmark",
+                  iconColor: "currentColor",
+                  iconSize: "xs",
+                  iconType: "fa-light",
+                  id: g,
+                  onClick: i !== void 0 ? N : n,
+                  px: 0.125,
+                  py: 0.125,
+                  variant: "ghost"
+                }
+              ) : void 0
+            ]
+          }
+        ),
+        r === void 0 ? void 0 : /* @__PURE__ */ o(C, { href: r, children: S })
+      ]
+    }
+  );
+};
 export {
-  p as Tag
+  R as Tag
 };