@flytedan/flytebot-design-system 0.1.0 → 0.1.2

package/package.json

@@ -1,14 +1,26 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",
+  "author": "flytedesk",
+  "homepage": "https://github.com/flytedan/flytebot-design-system#readme",
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "flytedesk"
+  ],
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/flytedan/flytebot-design-system.git"
   },
+  "bugs": {
+    "url": "https://github.com/flytedan/flytebot-design-system/issues"
+  },
   "files": [
+    "README.md",
     "dist",
     "styles"
   ],
@@ -29,7 +41,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "test": "vitest run",
-    "docs": "vite --config vite.docs.config.ts"
+    "docs": "vite --config vite.docs.config.ts",
+    "docs:build": "vite build --config vite.docs.config.ts"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/styles/components.css

@@ -5555,3 +5555,45 @@
   flex: 1;
   min-width: 180px;
 }
+
+/* ============ foundations/skeleton.css (vendored verbatim) ============
+   Loading is a first-class state in this system.
+   Three tiers, and only three:
+   1. fd-skel-*   — the shell before first data (structure is already correct)
+   2. fd-stale    — data on screen while a refresh is in flight (visible, dimmed, inert)
+   3. fd-progress — a determinate or indeterminate bar for a known long job
+   Never blank a region that already has data. Never spin over a whole page. */
+@keyframes fd-sheen{0%{background-position:-160% 0}100%{background-position:260% 0}}
+@keyframes fd-pulse{0%,100%{opacity:1}50%{opacity:.55}}
+@keyframes fd-spin{to{transform:rotate(360deg)}}
+@keyframes fd-bar{0%{transform:translateX(-100%) scaleX(.4)}50%{transform:translateX(20%) scaleX(.7)}100%{transform:translateX(140%) scaleX(.4)}}
+@keyframes fd-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+@keyframes fd-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
+
+.fd-skel{position:relative;overflow:hidden;background:var(--skeleton-base);border-radius:var(--r-sm);background-image:linear-gradient(100deg,transparent 20%,var(--skeleton-sheen) 50%,transparent 80%);background-size:220% 100%;background-repeat:no-repeat;animation:fd-sheen var(--skeleton-dur) linear infinite;color:transparent!important;user-select:none;pointer-events:none}
+.fd-skel-text{height:1em;border-radius:var(--r-xs);margin:.27em 0}
+.fd-skel-circle{border-radius:var(--r-full)}
+.fd-skel-block{border-radius:var(--r-md)}
+.fd-skel-card{border-radius:var(--r-lg)}
+
+/* data present, refresh in flight — stays readable, refuses input */
+.fd-stale{opacity:.52;filter:saturate(.7);pointer-events:none;transition:opacity var(--dur-base) var(--ease),filter var(--dur-base) var(--ease)}
+.fd-stale-region{position:relative}
+.fd-stale-region::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,var(--skeleton-sheen) 50%,transparent 70%);background-size:220% 100%;background-repeat:no-repeat;animation:fd-sheen var(--skeleton-dur) linear infinite;pointer-events:none}
+.fd-arrived{animation:fd-rise var(--dur-slow) var(--ease-out) both}
+
+.fd-spinner{display:inline-block;width:16px;height:16px;border-radius:var(--r-full);border:2px solid currentColor;border-right-color:transparent;opacity:.85;animation:fd-spin 620ms linear infinite}
+.fd-spinner-lg{width:26px;height:26px;border-width:2.5px}
+
+.fd-progress{position:relative;height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
+.fd-progress-fill{height:100%;border-radius:inherit;background:var(--grad-primary);transition:width var(--dur-slow) var(--ease)}
+.fd-progress-indeterminate .fd-progress-fill{width:40%;animation:fd-bar 1200ms var(--ease) infinite}
+
+/* top-of-app route loader */
+.fd-topload{position:absolute;inset:0 0 auto;height:2px;background:transparent;overflow:hidden}
+.fd-topload::after{content:"";position:absolute;inset:0;background:var(--grad-brand-soft);animation:fd-bar 1100ms var(--ease) infinite}
+@media (prefers-reduced-motion:reduce){
+  .fd-skel,.fd-stale-region::after,.fd-topload::after,.fd-progress-indeterminate .fd-progress-fill{animation:fd-pulse 1.6s ease-in-out infinite}
+  .fd-spinner{animation-duration:1.6s}
+  .fd-arrived{animation:none}
+}

package/styles/foundations.css

@@ -1,230 +1,46 @@
-/* Vendored from the flytedesk Design System's foundations/base.css. */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-html {
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  background: var(--page);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: var(--body-size);
-  line-height: var(--body-lh);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote {
-  margin: 0;
-}
-img,
-svg,
-video {
-  display: block;
-  max-width: 100%;
-}
-button,
-input,
-select,
-textarea {
-  font: inherit;
-  color: inherit;
-}
-a {
-  color: var(--link);
-  text-decoration: none;
-  transition: color var(--dur-fast) var(--ease);
-}
-a:hover {
-  color: var(--link-hover);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible,
-[tabindex]:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-::selection {
-  background: var(--selection-bg);
-  color: var(--selection-text);
-}
-hr {
-  border: 0;
-  border-top: 1px solid var(--border);
-  margin: 0;
-}
-
-.fd-h1 {
-  font-size: var(--h1-size);
-  line-height: var(--h1-lh);
-  letter-spacing: var(--h1-track);
-  font-weight: var(--w-semibold);
-}
-.fd-h2 {
-  font-size: var(--h2-size);
-  line-height: var(--h2-lh);
-  letter-spacing: var(--h2-track);
-  font-weight: var(--w-semibold);
-}
-.fd-h3 {
-  font-size: var(--h3-size);
-  line-height: var(--h3-lh);
-  letter-spacing: var(--h3-track);
-  font-weight: var(--w-semibold);
-}
-.fd-h4 {
-  font-size: var(--h4-size);
-  line-height: var(--h4-lh);
-  letter-spacing: var(--h4-track);
-  font-weight: var(--w-semibold);
-}
-.fd-body-lg {
-  font-size: var(--body-lg-size);
-  line-height: var(--body-lg-lh);
-}
-.fd-body {
-  font-size: var(--body-size);
-  line-height: var(--body-lh);
-}
-.fd-body-sm {
-  font-size: var(--body-sm-size);
-  line-height: var(--body-sm-lh);
-}
-.fd-label-lg {
-  font-size: var(--label-lg-size);
-  line-height: var(--label-lg-lh);
-  letter-spacing: var(--label-lg-track);
-  font-weight: var(--w-semibold);
-}
-.fd-label {
-  font-size: var(--label-size);
-  line-height: var(--label-lh);
-  letter-spacing: var(--label-track);
-  font-weight: var(--w-semibold);
-}
-.fd-mono {
-  font-family: var(--font-mono);
-  font-size: var(--mono-size);
-  line-height: var(--mono-lh);
-  font-weight: var(--w-medium);
-}
-.fd-tabular {
-  font-variant-numeric: tabular-nums lining-nums;
-}
-.fd-muted {
-  color: var(--text-muted);
-}
-.fd-secondary {
-  color: var(--text-2);
-}
-.fd-sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* --- range slider ----------------------------------------------------- */
-.fd-range {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: var(--s-4);
-  border-radius: var(--r-full);
-  background: var(--border);
-  outline: none;
-  cursor: pointer;
-}
-.fd-range::-webkit-slider-runnable-track {
-  height: var(--s-4);
-  border-radius: var(--r-full);
-  background: transparent;
-}
-.fd-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: var(--s-16);
-  height: var(--s-16);
-  border-radius: var(--r-full);
-  background: var(--brand);
-  border: 2px solid var(--surface);
-  box-shadow: var(--e-1);
-  cursor: pointer;
-  margin-top: calc((var(--s-4) - var(--s-16)) / 2);
-}
-.fd-range::-moz-range-track {
-  height: var(--s-4);
-  border-radius: var(--r-full);
-  background: transparent;
-}
-.fd-range::-moz-range-thumb {
-  width: var(--s-16);
-  height: var(--s-16);
-  border-radius: var(--r-full);
-  background: var(--brand);
-  border: 2px solid var(--surface);
-  box-shadow: var(--e-1);
-  cursor: pointer;
-}
-.fd-range:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.fd-range:disabled::-webkit-slider-thumb,
-.fd-range:disabled::-moz-range-thumb {
-  cursor: not-allowed;
-}
-.fd-range:focus-visible::-webkit-slider-thumb {
-  box-shadow: var(--focus-ring);
-}
-.fd-range:focus-visible::-moz-range-thumb {
-  box-shadow: var(--focus-ring);
-}
+/* Vendored from the flytedesk Design System (Claude Design project
+   "flytedesk Design System"), foundations/base.css verbatim.
+   Source of truth stays the Design System project — re-sync by hand if it
+   changes upstream. */
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%}
+body{margin:0;background:var(--page);color:var(--text);font-family:var(--font-sans);font-size:var(--body-size);line-height:var(--body-lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
+img,svg,video{display:block;max-width:100%}
+button,input,select,textarea{font:inherit;color:inherit}
+a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
+a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:2px}
+a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+::selection{background:var(--selection-bg);color:var(--selection-text)}
+hr{border:0;border-top:1px solid var(--border);margin:0}
 
-/* Two overlapping <input type="range"> for RangeSlider: each input stays
-   transparent so the custom track div underneath does the drawing, and only
-   the thumb itself is clickable so both handles remain independently
-   reachable near the edges. */
-.fd-range-multi {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: var(--s-16);
-  margin: 0;
-  background: transparent;
-  pointer-events: none;
-}
-.fd-range-multi::-webkit-slider-runnable-track {
-  background: transparent;
-}
-.fd-range-multi::-moz-range-track {
-  background: transparent;
-}
-.fd-range-multi::-webkit-slider-thumb {
-  pointer-events: auto;
-}
-.fd-range-multi::-moz-range-thumb {
-  pointer-events: auto;
+/* --- type utilities --- */
+.fd-display-1{font-size:var(--display-1-size);line-height:var(--display-1-lh);letter-spacing:var(--display-1-track);font-weight:var(--w-bold);color:var(--display-ink)}
+.fd-display-2{font-size:var(--display-2-size);line-height:var(--display-2-lh);letter-spacing:var(--display-2-track);font-weight:var(--w-bold);color:var(--display-ink)}
+.fd-display-3{font-size:var(--display-3-size);line-height:var(--display-3-lh);letter-spacing:var(--display-3-track);font-weight:var(--w-bold);color:var(--display-ink)}
+.fd-h1{font-size:var(--h1-size);line-height:var(--h1-lh);letter-spacing:var(--h1-track);font-weight:var(--w-semibold)}
+.fd-h2{font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-track);font-weight:var(--w-semibold)}
+.fd-h3{font-size:var(--h3-size);line-height:var(--h3-lh);letter-spacing:var(--h3-track);font-weight:var(--w-semibold)}
+.fd-h4{font-size:var(--h4-size);line-height:var(--h4-lh);letter-spacing:var(--h4-track);font-weight:var(--w-semibold)}
+.fd-body-lg{font-size:var(--body-lg-size);line-height:var(--body-lg-lh)}
+.fd-body{font-size:var(--body-size);line-height:var(--body-lh)}
+.fd-body-sm{font-size:var(--body-sm-size);line-height:var(--body-sm-lh)}
+.fd-label-lg{font-size:var(--label-lg-size);line-height:var(--label-lg-lh);letter-spacing:var(--label-lg-track);font-weight:var(--w-semibold)}
+.fd-label{font-size:var(--label-size);line-height:var(--label-lh);letter-spacing:var(--label-track);font-weight:var(--w-semibold)}
+.fd-overline{font-size:var(--overline-size);line-height:var(--overline-lh);letter-spacing:var(--overline-track);font-weight:var(--w-bold);text-transform:uppercase}
+.fd-num-hero{font-size:var(--num-hero-size);line-height:var(--num-hero-lh);letter-spacing:var(--num-hero-track);font-weight:var(--w-bold);font-variant-numeric:tabular-nums lining-nums}
+.fd-num{font-size:var(--num-size);line-height:var(--num-lh);font-weight:var(--w-medium);font-variant-numeric:tabular-nums lining-nums}
+.fd-mono{font-family:var(--font-mono);font-size:var(--mono-size);line-height:var(--mono-lh);font-weight:var(--w-medium)}
+.fd-tabular{font-variant-numeric:tabular-nums lining-nums}
+.fd-muted{color:var(--text-muted)}
+.fd-secondary{color:var(--text-2)}
+.fd-prose{max-width:var(--measure-prose);text-wrap:pretty}
+.fd-lede{max-width:var(--measure-lede);text-wrap:pretty}
+.fd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
+@media (max-width:768px){
+  .fd-display-1{font-size:clamp(38px,10vw,52px)}
+  .fd-display-2{font-size:clamp(32px,8vw,40px)}
+  .fd-display-3{font-size:30px}
+  .fd-h1{font-size:24px}
+  .fd-num-hero{font-size:34px}
 }