@wallarm-org/design-system 0.56.1 → 0.57.1-rc-feature-AS-1085.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/components/Banner/Banner.d.ts +31 -0
  2. package/dist/components/Banner/Banner.figma.d.ts +1 -0
  3. package/dist/components/Banner/Banner.figma.js +69 -0
  4. package/dist/components/Banner/Banner.js +31 -0
  5. package/dist/components/Banner/BannerClose.d.ts +14 -0
  6. package/dist/components/Banner/BannerClose.js +31 -0
  7. package/dist/components/Banner/BannerContent.d.ts +10 -0
  8. package/dist/components/Banner/BannerContent.js +16 -0
  9. package/dist/components/Banner/BannerContext.d.ts +8 -0
  10. package/dist/components/Banner/BannerContext.js +7 -0
  11. package/dist/components/Banner/BannerControls.d.ts +11 -0
  12. package/dist/components/Banner/BannerControls.js +16 -0
  13. package/dist/components/Banner/BannerDescription.d.ts +12 -0
  14. package/dist/components/Banner/BannerDescription.js +30 -0
  15. package/dist/components/Banner/BannerIcon.d.ts +14 -0
  16. package/dist/components/Banner/BannerIcon.js +30 -0
  17. package/dist/components/Banner/BannerLink.d.ts +11 -0
  18. package/dist/components/Banner/BannerLink.js +17 -0
  19. package/dist/components/Banner/BannerTitle.d.ts +24 -0
  20. package/dist/components/Banner/BannerTitle.js +37 -0
  21. package/dist/components/Banner/classes.d.ts +23 -0
  22. package/dist/components/Banner/classes.js +58 -0
  23. package/dist/components/Banner/index.d.ts +7 -0
  24. package/dist/components/Banner/index.js +8 -0
  25. package/dist/components/FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.js +23 -3
  26. package/dist/components/FilterInput/index.d.ts +1 -1
  27. package/dist/components/FilterInput/index.js +2 -2
  28. package/dist/index.d.ts +1 -0
  29. package/dist/index.js +2 -1
  30. package/dist/metadata/components.json +2104 -2
  31. package/package.json +1 -1
@@ -0,0 +1,31 @@
1
+ import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
2
+ import type { VariantProps } from 'class-variance-authority';
3
+ import { type TestableProps } from '../../utils/testId';
4
+ import { type BannerVariant, bannerVariants } from './classes';
5
+ export type { BannerVariant };
6
+ export interface BannerProps extends Omit<VariantProps<typeof bannerVariants>, 'variant'>, HTMLAttributes<HTMLDivElement>, TestableProps {
7
+ ref?: Ref<HTMLDivElement>;
8
+ /** Visual variant of the banner */
9
+ variant?: BannerVariant;
10
+ /**
11
+ * Leading icon. The destructive, info, and warning variants render a default
12
+ * icon when this is omitted; primary and secondary render none. Passing an
13
+ * icon always overrides the default.
14
+ */
15
+ icon?: ReactNode;
16
+ /** Banner content — compose with Banner sub-components */
17
+ children?: ReactNode;
18
+ }
19
+ /**
20
+ * Banner displays a prominent, full-width message at the top of the page
21
+ * (above the header) to communicate system-wide status, announcements,
22
+ * warnings, errors, or promotional messages to all users.
23
+ *
24
+ * Banners persist until dismissed by the user or until the state that caused
25
+ * them is resolved.
26
+ *
27
+ * Supports 5 variants: primary (dark/neutral), secondary, destructive, info,
28
+ * and warning. Compose with: BannerContent, BannerTitle, BannerDescription,
29
+ * BannerLink, BannerControls, BannerClose.
30
+ */
31
+ export declare const Banner: FC<BannerProps>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,69 @@
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import code_connect from "@figma/code-connect";
3
+ import { Button } from "../Button/index.js";
4
+ import { Banner } from "./Banner.js";
5
+ import { BannerClose } from "./BannerClose.js";
6
+ import { BannerContent } from "./BannerContent.js";
7
+ import { BannerControls } from "./BannerControls.js";
8
+ import { BannerDescription } from "./BannerDescription.js";
9
+ import { BannerLink } from "./BannerLink.js";
10
+ import { BannerTitle } from "./BannerTitle.js";
11
+ const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7688-3741';
12
+ const typeToVariant = {
13
+ Primary: 'primary',
14
+ Secondary: 'secondary',
15
+ Destructive: 'destructive',
16
+ Info: 'info',
17
+ Warning: 'warning'
18
+ };
19
+ code_connect.connect(Banner, figmaNodeUrl, {
20
+ props: {
21
+ variant: code_connect["enum"]('Type', typeToVariant),
22
+ description: code_connect.boolean("description"),
23
+ inlineAction: code_connect.boolean('inlineAction'),
24
+ rightActions: code_connect.boolean('rightActions'),
25
+ closable: code_connect.boolean('closable'),
26
+ title: code_connect.string('title'),
27
+ text: code_connect.string('text')
28
+ },
29
+ example: ({ variant, description, inlineAction, rightActions, closable, title, text })=>/*#__PURE__*/ jsxs(Banner, {
30
+ variant: variant,
31
+ children: [
32
+ /*#__PURE__*/ jsxs(BannerContent, {
33
+ children: [
34
+ /*#__PURE__*/ jsx(BannerTitle, {
35
+ action: inlineAction && /*#__PURE__*/ jsx(BannerLink, {
36
+ href: "#",
37
+ children: "Link"
38
+ }),
39
+ children: title
40
+ }),
41
+ description && /*#__PURE__*/ jsx(BannerDescription, {
42
+ children: text
43
+ })
44
+ ]
45
+ }),
46
+ (rightActions || closable) && /*#__PURE__*/ jsxs(BannerControls, {
47
+ children: [
48
+ rightActions && /*#__PURE__*/ jsxs(Fragment, {
49
+ children: [
50
+ /*#__PURE__*/ jsx(Button, {
51
+ variant: "secondary",
52
+ color: "neutral",
53
+ size: "small",
54
+ children: "Button"
55
+ }),
56
+ /*#__PURE__*/ jsx(Button, {
57
+ variant: "secondary",
58
+ color: "neutral",
59
+ size: "small",
60
+ children: "Button"
61
+ })
62
+ ]
63
+ }),
64
+ closable && /*#__PURE__*/ jsx(BannerClose, {})
65
+ ]
66
+ })
67
+ ]
68
+ })
69
+ });
@@ -0,0 +1,31 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { cn } from "../../utils/cn.js";
3
+ import { TestIdProvider } from "../../utils/testId.js";
4
+ import { BannerVariantProvider } from "./BannerContext.js";
5
+ import { BannerIcon } from "./BannerIcon.js";
6
+ import { bannerVariants } from "./classes.js";
7
+ const Banner = ({ ref, variant = 'primary', icon, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(BannerVariantProvider, {
8
+ value: variant,
9
+ children: /*#__PURE__*/ jsx(TestIdProvider, {
10
+ value: testId,
11
+ children: /*#__PURE__*/ jsxs("div", {
12
+ ...props,
13
+ ref: ref,
14
+ role: "status",
15
+ "data-slot": "banner",
16
+ "data-testid": testId,
17
+ "data-variant": variant,
18
+ className: cn(bannerVariants({
19
+ variant
20
+ }), className),
21
+ children: [
22
+ /*#__PURE__*/ jsx(BannerIcon, {
23
+ icon: icon
24
+ }),
25
+ children
26
+ ]
27
+ })
28
+ })
29
+ });
30
+ Banner.displayName = 'Banner';
31
+ export { Banner };
@@ -0,0 +1,14 @@
1
+ import type { ButtonHTMLAttributes, FC, Ref } from 'react';
2
+ export interface BannerCloseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
3
+ ref?: Ref<HTMLButtonElement>;
4
+ /** Callback when the close button is clicked */
5
+ onClick?: () => void;
6
+ }
7
+ /**
8
+ * Close button for Banner.
9
+ *
10
+ * Renders an outline icon button (white background with a border) and a "Close"
11
+ * tooltip. The same style is used across all variants — it stays legible on both
12
+ * the light variants and the dark primary banner.
13
+ */
14
+ export declare const BannerClose: FC<BannerCloseProps>;
@@ -0,0 +1,31 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { X } from "../../icons/index.js";
3
+ import { useTestId } from "../../utils/testId.js";
4
+ import { Button } from "../Button/index.js";
5
+ import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
6
+ const BannerClose = ({ ref, onClick, ...props })=>{
7
+ const testId = useTestId('close');
8
+ return /*#__PURE__*/ jsxs(Tooltip, {
9
+ children: [
10
+ /*#__PURE__*/ jsx(TooltipTrigger, {
11
+ asChild: true,
12
+ children: /*#__PURE__*/ jsx(Button, {
13
+ ...props,
14
+ ref: ref,
15
+ "data-testid": testId,
16
+ variant: "outline",
17
+ color: "neutral",
18
+ size: "small",
19
+ "aria-label": "close",
20
+ onClick: onClick,
21
+ children: /*#__PURE__*/ jsx(X, {})
22
+ })
23
+ }),
24
+ /*#__PURE__*/ jsx(TooltipContent, {
25
+ children: "Close"
26
+ })
27
+ ]
28
+ });
29
+ };
30
+ BannerClose.displayName = 'BannerClose';
31
+ export { BannerClose };
@@ -0,0 +1,10 @@
1
+ import type { FC, HTMLAttributes, Ref } from 'react';
2
+ export interface BannerContentProps extends HTMLAttributes<HTMLDivElement> {
3
+ ref?: Ref<HTMLDivElement>;
4
+ }
5
+ /**
6
+ * Container for the Banner's main content (title row and description).
7
+ *
8
+ * Provides the flex column layout and takes up the remaining horizontal space.
9
+ */
10
+ export declare const BannerContent: FC<BannerContentProps>;
@@ -0,0 +1,16 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { cn } from "../../utils/cn.js";
3
+ import { useTestId } from "../../utils/testId.js";
4
+ const BannerContent = ({ ref, className, children, ...props })=>{
5
+ const testId = useTestId('content');
6
+ return /*#__PURE__*/ jsx("div", {
7
+ ...props,
8
+ ref: ref,
9
+ "data-slot": "banner-content",
10
+ "data-testid": testId,
11
+ className: cn('flex flex-1 flex-col justify-center gap-0 min-w-0', className),
12
+ children: children
13
+ });
14
+ };
15
+ BannerContent.displayName = 'BannerContent';
16
+ export { BannerContent };
@@ -0,0 +1,8 @@
1
+ import type { BannerVariant } from './classes';
2
+ /**
3
+ * Provides the active Banner variant to sub-components so they can derive their
4
+ * own theme-aware tokens (text, icon, link, close) during render.
5
+ */
6
+ export declare const BannerVariantProvider: import("react").Provider<BannerVariant>;
7
+ /** Returns the variant of the nearest parent Banner. */
8
+ export declare function useBannerVariant(): BannerVariant;
@@ -0,0 +1,7 @@
1
+ import { createContext, useContext } from "react";
2
+ const BannerVariantContext = createContext('primary');
3
+ const BannerVariantProvider = BannerVariantContext.Provider;
4
+ function useBannerVariant() {
5
+ return useContext(BannerVariantContext);
6
+ }
7
+ export { BannerVariantProvider, useBannerVariant };
@@ -0,0 +1,11 @@
1
+ import type { FC, HTMLAttributes, Ref } from 'react';
2
+ export interface BannerControlsProps extends HTMLAttributes<HTMLDivElement> {
3
+ ref?: Ref<HTMLDivElement>;
4
+ }
5
+ /**
6
+ * Trailing controls container for Banner.
7
+ *
8
+ * Use this to place action buttons and/or the BannerClose button on the right
9
+ * side of the banner. Buttons should use size="small".
10
+ */
11
+ export declare const BannerControls: FC<BannerControlsProps>;
@@ -0,0 +1,16 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { cn } from "../../utils/cn.js";
3
+ import { useTestId } from "../../utils/testId.js";
4
+ const BannerControls = ({ ref, className, children, ...props })=>{
5
+ const testId = useTestId('controls');
6
+ return /*#__PURE__*/ jsx("div", {
7
+ ...props,
8
+ ref: ref,
9
+ "data-slot": "banner-controls",
10
+ "data-testid": testId,
11
+ className: cn('flex items-center gap-8 shrink-0', className),
12
+ children: children
13
+ });
14
+ };
15
+ BannerControls.displayName = 'BannerControls';
16
+ export { BannerControls };
@@ -0,0 +1,12 @@
1
+ import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
2
+ export interface BannerDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
3
+ ref?: Ref<HTMLParagraphElement>;
4
+ children: ReactNode;
5
+ }
6
+ /**
7
+ * Secondary description text for Banner.
8
+ *
9
+ * Rendered below the title with regular weight and a muted color appropriate
10
+ * to the variant. Truncates with a tooltip when the text overflows.
11
+ */
12
+ export declare const BannerDescription: FC<BannerDescriptionProps>;
@@ -0,0 +1,30 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { cn } from "../../utils/cn.js";
3
+ import { useTestId } from "../../utils/testId.js";
4
+ import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
5
+ import { useBannerVariant } from "./BannerContext.js";
6
+ import { bannerDescriptionVariants } from "./classes.js";
7
+ const BannerDescription = ({ ref, children, className, ...props })=>{
8
+ const testId = useTestId("description");
9
+ const variant = useBannerVariant();
10
+ return /*#__PURE__*/ jsxs(OverflowTooltip, {
11
+ children: [
12
+ /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
13
+ children: /*#__PURE__*/ jsx("p", {
14
+ ...props,
15
+ ref: ref,
16
+ "data-testid": testId,
17
+ className: cn(bannerDescriptionVariants({
18
+ variant
19
+ }), 'truncate', className),
20
+ children: children
21
+ })
22
+ }),
23
+ /*#__PURE__*/ jsx(OverflowTooltipContent, {
24
+ children: children
25
+ })
26
+ ]
27
+ });
28
+ };
29
+ BannerDescription.displayName = "BannerDescription";
30
+ export { BannerDescription };
@@ -0,0 +1,14 @@
1
+ import type { FC, ReactNode } from 'react';
2
+ export interface BannerIconProps {
3
+ /** Custom icon — always overrides the variant default. */
4
+ icon?: ReactNode;
5
+ }
6
+ /**
7
+ * Leading icon for Banner — rendered internally by Banner, not part of the
8
+ * public API.
9
+ *
10
+ * The destructive, info, and warning variants show a default icon; primary and
11
+ * secondary show none. A custom `icon` (passed via Banner's `icon` prop) always
12
+ * overrides the default. Renders nothing when there is no icon to show.
13
+ */
14
+ export declare const BannerIcon: FC<BannerIconProps>;
@@ -0,0 +1,30 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Info, OctagonAlert, TriangleAlert } from "../../icons/index.js";
3
+ import { useTestId } from "../../utils/testId.js";
4
+ import { useBannerVariant } from "./BannerContext.js";
5
+ import { bannerIconVariants } from "./classes.js";
6
+ const defaultIconMap = {
7
+ destructive: OctagonAlert,
8
+ info: Info,
9
+ warning: TriangleAlert
10
+ };
11
+ const BannerIcon = ({ icon })=>{
12
+ const testId = useTestId('icon');
13
+ const variant = useBannerVariant();
14
+ const DefaultIcon = defaultIconMap[variant];
15
+ const content = icon ?? (DefaultIcon ? /*#__PURE__*/ jsx(DefaultIcon, {
16
+ size: "lg",
17
+ className: bannerIconVariants({
18
+ variant
19
+ })
20
+ }) : null);
21
+ if (null == content) return null;
22
+ return /*#__PURE__*/ jsx("div", {
23
+ "data-slot": "banner-icon",
24
+ "data-testid": testId,
25
+ className: "flex items-center py-2 shrink-0",
26
+ children: content
27
+ });
28
+ };
29
+ BannerIcon.displayName = 'BannerIcon';
30
+ export { BannerIcon };
@@ -0,0 +1,11 @@
1
+ import type { FC } from 'react';
2
+ import { type LinkProps } from '../Link';
3
+ export type BannerLinkProps = Omit<LinkProps, 'type' | 'size'>;
4
+ /**
5
+ * Inline action link for Banner.
6
+ *
7
+ * Rendered next to the title (pass via `BannerTitle`'s `action` prop). The link
8
+ * color adapts to the variant — light blue on the dark primary banner, default
9
+ * blue on the light variants.
10
+ */
11
+ export declare const BannerLink: FC<BannerLinkProps>;
@@ -0,0 +1,17 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useTestId } from "../../utils/testId.js";
3
+ import { Link } from "../Link/index.js";
4
+ import { useBannerVariant } from "./BannerContext.js";
5
+ const BannerLink = ({ weight = 'regular', ...props })=>{
6
+ const testId = useTestId('link');
7
+ const variant = useBannerVariant();
8
+ return /*#__PURE__*/ jsx(Link, {
9
+ ...props,
10
+ "data-testid": testId,
11
+ type: 'primary' === variant ? 'alt' : 'default',
12
+ size: "md",
13
+ weight: weight
14
+ });
15
+ };
16
+ BannerLink.displayName = 'BannerLink';
17
+ export { BannerLink };
@@ -0,0 +1,24 @@
1
+ import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
2
+ export interface BannerTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
3
+ ref?: Ref<HTMLParagraphElement>;
4
+ children: ReactNode;
5
+ /**
6
+ * Optional inline action rendered next to the title (e.g. a BannerLink).
7
+ * Sits on the same row and wraps below on narrow viewports.
8
+ */
9
+ action?: ReactNode;
10
+ /**
11
+ * Maximum number of lines before the message is truncated (default: 1).
12
+ * The design budget is 2 lines; 1 line is preferred.
13
+ */
14
+ lineClamp?: number;
15
+ }
16
+ /**
17
+ * Title (message) for Banner.
18
+ *
19
+ * Renders the primary message with medium weight, truncating with a tooltip
20
+ * when the text overflows. By default the message is a single line; set
21
+ * `lineClamp` (e.g. 2) to allow it to wrap and clamp to that many lines.
22
+ * An optional inline `action` (such as a BannerLink) is rendered on the same row.
23
+ */
24
+ export declare const BannerTitle: FC<BannerTitleProps>;
@@ -0,0 +1,37 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { cn } from "../../utils/cn.js";
3
+ import { useTestId } from "../../utils/testId.js";
4
+ import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
5
+ import { useBannerVariant } from "./BannerContext.js";
6
+ import { bannerTitleVariants } from "./classes.js";
7
+ const BannerTitle = ({ ref, children, action, lineClamp = 1, className, ...props })=>{
8
+ const testId = useTestId('title');
9
+ const variant = useBannerVariant();
10
+ const clampClass = lineClamp > 1 ? `line-clamp-${lineClamp}` : 'truncate';
11
+ return /*#__PURE__*/ jsxs("div", {
12
+ className: "flex flex-wrap items-center gap-8 w-full",
13
+ children: [
14
+ /*#__PURE__*/ jsxs(OverflowTooltip, {
15
+ children: [
16
+ /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
17
+ children: /*#__PURE__*/ jsx("p", {
18
+ ...props,
19
+ ref: ref,
20
+ "data-testid": testId,
21
+ className: cn(bannerTitleVariants({
22
+ variant
23
+ }), clampClass, className),
24
+ children: children
25
+ })
26
+ }),
27
+ /*#__PURE__*/ jsx(OverflowTooltipContent, {
28
+ children: children
29
+ })
30
+ ]
31
+ }),
32
+ action
33
+ ]
34
+ });
35
+ };
36
+ BannerTitle.displayName = 'BannerTitle';
37
+ export { BannerTitle };
@@ -0,0 +1,23 @@
1
+ export type BannerVariant = 'primary' | 'secondary' | 'destructive' | 'info' | 'warning';
2
+ /**
3
+ * Root container styles.
4
+ *
5
+ * The Banner is full-width and edge-to-edge (no border, no radius) since it
6
+ * renders at the very top of the page, above the header.
7
+ *
8
+ * NOTE: this component is tagged "No dark-ui" in Figma — it is not meant to
9
+ * adapt to the dark theme. The semantic tokens below reflect the Figma
10
+ * (light-mode) mapping; revisit if dark-mode behavior is ever specced.
11
+ */
12
+ export declare const bannerVariants: (props?: ({
13
+ variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
14
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
15
+ export declare const bannerTitleVariants: (props?: ({
16
+ variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
17
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
18
+ export declare const bannerDescriptionVariants: (props?: ({
19
+ variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
20
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
21
+ export declare const bannerIconVariants: (props?: ({
22
+ variant?: "primary" | "secondary" | "destructive" | "info" | "warning" | null | undefined;
23
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -0,0 +1,58 @@
1
+ import { cva } from "class-variance-authority";
2
+ const bannerVariants = cva('font-sans flex w-full items-start justify-between gap-8 overflow-hidden pl-16 pr-12 py-12', {
3
+ variants: {
4
+ variant: {
5
+ primary: 'bg-component-toast-bg',
6
+ secondary: 'bg-bg-surface-5',
7
+ destructive: 'bg-bg-danger',
8
+ info: 'bg-bg-info',
9
+ warning: 'bg-bg-warning'
10
+ }
11
+ },
12
+ defaultVariants: {
13
+ variant: 'primary'
14
+ }
15
+ });
16
+ const bannerTitleVariants = cva('text-sm font-medium py-2 min-w-0 max-w-full', {
17
+ variants: {
18
+ variant: {
19
+ primary: 'text-text-primary-alt',
20
+ secondary: 'text-text-primary',
21
+ destructive: 'text-text-primary',
22
+ info: 'text-text-primary',
23
+ warning: 'text-text-primary'
24
+ }
25
+ },
26
+ defaultVariants: {
27
+ variant: 'primary'
28
+ }
29
+ });
30
+ const bannerDescriptionVariants = cva('text-sm font-normal', {
31
+ variants: {
32
+ variant: {
33
+ primary: 'text-text-tertiary',
34
+ secondary: 'text-text-secondary',
35
+ destructive: 'text-text-secondary',
36
+ info: 'text-text-secondary',
37
+ warning: 'text-text-secondary'
38
+ }
39
+ },
40
+ defaultVariants: {
41
+ variant: 'primary'
42
+ }
43
+ });
44
+ const bannerIconVariants = cva('shrink-0', {
45
+ variants: {
46
+ variant: {
47
+ primary: 'text-icon-primary-alt',
48
+ secondary: 'text-icon-primary',
49
+ destructive: 'text-icon-danger',
50
+ info: 'text-icon-info',
51
+ warning: 'text-icon-warning'
52
+ }
53
+ },
54
+ defaultVariants: {
55
+ variant: 'primary'
56
+ }
57
+ });
58
+ export { bannerDescriptionVariants, bannerIconVariants, bannerTitleVariants, bannerVariants };
@@ -0,0 +1,7 @@
1
+ export { Banner, type BannerProps, type BannerVariant } from './Banner';
2
+ export { BannerClose, type BannerCloseProps } from './BannerClose';
3
+ export { BannerContent, type BannerContentProps } from './BannerContent';
4
+ export { BannerControls, type BannerControlsProps } from './BannerControls';
5
+ export { BannerDescription, type BannerDescriptionProps } from './BannerDescription';
6
+ export { BannerLink, type BannerLinkProps } from './BannerLink';
7
+ export { BannerTitle, type BannerTitleProps } from './BannerTitle';
@@ -0,0 +1,8 @@
1
+ import { Banner } from "./Banner.js";
2
+ import { BannerClose } from "./BannerClose.js";
3
+ import { BannerContent } from "./BannerContent.js";
4
+ import { BannerControls } from "./BannerControls.js";
5
+ import { BannerDescription } from "./BannerDescription.js";
6
+ import { BannerLink } from "./BannerLink.js";
7
+ import { BannerTitle } from "./BannerTitle.js";
8
+ export { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerLink, BannerTitle };
@@ -1,5 +1,6 @@
1
1
  import { useCallback, useEffect, useMemo, useState } from "react";
2
- import { CONNECTOR_ID_PATTERN, chipIdToConditionIndex } from "../../lib/index.js";
2
+ import { SEGMENT_VARIANT } from "../../FilterInputField/FilterInputChip/index.js";
3
+ import { CONNECTOR_ID_PATTERN, chipIdToConditionIndex, hasStaticAllowlist, validateValueForField } from "../../lib/index.js";
3
4
  import { buildChips } from "./buildChips.js";
4
5
  import { buildExpression, expressionToConditions } from "./expression.js";
5
6
  const EMPTY_STATE = {
@@ -7,6 +8,24 @@ const EMPTY_STATE = {
7
8
  connectors: []
8
9
  };
9
10
  const DEFAULT_CONNECTOR = 'and';
11
+ const revalidateConditions = (conditions, fields)=>conditions.map((condition)=>{
12
+ if (condition.disabled) return condition;
13
+ const field = fields.find((f)=>f.name === condition.field);
14
+ if (!field || condition.error === SEGMENT_VARIANT.attribute) return condition;
15
+ if (!field.validate && !hasStaticAllowlist(field)) return condition;
16
+ if (validateValueForField(field, condition.value)) return condition.error === SEGMENT_VARIANT.value ? condition : {
17
+ ...condition,
18
+ error: SEGMENT_VARIANT.value
19
+ };
20
+ if (condition.error === SEGMENT_VARIANT.value) {
21
+ const next = {
22
+ ...condition
23
+ };
24
+ delete next.error;
25
+ return next;
26
+ }
27
+ return condition;
28
+ });
10
29
  const removeConnectorAtConditionIndex = (connectors, idx)=>{
11
30
  const updated = [
12
31
  ...connectors
@@ -78,12 +97,13 @@ const useFilterInputExpression = ({ fields, value, onChange, error })=>{
78
97
  if (void 0 !== value) {
79
98
  const result = expressionToConditions(value);
80
99
  setState({
81
- conditions: result.conditions,
100
+ conditions: revalidateConditions(result.conditions, fields),
82
101
  connectors: result.connectors
83
102
  });
84
103
  }
85
104
  }, [
86
- value
105
+ value,
106
+ fields
87
107
  ]);
88
108
  const chips = useMemo(()=>buildChips(state.conditions, state.connectors, fields, error), [
89
109
  state.conditions,
@@ -1,5 +1,5 @@
1
1
  export { FilterInput, type FilterInputProps } from './FilterInput';
2
2
  export { FilterInputChip, type FilterInputChipProps } from './FilterInputField';
3
3
  export { FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, FilterInputValueMenu, type FilterInputValueMenuProps, type ValueOption, } from './FilterInputMenu';
4
- export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, } from './lib';
4
+ export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField, } from './lib';
5
5
  export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';
@@ -1,5 +1,5 @@
1
1
  import { FilterInput } from "./FilterInput.js";
2
2
  import { FilterInputChip } from "./FilterInputField/index.js";
3
3
  import { FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu } from "./FilterInputMenu/index.js";
4
- import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
5
- export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression };
4
+ import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField } from "./lib/index.js";
5
+ export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, getKnownFieldSerializer, isFilterParseError, parseExpression, serializeExpression, validateValueForField };
package/dist/index.d.ts CHANGED
@@ -16,6 +16,7 @@ export { AnimatedBackground, type AnimatedBackgroundProps, } from './components/
16
16
  export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell';
17
17
  export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute';
18
18
  export { Badge, type BadgeProps } from './components/Badge';
19
+ export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner';
19
20
  export { Breadcrumbs, BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, type ScopeSwitcherItem, } from './components/Breadcrumbs';
20
21
  export { Button, type ButtonProps } from './components/Button';
21
22
  export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarBody, type CalendarBodyProps, CalendarContent, type CalendarContentProps, type CalendarContextValue, CalendarDayName, CalendarFooter, CalendarFooterControls, type CalendarFooterControlsProps, type CalendarFooterProps, CalendarGrid, CalendarGrids, type CalendarGridsProps, CalendarHeader, CalendarInputHeader, type CalendarInputHeaderProps, CalendarKeyboardHints, type CalendarKeyboardHintsProps, CalendarPresetItem, CalendarPresets, type CalendarPresetsProps, type CalendarProps, CalendarProvider, CalendarResetButton, type CalendarResetButtonProps, CalendarTrigger, type CalendarTriggerProps, type CalendarType, DAY_NAMES, type DateRangePreset, type DateValue, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, type PresetConfig, type PresetValue, useCalendarContext, } from './components/Calendar';