@fibery/ui-kit 1.40.4 → 1.42.0

package/src/select/select.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable no-use-before-define */
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {ForwardedRef, forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
 import BaseSelect, {
   ActionMeta,
   components as reactSelectComponents,
+  ControlProps,
   createFilter,
   MenuListProps,
   MenuProps,
-  ControlProps,
   mergeStyles,
   MultiValue,
   MultiValueProps,
@@ -32,7 +31,8 @@ import {Option, OptionSlow} from "./components/option";
 import {useSelectControlSettings} from "./select-control-settings-context";
 import {makeComponentsStyles, makeNonVirtualizedStyles, makeVirtualizedStyles, makeZIndexStyles} from "./styles";
 import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
-import _ from "lodash";
+import compact from "lodash/compact";
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 
 export type {
   ActionMeta,
@@ -72,6 +72,7 @@ export type SelectProps<T = unknown, U extends boolean = boolean, V extends Grou
   isCollectionMode?: U;
   disabled?: boolean;
   forbidValuesClearInCollnMode?: boolean;
+  inline?: boolean;
 };
 
 const FAST_OPTION_USAGE_THRESHOLD = 200;
@@ -122,7 +123,7 @@ function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
 }) {
   return useMemo(() => {
     return combineStyles<T, U, V>(
-      _.compact([
+      compact([
         makeComponentsStyles<T, U, V>(),
         virtualized ? makeVirtualizedStyles<T, U, V>() : makeNonVirtualizedStyles<T, U, V>(),
         zIndex ? makeZIndexStyles<T, U, V>(zIndex) : null,
@@ -141,13 +142,14 @@ export const SelectComponent = forwardRef(function Select<
     components,
     isCollectionMode,
     menuPortalTarget,
-    onKeyDown,
     styles,
     virtualized = true,
+    forbidValuesClearInCollnMode,
+    inline,
     onMenuOpen,
     onMenuClose,
     onChange,
-    forbidValuesClearInCollnMode,
+    onKeyDown,
     ...rest
   }: SelectProps<T, U, V>,
   forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
@@ -166,39 +168,35 @@ export const SelectComponent = forwardRef(function Select<
     onMenuClose && onMenuClose();
   }, [onMenuClose]);
 
-  const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(
-    (e) => {
-      switch (e.key) {
-        case "Escape":
-          // we can't rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
-          if (menuOpenState) {
-            e.stopPropagation();
-          }
-          break;
-        case "Home":
-          e.preventDefault();
-          if (e.shiftKey) {
-            (e.target as HTMLInputElement).selectionStart = 0;
-          } else {
-            (e.target as HTMLInputElement).setSelectionRange(0, 0);
-          }
-          break;
-        case "End": {
-          e.preventDefault();
-          const len = (e.target as HTMLInputElement).value.length;
-          if (e.shiftKey) {
-            (e.target as HTMLInputElement).selectionEnd = len;
-          } else {
-            (e.target as HTMLInputElement).setSelectionRange(len, len);
-          }
-          break;
+  const onKeyDownComposed = composeEventHandlers(onKeyDown, (e) => {
+    switch (e.key) {
+      case "Escape":
+        // we can't rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
+        if (menuOpenState && !inline) {
+          e.stopPropagation();
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        if (e.shiftKey) {
+          (e.target as HTMLInputElement).selectionStart = 0;
+        } else {
+          (e.target as HTMLInputElement).setSelectionRange(0, 0);
+        }
+        break;
+      case "End": {
+        e.preventDefault();
+        const len = (e.target as HTMLInputElement).value.length;
+        if (e.shiftKey) {
+          (e.target as HTMLInputElement).selectionEnd = len;
+        } else {
+          (e.target as HTMLInputElement).setSelectionRange(len, len);
         }
-        default:
+        break;
       }
-      onKeyDown && onKeyDown(e);
-    },
-    [onKeyDown, menuOpenState]
-  );
+      default:
+    }
+  });
 
   const selectRef = useRef<SelectInstance<T, U, V> | null>(null);
   const composedRef = useComposedRefs(forwardedRef, selectRef);
@@ -227,7 +225,7 @@ export const SelectComponent = forwardRef(function Select<
         tabSelectsValue={false}
         components={selectComponents}
         {...rest}
-        onKeyDown={handleKeyDown}
+        onKeyDown={onKeyDownComposed}
         onMenuOpen={onMenuOpenWrapped}
         onMenuClose={onMenuCloseWrapped}
         onChange={rest.disabled ? undefined : onChange}

package/src/select/util.ts

@@ -1,5 +1,5 @@
 import {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
-import {isObject} from "lodash";
+import isObject from "lodash/isObject";
 import {Children, createContext, ReactNode, RefObject} from "react";
 
 /**

package/src/static-palettes.ts

@@ -1,18 +1,228 @@
-import {makeDefaultPalette, type ThemePalette} from "./palette-generator";
+import {makeDefaultPalette, selectPalette, type ThemePalette} from "./palette-generator";
 
 export interface LabPalettes {
   make: () => ThemePalette;
 }
 
 export const StaticPalettes: LabPalettes[] = [
+  // warm grays (hue ~50) + orange accent (hue 15)
+  {
+    make: () => {
+      const base = selectPalette({warmLook: true, isArchitect: false});
+      return {
+        ...base,
+        key: "clawd",
+        base: [
+          null,
+          "hsl(0, 0%, 100%)", // bg-000
+          "hsl(48, 33%, 97%)", // bg-100
+          "hsl(53, 29%, 95%)", // bg-200
+          "hsl(48, 25%, 92%)", // bg-300
+          "hsl(50, 21%, 89%)", // bg-400
+          "hsl(51, 17%, 85%)", // pictogram area
+          "hsl(51, 10%, 70%)",
+          "hsl(51, 6%, 57%)",
+          "hsl(51, 3%, 44%)", // text-500
+          "hsl(55, 3%, 34%)",
+          "hsl(60, 3%, 23%)", // text-200
+          "hsl(60, 3%, 8%)", // text-000
+        ],
+        baseDark: [
+          null,
+          "hsl(60, 3%, 8%)", // bg-300
+          "hsl(30, 3%, 12%)", // bg-200
+          "hsl(60, 3%, 15%)", // bg-100
+          "hsl(60, 2%, 18%)", // bg-000
+          "hsl(60, 3%, 23%)", // pictogram-200
+          "hsl(48, 3%, 29%)", // pictogram-100
+          "hsl(50, 4%, 37%)",
+          "hsl(49, 4%, 47%)",
+          "hsl(48, 5%, 59%)", // text-400
+          "hsl(50, 7%, 67%)",
+          "hsl(50, 9%, 74%)", // text-200
+          "hsl(48, 33%, 97%)", // text-000
+        ],
+        accent: [
+          null,
+          "hsl(15, 60%, 99%)",
+          "hsl(15, 85%, 97%)",
+          "hsl(15, 80%, 94%)",
+          "hsl(15, 75%, 91%)",
+          "hsl(15, 70%, 87%)",
+          "hsl(15, 66%, 82%)",
+          "hsl(15, 62%, 74%)",
+          "hsl(15, 60%, 67%)",
+          "hsl(15, 63%, 60%)", // accent-brand
+          "hsl(15, 57%, 53%)",
+          "hsl(15, 54%, 46%)",
+          "hsl(15, 50%, 18%)",
+        ],
+        accentDark: [
+          null,
+          "hsl(16, 22%, 10%)",
+          "hsl(16, 34%, 13%)",
+          "hsl(15, 42%, 18%)",
+          "hsl(15, 46%, 22%)",
+          "hsl(15, 48%, 26%)",
+          "hsl(15, 50%, 30%)",
+          "hsl(15, 53%, 38%)",
+          "hsl(15, 56%, 48%)",
+          "hsl(15, 63%, 60%)", // accent-brand
+          "hsl(15, 65%, 66%)",
+          "hsl(15, 72%, 78%)",
+          "hsl(15, 82%, 96%)",
+        ],
+      };
+    },
+  },
+  // Console theme — pure neutral blacks + teal accent (hue 158)
+  {
+    make: () => {
+      const base = selectPalette({warmLook: true, isArchitect: false});
+      return {
+        ...base,
+        key: "clawd-console",
+        base: [
+          null,
+          "hsl(0, 0%, 99%)",
+          "hsl(0, 0%, 97%)",
+          "hsl(0, 0%, 95%)",
+          "hsl(0, 0%, 92%)",
+          "hsl(0, 0%, 88%)",
+          "hsl(0, 0%, 83%)",
+          "hsl(0, 0%, 75%)",
+          "hsl(0, 0%, 65%)",
+          "hsl(0, 0%, 48%)",
+          "hsl(0, 0%, 35%)",
+          "hsl(0, 0%, 23%)",
+          "hsl(0, 0%, 6%)",
+        ],
+        baseDark: [
+          null,
+          "hsl(0, 0%, 6%)", // bg-000
+          "hsl(0, 0%, 10%)", // bg-100
+          "hsl(0, 0%, 14%)", // bg-200
+          "hsl(0, 0%, 17%)", // bg-300
+          "hsl(0, 0%, 19%)", // bg-400
+          "hsl(0, 0%, 23%)", // bg-500
+          "hsl(0, 0%, 33%)",
+          "hsl(0, 0%, 41%)",
+          "hsl(45, 1%, 48%)", // text-500
+          "hsl(50, 1%, 65%)", // text-400
+          "hsl(30, 1%, 72%)", // text-300
+          "hsl(60, 4%, 95%)", // text-100
+        ],
+        accent: [
+          null,
+          "hsl(158, 60%, 99%)",
+          "hsl(158, 70%, 96%)",
+          "hsl(158, 66%, 92%)",
+          "hsl(158, 62%, 87%)",
+          "hsl(158, 58%, 80%)",
+          "hsl(158, 55%, 72%)",
+          "hsl(158, 58%, 60%)",
+          "hsl(158, 64%, 46%)",
+          "hsl(158, 68%, 32%)", // accent-secondary-000
+          "hsl(158, 80%, 28%)", // accent-secondary-100
+          "hsl(158, 79%, 25%)", // accent-secondary-200
+          "hsl(160, 18%, 16%)", // accent-secondary-900
+        ],
+        accentDark: [
+          null,
+          "hsl(160, 18%, 8%)",
+          "hsl(158, 36%, 10%)",
+          "hsl(158, 52%, 13%)",
+          "hsl(158, 60%, 16%)",
+          "hsl(158, 66%, 19%)",
+          "hsl(158, 70%, 22%)",
+          "hsl(158, 76%, 26%)",
+          "hsl(158, 78%, 30%)",
+          "hsl(158, 68%, 32%)", // accent-secondary-000
+          "hsl(158, 60%, 42%)",
+          "hsl(158, 50%, 58%)",
+          "hsl(158, 45%, 92%)",
+        ],
+      };
+    },
+  },
+  // Console theme variant — neutral blacks + orange accent (hue 18, darker than claude's hue 15)
+  {
+    make: () => {
+      const base = selectPalette({warmLook: true, isArchitect: false});
+      return {
+        ...base,
+        key: "clawd-console-warm",
+        base: [
+          null,
+          "hsl(0, 0%, 99%)",
+          "hsl(0, 0%, 97%)",
+          "hsl(0, 0%, 95%)",
+          "hsl(0, 0%, 92%)",
+          "hsl(0, 0%, 88%)",
+          "hsl(0, 0%, 83%)",
+          "hsl(0, 0%, 75%)",
+          "hsl(0, 0%, 65%)",
+          "hsl(0, 0%, 48%)",
+          "hsl(0, 0%, 35%)",
+          "hsl(0, 0%, 23%)",
+          "hsl(0, 0%, 6%)",
+        ],
+        baseDark: [
+          null,
+          "hsl(0, 0%, 6%)", // bg-000
+          "hsl(0, 0%, 10%)", // bg-100
+          "hsl(0, 0%, 14%)", // bg-200
+          "hsl(0, 0%, 17%)", // bg-300
+          "hsl(0, 0%, 19%)", // bg-400
+          "hsl(0, 0%, 23%)", // bg-500
+          "hsl(0, 0%, 33%)",
+          "hsl(0, 0%, 41%)",
+          "hsl(45, 1%, 48%)", // text-500
+          "hsl(50, 1%, 65%)", // text-400
+          "hsl(30, 1%, 72%)", // text-300
+          "hsl(60, 4%, 95%)", // text-100
+        ],
+        accent: [
+          null,
+          "hsl(18, 55%, 99%)",
+          "hsl(18, 78%, 96%)",
+          "hsl(18, 72%, 92%)",
+          "hsl(18, 66%, 87%)",
+          "hsl(18, 60%, 81%)",
+          "hsl(18, 56%, 73%)",
+          "hsl(18, 54%, 63%)",
+          "hsl(18, 52%, 54%)",
+          "hsl(18, 50%, 48%)", // accent-main-000
+          "hsl(18, 57%, 44%)", // accent-main-100
+          "hsl(19, 58%, 40%)", // accent-main-200
+          "hsl(16, 22%, 20%)", // accent-main-900
+        ],
+        accentDark: [
+          null,
+          "hsl(16, 22%, 10%)",
+          "hsl(17, 30%, 14%)",
+          "hsl(17, 36%, 18%)",
+          "hsl(17, 40%, 22%)",
+          "hsl(18, 44%, 27%)",
+          "hsl(18, 48%, 32%)",
+          "hsl(18, 50%, 38%)",
+          "hsl(18, 53%, 44%)", // accent-main-100
+          "hsl(18, 50%, 48%)", // accent-main-000
+          "hsl(18, 54%, 56%)",
+          "hsl(18, 60%, 72%)",
+          "hsl(18, 72%, 96%)",
+        ],
+      };
+    },
+  },
   {
     make: () => {
       const base = makeDefaultPalette();
       return {
         ...base,
-        key: "vivid1",
+        key: "oops",
         base: [
-          "#fff",
+          null,
           "#ffe6f7",
           "#ffccef",
           "#ffb3e7",
@@ -27,7 +237,7 @@ export const StaticPalettes: LabPalettes[] = [
           "#990066",
         ],
         baseDark: [
-          "#1a0011",
+          null,
           "#330022",
           "#4d0033",
           "#660044",
@@ -42,7 +252,7 @@ export const StaticPalettes: LabPalettes[] = [
           "#ffccef",
         ],
         accent: [
-          "#fff",
+          null,
           "#e6ffff",
           "#ccffff",
           "#b3ffff",
@@ -57,7 +267,7 @@ export const StaticPalettes: LabPalettes[] = [
           "#009999",
         ],
         accentDark: [
-          "#001a1a",
+          null,
           "#003333",
           "#004d4d",
           "#006666",
@@ -79,9 +289,9 @@ export const StaticPalettes: LabPalettes[] = [
       const base = makeDefaultPalette();
       return {
         ...base,
-        key: "vivid2",
+        key: "shmoops",
         base: [
-          "#FFFFFF",
+          null,
           "#e6ffe6",
           "#ccffcc",
           "#99FF99",
@@ -96,7 +306,7 @@ export const StaticPalettes: LabPalettes[] = [
           "#005500",
         ],
         baseDark: [
-          "#001a00",
+          null,
           "#003300",
           "#004d00",
           "#006600",
@@ -111,7 +321,7 @@ export const StaticPalettes: LabPalettes[] = [
           "#ccffcc",
         ],
         accent: [
-          "#fff",
+          null,
           "#fff5e6",
           "#ffebcc",
           "#ffd699",
@@ -126,7 +336,7 @@ export const StaticPalettes: LabPalettes[] = [
           "#663d00",
         ],
         accentDark: [
-          "#1a1200",
+          null,
           "#332400",
           "#4d3600",
           "#664800",

package/src/thematic-controls.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import {space, themeVars} from "./design-system";
-import type {Scale12} from "./palette-generator";
+import type {ZeroBasedScale} from "./palette-generator";
 
 export const controlRowCss = css`
   display: flex;
@@ -38,8 +38,8 @@ export function ArrayEditor({
   onChange,
 }: {
   label: string;
-  values: Scale12<number>;
-  onChange?: (v: Scale12<number>) => void;
+  values: ZeroBasedScale<number>;
+  onChange?: (v: ZeroBasedScale<number>) => void;
 }) {
   const edit = onChange
     ? () => {
@@ -49,7 +49,7 @@ export function ArrayEditor({
           try {
             const parsed = JSON.parse(result);
             if (Array.isArray(parsed) && parsed.length === 12) {
-              onChange(parsed as unknown as Scale12<number>);
+              onChange(parsed as unknown as ZeroBasedScale<number>);
             } else {
               alert("Need array with 12 values");
             }
@@ -83,8 +83,8 @@ export function ArraySlider({
   format = (v) => v.toFixed(3),
 }: {
   label: string;
-  values: Scale12<number>;
-  onValuesChange?: (v: Scale12<number>) => void;
+  values: ZeroBasedScale<number>;
+  onValuesChange?: (v: ZeroBasedScale<number>) => void;
   sliderValue: number;
   onSliderChange: (v: number) => void;
   min: number;

package/src/thematic-scales.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import {type ColorScale} from "./palette-generator";
-import {OKLCH, produceColor} from "./color-utils";
+import {toOKLCH, toRGB} from "./color-utils";
 import {space, themeVars} from "./design-system";
 import {SwatchWithPicker} from "./thematic-color-picker";
 
@@ -28,9 +28,7 @@ export const sectionSeparatorCss = css`
 `;
 
 function formatTooltip(name: string, color: string, index: number): string {
-  const rgb = produceColor(color, []);
-  const oklch = produceColor(color, [], OKLCH);
-  return `${name}[${index}]\n${rgb}\n${oklch}`;
+  return `${name}[${index}]\n${toRGB(color)}\n${toOKLCH(color)}`;
 }
 
 export function ScaleRow({
@@ -51,17 +49,19 @@ export function ScaleRow({
   return (
     <div className={scaleRowContainerCss}>
       <div className={scaleCss}>
-        {scale.map((color, i) => (
-          <SwatchWithPicker
-            key={i}
-            color={color}
-            title={formatTooltip(name, color, i)}
-            onChange={onColorChange ? (c) => onColorChange(i, c) : undefined}
-            onHighlight={onHighlight ? () => onHighlight(i) : undefined}
-            onHighlightEnd={onHighlightEnd}
-            isAltPressed={isAltPressed}
-          />
-        ))}
+        {scale.map((color, i) =>
+          color === null ? null : (
+            <SwatchWithPicker
+              key={i}
+              color={color}
+              title={formatTooltip(name, color, i)}
+              onChange={onColorChange ? (c) => onColorChange(i, c) : undefined}
+              onHighlight={onHighlight ? () => onHighlight(i) : undefined}
+              onHighlightEnd={onHighlightEnd}
+              isAltPressed={isAltPressed}
+            />
+          )
+        )}
       </div>
     </div>
   );