@anyknown/ui 0.7.0 → 0.8.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 (59) hide show
  1. package/README.md +7 -8
  2. package/dist/brand.css +101 -214
  3. package/dist/components/button/Button.d.ts +3 -2
  4. package/dist/components/button/Button.js +32 -48
  5. package/dist/components/checkbox/Checkbox.js +24 -48
  6. package/dist/components/dialog/Dialog.js +1 -1
  7. package/dist/components/empty-state/EmptyState.js +1 -1
  8. package/dist/components/ghost/Ghost.d.ts +16 -0
  9. package/dist/components/ghost/Ghost.js +50 -0
  10. package/dist/components/group/Group.d.ts +66 -0
  11. package/dist/components/group/Group.js +166 -0
  12. package/dist/components/handoff-receipt/HandoffReceipt.js +12 -42
  13. package/dist/components/icon/Chevron.d.ts +9 -0
  14. package/dist/components/icon/Chevron.js +6 -0
  15. package/dist/components/icon/icon.d.ts +35 -0
  16. package/dist/components/icon/icon.js +10 -0
  17. package/dist/components/icon-button/IconButton.d.ts +17 -0
  18. package/dist/components/icon-button/IconButton.js +66 -0
  19. package/dist/components/input/Input.d.ts +3 -1
  20. package/dist/components/input/Input.js +3 -2
  21. package/dist/components/page/Page.d.ts +64 -0
  22. package/dist/components/page/Page.js +163 -0
  23. package/dist/components/popover/Popover.js +1 -1
  24. package/dist/components/progress/Progress.js +49 -104
  25. package/dist/components/radio/Radio.js +17 -28
  26. package/dist/components/segmented/Segmented.d.ts +12 -0
  27. package/dist/components/segmented/Segmented.js +43 -0
  28. package/dist/components/settings-rows/SettingsRows.d.ts +25 -0
  29. package/dist/components/settings-rows/SettingsRows.js +63 -0
  30. package/dist/components/spin/Spin.d.ts +5 -0
  31. package/dist/components/spin/Spin.js +25 -0
  32. package/dist/components/status-chip/StatusChip.d.ts +18 -0
  33. package/dist/components/status-chip/StatusChip.js +68 -0
  34. package/dist/components/switch/Switch.js +20 -63
  35. package/dist/components/table/Table.d.ts +39 -0
  36. package/dist/components/table/Table.js +125 -0
  37. package/dist/components/table/TableCells.d.ts +52 -0
  38. package/dist/components/table/TableCells.js +103 -0
  39. package/dist/components/tabs/Tabs.js +16 -48
  40. package/dist/components/text/Text.js +2 -2
  41. package/dist/components/toast/Toast.js +7 -8
  42. package/dist/index.d.ts +11 -0
  43. package/dist/index.js +11 -0
  44. package/dist/themes.stylex.d.ts +33 -496
  45. package/dist/themes.stylex.js +25 -253
  46. package/dist/tokens.css +53 -126
  47. package/dist/tokens.stylex.d.ts +36 -54
  48. package/dist/tokens.stylex.js +62 -90
  49. package/package.json +1 -1
  50. package/dist/lib/paths.d.ts +0 -3
  51. package/dist/lib/paths.js +0 -11
  52. package/dist/lib/progress.d.ts +0 -2
  53. package/dist/lib/progress.js +0 -28
  54. package/dist/lib/silk.d.ts +0 -66
  55. package/dist/lib/silk.js +0 -337
  56. package/dist/lib/svgId.d.ts +0 -1
  57. package/dist/lib/svgId.js +0 -4
  58. package/dist/lib/weave.d.ts +0 -28
  59. package/dist/lib/weave.js +0 -83
package/README.md CHANGED
@@ -5,12 +5,12 @@ AnyKnown 全產品線共用的 design system,以 [StyleX](https://stylexjs.com)
5
5
  ## 結構
6
6
 
7
7
  - `src/tokens.stylex.ts` — semantic tokens(color / font / text / space / radius / motion / shadow)。light 為預設,dark 跟隨 OS。**唯一真相**。
8
- - `src/tokens.css` — 同一組值的純 CSS variables(`--ak-*`),給非 StyleX 的使用端(desktop 的 Tailwind v4 `@theme` 直接引用)。import 路徑:`@anyknown/ui/tokens.css`。palette 掛在 `<html>` 的 `data-palette="neutral"`,亮暗照樣跟系統,`data-theme` 才鎖。
9
- - `src/themes.stylex.ts` — `light` / `dark` theme,給有手動切換主題的 app:`<div {...stylex.props(...light)}>`。另一套 palette 是 `neutral`(冷灰;`neutral` 跟系統亮暗,`neutralLight` / `neutralDark` 鎖死),值在 `scripts/neutral.mjs`。**由 `pnpm gen:themes` 從 tokens 生成**,不要手改(`themes.test.ts` 會擋住不同步)。
10
- - `src/brand.css` — 給沒有 bundler 的一次性頁面(報告、提案、benchmark)的有界詞彙,二十來個 `ak-*` class。build 時內聯 tokens、接 Google Fonts、把按鈕織體預渲染成 SVG data URI(`scripts/brand-css.mjs`),出 `dist/brand.css` 與 <https://ui.anyknown.com/brand.css>。判斷寫在根目錄的 [DESIGN.md](./DESIGN.md),`pnpm check` 會擋文件與詞彙不同步。
8
+ - `src/tokens.css` — 同一組值的純 CSS variables(`--ak-*`),給非 StyleX 的使用端(desktop 的 Tailwind v4 `@theme` 直接引用)。import 路徑:`@anyknown/ui/tokens.css`。只有一套 palette(neutral);亮暗跟系統,`data-theme` 才鎖。
9
+ - `src/themes.stylex.ts` — `light` / `dark` theme,給有手動切換主題的 app:`<div {...stylex.props(...light)}>`。**由 `pnpm gen:themes` 從 tokens 生成**,不要手改(`themes.test.ts` 會擋住不同步)。
10
+ - `src/brand.css` — 給沒有 bundler 的一次性頁面(報告、提案、benchmark)的有界詞彙,二十來個 `ak-*` class。build 時內聯 tokens、接 Google Fonts(`scripts/brand-css.mjs`),出 `dist/brand.css` 與 <https://ui.anyknown.com/brand.css>。判斷寫在根目錄的 [DESIGN.md](./DESIGN.md),`pnpm check` 會擋文件與詞彙不同步。
11
11
  - `src/scrollbar.css` — 客製捲軸(全域套用)。StyleX 做不了 `::-webkit-scrollbar` 偽元素,所以獨立成 css 檔。
12
12
  - `src/components/` — 34 個元件,每個一個 folder(`<Name>.tsx` + `<Name>.test.tsx`)。清單與共同決策見 [components/README.md](./src/components/README.md),定案理由與走過的彎路見 [components/COMPONENTS.md](./src/components/COMPONENTS.md)。
13
- - `src/lib/` — 共用 hooks 與生成邏輯(reduced-motion、controllable state、clipboard、diff、`styled` 與 `reset.control`)。織體幾何在 `weave.ts`(靜態)與 `silk.ts`(動態),規格見 [components/TEXTURE-GUIDE.md](./src/components/TEXTURE-GUIDE.md)。
13
+ - `src/lib/` — 共用 hooks 與生成邏輯(reduced-motion、controllable state、clipboard、diff、`styled` 與 `reset.control`)。
14
14
  - `playground/` — demo app,**不進發佈產物**。
15
15
  - `site/` — 文檔網站(全部示範 + 四份指南),部署到 Cloudflare Workers,**不進發佈產物**。
16
16
 
@@ -116,12 +116,11 @@ import { color, space } from "@anyknown/ui/tokens.stylex"
116
116
 
117
117
  app 自己的樣式一律引用 tokens,不寫死色值。`playground/` 就是照這套設定跑的,可以當範本。
118
118
 
119
- ## 視覺方向:Ledger
119
+ ## 視覺方向:平面、neutral
120
120
 
121
- 暖紙面(#FAFAF6)、墨色文字、青碧色 accent(#23705A)。標題用 Newsreader,內文 Geist,時間軸/數據用 Geist Mono。使用端需安裝字體:
121
+ 白紙(#FFFFFF)、墨色文字、墨色 accent(#1D1D1F);標題與內文都是 Geist,時間軸/數據用 Geist Mono。織物設計語言與 ledger palette 封存在 `archive/fiber` branch。使用端需安裝字體:
122
122
 
123
123
  ```bash
124
- pnpm add @fontsource-variable/newsreader @fontsource-variable/geist @fontsource-variable/geist-mono
124
+ pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono
125
125
  ```
126
126
 
127
- Texture(線/織的品牌語言)只用在等待、過渡、儀式時刻與主要互動面,精確區不加花 —— 規格與適配指引見 [components/TEXTURE-GUIDE.md](./src/components/TEXTURE-GUIDE.md)。