@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.
- package/dist/components/Entry.d.ts +7 -27
- package/dist/components/Tabs.d.ts +5 -5
- package/dist/components/index.d.ts +2 -4
- package/dist/index.cjs +25 -25
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +3374 -3584
- package/dist/patterns/Search/ResultRow.d.ts +5 -11
- package/dist/patterns/Sidebar/sidebar-styles.d.ts +1 -2
- package/dist/primitives/Badge.d.ts +4 -7
- package/dist/primitives/index.d.ts +1 -1
- package/dist/tailwind-theme.d.ts +0 -4
- package/dist/{theme-entry-tLBc6zGT.mjs → theme-entry-BUK3MJUJ.mjs} +4 -8
- package/dist/theme-entry-ygTpGaNC.js +1 -0
- package/dist/theme.cjs +1 -1
- package/dist/theme.esm.js +1 -1
- package/package.json +128 -128
- package/src/components/Entry.tsx +45 -119
- package/src/components/Tabs.tsx +27 -33
- package/src/components/index.ts +1 -15
- package/src/index.ts +0 -11
- package/src/patterns/Search/ResultRow.tsx +38 -24
- package/src/patterns/Search/SearchModal.tsx +1 -7
- package/src/patterns/Sidebar/CollapsibleNavGroup.tsx +1 -1
- package/src/patterns/Sidebar/SidebarAction.tsx +17 -26
- package/src/patterns/Sidebar/SidebarEntry.tsx +39 -54
- package/src/patterns/Sidebar/SidebarLink.tsx +20 -30
- package/src/patterns/Sidebar/sidebar-styles.ts +1 -2
- package/src/primitives/Badge.tsx +10 -20
- package/src/primitives/Button.tsx +11 -16
- package/src/primitives/index.ts +1 -1
- package/src/stories/canvases/ContentCanvas.tsx +14 -253
- package/src/tailwind-theme.ts +182 -186
- package/src/utils/cn.ts +1 -28
- package/dist/components/PageHeader.d.ts +0 -41
- package/dist/components/ScrollableList.d.ts +0 -22
- package/dist/theme-entry-Dwr2mV7_.js +0 -1
- package/src/components/PageHeader.tsx +0 -132
- package/src/components/ScrollableList.tsx +0 -61
|
@@ -1,19 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
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?:
|
|
9
|
-
state?:
|
|
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
|
-
|
|
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
|
-
|
|
3
|
-
|
|
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
|
-
|
|
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
|
|
14
|
+
export { Badge, type BadgeProps } from './Badge';
|
|
15
15
|
export { Callout, type CalloutProps } from './Callout';
|
package/dist/tailwind-theme.d.ts
CHANGED
|
@@ -53,7 +53,7 @@ const o = {
|
|
|
53
53
|
700: "#5a3d0d",
|
|
54
54
|
800: "#3d2a09",
|
|
55
55
|
900: "#261a05"
|
|
56
|
-
},
|
|
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
|
-
},
|
|
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
|
-
|
|
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-
|
|
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
package/package.json
CHANGED
|
@@ -1,128 +1,128 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lateralus-ai/shipping-ui",
|
|
3
|
-
"version": "2.0.0-dev.
|
|
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": "
|
|
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
|
+
}
|
package/src/components/Entry.tsx
CHANGED
|
@@ -1,138 +1,64 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
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
|
|
9
|
-
|
|
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
|
-
|
|
15
|
-
variant?: EntryVariant;
|
|
16
|
-
/** @deprecated Use `variant`. */
|
|
17
|
-
type?: EntryVariant;
|
|
9
|
+
type: EntryType;
|
|
18
10
|
state?: EntryState;
|
|
19
|
-
title
|
|
20
|
-
|
|
21
|
-
|
|
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
|
|
35
|
-
chat: <ChatIcon
|
|
36
|
-
issue: <
|
|
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
|
|
26
|
+
title,
|
|
52
27
|
subtitle,
|
|
53
|
-
|
|
54
|
-
trailing,
|
|
55
|
-
icon,
|
|
28
|
+
meta,
|
|
56
29
|
onClick,
|
|
57
30
|
className,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
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
|
-
|
|
137
|
-
|
|
138
|
-
|
|
62
|
+
)}
|
|
63
|
+
</button>
|
|
64
|
+
);
|