@ceebee/ui 1.4.1 → 1.5.0

package/dist/styles.css

@@ -1919,13 +1919,21 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
    the ones Ant already puts in the server-rendered markup, including its variant and size classes,
    so a first paint can respect them. */
 
+/* Sizes below are Ant's own derived values, read out of a rendered control and then expressed in
+   Tokens rather than guessed: Ant lands on a spacing Token less its own border width, so
+   `space-4 - border-width` is 15px and `space-3 - border-width` is 11px. Where a variant's geometry
+   has not been measured that way, this layer states no size for it — a wrong size flickers as badly
+   as no size, and pretends to be right. */
+
 :where(.ant-btn) {
+  box-sizing: border-box;
   display: inline-flex;
   height: var(--cb-control-height-md);
   align-items: center;
   justify-content: center;
   gap: var(--cb-space-2);
-  padding-inline: var(--cb-space-4);
+  padding-block: var(--cb-space-0);
+  padding-inline: calc(var(--cb-space-4) - var(--cb-border-width));
   border: var(--cb-border-width) solid var(--cb-border-strong);
   border-radius: var(--cb-radius-sm);
   background: var(--cb-surface);
@@ -1934,20 +1942,21 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   font-size: var(--cb-text-sm);
 }
 
+/* Height and type scale come straight from the Tokens the bridge already hands Ant, so they agree.
+   The inline padding of these two sizes has not been measured, so it is left to Ant. */
 :where(.ant-btn-sm) {
   height: var(--cb-control-height-sm);
-  padding-inline: var(--cb-space-3);
   font-size: var(--cb-text-xs);
 }
 
 :where(.ant-btn-lg) {
   height: var(--cb-control-height-lg);
-  padding-inline: var(--cb-space-5);
   font-size: var(--cb-text-md);
 }
 
 :where(.ant-btn-icon-only) {
-  padding-inline: var(--cb-space-2);
+  width: var(--cb-control-height-md);
+  padding-inline: var(--cb-space-0);
 }
 
 :where(.ant-btn-block) {
@@ -1967,7 +1976,15 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   color: var(--cb-fg-on-brand);
 }
 
-:where(.ant-input, .ant-input-affix-wrapper, .ant-select .ant-select-selector) {
+/* The framed text controls. `.ant-select` carries its own box in this runtime — the inner element is
+   `.ant-select-content`, not a selector class this layer needs to name. */
+:where(.ant-input, .ant-input-affix-wrapper, .ant-select) {
+  box-sizing: border-box;
+  display: flex;
+  height: var(--cb-control-height-md);
+  align-items: center;
+  padding-block: var(--cb-space-2);
+  padding-inline: calc(var(--cb-space-3) - var(--cb-border-width));
   border: var(--cb-border-width) solid var(--cb-border-strong);
   border-radius: var(--cb-radius-sm);
   background: var(--cb-surface);
@@ -1976,10 +1993,57 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   font-size: var(--cb-text-sm);
 }
 
-/* An input inside an affix wrapper is already framed by the wrapper. */
+:where(.ant-input-lg, .ant-input-affix-wrapper-lg, .ant-select-lg) {
+  height: var(--cb-control-height-lg);
+  padding-block: calc(var(--cb-space-3) - var(--cb-border-width));
+  border-radius: var(--cb-radius-md);
+  font-size: var(--cb-text-md);
+}
+
+:where(.ant-input-sm, .ant-input-affix-wrapper-sm, .ant-select-sm) {
+  height: var(--cb-control-height-sm);
+  font-size: var(--cb-text-xs);
+}
+
+/* An input inside an affix wrapper is framed by the wrapper, so it states no box of its own. */
 :where(.ant-input-affix-wrapper .ant-input) {
+  width: 100%;
+  height: auto;
+  padding: var(--cb-space-0);
   border: none;
+  border-radius: var(--cb-radius-none);
   background: transparent;
+  font-size: inherit;
+  line-height: var(--cb-leading-normal);
+}
+
+/* The prefix sets the text's starting position, so leaving its spacing out moved the placeholder
+   sideways when Ant landed. Measured: Ant states `margin-inline-end` here, and its value is one
+   space step, mirrored on the suffix, which Ant spaces the same way. */
+:where(.ant-input-prefix, .ant-input-suffix) {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+:where(.ant-input-prefix) {
+  margin-inline-end: var(--cb-space-1);
+}
+
+:where(.ant-input-suffix) {
+  margin-inline-start: var(--cb-space-1);
+}
+
+/* `allowClear` renders its clear control on an empty field and hides it from JavaScript-built CSS.
+   Without that rule a stray clear icon is painted in every input until hydration, so the hidden
+   state is stated here too. */
+:where(.ant-input-clear-icon) {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-subtle);
+}
+
+:where(.ant-input-clear-icon-hidden) {
+  visibility: hidden;
 }
 
 /* A pseudo-element cannot live inside `:where()` — the rule would be dropped — so it sits outside
@@ -1989,15 +2053,53 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   color: var(--cb-fg-muted);
 }
 
+/* Segmented is measured at a 6px radius and 2px of inline padding, and no Token carries either
+   value — Ant derives them through its own algorithm from tokens the bridge does not feed. So this
+   states no size or radius for it, only the axis it lays out on, which it otherwise loses entirely
+   and stacks vertically, and the colours, which are Tokens. */
+/* Checkbox server-renders with no box at all until Ant lands: no border, no background, so a reader
+   sees nothing where a checkbox belongs. Ant sizes its interactive controls at half the control
+   height — `controlInteractiveSize` is `controlHeight / 2` in Ant's own token deriver, checked
+   against it — so that size is derived rather than guessed. Its 6px corner comes from
+   `borderRadiusSM`, which no Ceebee Token carries, so no radius is stated here: a square box for one
+   paint is honest, a nearly-right radius is not. */
+:where(.ant-checkbox-wrapper) {
+  display: flex;
+  align-items: center;
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
+}
+
+/* The box is `.ant-checkbox` itself in this runtime; there is no `-inner` element, and a rule
+   naming one matches nothing. It is a `span`, so it needs a block-ish display before a size means
+   anything. */
+:where(.ant-checkbox) {
+  display: inline-block;
+  flex: none;
+  width: calc(var(--cb-control-height-md) / 2);
+  height: calc(var(--cb-control-height-md) / 2);
+  border: var(--cb-border-width) solid var(--cb-border-strong);
+  background: var(--cb-surface);
+}
+
+/* Measured at one space step on each side, which is exactly the 16px the wrapper was short. */
+:where(.ant-checkbox-label) {
+  padding-inline: var(--cb-space-2);
+}
+
 :where(.ant-segmented) {
-  border-radius: var(--cb-radius-sm);
   background: var(--cb-bg-subtle);
   font-family: var(--cb-font-sans);
-  font-size: var(--cb-text-xs);
+  font-size: var(--cb-text-sm);
+}
+
+/* The options are laid out by an inner group, not by the root, so without this the control paints
+   as a vertical stack of labels. */
+:where(.ant-segmented-group) {
+  display: flex;
 }
 
 :where(.ant-segmented-item) {
-  border-radius: var(--cb-radius-sm);
   color: var(--cb-fg-muted);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,10 @@
     "./styles.css": "./dist/styles.css",
     "./skins/*.css": "./dist/skins/*.css"
   },
+  "scripts": {
+    "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
+    "lint": "tsc -p tsconfig.json --noEmit"
+  },
   "peerDependencies": {
     "@base-ui/react": "^1.7.0",
     "lucide-react": ">=0.400.0",
@@ -54,11 +58,8 @@
     "typescript": "^5.7.2"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "2.1.2",
     "antd": "6.6.1",
     "dayjs": "1.11.18"
-  },
-  "scripts": {
-    "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
-    "lint": "tsc -p tsconfig.json --noEmit"
   }
-}
+}