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

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 (38) hide show
  1. package/dist/components/Entry.d.ts +7 -27
  2. package/dist/components/Tabs.d.ts +5 -5
  3. package/dist/components/index.d.ts +2 -4
  4. package/dist/index.cjs +25 -25
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.esm.js +3374 -3584
  7. package/dist/patterns/Search/ResultRow.d.ts +5 -11
  8. package/dist/patterns/Sidebar/sidebar-styles.d.ts +1 -2
  9. package/dist/primitives/Badge.d.ts +4 -7
  10. package/dist/primitives/index.d.ts +1 -1
  11. package/dist/tailwind-theme.d.ts +0 -4
  12. package/dist/{theme-entry-tLBc6zGT.mjs → theme-entry-BUK3MJUJ.mjs} +4 -8
  13. package/dist/theme-entry-ygTpGaNC.js +1 -0
  14. package/dist/theme.cjs +1 -1
  15. package/dist/theme.esm.js +1 -1
  16. package/package.json +128 -128
  17. package/src/components/Entry.tsx +45 -119
  18. package/src/components/Tabs.tsx +27 -33
  19. package/src/components/index.ts +1 -15
  20. package/src/index.ts +0 -11
  21. package/src/patterns/Search/ResultRow.tsx +38 -24
  22. package/src/patterns/Search/SearchModal.tsx +1 -7
  23. package/src/patterns/Sidebar/CollapsibleNavGroup.tsx +1 -1
  24. package/src/patterns/Sidebar/SidebarAction.tsx +17 -26
  25. package/src/patterns/Sidebar/SidebarEntry.tsx +39 -54
  26. package/src/patterns/Sidebar/SidebarLink.tsx +20 -30
  27. package/src/patterns/Sidebar/sidebar-styles.ts +1 -2
  28. package/src/primitives/Badge.tsx +10 -20
  29. package/src/primitives/Button.tsx +11 -16
  30. package/src/primitives/index.ts +1 -1
  31. package/src/stories/canvases/ContentCanvas.tsx +14 -253
  32. package/src/tailwind-theme.ts +182 -186
  33. package/src/utils/cn.ts +1 -28
  34. package/dist/components/PageHeader.d.ts +0 -41
  35. package/dist/components/ScrollableList.d.ts +0 -22
  36. package/dist/theme-entry-Dwr2mV7_.js +0 -1
  37. package/src/components/PageHeader.tsx +0 -132
  38. package/src/components/ScrollableList.tsx +0 -61
@@ -1,19 +1,13 @@
1
1
  import { ReactNode } from 'react';
2
- import { EntryProps, EntryState, EntryVariant } from '../../components/Entry';
3
- /** @deprecated Prefer `EntryVariant`. */
4
- export type ResultRowVariant = EntryVariant;
5
- /** @deprecated Prefer `EntryState`. */
6
- export type ResultRowState = EntryState;
2
+ export type ResultRowVariant = "report" | "chat" | "issue";
3
+ export type ResultRowState = "idle" | "active";
7
4
  export type ResultRowProps = {
8
- variant?: EntryVariant;
9
- state?: EntryState;
5
+ variant?: ResultRowVariant;
6
+ state?: ResultRowState;
10
7
  title?: ReactNode;
8
+ /** Secondary line — excerpt, metadata, or highlighted query match. */
11
9
  subtitle?: ReactNode;
12
10
  onClick?: () => void;
13
11
  className?: string;
14
12
  };
15
- /**
16
- * @deprecated Prefer `Entry` — ResultRow is a thin alias for search lists.
17
- */
18
13
  export declare const ResultRow: ({ variant, state, title, subtitle, onClick, className, }: ResultRowProps) => import("react/jsx-runtime").JSX.Element;
19
- export type { EntryProps };
@@ -15,8 +15,7 @@ export declare const sidebarSectionShellCollapsed = "relative box-border flex w-
15
15
  export declare const sidebarUnreadOverlay = "pointer-events-none absolute left-0 top-0 size-6";
16
16
  /** Figma unread dot — ~6px, top-right of the 24px indicator overlay. */
17
17
  export declare const sidebarUnreadDot = "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
18
- /** Icon + label row inside a section shell — no extra inset (shell already has p-2). */
19
- export declare const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
18
+ export declare const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
20
19
  export declare const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
21
20
  export declare const sidebarSectionLabelClass = "min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]";
22
21
  /** Figma sidebar icon buttons — transparent idle, grey hover (no white fill). */
@@ -1,14 +1,11 @@
1
1
  import { ReactNode } from 'react';
2
- export type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
3
- export type BadgeType = "label" | "icon";
2
+ type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
3
+ type BadgeType = "label" | "icon";
4
4
  export type BadgeProps = {
5
5
  color: BadgeColor;
6
- /** `label` grows with content (pill). `icon` is a compact circle for a glyph/digit. */
7
6
  type?: BadgeType;
8
7
  children: ReactNode;
9
8
  className?: string;
10
9
  };
11
- /**
12
- * Figma Badge (4365:74363) — padding + rounded-full; no fixed width on labels.
13
- */
14
- export declare const Badge: ({ color, type, children, className, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const Badge: ({ color, type, children, className }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
11
+ export {};
@@ -11,5 +11,5 @@ export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from '.
11
11
  export { ThinkingDot, type ThinkingDotProps } from './ThinkingDot';
12
12
  export { Count, type CountProps } from './Count';
13
13
  export { Switch, type SwitchProps } from './Switch';
14
- export { Badge, type BadgeProps, type BadgeColor, type BadgeType } from './Badge';
14
+ export { Badge, type BadgeProps } from './Badge';
15
15
  export { Callout, type CalloutProps } from './Callout';
@@ -82,10 +82,6 @@ export declare const theme: {
82
82
  md: "6px";
83
83
  sm: "4px";
84
84
  };
85
- /** Extends Tailwind’s max-width scale (7xl = 1280px). */
86
- maxWidth: {
87
- "8xl": string;
88
- };
89
85
  colors: {
90
86
  grey: {
91
87
  readonly 50: "#fdfdfc";
@@ -53,7 +53,7 @@ const o = {
53
53
  700: "#5a3d0d",
54
54
  800: "#3d2a09",
55
55
  900: "#261a05"
56
- }, p = {
56
+ }, v = {
57
57
  50: "#f6f2f8",
58
58
  100: "#e2d9e8",
59
59
  200: "#cbbad6",
@@ -64,7 +64,7 @@ const o = {
64
64
  700: "#3d2e4a",
65
65
  800: "#2a2033",
66
66
  900: "#18121c"
67
- }, v = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: p }, t = {
67
+ }, p = "#ffffff", a = { grey: o, green: d, blue: c, red: l, orange: s, purple: v }, t = {
68
68
  raise1: "0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",
69
69
  raise2: "0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",
70
70
  raise3: "0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)"
@@ -140,10 +140,6 @@ const o = {
140
140
  md: i.md,
141
141
  sm: i.sm
142
142
  },
143
- /** Extends Tailwind’s max-width scale (7xl = 1280px). */
144
- maxWidth: {
145
- "8xl": "1640px"
146
- },
147
143
  colors: {
148
144
  grey: a.grey,
149
145
  gray: a.grey,
@@ -258,8 +254,8 @@ export {
258
254
  t as e,
259
255
  o as g,
260
256
  s as o,
261
- p,
257
+ v as p,
262
258
  l as r,
263
259
  g as t,
264
- v as w
260
+ p as w
265
261
  };
@@ -0,0 +1 @@
1
+ "use strict";const n={50:"#fdfdfc",100:"#f4f2ea",200:"#e1ddce",300:"#bfb9a5",400:"#969080",500:"#6e6960",600:"#524e47",700:"#3a3733",800:"#312e2a",900:"#262420"},o={50:"#f5f8f2",100:"#dde6d2",200:"#c5d4b3",300:"#a8bf8f",400:"#7a9a5e",500:"#5a7a42",600:"#456332",700:"#304624",800:"#223018",900:"#141c0e"},d={50:"#eef1f8",100:"#dae0ef",200:"#b8c4e0",300:"#8fa3cc",400:"#5274ae",500:"#3a5d96",600:"#154199",700:"#103480",800:"#0c2860",900:"#081c42"},c={50:"#faf3f1",100:"#f0d3cc",200:"#e4b0a5",300:"#c97a6b",400:"#b85a48",500:"#a0392a",600:"#802c20",700:"#621f16",800:"#45150f",900:"#2a0c08"},l={50:"#faf1de",100:"#f5e4c0",200:"#efd49a",300:"#e4bc6a",400:"#d9a03e",500:"#c48820",600:"#8f6318",700:"#5a3d0d",800:"#3d2a09",900:"#261a05"},s={50:"#f6f2f8",100:"#e2d9e8",200:"#cbbad6",300:"#b09bc3",400:"#957cb0",500:"#7a5d9d",600:"#5e4680",700:"#3d2e4a",800:"#2a2033",900:"#18121c"},p="#ffffff",a={grey:n,green:o,blue:d,red:c,orange:l,purple:s},t={raise1:"0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",raise2:"0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",raise3:"0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)"},r={control:"8px",lg:"8px",md:"6px",sm:"4px"},e=(v,i)=>[v,{lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,...i.fontWeight?{fontWeight:String(i.fontWeight)}:{}}],g={fontFamily:{heading:['"TRY Vesterbro"',"Libre Baskerville","Georgia","serif"],sans:['"Matter-TRIAL"',"DM Sans","system-ui","sans-serif"],mono:["Roboto Mono","monospace"]},fontSize:{title:e("28px",{lineHeight:"34px",letterSpacing:"-0.02em"}),"title-em":e("28px",{lineHeight:"34px",letterSpacing:"-0.02em",fontWeight:500}),heading:e("22px",{lineHeight:"28px",letterSpacing:"0",fontWeight:500}),subheader:e("18px",{lineHeight:"28px",letterSpacing:"-0.01em"}),"subheader-em":e("18px",{lineHeight:"28px",letterSpacing:"-0.01em",fontWeight:500}),body:e("16px",{lineHeight:"24px",letterSpacing:"-0.01em"}),"body-em":e("16px",{lineHeight:"24px",letterSpacing:"-0.01em",fontWeight:500}),"caption-1":e("16px",{lineHeight:"22px",letterSpacing:"0.02em"}),"caption-1-em":e("16px",{lineHeight:"22px",letterSpacing:"0.02em",fontWeight:500}),"caption-2":e("14px",{lineHeight:"20px",letterSpacing:"0.01em"}),"caption-2-em":e("14px",{lineHeight:"20px",letterSpacing:"0.01em",fontWeight:500}),footnote:e("13px",{lineHeight:"17px",letterSpacing:"0"}),"footnote-em":e("13px",{lineHeight:"17px",letterSpacing:"0",fontWeight:500})},boxShadow:{raise1:t.raise1,raise2:t.raise2,raise3:t.raise3},borderRadius:{control:r.control,lg:r.lg,md:r.md,sm:r.sm},colors:{grey:a.grey,gray:a.grey,green:a.green,blue:a.blue,red:a.red,orange:a.orange,purple:a.purple,white:"#ffffff",action:{primary:{idle:"var(--action-primary-idle)","on-idle":"var(--action-primary-on-idle)",hover:"var(--action-primary-hover)","on-hover":"var(--action-primary-on-hover)",disabled:"var(--action-primary-disabled)","on-disabled":"var(--action-primary-on-disabled)"},secondary:{idle:"var(--action-secondary-idle)","on-idle":"var(--action-secondary-on-idle)",hover:"var(--action-secondary-hover)","on-hover":"var(--action-secondary-on-hover)",disabled:"var(--action-secondary-disabled)","on-disabled":"var(--action-secondary-on-disabled)"},tertiary:{idle:"var(--action-tertiary-idle)","on-idle":"var(--action-tertiary-on-idle)",hover:"var(--action-tertiary-hover)","on-hover":"var(--action-tertiary-on-hover)",disabled:"var(--action-tertiary-disabled)","on-disabled":"var(--action-tertiary-on-disabled)"},quaternary:{idle:"var(--action-quaternary-idle)","on-idle":"var(--action-quaternary-on-idle)",hover:"var(--action-quaternary-hover)","on-hover":"var(--action-quaternary-on-hover)",disabled:"var(--action-quaternary-disabled)","on-disabled":"var(--action-quaternary-on-disabled)"},destructive:{idle:"var(--action-destructive-idle)","on-idle":"var(--action-destructive-on-idle)",hover:"var(--action-destructive-hover)","on-hover":"var(--action-destructive-on-hover)",disabled:"var(--action-destructive-disabled)","on-disabled":"var(--action-destructive-on-disabled)"}},background:{primary:"var(--background-primary)",secondary:"var(--background-secondary)",tertiary:"var(--background-tertiary)",hover:"var(--background-hover)",selected:"var(--background-selected)",overlay:"var(--background-overlay)"},display:{"on-light":{primary:"var(--display-on-light-primary)",secondary:"var(--display-on-light-secondary)",tertiary:"var(--display-on-light-tertiary)",quaternary:"var(--display-on-light-quaternary)"},"on-dark":{primary:"var(--display-on-dark-primary)",secondary:"var(--display-on-dark-secondary)",tertiary:"var(--display-on-dark-tertiary)",quaternary:"var(--display-on-dark-quaternary)"}},accent:{"on-light":"var(--accent-on-light)","on-dark":"var(--accent-on-dark)","bg-light":"var(--accent-bg-light)","bg-lighter":"var(--accent-bg-lighter)"},divider:{primary:"var(--divider-primary)",secondary:"var(--divider-secondary)"},meta:{green:"var(--meta-green)",onGreen:"var(--meta-on-green)",orange:"var(--meta-orange)",onOrange:"var(--meta-on-orange)",red:"var(--meta-red)",onRed:"var(--meta-on-red)",blue:"var(--meta-blue)",onBlue:"var(--meta-on-blue)",purple:"var(--meta-purple)",onPurple:"var(--meta-on-purple)"},"text-primary":"var(--display-on-light-primary)","text-secondary":"var(--display-on-light-secondary)","text-tertiary":"var(--display-on-light-tertiary)","surface-primary":"var(--background-primary)","surface-secondary":"var(--background-secondary)","surface-hover":"var(--background-secondary)","border-light":"var(--divider-primary)","border-medium":"var(--divider-secondary)"}};exports.blue=d;exports.borderRadius=r;exports.colorScales=a;exports.elevation=t;exports.green=o;exports.grey=n;exports.orange=l;exports.purple=s;exports.red=c;exports.theme=g;exports.white=p;
package/dist/theme.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-Dwr2mV7_.js");exports.tailwindTheme=e.theme;exports.theme=e.theme;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./theme-entry-ygTpGaNC.js");exports.tailwindTheme=e.theme;exports.theme=e.theme;
package/dist/theme.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as a, t as m } from "./theme-entry-tLBc6zGT.mjs";
1
+ import { t as a, t as m } from "./theme-entry-BUK3MJUJ.mjs";
2
2
  export {
3
3
  a as tailwindTheme,
4
4
  m as theme
package/package.json CHANGED
@@ -1,128 +1,128 @@
1
- {
2
- "name": "@lateralus-ai/shipping-ui",
3
- "version": "2.0.0-dev.20",
4
- "description": "Shared UI theme and components for Lateralus shipping applications",
5
- "main": "dist/index.cjs",
6
- "module": "dist/index.esm.js",
7
- "types": "dist/index.d.ts",
8
- "publishConfig": {
9
- "access": "public"
10
- },
11
- "exports": {
12
- ".": {
13
- "import": "./dist/index.esm.js",
14
- "require": "./dist/index.cjs",
15
- "types": "./dist/index.d.ts"
16
- },
17
- "./theme": {
18
- "import": "./dist/theme.esm.js",
19
- "require": "./dist/theme.cjs",
20
- "types": "./dist/theme-entry.d.ts"
21
- },
22
- "./style.css": "./dist/style.css",
23
- "./css": "./dist/style.css",
24
- "./dist/style.css": "./dist/style.css",
25
- "./tailwind": "./dist/theme.cjs"
26
- },
27
- "files": [
28
- "dist",
29
- "lib",
30
- "src",
31
- "tailwind.config.ts"
32
- ],
33
- "scripts": {
34
- "dev": "storybook dev -p 6006",
35
- "build": "npx rimraf ./dist && vite build",
36
- "storybook": "storybook dev -p 6006",
37
- "build-storybook": "storybook build",
38
- "test:visual": "playwright test",
39
- "test:visual:ci": "npm run build-storybook && playwright test",
40
- "test:visual:update": "playwright test --update-snapshots",
41
- "test:visual:icons": "node scripts/figma-icons-baseline.mjs --check && playwright test tests/visual/icons-figma.spec.ts",
42
- "test:visual:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents --check && node scripts/figma-sidebar-baseline.mjs --target layouts --check && playwright test tests/visual/sidebar-figma.spec.ts tests/visual/sidebar-layouts-figma.spec.ts",
43
- "figma:baseline:icons": "node scripts/figma-icons-baseline.mjs",
44
- "figma:baseline:icons:check": "node scripts/figma-icons-baseline.mjs --check",
45
- "figma:baseline:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents",
46
- "figma:baseline:sidebar:layouts": "node scripts/figma-sidebar-baseline.mjs --target layouts",
47
- "figma:baseline:sidebar:check": "node scripts/figma-sidebar-baseline.mjs --check",
48
- "postinstall": "playwright install chromium",
49
- "release": "npx release-it",
50
- "release:dev:init": "npx release-it --config .release-it.dev.json major --preRelease=dev",
51
- "release:dev:init:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init major --preRelease=dev",
52
- "release:dev": "npx release-it --config .release-it.dev.json --preRelease=dev",
53
- "release:dev:publish": "npm run build && npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
54
- },
55
- "repository": {
56
- "type": "git",
57
- "url": "git+https://github.com/lateralus-ai/shipping-ui.git"
58
- },
59
- "keywords": [
60
- "tailwind",
61
- "askchief",
62
- "design-system",
63
- "theme",
64
- "shipping",
65
- "storybook"
66
- ],
67
- "author": "Lateralus AI",
68
- "license": "UNLICENSED",
69
- "bugs": {
70
- "url": "https://github.com/lateralus-ai/shipping-ui/issues"
71
- },
72
- "homepage": "https://github.com/lateralus-ai/shipping-ui#readme",
73
- "devDependencies": {
74
- "@chromatic-com/storybook": "^1.6.1",
75
- "@playwright/test": "^1.49.0",
76
- "@storybook/addon-essentials": "^8.2.9",
77
- "@storybook/addon-interactions": "^8.2.9",
78
- "@storybook/addon-links": "^8.2.9",
79
- "@storybook/blocks": "^8.2.9",
80
- "@storybook/react": "^8.2.9",
81
- "@storybook/react-vite": "^8.2.9",
82
- "@types/pngjs": "^6.0.5",
83
- "@types/react": "^18.2.0",
84
- "@types/react-dom": "^18.2.0",
85
- "@uidotdev/usehooks": "^2.4.1",
86
- "@vitejs/plugin-react": "^4.2.1",
87
- "ai": "^5.0.59",
88
- "autoprefixer": "^10.4.16",
89
- "clsx": "^1.2.0",
90
- "pixelmatch": "^5.3.0",
91
- "pngjs": "^7.0.0",
92
- "postcss": "^8.4.32",
93
- "react": "^18.2.0",
94
- "react-dom": "^18.2.0",
95
- "release-it": "^19.0.5",
96
- "serve": "^14.2.4",
97
- "sharp": "^0.33.5",
98
- "storybook": "^8.2.9",
99
- "tailwind-merge": "^1.9.0",
100
- "tailwindcss": "^3.4.0",
101
- "tailwindcss-animate": "^1.0.7",
102
- "tailwindcss-radix": "^3.0.3",
103
- "typescript": "^5.3.3",
104
- "vite": "^5.0.10",
105
- "vite-plugin-dts": "^4.5.4"
106
- },
107
- "peerDependencies": {
108
- "react": "^18.2.0",
109
- "react-dom": "^18.2.0",
110
- "react-textarea-autosize": "^8.5.9"
111
- },
112
- "dependencies": {
113
- "@radix-ui/react-dialog": "^1.1.19",
114
- "@radix-ui/react-dropdown-menu": "^2.1.20",
115
- "@radix-ui/react-tabs": "^1.1.17",
116
- "@radix-ui/react-tooltip": "^1.2.8",
117
- "@react-hooks-library/core": "^0.6.2",
118
- "docx-preview": "^0.3.7",
119
- "docxtemplater": "^3.66.6",
120
- "pizzip": "^3.2.0",
121
- "react-hotkeys-hook": "^5.1.0",
122
- "react-pdf": "^10.1.0",
123
- "react-router": "^7.9.3"
124
- },
125
- "sideEffects": [
126
- "dist/style.css"
127
- ]
128
- }
1
+ {
2
+ "name": "@lateralus-ai/shipping-ui",
3
+ "version": "2.0.0-dev.4",
4
+ "description": "Shared UI theme and components for Lateralus shipping applications",
5
+ "main": "dist/index.cjs",
6
+ "module": "dist/index.esm.js",
7
+ "types": "dist/index.d.ts",
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "exports": {
12
+ ".": {
13
+ "import": "./dist/index.esm.js",
14
+ "require": "./dist/index.cjs",
15
+ "types": "./dist/index.d.ts"
16
+ },
17
+ "./theme": {
18
+ "import": "./dist/theme.esm.js",
19
+ "require": "./dist/theme.cjs",
20
+ "types": "./dist/theme-entry.d.ts"
21
+ },
22
+ "./style.css": "./dist/style.css",
23
+ "./css": "./dist/style.css",
24
+ "./dist/style.css": "./dist/style.css",
25
+ "./tailwind": "./dist/theme.cjs"
26
+ },
27
+ "files": [
28
+ "dist",
29
+ "lib",
30
+ "src",
31
+ "tailwind.config.ts"
32
+ ],
33
+ "scripts": {
34
+ "dev": "storybook dev -p 6006",
35
+ "build": "npx rimraf ./dist && vite build",
36
+ "storybook": "storybook dev -p 6006",
37
+ "build-storybook": "storybook build",
38
+ "test:visual": "playwright test",
39
+ "test:visual:ci": "npm run build-storybook && playwright test",
40
+ "test:visual:update": "playwright test --update-snapshots",
41
+ "test:visual:icons": "node scripts/figma-icons-baseline.mjs --check && playwright test tests/visual/icons-figma.spec.ts",
42
+ "test:visual:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents --check && node scripts/figma-sidebar-baseline.mjs --target layouts --check && playwright test tests/visual/sidebar-figma.spec.ts tests/visual/sidebar-layouts-figma.spec.ts",
43
+ "figma:baseline:icons": "node scripts/figma-icons-baseline.mjs",
44
+ "figma:baseline:icons:check": "node scripts/figma-icons-baseline.mjs --check",
45
+ "figma:baseline:sidebar": "node scripts/figma-sidebar-baseline.mjs --target subcomponents",
46
+ "figma:baseline:sidebar:layouts": "node scripts/figma-sidebar-baseline.mjs --target layouts",
47
+ "figma:baseline:sidebar:check": "node scripts/figma-sidebar-baseline.mjs --check",
48
+ "postinstall": "playwright install chromium",
49
+ "release": "npx release-it",
50
+ "release:dev:init": "npx release-it --config .release-it.dev.json major --preRelease=dev",
51
+ "release:dev:init:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init major --preRelease=dev",
52
+ "release:dev": "npx release-it --config .release-it.dev.json --preRelease=dev",
53
+ "release:dev:publish": "npx release-it --config .release-it.dev.json --no-hooks.before:init --preRelease=dev"
54
+ },
55
+ "repository": {
56
+ "type": "git",
57
+ "url": "git+https://github.com/lateralus-ai/shipping-ui.git"
58
+ },
59
+ "keywords": [
60
+ "tailwind",
61
+ "askchief",
62
+ "design-system",
63
+ "theme",
64
+ "shipping",
65
+ "storybook"
66
+ ],
67
+ "author": "Lateralus AI",
68
+ "license": "UNLICENSED",
69
+ "bugs": {
70
+ "url": "https://github.com/lateralus-ai/shipping-ui/issues"
71
+ },
72
+ "homepage": "https://github.com/lateralus-ai/shipping-ui#readme",
73
+ "devDependencies": {
74
+ "@chromatic-com/storybook": "^1.6.1",
75
+ "@playwright/test": "^1.49.0",
76
+ "@storybook/addon-essentials": "^8.2.9",
77
+ "@storybook/addon-interactions": "^8.2.9",
78
+ "@storybook/addon-links": "^8.2.9",
79
+ "@storybook/blocks": "^8.2.9",
80
+ "@storybook/react": "^8.2.9",
81
+ "@storybook/react-vite": "^8.2.9",
82
+ "@types/pngjs": "^6.0.5",
83
+ "@types/react": "^18.2.0",
84
+ "@types/react-dom": "^18.2.0",
85
+ "@uidotdev/usehooks": "^2.4.1",
86
+ "@vitejs/plugin-react": "^4.2.1",
87
+ "ai": "^5.0.59",
88
+ "autoprefixer": "^10.4.16",
89
+ "clsx": "^1.2.0",
90
+ "pixelmatch": "^5.3.0",
91
+ "pngjs": "^7.0.0",
92
+ "postcss": "^8.4.32",
93
+ "react": "^18.2.0",
94
+ "react-dom": "^18.2.0",
95
+ "release-it": "^19.0.5",
96
+ "serve": "^14.2.4",
97
+ "sharp": "^0.33.5",
98
+ "storybook": "^8.2.9",
99
+ "tailwind-merge": "^1.9.0",
100
+ "tailwindcss": "^3.4.0",
101
+ "tailwindcss-animate": "^1.0.7",
102
+ "tailwindcss-radix": "^3.0.3",
103
+ "typescript": "^5.3.3",
104
+ "vite": "^5.0.10",
105
+ "vite-plugin-dts": "^4.5.4"
106
+ },
107
+ "peerDependencies": {
108
+ "react": "^18.2.0",
109
+ "react-dom": "^18.2.0",
110
+ "react-textarea-autosize": "^8.5.9"
111
+ },
112
+ "dependencies": {
113
+ "@radix-ui/react-dialog": "^1.1.19",
114
+ "@radix-ui/react-dropdown-menu": "^2.1.20",
115
+ "@radix-ui/react-tabs": "^1.1.17",
116
+ "@radix-ui/react-tooltip": "^1.2.8",
117
+ "@react-hooks-library/core": "^0.6.2",
118
+ "docx-preview": "^0.3.7",
119
+ "docxtemplater": "^3.66.6",
120
+ "pizzip": "^3.2.0",
121
+ "react-hotkeys-hook": "^5.1.0",
122
+ "react-pdf": "^10.1.0",
123
+ "react-router": "^7.9.3"
124
+ },
125
+ "sideEffects": [
126
+ "dist/style.css"
127
+ ]
128
+ }
@@ -1,138 +1,64 @@
1
- import {
2
- type KeyboardEvent,
3
- type ReactNode,
4
- } from "react";
5
- import { ChatIcon, IssuesIcon, ReportIcon, StatusIcon } from "../icons";
1
+ import { type ReactNode } from "react";
2
+ import { ChatIcon, IssuesIcon } from "../icons";
6
3
  import { cn } from "../utils/cn";
7
4
 
8
- export type EntryVariant = "chat" | "issue" | "report";
9
- /** @deprecated Prefer `EntryVariant`. */
10
- export type EntryType = EntryVariant;
11
- export type EntryState = "idle" | "active";
5
+ export type EntryType = "chat" | "issue";
6
+ export type EntryState = "idle" | "selected";
12
7
 
13
8
  export type EntryProps = {
14
- /** Visual type — drives the default leading icon. */
15
- variant?: EntryVariant;
16
- /** @deprecated Use `variant`. */
17
- type?: EntryVariant;
9
+ type: EntryType;
18
10
  state?: EntryState;
19
- title?: ReactNode;
20
- /** Secondary line — excerpt, metadata, or highlighted query match. */
21
- subtitle?: ReactNode;
22
- /** Unread count badge in the title row (Figma red pill). */
23
- count?: number;
24
- /** Trailing actions (e.g. ellipsis menu). Shown on hover / when forced. */
25
- trailing?: ReactNode;
26
- /** Override the default variant icon. */
27
- icon?: ReactNode;
11
+ title: string;
12
+ subtitle?: string;
13
+ meta?: ReactNode;
28
14
  onClick?: () => void;
29
15
  className?: string;
30
- /** @deprecated Use `count` or `trailing`. */
31
- meta?: ReactNode;
32
16
  };
33
17
 
34
- const variantIcons: Record<EntryVariant, ReactNode> = {
35
- chat: <ChatIcon className="size-4" />,
36
- issue: <StatusIcon className="size-4" />,
37
- report: <ReportIcon className="size-4" />,
18
+ const typeIcons: Record<EntryType, ReactNode> = {
19
+ chat: <ChatIcon size="small" />,
20
+ issue: <IssuesIcon size="small" />,
38
21
  };
39
22
 
40
- /**
41
- * List entry row — Figma `Entry` (389:10001).
42
- * Shared by search results and activity lists.
43
- *
44
- * Renders a `div` (not `<button>`) so trailing controls can be real buttons
45
- * without nested-button issues. Whole-row click uses `onClick` + keyboard.
46
- */
47
23
  export const Entry = ({
48
- variant,
49
24
  type,
50
25
  state = "idle",
51
- title = "Title",
26
+ title,
52
27
  subtitle,
53
- count,
54
- trailing,
55
- icon,
28
+ meta,
56
29
  onClick,
57
30
  className,
58
- meta,
59
- }: EntryProps) => {
60
- const resolvedVariant: EntryVariant = variant ?? type ?? "chat";
61
- const isInteractive = typeof onClick === "function";
62
-
63
- const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
64
- if (!onClick) {
65
- return;
66
- }
67
- if (event.key === "Enter" || event.key === " ") {
68
- event.preventDefault();
69
- onClick();
70
- }
71
- };
72
-
73
- return (
74
- <div
75
- role={isInteractive ? "button" : undefined}
76
- tabIndex={isInteractive ? 0 : undefined}
77
- data-variant={resolvedVariant}
78
- data-state={state}
79
- onClick={onClick}
80
- onKeyDown={handleKeyDown}
81
- className={cn(
82
- "group flex w-full items-center gap-4 rounded-control p-2 text-left transition-colors",
83
- "hover:bg-[rgba(38,36,32,0.04)]",
84
- state === "active" && "bg-[rgba(38,36,32,0.04)]",
85
- isInteractive && "cursor-pointer",
86
- className,
87
- )}
88
- >
89
- <span className="shrink-0 text-display-on-light-secondary">
90
- {icon ?? variantIcons[resolvedVariant] ?? (
91
- <IssuesIcon className="size-4" />
92
- )}
93
- </span>
94
-
95
- <span className="flex min-w-0 flex-1 flex-col">
96
- <span className="flex min-h-6 w-full items-center gap-4">
97
- <span className="min-w-0 flex-1 truncate text-caption-1-em text-display-on-light-primary">
98
- {title}
99
- </span>
100
- {typeof count === "number" && count > 0 && (
101
- <span
102
- className="inline-flex min-h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-red-600 px-0.5 text-footnote-em text-white"
103
- aria-label={`${count} unread`}
104
- >
105
- {count > 99 ? "99+" : count}
106
- </span>
107
- )}
108
- {meta != null && typeof count !== "number" && (
109
- <span className="shrink-0 text-footnote text-display-on-light-quaternary">
110
- {meta}
111
- </span>
112
- )}
31
+ }: EntryProps) => (
32
+ <button
33
+ type="button"
34
+ data-type={type}
35
+ data-state={state}
36
+ onClick={onClick}
37
+ className={cn(
38
+ "flex w-full items-start gap-3 rounded-control px-3 py-2.5 text-left transition-colors",
39
+ "hover:bg-background-secondary",
40
+ "data-[state=selected]:bg-background-selected data-[state=selected]:text-display-on-dark-primary",
41
+ "data-[state=selected]:[&_.entry-subtitle]:text-display-on-dark-secondary",
42
+ "data-[state=selected]:[&_.entry-meta]:text-display-on-dark-tertiary",
43
+ "data-[state=selected]:[&_.entry-icon]:text-display-on-dark-secondary",
44
+ className,
45
+ )}
46
+ >
47
+ <span className="entry-icon mt-0.5 shrink-0 text-display-on-light-secondary">
48
+ {typeIcons[type]}
49
+ </span>
50
+ <span className="min-w-0 flex-1">
51
+ <span className="block truncate text-caption-2-em">{title}</span>
52
+ {subtitle && (
53
+ <span className="entry-subtitle mt-0.5 block truncate text-footnote text-display-on-light-tertiary">
54
+ {subtitle}
113
55
  </span>
114
-
115
- {(subtitle != null && subtitle !== false) || trailing ? (
116
- <span className="flex min-h-6 w-full items-center gap-4">
117
- {subtitle != null && subtitle !== false ? (
118
- <span className="min-w-0 flex-1 truncate text-caption-2 text-display-on-light-secondary">
119
- {subtitle}
120
- </span>
121
- ) : (
122
- <span className="min-w-0 flex-1" />
123
- )}
124
- {trailing != null && (
125
- <span
126
- className="inline-flex size-5 shrink-0 items-center justify-center"
127
- onClick={(event) => event.stopPropagation()}
128
- onKeyDown={(event) => event.stopPropagation()}
129
- >
130
- {trailing}
131
- </span>
132
- )}
133
- </span>
134
- ) : null}
56
+ )}
57
+ </span>
58
+ {meta && (
59
+ <span className="entry-meta shrink-0 text-footnote text-display-on-light-quaternary">
60
+ {meta}
135
61
  </span>
136
- </div>
137
- );
138
- };
62
+ )}
63
+ </button>
64
+ );