@fibery/ui-kit 5.0.0 → 7.0.0

package/src/icons/react/view-canvas.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-canvas.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-chart.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-chart.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-dashboard.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-dashboard.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-details.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-details.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-document.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-document.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-embed.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-embed.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-feed.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-feed.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-form.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-form.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-gallery.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-gallery.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-gantt.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-gantt.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-list.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-list.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-map.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-map.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-page.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-page.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-table.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-table.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/view-timeline.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/view-timeline.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/views.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/views.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/warning-triangle-filled.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/warning-triangle-filled.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/warning-triangle.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/warning-triangle.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/warning.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/warning.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/webhooks.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/webhooks.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/icons/react/workflow.tsx

@@ -2,7 +2,7 @@
  * This file was automatically generated. Do not edit manually.
  * 
  * @see import("../svg/workflow.svg")
- * @see import("../../../scripts/generate-icons.mjs")
+ * @see import("../../../scripts/generate-icons.ts")
  */
 
 import {forwardRef} from "react";

package/src/number-input/number-input-inline-with-autosize.tsx

@@ -9,7 +9,7 @@ import {add, sub} from "./decimal";
 import {invalidInputStyle} from "./edit-unit-styles";
 import {Stack} from "./stack";
 import {StepButton, ValueWithStepperWrapper} from "./step-button";
-import {hiddenCss, inputStyle, textInlineStyle} from "./styles";
+import {hiddenCss, inputStyle, pillInputStyle, textInlineStyle} from "./styles";
 import type {NumberInputProps, Value} from "./types";
 import {formatValue, getStep, parseValue} from "./utils";
 
@@ -38,9 +38,16 @@ const inputCss = css`
   }
 `;
 
+const pillCss = css`
+  input {
+    ${pillInputStyle}
+  }
+`;
+
 type Props = NumberInputProps & {
   width?: number;
   invalid?: boolean;
+  pill?: boolean;
 };
 
 export const NumberInputInlineWithAutosize = ({
@@ -51,6 +58,7 @@ export const NumberInputInlineWithAutosize = ({
   autoFocus,
   placeholder,
   invalid,
+  pill,
   onFocus,
   onBlur,
   onChange = () => {},
@@ -128,7 +136,7 @@ export const NumberInputInlineWithAutosize = ({
           onStep={handleStep}
           onClick={stopPropagation}
           {...rest}
-          className={cx(inputCss, invalid && invalidCss)}
+          className={cx(inputCss, pill && pillCss, invalid && invalidCss)}
         />
       }
     />

package/src/number-input/styles.ts

@@ -32,6 +32,19 @@ export const inputCss = css`
   ${inputStyle}
 `;
 
+export const pillInputStyle = {
+  borderRadius: border.radius16,
+  boxShadow: "inset 0 0 0 0.5px rgb(0 0 0 / 4%)",
+
+  "&:focus": {
+    boxShadow: `${themeVars.inputBorderFocusColorThin} inset`,
+  },
+};
+
+export const pillInputCss = css`
+  ${pillInputStyle}
+`;
+
 export const textInlineStyle = {
   textWrap: "normal",
   textOverflow: "ellipsis",

package/src/number-input/text-area-auto-sized.tsx

@@ -4,15 +4,16 @@ import {useEffect, useMemo, useRef} from "react";
 
 import {invalidInputClass} from "./edit-unit-styles";
 import {Stack} from "./stack";
-import {hiddenCss, inputCss, textAreaCss} from "./styles";
+import {hiddenCss, inputCss, pillInputCss, textAreaCss} from "./styles";
 
 type Props = {
   width?: number;
   invalid?: boolean;
   autoSelect?: boolean;
+  pill?: boolean;
 } & React.ComponentProps<"textarea">;
 
-export const TextAreaAutoSized = ({value, placeholder, invalid, autoSelect, ...rest}: Props) => {
+export const TextAreaAutoSized = ({value, placeholder, invalid, autoSelect, pill, ...rest}: Props) => {
   const ref = useRef<HTMLTextAreaElement>(null);
   const initialValue = useRef(value);
 
@@ -40,7 +41,7 @@ export const TextAreaAutoSized = ({value, placeholder, invalid, autoSelect, ...r
           placeholder={placeholder}
           onClick={stopPropagation}
           {...rest}
-          className={cx(inputCss, textAreaCss, invalid && invalidInputClass)}
+          className={cx(inputCss, textAreaCss, pill && pillInputCss, invalid && invalidInputClass)}
         />
       }
     />

package/src/number-input/text-input-auto-sized.tsx

@@ -4,16 +4,17 @@ import {useEffect, useMemo, useRef} from "react";
 
 import {invalidInputClass} from "./edit-unit-styles";
 import {Stack} from "./stack";
-import {hiddenCss, inputCss, textInlineCss} from "./styles";
+import {hiddenCss, inputCss, pillInputCss, textInlineCss} from "./styles";
 
 type Props = {
   value?: string;
   width?: number;
   invalid?: boolean;
   autoSelect?: boolean;
+  pill?: boolean;
 } & Omit<React.ComponentProps<"input">, "value">;
 
-export const TextInputAutoSized = ({value, placeholder, invalid, autoSelect, ...rest}: Props) => {
+export const TextInputAutoSized = ({value, placeholder, invalid, autoSelect, pill, ...rest}: Props) => {
   const ref = useRef<HTMLInputElement>(null);
 
   const hiddenValue = useMemo(() => {
@@ -42,7 +43,7 @@ export const TextInputAutoSized = ({value, placeholder, invalid, autoSelect, ...
           placeholder={placeholder}
           onClick={stopPropagation}
           {...rest}
-          className={cx(inputCss, invalid && invalidInputClass)}
+          className={cx(inputCss, pill && pillInputCss, invalid && invalidInputClass)}
         />
       }
     />

package/src/palettes/inspect.defs.colors.neutral-arch.test.ts

@@ -1878,14 +1878,26 @@ test("snapshot", () => {
         "0 0 0 1px       #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
         "0 0 0 1px       #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
       ],
+      "inputBorderColorThin": [
+        "0 0 0 0.5px     #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
+        "0 0 0 0.5px     #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
+      ],
       "inputBorderFocusColor": [
         "0 0 0 1px       #C7C7C7   | hsl(none   0%  78%) | oklch(0.83 0    none)",
         "0 0 0 1px       #707070   | hsl(none   0%  44%) | oklch(0.55 0    none)",
       ],
+      "inputBorderFocusColorThin": [
+        "0 0 0 0.5px     #C7C7C7   | hsl(none   0%  78%) | oklch(0.83 0    none)",
+        "0 0 0 0.5px     #707070   | hsl(none   0%  44%) | oklch(0.55 0    none)",
+      ],
       "inputBorderHoverColor": [
         "0 0 0 1px       #DBDBDB   | hsl(none   0%  86%) | oklch(0.89 0    none)",
         "0 0 0 1px       #3D3D3D   | hsl(none   0%  24%) | oklch(0.36 0    none)",
       ],
+      "inputBorderHoverColorThin": [
+        "0 0 0 0.5px     #DBDBDB   | hsl(none   0%  86%) | oklch(0.89 0    none)",
+        "0 0 0 0.5px     #3D3D3D   | hsl(none   0%  24%) | oklch(0.36 0    none)",
+      ],
       "inputBorderWarningColor": [
         "0 0 0 1px       #F6D900   | hsl(  53 100%  48%) | oklch(0.88 0.18  99 )",
         "0 0 0 1px       #6D5F00   | hsl(  52 100%  21%) | oklch(0.48 0.1   99 )",

package/src/palettes/inspect.defs.colors.neutral-user.test.ts

@@ -1878,14 +1878,26 @@ test("snapshot", () => {
         "0 0 0 1px       #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
         "0 0 0 1px       #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
       ],
+      "inputBorderColorThin": [
+        "0 0 0 0.5px     #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
+        "0 0 0 0.5px     #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
+      ],
       "inputBorderFocusColor": [
         "0 0 0 1px       #C7C7C7   | hsl(none   0%  78%) | oklch(0.83 0    none)",
         "0 0 0 1px       #707070   | hsl(none   0%  44%) | oklch(0.55 0    none)",
       ],
+      "inputBorderFocusColorThin": [
+        "0 0 0 0.5px     #C7C7C7   | hsl(none   0%  78%) | oklch(0.83 0    none)",
+        "0 0 0 0.5px     #707070   | hsl(none   0%  44%) | oklch(0.55 0    none)",
+      ],
       "inputBorderHoverColor": [
         "0 0 0 1px       #DBDBDB   | hsl(none   0%  86%) | oklch(0.89 0    none)",
         "0 0 0 1px       #3D3D3D   | hsl(none   0%  24%) | oklch(0.36 0    none)",
       ],
+      "inputBorderHoverColorThin": [
+        "0 0 0 0.5px     #DBDBDB   | hsl(none   0%  86%) | oklch(0.89 0    none)",
+        "0 0 0 0.5px     #3D3D3D   | hsl(none   0%  24%) | oklch(0.36 0    none)",
+      ],
       "inputBorderWarningColor": [
         "0 0 0 1px       #F6D900   | hsl(  53 100%  48%) | oklch(0.88 0.18  99 )",
         "0 0 0 1px       #6D5F00   | hsl(  52 100%  21%) | oklch(0.48 0.1   99 )",

package/src/palettes/inspect.defs.colors.warm-arch.test.ts

@@ -1880,14 +1880,26 @@ test("snapshot", () => {
         "0 0 0 1px       #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
         "0 0 0 1px       #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
       ],
+      "inputBorderColorThin": [
+        "0 0 0 0.5px     #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
+        "0 0 0 0.5px     #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
+      ],
       "inputBorderFocusColor": [
         "0 0 0 1px       #CCC6BF   | hsl(  32  11%  77%) | oklch(0.83 0.01  72 )",
         "0 0 0 1px       #756F6D   | hsl(  15   4%  44%) | oklch(0.55 0.01  39 )",
       ],
+      "inputBorderFocusColorThin": [
+        "0 0 0 0.5px     #CCC6BF   | hsl(  32  11%  77%) | oklch(0.83 0.01  72 )",
+        "0 0 0 0.5px     #756F6D   | hsl(  15   4%  44%) | oklch(0.55 0.01  39 )",
+      ],
       "inputBorderHoverColor": [
         "0 0 0 1px       #E1DAD3   | hsl(  30  19%  85%) | oklch(0.89 0.01  68 )",
         "0 0 0 1px       #413C3A   | hsl(  17   6%  24%) | oklch(0.36 0.01  43 )",
       ],
+      "inputBorderHoverColorThin": [
+        "0 0 0 0.5px     #E1DAD3   | hsl(  30  19%  85%) | oklch(0.89 0.01  68 )",
+        "0 0 0 0.5px     #413C3A   | hsl(  17   6%  24%) | oklch(0.36 0.01  43 )",
+      ],
       "inputBorderWarningColor": [
         "0 0 0 1px       #F7D900   | hsl(  53 100%  48%) | oklch(0.88 0.18  99 )",
         "0 0 0 1px       #6E5F00   | hsl(  52 100%  22%) | oklch(0.49 0.1   98 )",

package/src/palettes/inspect.defs.colors.warm-user.test.ts

@@ -1880,14 +1880,26 @@ test("snapshot", () => {
         "0 0 0 1px       #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
         "0 0 0 1px       #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
       ],
+      "inputBorderColorThin": [
+        "0 0 0 0.5px     #E8E2DBCC | hsl(  32  22%  88% / 0.8 ) | oklch(0.92 0.01  72  / 0.8 )",
+        "0 0 0 0.5px     #56504E66 | hsl(  15   5%  32% / 0.4 ) | oklch(0.44 0.01  39  / 0.4 )",
+      ],
       "inputBorderFocusColor": [
         "0 0 0 1px       #CCC6BF   | hsl(  32  11%  77%) | oklch(0.83 0.01  72 )",
         "0 0 0 1px       #756F6D   | hsl(  15   4%  44%) | oklch(0.55 0.01  39 )",
       ],
+      "inputBorderFocusColorThin": [
+        "0 0 0 0.5px     #CCC6BF   | hsl(  32  11%  77%) | oklch(0.83 0.01  72 )",
+        "0 0 0 0.5px     #756F6D   | hsl(  15   4%  44%) | oklch(0.55 0.01  39 )",
+      ],
       "inputBorderHoverColor": [
         "0 0 0 1px       #E1DAD3   | hsl(  30  19%  85%) | oklch(0.89 0.01  68 )",
         "0 0 0 1px       #413C3A   | hsl(  17   6%  24%) | oklch(0.36 0.01  43 )",
       ],
+      "inputBorderHoverColorThin": [
+        "0 0 0 0.5px     #E1DAD3   | hsl(  30  19%  85%) | oklch(0.89 0.01  68 )",
+        "0 0 0 0.5px     #413C3A   | hsl(  17   6%  24%) | oklch(0.36 0.01  43 )",
+      ],
       "inputBorderWarningColor": [
         "0 0 0 1px       #F7D900   | hsl(  53 100%  48%) | oklch(0.88 0.18  99 )",
         "0 0 0 1px       #6E5F00   | hsl(  52 100%  22%) | oklch(0.49 0.1   98 )",

package/src/theming.generated.css

@@ -113,6 +113,9 @@
   --inputBorderColor: 0 0 0 1px rgba(227, 227, 227, 0.8);
   --inputBorderHoverColor: 0 0 0 1px rgb(219, 219, 219);
   --inputBorderFocusColor: 0 0 0 1px rgb(199, 199, 199);
+  --inputBorderColorThin: 0 0 0 0.5px rgba(227, 227, 227, 0.8);
+  --inputBorderHoverColorThin: 0 0 0 0.5px rgb(219, 219, 219);
+  --inputBorderFocusColorThin: 0 0 0 0.5px rgb(199, 199, 199);
   --inputBorderBlendMode: multiply;
   --inputPlaceholderTextColor: rgb(158, 158, 158);
   --inputErrorBorderColor: 0 0 0 1px rgb(175, 36, 56);
@@ -659,6 +662,9 @@
   --inputBorderColor: 0 0 0 1px rgba(82, 82, 82, 0.4);
   --inputBorderHoverColor: 0 0 0 1px rgb(61, 61, 61);
   --inputBorderFocusColor: 0 0 0 1px rgb(112, 112, 112);
+  --inputBorderColorThin: 0 0 0 0.5px rgba(82, 82, 82, 0.4);
+  --inputBorderHoverColorThin: 0 0 0 0.5px rgb(61, 61, 61);
+  --inputBorderFocusColorThin: 0 0 0 0.5px rgb(112, 112, 112);
   --inputBorderBlendMode: lighten;
   --inputPlaceholderTextColor: rgb(112, 112, 112);
   --inputErrorBorderColor: 0 0 0 1px rgb(244, 179, 179);
@@ -1206,6 +1212,9 @@
   --inputBorderColor: 0 0 0 1px rgba(232, 226, 219, 0.8);
   --inputBorderHoverColor: 0 0 0 1px rgb(225, 218, 211);
   --inputBorderFocusColor: 0 0 0 1px rgb(204, 198, 191);
+  --inputBorderColorThin: 0 0 0 0.5px rgba(232, 226, 219, 0.8);
+  --inputBorderHoverColorThin: 0 0 0 0.5px rgb(225, 218, 211);
+  --inputBorderFocusColorThin: 0 0 0 0.5px rgb(204, 198, 191);
   --inputBorderBlendMode: multiply;
   --inputPlaceholderTextColor: rgb(163, 157, 150);
   --inputErrorBorderColor: 0 0 0 1px rgb(175, 36, 54);
@@ -1752,6 +1761,9 @@
   --inputBorderColor: 0 0 0 1px rgba(86, 80, 78, 0.4);
   --inputBorderHoverColor: 0 0 0 1px rgb(65, 60, 58);
   --inputBorderFocusColor: 0 0 0 1px rgb(117, 111, 109);
+  --inputBorderColorThin: 0 0 0 0.5px rgba(86, 80, 78, 0.4);
+  --inputBorderHoverColorThin: 0 0 0 0.5px rgb(65, 60, 58);
+  --inputBorderFocusColorThin: 0 0 0 0.5px rgb(117, 111, 109);
   --inputBorderBlendMode: lighten;
   --inputPlaceholderTextColor: rgb(117, 111, 109);
   --inputErrorBorderColor: 0 0 0 1px rgb(244, 179, 178);

package/src/theming.generated.ts

@@ -113,6 +113,9 @@ export const themeVars = {
   inputBorderColor: "var(--inputBorderColor)",
   inputBorderHoverColor: "var(--inputBorderHoverColor)",
   inputBorderFocusColor: "var(--inputBorderFocusColor)",
+  inputBorderColorThin: "var(--inputBorderColorThin)",
+  inputBorderHoverColorThin: "var(--inputBorderHoverColorThin)",
+  inputBorderFocusColorThin: "var(--inputBorderFocusColorThin)",
   inputBorderBlendMode: "var(--inputBorderBlendMode)",
   inputPlaceholderTextColor: "var(--inputPlaceholderTextColor)",
   inputErrorBorderColor: "var(--inputErrorBorderColor)",
@@ -668,6 +671,9 @@ export const neutralStyles = {
     "--inputBorderColor": "0 0 0 1px rgba(227, 227, 227, 0.8)",
     "--inputBorderHoverColor": "0 0 0 1px rgb(219,219,219)",
     "--inputBorderFocusColor": "0 0 0 1px rgb(199,199,199)",
+    "--inputBorderColorThin": "0 0 0 0.5px rgba(227, 227, 227, 0.8)",
+    "--inputBorderHoverColorThin": "0 0 0 0.5px rgb(219,219,219)",
+    "--inputBorderFocusColorThin": "0 0 0 0.5px rgb(199,199,199)",
     "--inputBorderBlendMode": "multiply",
     "--inputPlaceholderTextColor": "rgb(158,158,158)",
     "--inputErrorBorderColor": "0 0 0 1px rgb(175,36,56)",
@@ -1215,6 +1221,9 @@ export const neutralStyles = {
     "--inputBorderColor": "0 0 0 1px rgba(82, 82, 82, 0.4)",
     "--inputBorderHoverColor": "0 0 0 1px rgb(61,61,61)",
     "--inputBorderFocusColor": "0 0 0 1px rgb(112,112,112)",
+    "--inputBorderColorThin": "0 0 0 0.5px rgba(82, 82, 82, 0.4)",
+    "--inputBorderHoverColorThin": "0 0 0 0.5px rgb(61,61,61)",
+    "--inputBorderFocusColorThin": "0 0 0 0.5px rgb(112,112,112)",
     "--inputBorderBlendMode": "lighten",
     "--inputPlaceholderTextColor": "rgb(112,112,112)",
     "--inputErrorBorderColor": "0 0 0 1px rgb(244,179,179)",
@@ -1764,6 +1773,9 @@ export const warmStyles = {
     "--inputBorderColor": "0 0 0 1px rgba(232, 226, 219, 0.8)",
     "--inputBorderHoverColor": "0 0 0 1px rgb(225,218,211)",
     "--inputBorderFocusColor": "0 0 0 1px rgb(204,198,191)",
+    "--inputBorderColorThin": "0 0 0 0.5px rgba(232, 226, 219, 0.8)",
+    "--inputBorderHoverColorThin": "0 0 0 0.5px rgb(225,218,211)",
+    "--inputBorderFocusColorThin": "0 0 0 0.5px rgb(204,198,191)",
     "--inputBorderBlendMode": "multiply",
     "--inputPlaceholderTextColor": "rgb(163,157,150)",
     "--inputErrorBorderColor": "0 0 0 1px rgb(175,36,54)",
@@ -2311,6 +2323,9 @@ export const warmStyles = {
     "--inputBorderColor": "0 0 0 1px rgba(86, 80, 78, 0.4)",
     "--inputBorderHoverColor": "0 0 0 1px rgb(65,60,58)",
     "--inputBorderFocusColor": "0 0 0 1px rgb(117,111,109)",
+    "--inputBorderColorThin": "0 0 0 0.5px rgba(86, 80, 78, 0.4)",
+    "--inputBorderHoverColorThin": "0 0 0 0.5px rgb(65,60,58)",
+    "--inputBorderFocusColorThin": "0 0 0 0.5px rgb(117,111,109)",
     "--inputBorderBlendMode": "lighten",
     "--inputPlaceholderTextColor": "rgb(117,111,109)",
     "--inputErrorBorderColor": "0 0 0 1px rgb(244,179,178)",

package/src/tooltip.tsx

@@ -140,6 +140,8 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title" |
   disableHoverableContent?: boolean;
   /** should keep tooltip visible after click */
   keepOnClick?: boolean;
+  /** when false, the tooltip opens on pointer hover only, never on focus */
+  openOnFocus?: boolean;
 };
 
 /**
@@ -158,8 +160,8 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       description,
       content = (title || description) && (
         <>
-          <TooltipTitle>{title}</TooltipTitle>
-          <TooltipDescription>{description}</TooltipDescription>
+          {title && <TooltipTitle>{title}</TooltipTitle>}
+          {description && <TooltipDescription>{description}</TooltipDescription>}
         </>
       ),
       side,
@@ -172,6 +174,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       visible,
       onVisibleChange,
       keepOnClick,
+      openOnFocus = true,
       disabled,
       setContentElement,
       container,
@@ -188,7 +191,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
     // Radix opens the tooltip on any focus, so we use :focus-visible to distinguish keyboard from pointer.
     // We check e.target (not currentTarget) to handle cases where the trigger wraps an inner focusable element (e.g. <span><input/></span>).
     const handleFocus = composeEventHandlers(triggerProps.onFocus, (e) => {
-      if (!e.target.matches(":focus-visible")) {
+      if (!openOnFocus || !e.target.matches(":focus-visible")) {
         suppressFocusOpenRef.current = true;
       }
     });

package/src/unit/index.tsx

@@ -1,63 +1,2 @@
-import type {CardSize} from "../card-container";
-import {themeVars} from "../design-system";
-import {UnitPrimitive} from "./primitive";
-import type {UnitPrimitiveProps} from "./types";
-
-// Try not to use UnitPrimitive directly, rather define a pattern of usage, and create own unit with the pattern.
-
-export const BasicUnit = ({
-  renderAsDiv = false,
-  onKeyDown,
-  ...props
-}: UnitPrimitiveProps & {readOnly: boolean; size: CardSize}) => {
-  if (props.size === ":card-size/cell") {
-    const bgColor = props.bgColor || themeVars.transparent;
-    return (
-      <UnitPrimitive
-        onKeyDown={onKeyDown}
-        bgColor={bgColor}
-        border={false}
-        button={false}
-        header={false}
-        tooltip={false}
-        setMinWidth={false}
-        big
-        {...props}
-      />
-    );
-  }
-
-  const bgColor = props.bgColor || props.readOnly ? themeVars.inputDisabledBgColor : themeVars.transparent;
-  return (
-    <UnitPrimitive
-      bgColor={bgColor}
-      onKeyDown={onKeyDown}
-      border={!props.readOnly}
-      button={renderAsDiv === true ? false : !props.readOnly || Boolean(props.onClick)}
-      header={props.size === ":card-size/full"}
-      tooltip={props.tooltip ?? props.size !== ":card-size/full"}
-      clickable={!props.readOnly}
-      {...props}
-    />
-  );
-};
-
-export const CellUnit = (props: UnitPrimitiveProps) => {
-  return <UnitPrimitive big={true} tooltip={false} {...props} />;
-};
-
-export const OptionUnit = (props: UnitPrimitiveProps) => {
-  return <UnitPrimitive big={true} tooltip={false} {...props} />;
-};
-
-export const HistoryUnit = (props: UnitPrimitiveProps & {size: CardSize}) => {
-  return (
-    <UnitPrimitive
-      big={props.size === ":card-size/cell"}
-      bgColor={themeVars.unitBg}
-      border={false}
-      tooltip={false}
-      {...props}
-    />
-  );
-};
+export {Unit} from "./unit";
+export type {UnitProps, UnitSize, UnitVariant} from "./unit";