@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.22

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 (71) hide show
  1. package/dist/domain/Filters/FilterDropdown.d.ts +93 -0
  2. package/dist/domain/Filters/FilterPill.d.ts +12 -5
  3. package/dist/domain/Filters/FilterPills.d.ts +18 -0
  4. package/dist/domain/Filters/FilteredPill.d.ts +15 -5
  5. package/dist/domain/Filters/formatActiveFilterChipLabel.d.ts +11 -0
  6. package/dist/domain/Filters/index.d.ts +8 -3
  7. package/dist/index.cjs +33 -33
  8. package/dist/index.esm.js +7300 -5990
  9. package/package.json +2 -1
  10. package/src/components/EmptyState.tsx +44 -44
  11. package/src/components/Modal.tsx +141 -141
  12. package/src/components/PageHeader.tsx +132 -132
  13. package/src/components/ScrollableList.tsx +61 -61
  14. package/src/components/Tabs.tsx +146 -146
  15. package/src/components/index.ts +56 -56
  16. package/src/domain/Filters/FilterDropdown.tsx +438 -0
  17. package/src/domain/Filters/FilterPill.tsx +54 -18
  18. package/src/domain/Filters/FilterPills.tsx +34 -0
  19. package/src/domain/Filters/FilteredPill.tsx +48 -28
  20. package/src/domain/Filters/FiltersBar.tsx +15 -19
  21. package/src/domain/Filters/formatActiveFilterChipLabel.ts +23 -0
  22. package/src/domain/Filters/index.ts +35 -3
  23. package/src/icons/arrow-paths.ts +8 -8
  24. package/src/icons/chevron-paths.ts +17 -17
  25. package/src/icons/icons-data.ts +656 -656
  26. package/src/index.ts +85 -85
  27. package/src/patterns/Search/ResultRow.tsx +44 -44
  28. package/src/patterns/Search/SearchModal.tsx +310 -310
  29. package/src/patterns/Search/index.ts +31 -31
  30. package/src/patterns/Sidebar/assets/logo-compliance-mark.png +5 -5
  31. package/src/patterns/Sidebar/assets/logo-compliance-mask.png +13 -13
  32. package/src/patterns/Sidebar/assets/logo-compliance.svg +17 -17
  33. package/src/patterns/Sidebar/assets/logo-technical-avatar.svg +17 -17
  34. package/src/patterns/Sidebar/assets/logo-technical-mark.png +5 -5
  35. package/src/patterns/Sidebar/assets/logo-technical.svg +16 -16
  36. package/src/patterns/Skeleton/Skeleton.tsx +56 -56
  37. package/src/primitives/button-styles.ts +92 -92
  38. package/src/stories/canvases/ButtonsCanvas.tsx +107 -107
  39. package/src/stories/canvases/ButtonsMatrixCanvas.tsx +65 -65
  40. package/src/stories/canvases/ContentCanvas.tsx +353 -353
  41. package/src/stories/canvases/FiltersCanvas.tsx +156 -30
  42. package/src/stories/canvases/SearchCanvas.tsx +150 -150
  43. package/src/stories/canvases/figma-buttons-layout.ts +83 -83
  44. package/src/stories/canvases/figma-widths.ts +28 -28
  45. package/src/stories/canvases/helpers.tsx +146 -146
  46. package/src/stories/components/Buttons.stories.tsx +11 -11
  47. package/src/stories/components/Chat.stories.tsx +11 -11
  48. package/src/stories/components/Content.stories.tsx +11 -11
  49. package/src/stories/components/Core.stories.tsx +11 -11
  50. package/src/stories/components/DomainForms.stories.tsx +11 -11
  51. package/src/stories/components/Filters.stories.tsx +11 -11
  52. package/src/stories/components/Forms.stories.tsx +11 -11
  53. package/src/stories/components/Icons.stories.tsx +11 -11
  54. package/src/stories/components/Illustrations.stories.tsx +11 -11
  55. package/src/stories/components/Library.stories.tsx +11 -11
  56. package/src/stories/components/Modals.stories.tsx +11 -11
  57. package/src/stories/components/Report.stories.tsx +11 -11
  58. package/src/stories/components/ReportLayout.stories.tsx +11 -11
  59. package/src/stories/components/Search.stories.tsx +11 -11
  60. package/src/stories/components/Settings.stories.tsx +11 -11
  61. package/src/stories/components/Ships.stories.tsx +11 -11
  62. package/src/stories/components/SidebarLayouts.stories.tsx +11 -11
  63. package/src/stories/components/Skeletons.stories.tsx +11 -11
  64. package/src/stories/components/Workflows.stories.tsx +11 -11
  65. package/src/stories/style-guide/Buttons.stories.tsx +11 -11
  66. package/src/stories/style-guide/ColorTokens.stories.tsx +11 -11
  67. package/src/stories/style-guide/Colors.stories.tsx +11 -11
  68. package/src/stories/style-guide/RaiseLevels.stories.tsx +11 -11
  69. package/src/stories/style-guide/Typography.stories.tsx +11 -11
  70. package/src/tailwind-theme.ts +186 -186
  71. package/src/theme-entry.ts +2 -2
@@ -0,0 +1,93 @@
1
+ import { ComponentType, CSSProperties, ReactNode } from 'react';
2
+ /** One selectable row at a leaf list. */
3
+ export type FilterOption = {
4
+ value: string;
5
+ label: string;
6
+ icon?: ComponentType<{
7
+ className?: string;
8
+ }>;
9
+ };
10
+ export type FilterSelectionMode = "multi" | "single";
11
+ /**
12
+ * Recursive submenu: options leaf, nested folders, or custom panel (e.g. date range).
13
+ */
14
+ export type FilterSubmenuContent = {
15
+ type: "options";
16
+ /** Key into `selectedValuesBySelectionKey` / `onSelectOption` */
17
+ selectionKey: string;
18
+ /** `multi` (default) toggles; `single` is exclusive — still one check slot reserved. */
19
+ selectionMode?: FilterSelectionMode;
20
+ options: FilterOption[];
21
+ } | {
22
+ type: "nested";
23
+ items: FilterNestedItem[];
24
+ } | {
25
+ type: "custom";
26
+ render: () => ReactNode;
27
+ };
28
+ export type FilterNestedItem = {
29
+ id: string;
30
+ label: string;
31
+ content: FilterSubmenuContent;
32
+ };
33
+ /** Left column row that opens a (possibly nested) submenu on the right. */
34
+ export type FilterCategorySubmenuRow = {
35
+ kind?: "submenu";
36
+ id: string;
37
+ label: string;
38
+ content: FilterSubmenuContent;
39
+ };
40
+ /** Left column row: inline check toggle (no right panel). */
41
+ export type FilterCategoryToggleRow = {
42
+ kind: "toggle";
43
+ id: string;
44
+ label: string;
45
+ checked: boolean;
46
+ onCheckedChange: (checked: boolean) => void;
47
+ };
48
+ export type FilterCategoryRow = FilterCategorySubmenuRow | FilterCategoryToggleRow;
49
+ type ResolvedSubmenuView = {
50
+ kind: "folders";
51
+ items: FilterNestedItem[];
52
+ trail: string[];
53
+ } | {
54
+ kind: "options";
55
+ selectionKey: string;
56
+ selectionMode: FilterSelectionMode;
57
+ options: FilterOption[];
58
+ trail: string[];
59
+ } | {
60
+ kind: "custom";
61
+ render: () => ReactNode;
62
+ trail: string[];
63
+ };
64
+ /** Walk `path` (folder ids) from `content` to the current view. */
65
+ export declare function resolveSubmenuView(content: FilterSubmenuContent, path: string[]): ResolvedSubmenuView;
66
+ export type FilterDropdownProps = {
67
+ align?: "start" | "center" | "end";
68
+ sideOffset?: number;
69
+ /** Left column: submenu roots and/or toggles. */
70
+ categoryRows: FilterCategoryRow[];
71
+ selectedValuesBySelectionKey: Record<string, string[] | undefined>;
72
+ /**
73
+ * Fired when an option is activated. For `multi`, consumers typically toggle;
74
+ * for `single`, replace the selection with `[optionValue]`.
75
+ */
76
+ onSelectOption: (selectionKey: string, optionValue: string) => void;
77
+ onResetAll: () => void;
78
+ resetAllLabel?: string;
79
+ activeFilterCount: number;
80
+ getOptionLabelStyle?: (selectionKey: string, optionValue: string) => CSSProperties | undefined;
81
+ zIndexClass?: string;
82
+ /** Replace the default FilterPill trigger. */
83
+ trigger?: ReactNode;
84
+ open?: boolean;
85
+ onOpenChange?: (open: boolean) => void;
86
+ className?: string;
87
+ };
88
+ /**
89
+ * Filters trigger + two-column popover (audit-prep pattern).
90
+ * Supports multi/single option leaves, nested folders, custom panels, and toggles.
91
+ */
92
+ export declare function FilterDropdown({ align, sideOffset, categoryRows, selectedValuesBySelectionKey, onSelectOption, onResetAll, resetAllLabel, activeFilterCount, getOptionLabelStyle, zIndexClass, trigger, open: openControlled, onOpenChange, className, }: FilterDropdownProps): import("react/jsx-runtime").JSX.Element;
93
+ export {};
@@ -1,6 +1,13 @@
1
- export type FilterPillIndicator = "on" | "off";
2
- export type FilterPillProps = {
3
- indicator?: FilterPillIndicator;
4
- className?: string;
1
+ import { ButtonHTMLAttributes } from 'react';
2
+ export type FilterPillProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
3
+ /** When > 0, trigger uses active (blue) fill and shows a count badge. */
4
+ activeFilterCount?: number;
5
5
  };
6
- export declare const FilterPill: ({ indicator, className }: FilterPillProps) => import("react/jsx-runtime").JSX.Element;
6
+ /**
7
+ * Filter trigger — Figma Filter Pill (6154:149608 / 6154:149599).
8
+ * Idle: grey-100. Active: accent blue-100 + orange count badge.
9
+ */
10
+ export declare const FilterPill: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
11
+ /** When > 0, trigger uses active (blue) fill and shows a count badge. */
12
+ activeFilterCount?: number;
13
+ } & import('react').RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,18 @@
1
+ import { FilteredPillProps } from './FilteredPill';
2
+ export type FilterPillsItem = {
3
+ key: string;
4
+ label: string;
5
+ onRemove: () => void;
6
+ removeAriaLabel?: string;
7
+ classNames?: FilteredPillProps["classNames"];
8
+ };
9
+ export type FilterPillsProps = {
10
+ chips: FilterPillsItem[];
11
+ className?: string;
12
+ };
13
+ /**
14
+ * Partner row for FilterDropdown — active filter pills.
15
+ * Always renders the row wrapper (even when empty) so sibling filter
16
+ * triggers can stay pinned with `ml-auto` / flex layouts.
17
+ */
18
+ export declare const FilterPills: ({ chips, className }: FilterPillsProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,8 +1,18 @@
1
- export type FilteredPillState = "idle" | "hover";
2
1
  export type FilteredPillProps = {
3
- label?: string;
4
- count?: number;
5
- state?: FilteredPillState;
2
+ label: string;
3
+ onRemove: () => void;
4
+ removeAriaLabel?: string;
6
5
  className?: string;
6
+ /** Optional tone overrides. Prefer default beige unless a product needs a custom tone. */
7
+ classNames?: {
8
+ root?: string;
9
+ label?: string;
10
+ remove?: string;
11
+ };
7
12
  };
8
- export declare const FilteredPill: ({ label, count, state, className, }: FilteredPillProps) => import("react/jsx-runtime").JSX.Element;
13
+ /**
14
+ * Active filter value pill — Figma Filtered (6154:149787).
15
+ * Clear control on the left, label on the right. Max 300px with ellipsis;
16
+ * full label in a tooltip on hover.
17
+ */
18
+ export declare const FilteredPill: ({ label, onRemove, removeAriaLabel, className, classNames, }: FilteredPillProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Format the user-visible label for an active-filter chip (audit-prep rules).
3
+ *
4
+ * - 0 selected → "" (caller should not render)
5
+ * - 1 selected → `<filterName> (<value>)`
6
+ * - 2 selected → `<filterName> (<v1>, <v2>)`
7
+ * - 3+ selected → `<filterName> (<v1>, <v2>...)` (literal `...`)
8
+ *
9
+ * `selectedLabels` are already human-readable, in selection order.
10
+ */
11
+ export declare function formatActiveFilterChipLabel(filterName: string, selectedLabels: string[]): string;
@@ -1,3 +1,8 @@
1
- export { FiltersBar, type FiltersBarFilters, type FiltersBarProps, type FiltersBarTabs } from './FiltersBar';
2
- export { FilteredPill, type FilteredPillProps, type FilteredPillState } from './FilteredPill';
3
- export { FilterPill, type FilterPillIndicator, type FilterPillProps } from './FilterPill';
1
+ export { FiltersBar, type FiltersBarFilters, type FiltersBarProps, type FiltersBarTabs, } from './FiltersBar';
2
+ export { FilteredPill, type FilteredPillProps, } from './FilteredPill';
3
+ export { FilterPill, type FilterPillProps, } from './FilterPill';
4
+ export { FilterPills, type FilterPillsItem, type FilterPillsProps, } from './FilterPills';
5
+ export { FilterDropdown, resolveSubmenuView, type FilterCategoryRow, type FilterCategorySubmenuRow, type FilterCategoryToggleRow, type FilterDropdownProps, type FilterNestedItem, type FilterOption, type FilterSelectionMode, type FilterSubmenuContent, } from './FilterDropdown';
6
+ export { formatActiveFilterChipLabel } from './formatActiveFilterChipLabel';
7
+ /** @deprecated Use `activeFilterCount` on FilterPill instead. */
8
+ export type FilterPillIndicator = "on" | "off";