@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/wheelpicker.css

@@ -0,0 +1,68 @@
+.wheelpicker {
+  
+    position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
+    background: var(--bg-surface); font-family: var(--font-sans);
+
+    /* the band the selected row sits in; behind the items, never hit-tested */
+    & .wheelpicker-indicator {
+      position: absolute; z-index: 0; inset-inline: var(--space-4); top: 50%;
+      transform: translateY(-50%); border-radius: var(--radius-md);
+      background: var(--bg-neutral-weak); pointer-events: none;
+    }
+
+    /* fades the rows furthest from the centre, so the column reads as a wheel
+       rather than a list. 40% of the viewport, capped, top and bottom. */
+    & .wheelpicker-fog {
+      position: relative; z-index: 1; height: 100%; overflow: hidden;
+      mask-image: linear-gradient(
+        to bottom,
+        transparent 0,
+        #000 var(--wheelpicker-fog),
+        #000 calc(100% - var(--wheelpicker-fog)),
+        transparent 100%
+      );
+    }
+    & .wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
+
+    & .wheelpicker-column {
+      box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%;
+      overflow-x: hidden; overflow-y: auto;
+      overscroll-behavior-y: contain; overscroll-behavior-x: none;
+      scroll-snap-type: y mandatory; touch-action: pan-y;
+      scrollbar-width: none; -ms-overflow-style: none; outline: none;
+      padding-block: var(--wheelpicker-offset);
+    }
+    & .wheelpicker-column::-webkit-scrollbar { display: none; }
+
+    & .wheelpicker-item {
+      display: flex; align-items: center; justify-content: center;
+      scroll-snap-align: center; user-select: none; white-space: nowrap;
+      padding-inline: var(--space-4); color: var(--fg-disabled);
+      background: none; border: none; font: inherit; cursor: pointer;
+    }
+    & .wheelpicker-item[data-selected] { color: var(--fg-primary); }
+
+    /* the ring is drawn on the SELECTED row, and only for keyboard focus:
+       a pointer user has just tapped the row they meant and does not need it */
+    & .wheelpicker-column:focus-visible .wheelpicker-item[data-selected] {
+      outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
+      border-radius: var(--radius-md);
+    }
+  
+}
+.wheelpicker--size_small {
+  
+        height: 180px; --wheelpicker-offset: 72px;
+        --wheelpicker-fog: min(40%, 108px);
+        & .wheelpicker-indicator { height: 36px; }
+        & .wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
+      
+}
+.wheelpicker--size_medium {
+  
+        height: 220px; --wheelpicker-offset: 88px;
+        --wheelpicker-fog: min(40%, 132px);
+        & .wheelpicker-indicator { height: 44px; }
+        & .wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
+      
+}

package/dist/wheelpicker.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface WheelpickerVariants {
+  size?: "small" | "medium";
+}
+
+export declare const wheelpickerRecipe: RecipeFn<{ size: { small: string; medium: string } }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -21,264 +21,350 @@
     "attio",
     "tokens"
   ],
-  "main": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./styles.css": "./dist/styles.css",
     "./base.css": "./dist/base.css",
     "./accordion": {
       "types": "./dist/types/components/accordion/index.d.ts",
-      "import": "./dist/esm/components/accordion/index.js"
+      "import": "./dist/esm/components/accordion/index.js",
+      "require": "./dist/cjs/components/accordion/index.js"
     },
     "./avatar": {
       "types": "./dist/types/components/avatar/index.d.ts",
-      "import": "./dist/esm/components/avatar/index.js"
+      "import": "./dist/esm/components/avatar/index.js",
+      "require": "./dist/cjs/components/avatar/index.js"
     },
     "./avatargroup": {
       "types": "./dist/types/components/avatargroup/index.d.ts",
-      "import": "./dist/esm/components/avatargroup/index.js"
+      "import": "./dist/esm/components/avatargroup/index.js",
+      "require": "./dist/cjs/components/avatargroup/index.js"
     },
     "./badge": {
       "types": "./dist/types/components/badge/index.d.ts",
-      "import": "./dist/esm/components/badge/index.js"
+      "import": "./dist/esm/components/badge/index.js",
+      "require": "./dist/cjs/components/badge/index.js"
     },
     "./barchart": {
       "types": "./dist/types/components/barchart/index.d.ts",
-      "import": "./dist/esm/components/barchart/index.js"
+      "import": "./dist/esm/components/barchart/index.js",
+      "require": "./dist/cjs/components/barchart/index.js"
     },
     "./breadcrumb": {
       "types": "./dist/types/components/breadcrumb/index.d.ts",
-      "import": "./dist/esm/components/breadcrumb/index.js"
+      "import": "./dist/esm/components/breadcrumb/index.js",
+      "require": "./dist/cjs/components/breadcrumb/index.js"
     },
     "./bulkbar": {
       "types": "./dist/types/components/bulkbar/index.d.ts",
-      "import": "./dist/esm/components/bulkbar/index.js"
+      "import": "./dist/esm/components/bulkbar/index.js",
+      "require": "./dist/cjs/components/bulkbar/index.js"
     },
     "./button": {
       "types": "./dist/types/components/button/index.d.ts",
-      "import": "./dist/esm/components/button/index.js"
+      "import": "./dist/esm/components/button/index.js",
+      "require": "./dist/cjs/components/button/index.js"
     },
     "./callout": {
       "types": "./dist/types/components/callout/index.d.ts",
-      "import": "./dist/esm/components/callout/index.js"
+      "import": "./dist/esm/components/callout/index.js",
+      "require": "./dist/cjs/components/callout/index.js"
     },
     "./card": {
       "types": "./dist/types/components/card/index.d.ts",
-      "import": "./dist/esm/components/card/index.js"
+      "import": "./dist/esm/components/card/index.js",
+      "require": "./dist/cjs/components/card/index.js"
     },
     "./checkbox": {
       "types": "./dist/types/components/checkbox/index.d.ts",
-      "import": "./dist/esm/components/checkbox/index.js"
+      "import": "./dist/esm/components/checkbox/index.js",
+      "require": "./dist/cjs/components/checkbox/index.js"
     },
     "./contextmenu": {
       "types": "./dist/types/components/contextmenu/index.d.ts",
-      "import": "./dist/esm/components/contextmenu/index.js"
+      "import": "./dist/esm/components/contextmenu/index.js",
+      "require": "./dist/cjs/components/contextmenu/index.js"
     },
     "./datatable": {
       "types": "./dist/types/components/datatable/index.d.ts",
-      "import": "./dist/esm/components/datatable/index.js"
+      "import": "./dist/esm/components/datatable/index.js",
+      "require": "./dist/cjs/components/datatable/index.js"
     },
     "./datepicker": {
       "types": "./dist/types/components/datepicker/index.d.ts",
-      "import": "./dist/esm/components/datepicker/index.js"
+      "import": "./dist/esm/components/datepicker/index.js",
+      "require": "./dist/cjs/components/datepicker/index.js"
+    },
+    "./datepickerfield": {
+      "types": "./dist/types/components/datepickerfield/index.d.ts",
+      "import": "./dist/esm/components/datepickerfield/index.js",
+      "require": "./dist/cjs/components/datepickerfield/index.js"
     },
     "./dialog": {
       "types": "./dist/types/components/dialog/index.d.ts",
-      "import": "./dist/esm/components/dialog/index.js"
+      "import": "./dist/esm/components/dialog/index.js",
+      "require": "./dist/cjs/components/dialog/index.js"
     },
     "./divider": {
       "types": "./dist/types/components/divider/index.d.ts",
-      "import": "./dist/esm/components/divider/index.js"
+      "import": "./dist/esm/components/divider/index.js",
+      "require": "./dist/cjs/components/divider/index.js"
     },
     "./donutchart": {
       "types": "./dist/types/components/donutchart/index.d.ts",
-      "import": "./dist/esm/components/donutchart/index.js"
+      "import": "./dist/esm/components/donutchart/index.js",
+      "require": "./dist/cjs/components/donutchart/index.js"
     },
     "./drawer": {
       "types": "./dist/types/components/drawer/index.d.ts",
-      "import": "./dist/esm/components/drawer/index.js"
+      "import": "./dist/esm/components/drawer/index.js",
+      "require": "./dist/cjs/components/drawer/index.js"
     },
     "./emptystate": {
       "types": "./dist/types/components/emptystate/index.d.ts",
-      "import": "./dist/esm/components/emptystate/index.js"
+      "import": "./dist/esm/components/emptystate/index.js",
+      "require": "./dist/cjs/components/emptystate/index.js"
     },
     "./formfield": {
       "types": "./dist/types/components/formfield/index.d.ts",
-      "import": "./dist/esm/components/formfield/index.js"
+      "import": "./dist/esm/components/formfield/index.js",
+      "require": "./dist/cjs/components/formfield/index.js"
     },
     "./input": {
       "types": "./dist/types/components/input/index.d.ts",
-      "import": "./dist/esm/components/input/index.js"
+      "import": "./dist/esm/components/input/index.js",
+      "require": "./dist/cjs/components/input/index.js"
     },
     "./kbd": {
       "types": "./dist/types/components/kbd/index.d.ts",
-      "import": "./dist/esm/components/kbd/index.js"
+      "import": "./dist/esm/components/kbd/index.js",
+      "require": "./dist/cjs/components/kbd/index.js"
     },
     "./linechart": {
       "types": "./dist/types/components/linechart/index.d.ts",
-      "import": "./dist/esm/components/linechart/index.js"
+      "import": "./dist/esm/components/linechart/index.js",
+      "require": "./dist/cjs/components/linechart/index.js"
     },
     "./menu": {
       "types": "./dist/types/components/menu/index.d.ts",
-      "import": "./dist/esm/components/menu/index.js"
+      "import": "./dist/esm/components/menu/index.js",
+      "require": "./dist/cjs/components/menu/index.js"
     },
     "./multiselect": {
       "types": "./dist/types/components/multiselect/index.d.ts",
-      "import": "./dist/esm/components/multiselect/index.js"
+      "import": "./dist/esm/components/multiselect/index.js",
+      "require": "./dist/cjs/components/multiselect/index.js"
     },
     "./popover": {
       "types": "./dist/types/components/popover/index.d.ts",
-      "import": "./dist/esm/components/popover/index.js"
+      "import": "./dist/esm/components/popover/index.js",
+      "require": "./dist/cjs/components/popover/index.js"
     },
     "./progress": {
       "types": "./dist/types/components/progress/index.d.ts",
-      "import": "./dist/esm/components/progress/index.js"
+      "import": "./dist/esm/components/progress/index.js",
+      "require": "./dist/cjs/components/progress/index.js"
     },
     "./radiogroup": {
       "types": "./dist/types/components/radiogroup/index.d.ts",
-      "import": "./dist/esm/components/radiogroup/index.js"
+      "import": "./dist/esm/components/radiogroup/index.js",
+      "require": "./dist/cjs/components/radiogroup/index.js"
+    },
+    "./resizablepanel": {
+      "types": "./dist/types/components/resizablepanel/index.d.ts",
+      "import": "./dist/esm/components/resizablepanel/index.js",
+      "require": "./dist/cjs/components/resizablepanel/index.js"
     },
     "./segmented": {
       "types": "./dist/types/components/segmented/index.d.ts",
-      "import": "./dist/esm/components/segmented/index.js"
+      "import": "./dist/esm/components/segmented/index.js",
+      "require": "./dist/cjs/components/segmented/index.js"
     },
     "./select": {
       "types": "./dist/types/components/select/index.d.ts",
-      "import": "./dist/esm/components/select/index.js"
+      "import": "./dist/esm/components/select/index.js",
+      "require": "./dist/cjs/components/select/index.js"
     },
     "./skeleton": {
       "types": "./dist/types/components/skeleton/index.d.ts",
-      "import": "./dist/esm/components/skeleton/index.js"
+      "import": "./dist/esm/components/skeleton/index.js",
+      "require": "./dist/cjs/components/skeleton/index.js"
     },
     "./spinner": {
       "types": "./dist/types/components/spinner/index.d.ts",
-      "import": "./dist/esm/components/spinner/index.js"
+      "import": "./dist/esm/components/spinner/index.js",
+      "require": "./dist/cjs/components/spinner/index.js"
     },
     "./stagebar": {
       "types": "./dist/types/components/stagebar/index.d.ts",
-      "import": "./dist/esm/components/stagebar/index.js"
+      "import": "./dist/esm/components/stagebar/index.js",
+      "require": "./dist/cjs/components/stagebar/index.js"
     },
     "./statcard": {
       "types": "./dist/types/components/statcard/index.d.ts",
-      "import": "./dist/esm/components/statcard/index.js"
+      "import": "./dist/esm/components/statcard/index.js",
+      "require": "./dist/cjs/components/statcard/index.js"
     },
     "./switch": {
       "types": "./dist/types/components/switch/index.d.ts",
-      "import": "./dist/esm/components/switch/index.js"
+      "import": "./dist/esm/components/switch/index.js",
+      "require": "./dist/cjs/components/switch/index.js"
     },
     "./table": {
       "types": "./dist/types/components/table/index.d.ts",
-      "import": "./dist/esm/components/table/index.js"
+      "import": "./dist/esm/components/table/index.js",
+      "require": "./dist/cjs/components/table/index.js"
     },
     "./tabletoolbar": {
       "types": "./dist/types/components/tabletoolbar/index.d.ts",
-      "import": "./dist/esm/components/tabletoolbar/index.js"
+      "import": "./dist/esm/components/tabletoolbar/index.js",
+      "require": "./dist/cjs/components/tabletoolbar/index.js"
     },
     "./tabs": {
       "types": "./dist/types/components/tabs/index.d.ts",
-      "import": "./dist/esm/components/tabs/index.js"
+      "import": "./dist/esm/components/tabs/index.js",
+      "require": "./dist/cjs/components/tabs/index.js"
     },
     "./textarea": {
       "types": "./dist/types/components/textarea/index.d.ts",
-      "import": "./dist/esm/components/textarea/index.js"
+      "import": "./dist/esm/components/textarea/index.js",
+      "require": "./dist/cjs/components/textarea/index.js"
     },
     "./toast": {
       "types": "./dist/types/components/toast/index.d.ts",
-      "import": "./dist/esm/components/toast/index.js"
+      "import": "./dist/esm/components/toast/index.js",
+      "require": "./dist/cjs/components/toast/index.js"
     },
     "./tooltip": {
       "types": "./dist/types/components/tooltip/index.d.ts",
-      "import": "./dist/esm/components/tooltip/index.js"
+      "import": "./dist/esm/components/tooltip/index.js",
+      "require": "./dist/cjs/components/tooltip/index.js"
+    },
+    "./wheelpicker": {
+      "types": "./dist/types/components/wheelpicker/index.d.ts",
+      "import": "./dist/esm/components/wheelpicker/index.js",
+      "require": "./dist/cjs/components/wheelpicker/index.js"
     },
     "./appshell": {
       "types": "./dist/types/product/appshell/index.d.ts",
-      "import": "./dist/esm/product/appshell/index.js"
+      "import": "./dist/esm/product/appshell/index.js",
+      "require": "./dist/cjs/product/appshell/index.js"
     },
     "./board": {
       "types": "./dist/types/product/board/index.d.ts",
-      "import": "./dist/esm/product/board/index.js"
+      "import": "./dist/esm/product/board/index.js",
+      "require": "./dist/cjs/product/board/index.js"
     },
     "./command": {
       "types": "./dist/types/product/command/index.d.ts",
-      "import": "./dist/esm/product/command/index.js"
+      "import": "./dist/esm/product/command/index.js",
+      "require": "./dist/cjs/product/command/index.js"
     },
     "./entitycard": {
       "types": "./dist/types/product/entitycard/index.d.ts",
-      "import": "./dist/esm/product/entitycard/index.js"
+      "import": "./dist/esm/product/entitycard/index.js",
+      "require": "./dist/cjs/product/entitycard/index.js"
     },
     "./flowcanvas": {
       "types": "./dist/types/product/flowcanvas/index.d.ts",
-      "import": "./dist/esm/product/flowcanvas/index.js"
+      "import": "./dist/esm/product/flowcanvas/index.js",
+      "require": "./dist/cjs/product/flowcanvas/index.js"
     },
     "./inbox": {
       "types": "./dist/types/product/inbox/index.d.ts",
-      "import": "./dist/esm/product/inbox/index.js"
+      "import": "./dist/esm/product/inbox/index.js",
+      "require": "./dist/cjs/product/inbox/index.js"
     },
     "./listpage": {
       "types": "./dist/types/product/listpage/index.d.ts",
-      "import": "./dist/esm/product/listpage/index.js"
+      "import": "./dist/esm/product/listpage/index.js",
+      "require": "./dist/cjs/product/listpage/index.js"
     },
     "./navitem": {
       "types": "./dist/types/product/navitem/index.d.ts",
-      "import": "./dist/esm/product/navitem/index.js"
+      "import": "./dist/esm/product/navitem/index.js",
+      "require": "./dist/cjs/product/navitem/index.js"
     },
     "./onboarding": {
       "types": "./dist/types/product/onboarding/index.d.ts",
-      "import": "./dist/esm/product/onboarding/index.js"
+      "import": "./dist/esm/product/onboarding/index.js",
+      "require": "./dist/cjs/product/onboarding/index.js"
     },
     "./recordpage": {
       "types": "./dist/types/product/recordpage/index.d.ts",
-      "import": "./dist/esm/product/recordpage/index.js"
+      "import": "./dist/esm/product/recordpage/index.js",
+      "require": "./dist/cjs/product/recordpage/index.js"
     },
     "./recordpanel": {
       "types": "./dist/types/product/recordpanel/index.d.ts",
-      "import": "./dist/esm/product/recordpanel/index.js"
+      "import": "./dist/esm/product/recordpanel/index.js",
+      "require": "./dist/cjs/product/recordpanel/index.js"
     },
     "./recordstable": {
       "types": "./dist/types/product/recordstable/index.d.ts",
-      "import": "./dist/esm/product/recordstable/index.js"
+      "import": "./dist/esm/product/recordstable/index.js",
+      "require": "./dist/cjs/product/recordstable/index.js"
     },
     "./richtext": {
       "types": "./dist/types/product/richtext/index.d.ts",
-      "import": "./dist/esm/product/richtext/index.js"
+      "import": "./dist/esm/product/richtext/index.js",
+      "require": "./dist/cjs/product/richtext/index.js"
     },
     "./settingssection": {
       "types": "./dist/types/product/settingssection/index.d.ts",
-      "import": "./dist/esm/product/settingssection/index.js"
+      "import": "./dist/esm/product/settingssection/index.js",
+      "require": "./dist/cjs/product/settingssection/index.js"
     },
     "./settingsshell": {
       "types": "./dist/types/product/settingsshell/index.d.ts",
-      "import": "./dist/esm/product/settingsshell/index.js"
+      "import": "./dist/esm/product/settingsshell/index.js",
+      "require": "./dist/cjs/product/settingsshell/index.js"
     },
     "./sidebar": {
       "types": "./dist/types/product/sidebar/index.d.ts",
-      "import": "./dist/esm/product/sidebar/index.js"
+      "import": "./dist/esm/product/sidebar/index.js",
+      "require": "./dist/cjs/product/sidebar/index.js"
     },
     "./tasklist": {
       "types": "./dist/types/product/tasklist/index.d.ts",
-      "import": "./dist/esm/product/tasklist/index.js"
+      "import": "./dist/esm/product/tasklist/index.js",
+      "require": "./dist/cjs/product/tasklist/index.js"
     },
     "./trialbanner": {
       "types": "./dist/types/product/trialbanner/index.d.ts",
-      "import": "./dist/esm/product/trialbanner/index.js"
+      "import": "./dist/esm/product/trialbanner/index.js",
+      "require": "./dist/cjs/product/trialbanner/index.js"
     },
     "./viewtoggle": {
       "types": "./dist/types/product/viewtoggle/index.d.ts",
-      "import": "./dist/esm/product/viewtoggle/index.js"
+      "import": "./dist/esm/product/viewtoggle/index.js",
+      "require": "./dist/cjs/product/viewtoggle/index.js"
     },
     "./tokens": {
       "types": "./dist/types/tokens/index.d.ts",
-      "import": "./dist/esm/tokens/index.js"
+      "import": "./dist/esm/tokens/index.js",
+      "require": "./dist/cjs/tokens/index.js"
     },
     "./core": {
       "types": "./dist/types/core/index.d.ts",
-      "import": "./dist/esm/core/index.js"
-    }
+      "import": "./dist/esm/core/index.js",
+      "require": "./dist/cjs/core/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./native": {
+      "types": "./dist/native/tokens.d.ts",
+      "import": "./dist/native/tokens.js",
+      "require": "./dist/native/tokens.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -288,14 +374,18 @@
   "scripts": {
     "build:css": "bun run build.mjs",
     "build:types": "tsc -p tsconfig.build.json",
-    "build": "bun run build:css && bun run build:esm && bun run build:types",
+    "build": "bun run build:css && bun run build:tokens && bun run build:esm && bun run build:cjs && bun run build:types",
     "check:dist": "bun scripts/check-dist.mjs",
     "prepublishOnly": "bun run build && bun run check:dist",
     "typecheck": "tsc --noEmit",
     "lint": "biome check .",
     "test": "bun test",
     "spec": "bun build/spec-check.mjs",
-    "build:esm": "tsc -p tsconfig.esm.json && bun scripts/fix-esm-extensions.mjs"
+    "ssr": "bun scripts/ssr-check.tsx",
+    "contrast": "bun scripts/contrast-page.tsx",
+    "build:esm": "tsc -p tsconfig.esm.json && bun scripts/fix-esm-extensions.mjs",
+    "build:cjs": "tsc -p tsconfig.cjs.json && bun scripts/finish-cjs.mjs",
+    "build:tokens": "bun build/emit-tokens.mjs"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -304,6 +394,8 @@
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.5",
     "@radix-ui/react-slot": "^1.3.3",
+    "@seed-design/dom-utils": "^2.1.0",
+    "@seed-design/react-date-picker": "1.2.0",
     "@zag-js/combobox": "^1.43.3",
     "@zag-js/dialog": "^1.43.3",
     "@zag-js/react": "^1.43.3",