@fibery/ui-kit 2.1.1 → 3.0.0

package/src/scale-generator.ts

@@ -1,10 +1,14 @@
-import {fromOKLCH} from "./color-utils";
+import {cssFromColor} from "./color-utils";
 import type {ColorScale, OneBasedScale, ZeroBasedScale} from "./design-system/types";
 
-export function zeroBasedFromOneBased<T>(scale: OneBasedScale<T>) {
+export function base0FromScale<T>(scale: OneBasedScale<T>) {
   return scale.slice(1) as unknown as ZeroBasedScale<T>;
 }
 
+export function scaleFromBase0T<T>(scale: ZeroBasedScale<T>) {
+  return [null, ...scale] as OneBasedScale<T>;
+}
+
 export interface ScaleCurves {
   lightness: ZeroBasedScale<number>; // 0-100 scale
   chroma: ZeroBasedScale<number>; // multipliers relative to peakChroma
@@ -127,19 +131,23 @@ function applyContrast(L: number, contrast: number): number {
   return Math.max(0, Math.min(100, adjusted));
 }
 
+function map<T>(ts: ZeroBasedScale<T>, mapper: (_: T, number: number) => string) {
+  return ts.map(mapper) as unknown as ZeroBasedScale<string>;
+}
+
 export function generateColorScale(config: ScaleConfig): ColorScale {
   const {hue, chroma, mode, curves, contrast = 1} = config;
 
   const defaultCurves = mode === "light" ? DEFAULT_LIGHT_CURVES : DEFAULT_DARK_CURVES;
   const {lightness, chroma: chromaCurve} = curves ?? defaultCurves;
 
-  const steps = lightness.map((L, i) => {
+  const steps = map(lightness, (L, i) => {
     const adjustedL = applyContrast(L, contrast);
     const C = chroma * chromaCurve[i];
-    return fromOKLCH(adjustedL / 100, C, hue);
+    return cssFromColor({mode: "oklch", l: adjustedL / 100, c: C, h: hue, alpha: 1});
   });
 
-  return [null, ...steps] as unknown as ColorScale;
+  return scaleFromBase0T(steps);
 }
 
 /**
@@ -300,26 +308,31 @@ export function paletteFromHueBoth(hue: number): {light: ColorScale; dark: Color
   };
 }
 
-export function generateWhites(hue: number, chroma: number, luminosity = 1, chromaMul = 1) {
+const alphasWhite: ZeroBasedScale<number> = [0, 0.01, 0.03, 0.06, 0.09, 0.12, 0.18, 0.25, 0.39, 0.45, 0.59, 0.92];
+const alphasBlack: ZeroBasedScale<number> = [0.01, 0.03, 0.05, 0.07, 0.09, 0.11, 0.14, 0.22, 0.44, 0.48, 0.57, 0.91];
+
+function colorScaleFrom(base0: ZeroBasedScale<string>) {
+  return [null, ...base0] as ColorScale;
+}
+
+function map0BasedScale<T, U>(alphas: ZeroBasedScale<T>, mapper: (_: T) => U) {
+  return alphas.map(mapper) as unknown as ZeroBasedScale<U>;
+}
+
+export function generateWhites(h: number, chroma: number, luminosity = 1, chromaMul = 1, alphas = alphasWhite) {
   const c = chroma * 0.1 * chromaMul;
   const l = (1 - chroma * 0.1) * luminosity;
   return {
-    white: fromOKLCH(l, c, hue, 1),
-    whiteA: [
-      null,
-      ...[0, 0.01, 0.03, 0.06, 0.09, 0.12, 0.18, 0.25, 0.39, 0.45, 0.59, 0.92].map((a) => fromOKLCH(l, c, hue, a)),
-    ] as unknown as ColorScale,
+    white: cssFromColor({mode: "oklch", l, c, h}),
+    whiteA: colorScaleFrom(map0BasedScale(alphas, (alpha) => cssFromColor({mode: "oklch", l, c, h, alpha}))),
   };
 }
 
-export function generateBlacks(hue: number, chroma: number, luminosity = 1, chromaMul = 1) {
+export function generateBlacks(h: number, chroma: number, luminosity = 1, chromaMul = 1, alphas = alphasBlack) {
   const c = chroma * 0.1 * chromaMul;
   const l = chroma * 0.1 * 4 * luminosity;
   return {
-    black: fromOKLCH(l, c, hue, 1),
-    blackA: [
-      null,
-      ...[0.01, 0.03, 0.05, 0.07, 0.09, 0.11, 0.14, 0.22, 0.44, 0.48, 0.57, 0.91].map((a) => fromOKLCH(l, c, hue, a)),
-    ] as unknown as ColorScale,
+    black: cssFromColor({mode: "oklch", l, c, h}),
+    blackA: colorScaleFrom(map0BasedScale(alphas, (alpha) => cssFromColor({mode: "oklch", l, c, h, alpha}))),
   };
 }

package/src/select/components/clear-indicator.tsx

@@ -1,6 +1,7 @@
-import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
+import type {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
+
 import {IconButton} from "../../button/icon-button";
-import RemoveIcon from "../../icons/react/Remove";
+import RemoveIcon from "../../icons/react/remove";
 
 export function ClearIndicator<
   TOption,

package/src/select/components/drop-down-indicator.tsx

@@ -1,11 +1,12 @@
+import {css} from "@linaria/core";
 import cn from "classnames";
-import {DropdownIndicatorProps} from "react-select";
-import {expanderExpandedStyle} from "../styles";
-import ArrowCollapseVertical from "../../icons/react/ArrowCollapseVertical";
-import {themeVars, transition} from "../../design-system";
 import React from "react";
-import {css} from "@linaria/core";
-import {GroupBase} from "../index";
+import type {DropdownIndicatorProps} from "react-select";
+
+import {themeVars, transition} from "../../design-system";
+import ArrowCollapseVertical from "../../icons/react/arrow-collapse-vertical";
+import type {GroupBase} from "../select";
+import {expanderExpandedStyle} from "../styles";
 
 const expanderStyle = css`
   transition: transform ${transition};

package/src/select/components/group-heading.tsx

@@ -1,10 +1,12 @@
 import {css} from "@linaria/core";
-import {components, GroupHeadingProps} from "react-select";
-import {layout, space, textStyles, themeVars} from "../../design-system";
+import type {GroupHeadingProps} from "react-select";
+import {components} from "react-select";
+
+import {fontSize, layout, space, textStyles, themeVars} from "../../design-system";
+import {mobileRootSelector} from "../../mobile-styles";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
-import {GroupBase} from "../index";
+import type {GroupBase} from "../select";
 import {isPureTextChildren} from "../util";
-import {mobileRootSelector} from "../../mobile-styles";
 
 export const groupHeadingNulledStyles = {
   paddingLeft: "",
@@ -32,7 +34,7 @@ const groupHeadingClass = css`
   text-overflow: ellipsis;
   ${mobileRootSelector} & {
     min-height: ${layout.mobileMenuItemHeight}px;
-    font-size: ${textStyles.regular.fontSize}px;
+    font-size: ${fontSize.sm}px;
   }
 `;
 const groupHeadingContentClass = css`

package/src/select/components/menu-list-virtua.tsx

@@ -1,19 +1,13 @@
 import compact from "lodash/compact";
-import {
-  Children,
-  ComponentType,
-  CSSProperties,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import type {ComponentType, CSSProperties, ReactNode} from "react";
+import {Children, useContext, useEffect, useMemo, useRef, useState} from "react";
 import type {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
-import {VList, VListHandle} from "virtua";
-import {GroupBase, ReactSelectRefContext} from "../util";
+import type {VListHandle} from "virtua";
+import {VList} from "virtua";
+
 import {isGroupChild, isReactElementWithProps} from "../reflection";
+import type {GroupBase} from "../util";
+import {ReactSelectRefContext} from "../util";
 
 const DEFAULT_ITEM_SIZE_ESTIMATE = 48;
 

package/src/select/components/menu-list-virtualized.tsx

@@ -1,23 +1,17 @@
 import compact from "lodash/compact";
 import isFunction from "lodash/isFunction";
 import isObject from "lodash/isObject";
-import {
-  Children,
-  ComponentType,
-  CSSProperties,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
-import {ItemContent, Virtuoso, VirtuosoHandle} from "react-virtuoso";
+import type {ComponentType, CSSProperties, ReactNode} from "react";
+import {Children, useContext, useEffect, useMemo, useRef, useState} from "react";
+import type {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
+import type {ItemContent, VirtuosoHandle} from "react-virtuoso";
+import {Virtuoso} from "react-virtuoso";
+
 import {layout} from "../../../src/design-system";
-import {GroupBase, ReactSelectRefContext} from "../util";
-import {useSelectControlSettings} from "../select-control-settings-context";
 import {useIsPhone} from "../../use-is-phone";
+import {useSelectControlSettings} from "../select-control-settings-context";
+import type {GroupBase} from "../util";
+import {ReactSelectRefContext} from "../util";
 
 // Threshold to determine when to scroll: if focused item is less than this visible, scroll it into view
 const MINIMAL_VISIBLE_PORTION_TO_SCROLL_INTO_VIEW = 0.2;

package/src/select/components/menu.tsx

@@ -1,9 +1,11 @@
 import {css, cx} from "@linaria/core";
-import {components, CSSObjectWithLabel, MenuProps} from "react-select";
+import type {CSSObjectWithLabel, MenuProps} from "react-select";
+import {components} from "react-select";
 import type {MenuPortalProps} from "react-select/dist/declarations/src/components/Menu";
+
 import {border, space, themeVars} from "../../design-system";
 import {ThemeProvider} from "../../theme-provider";
-import {GroupBase} from "../index";
+import type {GroupBase} from "../select";
 
 export const MenuListNulledStyles: CSSObjectWithLabel = {
   paddingTop: "",

package/src/select/components/no-option-message.tsx

@@ -1,9 +1,11 @@
-import React, {CSSProperties} from "react";
+import {css, cx} from "@linaria/core";
+import type {CSSProperties} from "react";
+import React from "react";
+import type {NoticeProps} from "react-select";
+
+import {space, textClasses} from "../../design-system";
 import {ListRowContent} from "../../lists/list-row-surface";
-import {css} from "@linaria/core";
-import {space, textStyles} from "../../design-system";
-import {NoticeProps} from "react-select";
-import {GroupBase} from "../util";
+import type {GroupBase} from "../util";
 
 const noOptionMessageClass = css`
   cursor: default;
@@ -15,7 +17,6 @@ const noOptionMessageContentClass = css`
   text-overflow: ellipsis;
   white-space: normal;
   max-width: 100%;
-  ${{...textStyles.regular}}
   padding: ${space.s4}px ${space.s6}px;
 `;
 
@@ -26,7 +27,7 @@ export const NoOptionsMessage = <Option, isMulty extends boolean, Group extends
   return (
     <div className={noOptionMessageClass}>
       <ListRowContent
-        contentClassName={noOptionMessageContentClass}
+        contentClassName={cx(textClasses.regular, noOptionMessageContentClass)}
         style={getStyles("noOptionsMessage", props) as CSSProperties}
       >
         {children}

package/src/select/components/option.tsx

@@ -1,13 +1,16 @@
 import {css} from "@linaria/core";
 import cn from "classnames";
-import {ComponentProps, useMemo} from "react";
-import {components, OptionProps} from "react-select";
+import type {ComponentProps} from "react";
+import {useMemo} from "react";
+import type {OptionProps} from "react-select";
+import {components} from "react-select";
+
 import {layout, space} from "../../design-system";
 import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
+import {mobileRootSelector} from "../../mobile-styles";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
-import {GroupBase} from "../index";
+import type {GroupBase} from "../select";
 import {isPureTextChildren} from "../util";
-import {mobileRootSelector} from "../../mobile-styles";
 
 export const OptionNulledVitualizedStyles = {
   height: layout.menuItemHeight,

package/src/select/index.tsx

@@ -1,11 +1,13 @@
+import {css, cx} from "@linaria/core";
+import type {ForwardedRef} from "react";
+import React, {forwardRef} from "react";
+
+import type {$TSFixMe} from "../tsfixme";
 import {useIsPhone} from "../use-is-phone";
 import type {GroupBase, SelectInstance, SelectProps} from "./select";
 import {combineStyles, SelectComponent} from "./select";
-import React, {ForwardedRef, forwardRef} from "react";
 import {SelectInPopover} from "./select-in-popover";
 import {makeSingleLineStyles} from "./styles";
-import {css, cx} from "@linaria/core";
-import {$TSFixMe} from "../tsfixme";
 
 export type {
   ActionMeta,

package/src/select/reflection.ts

@@ -1,7 +1,8 @@
+import isFunction from "lodash/isFunction";
 import isObject from "lodash/isObject";
-import {GroupBase} from "./util";
 import type {GroupProps} from "react-select/dist/declarations/src";
-import isFunction from "lodash/isFunction";
+
+import type {GroupBase} from "./util";
 
 type ReactElementWithProps<P = object> = {props: P};
 

package/src/select/select-control-settings-context.tsx

@@ -1,4 +1,5 @@
-import {createContext, ReactNode, useContext, useMemo} from "react";
+import type {ReactNode} from "react";
+import {createContext, useContext, useMemo} from "react";
 
 const SelectControlSettings = createContext<{
   getPopupContainerElement?: () => HTMLElement | null;

package/src/select/select-in-popover.tsx

@@ -1,43 +1,35 @@
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {Wrap} from "@fibery/react/src/wrap";
 import {css, cx} from "@linaria/core";
-import React, {
-  ForwardedRef,
-  forwardRef,
-  ReactNode,
-  RefObject,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {space, textStyles} from "../design-system";
-import {Placement, Popover} from "../popover";
+import type {ForwardedRef, ReactNode, RefObject} from "react";
+import React, {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
+import type {SelectInstance} from "react-select";
+
+import {space, textClasses} from "../design-system";
+import type {Placement} from "../popover";
+import {Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
 import {MenuTransparent} from "./components/menu";
-import {
+import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
+import type {
   ActionMeta,
-  combineStyles,
   GroupBase,
   OnChangeValue,
   OptionsOrGroups,
   PropsValue,
-  SelectComponent as ReactSelect,
   SelectProps,
   StylesConfig,
 } from "./select";
+import {combineStyles, SelectComponent as ReactSelect} from "./select";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 import {makeSelectInPopoverStyles} from "./styles";
-import {SelectInstance} from "react-select";
-import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
-import {Wrap} from "@fibery/react/src/wrap";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
 const popupMinHeightPx = 300;
 const popupPaddingTop = space.s8;
 const popupPaddingBottom = space.s8;
-const popupContainerClassName = css`
+const defaultPopupContainerClassName = css`
   z-index: 1050;
   height: max(${popupHeightVH}vh, ${popupMinHeightPx}px);
   display: flex;
@@ -64,7 +56,6 @@ const mobileClassName = css`
 `;
 
 const titleClassName = css`
-  ${textStyles.heading6}
   padding-top: ${space.s12}px;
   padding-inline: ${space.s12}px;
 `;
@@ -87,6 +78,7 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   maxMenuHeight?: number;
   hideOnChange?: boolean | ((newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => boolean);
   renderInPortal?: boolean;
+  popupContainerClassName?: string;
   popupStyles?: string;
   selectStyles?: StylesConfig<T, U, V>;
   onMenuOpen?: () => void;
@@ -129,6 +121,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     title,
     hideOnChange = true,
     renderInPortal = true,
+    popupContainerClassName,
     popupStyles,
     selectStyles = {},
     components = {},
@@ -222,12 +215,12 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
           supportMobile
           title={title}
           offset={offset}
-          popupContainerClassName={popupContainerClassName}
+          popupContainerClassName={cx(defaultPopupContainerClassName, popupContainerClassName)}
           popupClassName={cx(popupClassName, popupStyles)}
           mobilePopupContentClassName={mobileClassName}
           placement={popoverPlacement}
         >
-          {title && !isPhone && <div className={titleClassName}>{title}</div>}
+          {title && !isPhone && <div className={cx(textClasses.heading6, titleClassName)}>{title}</div>}
           {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
           {/*Render target in controlled by Popover here. So we just override SelectControlContext here and set popupContainerElement to undefined. */}
           {/*So in dom react-select will be a child of popover. */}

package/src/select/select-mock-context.tsx

@@ -1,4 +1,4 @@
-import {PropsWithChildren} from "react";
+import type {PropsWithChildren} from "react";
 import {VirtuosoMockContext} from "react-virtuoso";
 export function SelectMockContext({children}: PropsWithChildren) {
   return (

package/src/select/select.tsx

@@ -1,13 +1,13 @@
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
-import {ForwardedRef, forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
-import BaseSelect, {
+import compact from "lodash/compact";
+import type {ForwardedRef, RefObject} from "react";
+import {forwardRef, useCallback, useMemo, useRef, useState} from "react";
+import type {
   ActionMeta,
-  components as reactSelectComponents,
   ControlProps,
-  createFilter,
   MenuListProps,
   MenuProps,
-  mergeStyles,
   MultiValue,
   MultiValueProps,
   OnChangeValue,
@@ -20,7 +20,10 @@ import BaseSelect, {
   SingleValueProps,
   StylesConfig,
 } from "react-select";
-import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
+import BaseSelect, {components as reactSelectComponents, createFilter, mergeStyles} from "react-select";
+import type {CreatableProps} from "react-select/creatable";
+import BaseCreatableSelect from "react-select/creatable";
+
 import {ClearIndicator, NoClearIndicator} from "./components/clear-indicator";
 import {DropdownIndicator} from "./components/drop-down-indicator";
 import {GroupHeading} from "./components/group-heading";
@@ -30,9 +33,8 @@ import {NoOptionsMessage} from "./components/no-option-message";
 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 compact from "lodash/compact";
-import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
+import type {GroupBase} from "./util";
+import {countOptions, ReactSelectRefContext} from "./util";
 
 export type {
   ActionMeta,

package/src/select/styles.ts

@@ -1,5 +1,6 @@
 import {css} from "@linaria/core";
 import type {CSSObjectWithLabel, GroupBase, StylesConfig} from "react-select";
+
 import {inputOverrides} from "../antd/styles";
 import {border, layout, space, themeVars} from "../design-system";
 import {groupHeadingNulledStyles} from "./components/group-heading";

package/src/select/util.ts

@@ -1,6 +1,7 @@
-import {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
 import isObject from "lodash/isObject";
-import {Children, createContext, ReactNode, RefObject} from "react";
+import type {ReactNode, RefObject} from "react";
+import {Children, createContext} from "react";
+import type {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
 
 /**
  * API used by ReactSelect internal partials (at least VirtualizedMenuList).

package/src/static-palettes.ts

@@ -1,5 +1,5 @@
-import {selectPalette} from "./palette-generator";
 import type {ThemePalette} from "./design-system/types";
+import {selectPalette} from "./palette-generator";
 
 export interface LabPalettes {
   make: () => ThemePalette;

package/src/tab-nav/tab-nav.tsx

@@ -1,23 +1,27 @@
 import {createContext} from "@fibery/react/src/create-context";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
 import {css, cx} from "@linaria/core";
+import type {
+  NavigationMenuItemProps,
+  NavigationMenuLinkProps,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+} from "@radix-ui/react-navigation-menu";
 import {
   NavigationMenu,
   NavigationMenuItem,
-  NavigationMenuItemProps,
   NavigationMenuLink,
-  NavigationMenuLinkProps,
   NavigationMenuList,
-  NavigationMenuListProps,
-  NavigationMenuProps,
 } from "@radix-ui/react-navigation-menu";
-import {forwardRef, ReactNode, RefObject, useEffect, useLayoutEffect, useRef, useState} from "react";
-import {border, transitionDuration, fontWeight, space, textStyles, themeVars} from "../design-system";
-import {ellipsis} from "../styles-utils";
+import type {ReactNode, RefObject} from "react";
+import {forwardRef, useEffect, useLayoutEffect, useRef, useState} from "react";
+
+import {border, transitionDuration, fontWeight, space, themeVars, fontSize} from "../design-system";
 import {mobileRootSelector} from "../mobile-styles";
+import {ellipsis} from "../styles-utils";
 import {TooltipIfOverflown} from "../tooltip-if-overflown";
-import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
-import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
 
 const tabNavIndicatorWidth = 100;
 
@@ -55,7 +59,7 @@ export const tabButton = css`
   transition-property: border, background-color, color, opacity;
   transition-duration: ${transitionDuration.fast};
 
-  font-size: ${textStyles.small.fontSize}px;
+  font-size: ${fontSize.xs}px;
   font-weight: ${fontWeight.medium};
   line-height: 16px;
 
@@ -82,8 +86,8 @@ export const tabButton = css`
   }
 
   ${mobileRootSelector} & {
-    padding: ${space.s4}px ${space.s8}px ${space.s8}px ${space.s4}px;
-    font-size: ${textStyles.regular.fontSize}px;
+    padding: ${space.s8}px;
+    font-size: ${fontSize.sm}px;
   }
 `;
 
@@ -135,15 +139,15 @@ const [TabNavContextProvider, useTabNavCtx] = createContext<TabNavContextValue>(
 
 export type TabNavRootProps = NavigationMenuProps;
 
-export const TabNavRoot = ({className, children, ...props}: NavigationMenuProps) => {
+export const TabNavRoot = ({className, children, orientation = "horizontal", ...props}: NavigationMenuProps) => {
   const indicatorRef = useRef<HTMLDivElement>(null);
   const activeItemRef = useRef<HTMLElement | null>(null);
   const [ctx] = useState<TabNavContextValue>(() => ({indicatorRef, activeItemRef}));
 
   return (
-    <NavigationMenu className={className} {...props}>
+    <NavigationMenu className={className} orientation={orientation} {...props}>
       <div className={tabNavIndicatorTrack}>
-        <div ref={indicatorRef} className={tabNavIndicator} />
+        {orientation === "horizontal" && <div ref={indicatorRef} className={tabNavIndicator} />}
 
         <TabNavContextProvider value={ctx}>{children}</TabNavContextProvider>
       </div>

package/src/table.tsx

@@ -1,6 +1,8 @@
-import {PureComponent, ReactNode} from "react";
-import {border, space, themeVars} from "./design-system";
 import {css, cx} from "@linaria/core";
+import type {ReactNode} from "react";
+import {PureComponent} from "react";
+
+import {border, space, themeVars} from "./design-system";
 import {mobileRootSelector} from "./mobile-styles";
 
 const tableStyle = css`

package/src/thematic-color-picker.tsx

@@ -1,5 +1,6 @@
 import {css} from "@linaria/core";
 import {wcagLuminance} from "culori";
+
 import {hslFrom, oklchFrom, rgbFrom} from "./color-utils";
 
 export type InspectChannel = "oklch-l" | "oklch-c" | "oklch-h" | "hsl-l" | "hsl-s" | "hsl-h" | null;
@@ -17,7 +18,7 @@ function channelValue(color: string, channel: InspectChannel): string | null {
       case "oklch-l":
         return (oklch.l ?? 0).toFixed(2);
       case "oklch-c":
-        return (oklch.c ?? 0).toFixed(3);
+        return oklch.c.toFixed(3);
       case "oklch-h":
         return Math.round(oklch.h ?? 0).toString();
       default:

package/src/thematic-constants.tsx

@@ -1,9 +1,9 @@
+import AppearanceAuto from "./icons/react/appearance-auto";
+import AppearanceDark from "./icons/react/appearance-dark";
+import AppearanceLight from "./icons/react/appearance-light";
 import {type ThematicPrefs} from "./palette-generator";
-import type {ThemePreference} from "./theme-settings";
-import AppearanceLight from "./icons/react/AppearanceLight";
-import AppearanceDark from "./icons/react/AppearanceDark";
-import AppearanceAuto from "./icons/react/AppearanceAuto";
 import {common} from "./palettes/common";
+import type {ThemePreference} from "./theme-settings";
 
 export const defaultPrefs: ThematicPrefs = {
   baseHue: 0,

package/src/thematic-controls.tsx

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+
 import {space, themeVars} from "./design-system";
 import type {ZeroBasedScale} from "./palette-generator";
 
@@ -217,6 +218,7 @@ export function Slider({
   onChange,
   gradient,
   color,
+  disabled,
   onLabelHover,
   onLabelLeave,
   onLabelClick,
@@ -230,12 +232,13 @@ export function Slider({
   onChange: (v: number) => void;
   gradient?: string;
   color?: string;
+  disabled?: boolean;
   onLabelHover?: () => void;
   onLabelLeave?: () => void;
   onLabelClick?: () => void;
 }) {
   return (
-    <div className={controlRowCss}>
+    <div className={controlRowCss} style={disabled ? {opacity: 0.4, pointerEvents: "none"} : undefined}>
       <span
         className={controlLabelCss}
         style={onLabelClick ? {cursor: "pointer"} : undefined}
@@ -253,6 +256,7 @@ export function Slider({
         max={max}
         step={step}
         value={value}
+        disabled={disabled}
         onChange={(e) => onChange(parseFloat(e.target.value))}
       />
       <ValueDisplay value={value} format={format} />