@chan.run/design 0.2.1 → 0.3.0

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/README.md CHANGED
@@ -34,11 +34,11 @@ import { ThemeProvider } from "next-themes";
34
34
  </ChakraProvider>
35
35
  ```
36
36
 
37
- Tokens live in the `chan.*` namespace (`chan.bg`, `chan.text`, `chan.orange`, …) — see [`src/theme.ts`](./src/theme.ts) and `lat.md/design-system.md` for the full taxonomy.
37
+ Tokens live in the `chan.*` namespace (`chan.bg`, `chan.text`, `chan.orange`, …) — see [`src/theme.ts`](./src/theme.ts) and `docs/design-system.md` for the full taxonomy.
38
38
 
39
39
  ## Brand marks
40
40
 
41
- Two flavors: the **chan.run umbrella brand** (`CHAN[•]RUN`, dot accent) and **per-product marks** (`SEA[M]`, `ENTROP[Y]`, …, last-letter accent). Rules locked per `lat.md/brand-marks.md`.
41
+ Two flavors: the **chan.run umbrella brand** (`CHAN[•]RUN`, dot accent) and **per-product marks** (`SEA[M]`, `ENTROP[Y]`, …, last-letter accent). Rules locked per `docs/brand-marks.md`.
42
42
 
43
43
  ### React components
44
44
 
@@ -158,7 +158,7 @@ See `products/seam/seam-extension/wxt.config.ts` for the working example.
158
158
  4. Run `pnpm gen-brand` to produce the `assets/` outputs.
159
159
  5. Run `pnpm typecheck && pnpm exec biome check .` to confirm.
160
160
 
161
- See `lat.md/brand-marks.md` for the full hard-rules reference.
161
+ See `docs/brand-marks.md` for the full hard-rules reference.
162
162
 
163
163
  ## Repo layout
164
164
 
package/dist/index.d.mts CHANGED
@@ -1,6 +1,4 @@
1
- import * as _$_chakra_ui_react0 from "@chakra-ui/react";
2
1
  import { FlexProps, TextProps } from "@chakra-ui/react";
3
- import * as _$react_jsx_runtime0 from "react/jsx-runtime";
4
2
  import { ComponentType, ReactNode } from "react";
5
3
 
6
4
  //#region src/brand/Wordmark.d.ts
@@ -15,10 +13,10 @@ declare function Wordmark({
15
13
  color,
16
14
  pulseDot,
17
15
  ...rest
18
- }: WordmarkProps): _$react_jsx_runtime0.JSX.Element;
16
+ }: WordmarkProps): import("react/jsx-runtime").JSX.Element;
19
17
  //#endregion
20
18
  //#region src/components/ColorModeButton.d.ts
21
- declare function ColorModeButton(props: FlexProps): _$react_jsx_runtime0.JSX.Element;
19
+ declare function ColorModeButton(props: FlexProps): import("react/jsx-runtime").JSX.Element;
22
20
  //#endregion
23
21
  //#region src/components/Splash.d.ts
24
22
  interface SplashProps {
@@ -42,7 +40,7 @@ declare function Splash({
42
40
  size,
43
41
  holdMs,
44
42
  revealMs
45
- }: SplashProps): _$react_jsx_runtime0.JSX.Element | null;
43
+ }: SplashProps): import("react/jsx-runtime").JSX.Element | null;
46
44
  //#endregion
47
45
  //#region src/components/slides/types.d.ts
48
46
  /** Supported slide layout templates */
@@ -112,7 +110,7 @@ declare function DeckCard({
112
110
  tags,
113
111
  slideCount,
114
112
  onClick
115
- }: DeckCardProps): _$react_jsx_runtime0.JSX.Element;
113
+ }: DeckCardProps): import("react/jsx-runtime").JSX.Element;
116
114
  //#endregion
117
115
  //#region src/components/slides/SlideComponents.d.ts
118
116
  type ComponentMap = Record<string, React.ComponentType<Record<string, unknown>>>;
@@ -135,13 +133,13 @@ declare function SlideControls({
135
133
  onSlideChange,
136
134
  onTogglePresent,
137
135
  isPresenting
138
- }: SlideControlsProps): _$react_jsx_runtime0.JSX.Element;
136
+ }: SlideControlsProps): import("react/jsx-runtime").JSX.Element;
139
137
  //#endregion
140
138
  //#region src/components/slides/SlideLayout.d.ts
141
139
  declare function SlideLayoutComponent({
142
140
  layout,
143
141
  children
144
- }: SlideProps): _$react_jsx_runtime0.JSX.Element;
142
+ }: SlideProps): import("react/jsx-runtime").JSX.Element;
145
143
  //#endregion
146
144
  //#region src/components/slides/SlideViewer.d.ts
147
145
  declare function SlideViewer({
@@ -150,7 +148,7 @@ declare function SlideViewer({
150
148
  onSlideChange,
151
149
  isPresenting,
152
150
  onTogglePresent
153
- }: SlideViewerProps): _$react_jsx_runtime0.JSX.Element | null;
151
+ }: SlideViewerProps): import("react/jsx-runtime").JSX.Element | null;
154
152
  //#endregion
155
153
  //#region src/components/Topbar.d.ts
156
154
  interface TopbarProps {
@@ -159,7 +157,7 @@ interface TopbarProps {
159
157
  }
160
158
  declare function Topbar({
161
159
  onMenuOpen
162
- }: TopbarProps): _$react_jsx_runtime0.JSX.Element;
160
+ }: TopbarProps): import("react/jsx-runtime").JSX.Element;
163
161
  //#endregion
164
162
  //#region src/favicons/index.d.ts
165
163
  interface MarkAssets {
@@ -181,15 +179,15 @@ declare const entropyFaviconAssets: MarkAssets;
181
179
  declare const restunnelFaviconAssets: MarkAssets;
182
180
  declare const seamFaviconAssets: MarkAssets;
183
181
  declare const slidesFaviconAssets: MarkAssets;
184
- declare function ChanFaviconHead(props?: FaviconHeadProps): _$react_jsx_runtime0.JSX.Element;
185
- declare function EnsureFaviconHead(props?: FaviconHeadProps): _$react_jsx_runtime0.JSX.Element;
186
- declare function EntropyFaviconHead(props?: FaviconHeadProps): _$react_jsx_runtime0.JSX.Element;
187
- declare function RestunnelFaviconHead(props?: FaviconHeadProps): _$react_jsx_runtime0.JSX.Element;
188
- declare function SeamFaviconHead(props?: FaviconHeadProps): _$react_jsx_runtime0.JSX.Element;
189
- declare function SlidesFaviconHead(props?: FaviconHeadProps): _$react_jsx_runtime0.JSX.Element;
182
+ declare function ChanFaviconHead(props?: FaviconHeadProps): import("react/jsx-runtime").JSX.Element;
183
+ declare function EnsureFaviconHead(props?: FaviconHeadProps): import("react/jsx-runtime").JSX.Element;
184
+ declare function EntropyFaviconHead(props?: FaviconHeadProps): import("react/jsx-runtime").JSX.Element;
185
+ declare function RestunnelFaviconHead(props?: FaviconHeadProps): import("react/jsx-runtime").JSX.Element;
186
+ declare function SeamFaviconHead(props?: FaviconHeadProps): import("react/jsx-runtime").JSX.Element;
187
+ declare function SlidesFaviconHead(props?: FaviconHeadProps): import("react/jsx-runtime").JSX.Element;
190
188
  //#endregion
191
189
  //#region src/products/ensure/EnsureIcon.d.ts
192
- declare function EnsureIcon(): _$react_jsx_runtime0.JSX.Element;
190
+ declare function EnsureIcon(): import("react/jsx-runtime").JSX.Element;
193
191
  //#endregion
194
192
  //#region src/products/_internal.d.ts
195
193
  interface ProductWordmarkProps extends Omit<TextProps, "children"> {
@@ -203,44 +201,44 @@ interface ProductWordmarkProps extends Omit<TextProps, "children"> {
203
201
  //#endregion
204
202
  //#region src/products/ensure/EnsureWordmark.d.ts
205
203
  interface EnsureWordmarkProps extends Omit<ProductWordmarkProps, "prefix" | "terminal"> {}
206
- declare function EnsureWordmark(props: EnsureWordmarkProps): _$react_jsx_runtime0.JSX.Element;
204
+ declare function EnsureWordmark(props: EnsureWordmarkProps): import("react/jsx-runtime").JSX.Element;
207
205
  //#endregion
208
206
  //#region src/products/entropy/EntropyIcon.d.ts
209
- declare function EntropyIcon(): _$react_jsx_runtime0.JSX.Element;
207
+ declare function EntropyIcon(): import("react/jsx-runtime").JSX.Element;
210
208
  //#endregion
211
209
  //#region src/products/entropy/EntropyWordmark.d.ts
212
210
  interface EntropyWordmarkProps extends Omit<ProductWordmarkProps, "prefix" | "terminal"> {}
213
- declare function EntropyWordmark(props: EntropyWordmarkProps): _$react_jsx_runtime0.JSX.Element;
211
+ declare function EntropyWordmark(props: EntropyWordmarkProps): import("react/jsx-runtime").JSX.Element;
214
212
  //#endregion
215
213
  //#region src/products/restunnel/RestunnelIcon.d.ts
216
- declare function RestunnelIcon(): _$react_jsx_runtime0.JSX.Element;
214
+ declare function RestunnelIcon(): import("react/jsx-runtime").JSX.Element;
217
215
  //#endregion
218
216
  //#region src/products/restunnel/RestunnelWordmark.d.ts
219
217
  interface RestunnelWordmarkProps extends Omit<ProductWordmarkProps, "prefix" | "terminal"> {}
220
- declare function RestunnelWordmark(props: RestunnelWordmarkProps): _$react_jsx_runtime0.JSX.Element;
218
+ declare function RestunnelWordmark(props: RestunnelWordmarkProps): import("react/jsx-runtime").JSX.Element;
221
219
  //#endregion
222
220
  //#region src/products/seam/SeamIcon.d.ts
223
- declare function SeamIcon(): _$react_jsx_runtime0.JSX.Element;
221
+ declare function SeamIcon(): import("react/jsx-runtime").JSX.Element;
224
222
  //#endregion
225
223
  //#region src/products/seam/SeamWordmark.d.ts
226
224
  interface SeamWordmarkProps extends Omit<ProductWordmarkProps, "prefix" | "terminal"> {}
227
- declare function SeamWordmark(props: SeamWordmarkProps): _$react_jsx_runtime0.JSX.Element;
225
+ declare function SeamWordmark(props: SeamWordmarkProps): import("react/jsx-runtime").JSX.Element;
228
226
  //#endregion
229
227
  //#region src/products/slides/SlidesIcon.d.ts
230
- declare function SlidesIcon(): _$react_jsx_runtime0.JSX.Element;
228
+ declare function SlidesIcon(): import("react/jsx-runtime").JSX.Element;
231
229
  //#endregion
232
230
  //#region src/products/slides/SlidesWordmark.d.ts
233
231
  interface SlidesWordmarkProps extends Omit<ProductWordmarkProps, "prefix" | "terminal"> {}
234
- declare function SlidesWordmark(props: SlidesWordmarkProps): _$react_jsx_runtime0.JSX.Element;
232
+ declare function SlidesWordmark(props: SlidesWordmarkProps): import("react/jsx-runtime").JSX.Element;
235
233
  //#endregion
236
234
  //#region src/products/index.d.ts
237
235
  declare const PRODUCT_ICONS: Record<string, ComponentType>;
238
236
  declare const PRODUCT_WORDMARKS: Record<string, ComponentType>;
239
237
  //#endregion
240
238
  //#region src/TokenShowcase.d.ts
241
- declare function TokenShowcase(): _$react_jsx_runtime0.JSX.Element;
239
+ declare function TokenShowcase(): import("react/jsx-runtime").JSX.Element;
242
240
  //#endregion
243
241
  //#region src/theme.d.ts
244
- declare const system: _$_chakra_ui_react0.SystemContext;
242
+ declare const system: import("@chakra-ui/react").SystemContext;
245
243
  //#endregion
246
244
  export { ChanFaviconHead, ColorModeButton, DeckCard, type DeckCardProps, EnsureFaviconHead, EnsureIcon, EnsureWordmark, type EnsureWordmarkProps, EntropyFaviconHead, EntropyIcon, EntropyWordmark, type EntropyWordmarkProps, PRODUCT_ICONS, PRODUCT_WORDMARKS, RestunnelFaviconHead, RestunnelIcon, RestunnelWordmark, type RestunnelWordmarkProps, SeamFaviconHead, SeamIcon, SeamWordmark, type SeamWordmarkProps, SlideControls, type SlideControlsProps, type SlideEntry, SlideLayoutComponent as SlideLayout, type SlideLayout as SlideLayoutType, type SlideProps, SlideViewer, type SlideViewerProps, SlidesFaviconHead, SlidesIcon, SlidesWordmark, type SlidesWordmarkProps, Splash, type SplashProps, TokenShowcase, Topbar, type TopbarProps, Wordmark, type WordmarkProps, chanFaviconAssets, ensureFaviconAssets, entropyFaviconAssets, getSlideComponents, restunnelFaviconAssets, seamFaviconAssets, slidesFaviconAssets, system };
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Badge, Box, Card, Center, Code, Flex, Grid, HStack, Heading, IconButton, Text, createSystem, defaultConfig, defineConfig, defineSlotRecipe, useSlotRecipe } from "@chakra-ui/react";
1
+ import { Badge, Box, Card, Center, Code, Flex, Grid, HStack, Heading, IconButton, Text, createSystem, defaultConfig, defineConfig, defineRecipe, defineSlotRecipe, useSlotRecipe } from "@chakra-ui/react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useTheme } from "next-themes";
4
4
  import { useCallback, useEffect, useRef, useState } from "react";
@@ -1985,6 +1985,322 @@ function TokenShowcase() {
1985
1985
  ]
1986
1986
  });
1987
1987
  }
1988
+ const adminChromeSlotRecipe = defineSlotRecipe({
1989
+ className: "chan-admin-chrome",
1990
+ slots: [
1991
+ "rail",
1992
+ "frame",
1993
+ "tick",
1994
+ "tag"
1995
+ ],
1996
+ base: {
1997
+ rail: {
1998
+ position: "sticky",
1999
+ top: "52px",
2000
+ zIndex: 54,
2001
+ display: "flex",
2002
+ alignItems: "center",
2003
+ gap: "9px",
2004
+ height: "26px",
2005
+ px: "22px",
2006
+ fontFamily: "body",
2007
+ fontSize: "9px",
2008
+ letterSpacing: "0.18em",
2009
+ textTransform: "uppercase",
2010
+ color: "chan.orange",
2011
+ bg: "chan.bg",
2012
+ borderBottom: "1px solid",
2013
+ borderColor: "chan.orange.border",
2014
+ backgroundImage: "repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(255,77,0,.06) 9px, rgba(255,77,0,.06) 18px)"
2015
+ },
2016
+ frame: {
2017
+ position: "fixed",
2018
+ inset: 0,
2019
+ zIndex: 80,
2020
+ pointerEvents: "none",
2021
+ border: "1.5px solid",
2022
+ borderColor: "chan.orange.border"
2023
+ },
2024
+ tick: {
2025
+ position: "absolute",
2026
+ width: "16px",
2027
+ height: "16px",
2028
+ border: "2px solid",
2029
+ borderColor: "chan.orange"
2030
+ },
2031
+ tag: {
2032
+ position: "absolute",
2033
+ left: "50%",
2034
+ bottom: 0,
2035
+ transform: "translateX(-50%)",
2036
+ fontFamily: "body",
2037
+ fontSize: "8px",
2038
+ letterSpacing: "0.2em",
2039
+ textTransform: "uppercase",
2040
+ color: "chan.orange",
2041
+ whiteSpace: "nowrap",
2042
+ bg: "chan.bg",
2043
+ border: "1px solid",
2044
+ borderColor: "chan.orange.border",
2045
+ borderBottom: 0,
2046
+ borderTopRadius: "4px",
2047
+ px: "12px",
2048
+ pt: "4px",
2049
+ pb: "5px"
2050
+ }
2051
+ }
2052
+ });
2053
+ //#endregion
2054
+ //#region src/components/dataTable.recipe.ts
2055
+ const dataTableSlotRecipe = defineSlotRecipe({
2056
+ className: "chan-data-table",
2057
+ slots: [
2058
+ "root",
2059
+ "header",
2060
+ "columnHeader",
2061
+ "row",
2062
+ "cell"
2063
+ ],
2064
+ base: {
2065
+ root: {
2066
+ border: "1px solid",
2067
+ borderColor: "chan.border",
2068
+ borderRadius: "md",
2069
+ bg: "chan.bg",
2070
+ overflow: "hidden",
2071
+ fontFamily: "body"
2072
+ },
2073
+ header: { bg: "chan.bg.code" },
2074
+ columnHeader: {
2075
+ fontSize: "8px",
2076
+ letterSpacing: "0.22em",
2077
+ textTransform: "uppercase",
2078
+ color: "chan.text.faint",
2079
+ borderColor: "chan.border",
2080
+ py: "11px"
2081
+ },
2082
+ row: { cursor: "default" },
2083
+ cell: {
2084
+ fontSize: "11px",
2085
+ borderColor: "chan.border",
2086
+ borderBottomStyle: "dashed"
2087
+ }
2088
+ },
2089
+ variants: {
2090
+ archived: { true: { row: { opacity: .5 } } },
2091
+ clickable: { true: { row: { cursor: "pointer" } } }
2092
+ }
2093
+ });
2094
+ //#endregion
2095
+ //#region src/components/lbl.recipe.ts
2096
+ const toneColor = (color) => ({ color });
2097
+ const lblRecipe = defineRecipe({
2098
+ className: "chan-lbl",
2099
+ base: {
2100
+ display: "inline-flex",
2101
+ alignItems: "center",
2102
+ fontFamily: "body",
2103
+ fontSize: "9.5px",
2104
+ letterSpacing: "0.18em",
2105
+ textTransform: "uppercase"
2106
+ },
2107
+ variants: {
2108
+ tone: {
2109
+ orange: toneColor("chan.orange"),
2110
+ dim: toneColor("chan.text.dim"),
2111
+ faint: toneColor("chan.text.faint"),
2112
+ ok: toneColor("chan.green"),
2113
+ warn: toneColor("chan.yellow"),
2114
+ danger: toneColor("chan.danger"),
2115
+ info: toneColor("#6a9eda"),
2116
+ neutral: toneColor("chan.text.dim"),
2117
+ owner: toneColor("chan.orange"),
2118
+ admin: toneColor("#6a9eda"),
2119
+ member: toneColor("chan.text.dim"),
2120
+ off: toneColor("chan.text.faint")
2121
+ },
2122
+ variant: {
2123
+ plain: {},
2124
+ chip: {
2125
+ fontSize: "8.5px",
2126
+ letterSpacing: "0.14em",
2127
+ border: "1px solid",
2128
+ borderColor: "color-mix(in srgb, currentColor 38%, transparent)",
2129
+ bg: "color-mix(in srgb, currentColor 12%, transparent)",
2130
+ borderRadius: "3px",
2131
+ px: "7px",
2132
+ py: "2px"
2133
+ }
2134
+ }
2135
+ },
2136
+ compoundVariants: [{
2137
+ tone: "off",
2138
+ variant: "chip",
2139
+ css: {
2140
+ borderStyle: "dashed",
2141
+ bg: "transparent"
2142
+ }
2143
+ }],
2144
+ defaultVariants: {
2145
+ tone: "neutral",
2146
+ variant: "plain"
2147
+ }
2148
+ });
2149
+ //#endregion
2150
+ //#region src/components/panel.recipe.ts
2151
+ const panelSlotRecipe = defineSlotRecipe({
2152
+ className: "chan-panel",
2153
+ slots: [
2154
+ "root",
2155
+ "head",
2156
+ "label",
2157
+ "body"
2158
+ ],
2159
+ base: {
2160
+ root: {
2161
+ border: "1px solid",
2162
+ borderColor: "chan.border",
2163
+ borderRadius: "md",
2164
+ bg: "chan.bg",
2165
+ overflow: "hidden"
2166
+ },
2167
+ head: {
2168
+ display: "flex",
2169
+ alignItems: "center",
2170
+ gap: "8px",
2171
+ px: "16px",
2172
+ py: "11px",
2173
+ borderBottom: "1px solid",
2174
+ borderColor: "chan.border"
2175
+ },
2176
+ label: {
2177
+ fontFamily: "body",
2178
+ fontSize: "8.5px",
2179
+ letterSpacing: "0.18em",
2180
+ textTransform: "uppercase",
2181
+ color: "chan.text.dim"
2182
+ },
2183
+ body: {
2184
+ px: "16px",
2185
+ py: "14px"
2186
+ }
2187
+ },
2188
+ variants: { state: {
2189
+ default: {},
2190
+ live: { label: { color: "chan.orange" } },
2191
+ degraded: { root: { borderColor: "chan.danger.border" } },
2192
+ placeholder: { root: {
2193
+ borderStyle: "dashed",
2194
+ opacity: .6
2195
+ } }
2196
+ } },
2197
+ defaultVariants: { state: "default" }
2198
+ });
2199
+ //#endregion
2200
+ //#region src/components/splash.recipe.ts
2201
+ const splashSlotRecipe = defineSlotRecipe({
2202
+ className: "chan-splash",
2203
+ slots: [
2204
+ "root",
2205
+ "panelStart",
2206
+ "panelEnd",
2207
+ "hub"
2208
+ ],
2209
+ base: {
2210
+ root: {
2211
+ position: "fixed",
2212
+ inset: 0,
2213
+ display: "flex",
2214
+ zIndex: 1e4
2215
+ },
2216
+ panelStart: {
2217
+ flex: 1,
2218
+ position: "relative",
2219
+ bg: "chan.bg.soft",
2220
+ transitionProperty: "top, left",
2221
+ transitionTimingFunction: "ease-in-out"
2222
+ },
2223
+ panelEnd: {
2224
+ flex: 1,
2225
+ position: "relative",
2226
+ bg: "chan.bg.soft",
2227
+ transitionProperty: "bottom, right",
2228
+ transitionTimingFunction: "ease-in-out"
2229
+ },
2230
+ hub: {
2231
+ position: "absolute",
2232
+ bg: "chan.bg.card",
2233
+ border: "1px solid",
2234
+ borderColor: "chan.border",
2235
+ borderRadius: "md",
2236
+ display: "flex",
2237
+ alignItems: "center",
2238
+ justifyContent: "center",
2239
+ zIndex: 1,
2240
+ width: "var(--splash-hub-w)"
2241
+ }
2242
+ },
2243
+ variants: {
2244
+ orientation: {
2245
+ vertical: {
2246
+ root: { flexDirection: "column" },
2247
+ panelStart: {
2248
+ borderBottom: "2px solid",
2249
+ borderColor: "chan.border"
2250
+ },
2251
+ panelEnd: {
2252
+ borderTop: "2px solid",
2253
+ borderColor: "chan.border"
2254
+ },
2255
+ hub: {
2256
+ bottom: 0,
2257
+ left: "50%",
2258
+ transform: "translate(-50%, 50%)"
2259
+ }
2260
+ },
2261
+ horizontal: {
2262
+ root: { flexDirection: "row" },
2263
+ panelStart: {
2264
+ borderRight: "2px solid",
2265
+ borderColor: "chan.border"
2266
+ },
2267
+ panelEnd: {
2268
+ borderLeft: "2px solid",
2269
+ borderColor: "chan.border"
2270
+ },
2271
+ hub: {
2272
+ right: 0,
2273
+ top: "50%",
2274
+ transform: "translate(50%, -50%)"
2275
+ }
2276
+ }
2277
+ },
2278
+ size: {
2279
+ sm: { hub: {
2280
+ "--splash-hub-w": "180px",
2281
+ px: 4,
2282
+ py: 3
2283
+ } },
2284
+ md: { hub: {
2285
+ "--splash-hub-w": "240px",
2286
+ px: 5,
2287
+ py: 4
2288
+ } },
2289
+ lg: { hub: {
2290
+ "--splash-hub-w": "320px",
2291
+ px: 6,
2292
+ py: 5
2293
+ } }
2294
+ }
2295
+ },
2296
+ defaultVariants: {
2297
+ orientation: "vertical",
2298
+ size: "md"
2299
+ }
2300
+ });
2301
+ //#endregion
2302
+ //#region src/components/statusDot.recipe.ts
2303
+ const dot = (color) => ({ bg: color });
1988
2304
  const system = createSystem(defaultConfig, defineConfig({
1989
2305
  globalCss: { body: {
1990
2306
  bg: "{colors.chan.bg}",
@@ -2126,106 +2442,37 @@ const system = createSystem(defaultConfig, defineConfig({
2126
2442
  textTransform: "uppercase"
2127
2443
  } }
2128
2444
  },
2129
- slotRecipes: { splash: defineSlotRecipe({
2130
- className: "chan-splash",
2131
- slots: [
2132
- "root",
2133
- "panelStart",
2134
- "panelEnd",
2135
- "hub"
2136
- ],
2137
- base: {
2138
- root: {
2139
- position: "fixed",
2140
- inset: 0,
2141
- display: "flex",
2142
- zIndex: 1e4
2445
+ recipes: {
2446
+ lbl: lblRecipe,
2447
+ statusDot: defineRecipe({
2448
+ className: "chan-status-dot",
2449
+ base: {
2450
+ display: "inline-block",
2451
+ width: "6px",
2452
+ height: "6px",
2453
+ borderRadius: "full",
2454
+ flexShrink: 0
2143
2455
  },
2144
- panelStart: {
2145
- flex: 1,
2146
- position: "relative",
2147
- bg: "chan.bg.soft",
2148
- transitionProperty: "top, left",
2149
- transitionTimingFunction: "ease-in-out"
2150
- },
2151
- panelEnd: {
2152
- flex: 1,
2153
- position: "relative",
2154
- bg: "chan.bg.soft",
2155
- transitionProperty: "bottom, right",
2156
- transitionTimingFunction: "ease-in-out"
2157
- },
2158
- hub: {
2159
- position: "absolute",
2160
- bg: "chan.bg.card",
2161
- border: "1px solid",
2162
- borderColor: "chan.border",
2163
- borderRadius: "md",
2164
- display: "flex",
2165
- alignItems: "center",
2166
- justifyContent: "center",
2167
- zIndex: 1,
2168
- width: "var(--splash-hub-w)"
2169
- }
2170
- },
2171
- variants: {
2172
- orientation: {
2173
- vertical: {
2174
- root: { flexDirection: "column" },
2175
- panelStart: {
2176
- borderBottom: "2px solid",
2177
- borderColor: "chan.border"
2178
- },
2179
- panelEnd: {
2180
- borderTop: "2px solid",
2181
- borderColor: "chan.border"
2182
- },
2183
- hub: {
2184
- bottom: 0,
2185
- left: "50%",
2186
- transform: "translate(-50%, 50%)"
2187
- }
2456
+ variants: {
2457
+ tone: {
2458
+ ok: dot("chan.green"),
2459
+ warn: dot("chan.yellow"),
2460
+ danger: dot("chan.danger"),
2461
+ info: dot("#6a9eda"),
2462
+ neutral: dot("chan.text.faint"),
2463
+ off: dot("chan.text.faint")
2188
2464
  },
2189
- horizontal: {
2190
- root: { flexDirection: "row" },
2191
- panelStart: {
2192
- borderRight: "2px solid",
2193
- borderColor: "chan.border"
2194
- },
2195
- panelEnd: {
2196
- borderLeft: "2px solid",
2197
- borderColor: "chan.border"
2198
- },
2199
- hub: {
2200
- right: 0,
2201
- top: "50%",
2202
- transform: "translate(50%, -50%)"
2203
- }
2204
- }
2465
+ live: { true: { animation: "chan-pulse" } }
2205
2466
  },
2206
- size: {
2207
- sm: { hub: {
2208
- "--splash-hub-w": "180px",
2209
- px: 4,
2210
- py: 3
2211
- } },
2212
- md: { hub: {
2213
- "--splash-hub-w": "240px",
2214
- px: 5,
2215
- py: 4
2216
- } },
2217
- lg: { hub: {
2218
- "--splash-hub-w": "320px",
2219
- px: 6,
2220
- py: 5
2221
- } }
2222
- }
2223
- },
2224
- defaultVariants: {
2225
- orientation: "vertical",
2226
- size: "md"
2227
- }
2228
- }) },
2467
+ defaultVariants: { tone: "neutral" }
2468
+ })
2469
+ },
2470
+ slotRecipes: {
2471
+ splash: splashSlotRecipe,
2472
+ panel: panelSlotRecipe,
2473
+ dataTable: dataTableSlotRecipe,
2474
+ adminChrome: adminChromeSlotRecipe
2475
+ },
2229
2476
  semanticTokens: { colors: {
2230
2477
  "chan.bg": { value: {
2231
2478
  _light: "{colors.chan.palette.light.bg}",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chan.run/design",
3
- "version": "0.2.1",
3
+ "version": "0.3.0",
4
4
  "description": "Shared Chakra UI v3 theme and component library for chan.run",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -29,9 +29,9 @@
29
29
  "@types/react": "19.2.14",
30
30
  "favicons": "^7.2.0",
31
31
  "opentype.js": "^1.3.4",
32
- "tsdown": "^0.21.7",
32
+ "tsdown": "^0.22.3",
33
33
  "tsx": "^4.21.0",
34
- "typescript": "5.9.3"
34
+ "typescript": "6.0.3"
35
35
  },
36
36
  "repository": {
37
37
  "type": "git",