figma-kit 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/lib/color.d.ts

@@ -0,0 +1,40 @@
+type WithAlpha<T> = T & {
+    a: number;
+};
+type RGB = {
+    r: number;
+    g: number;
+    b: number;
+};
+type HSV = {
+    h: number;
+    s: number;
+    v: number;
+};
+type HSL = {
+    h: number;
+    s: number;
+    l: number;
+};
+type RGBA = WithAlpha<RGB>;
+type HSVA = WithAlpha<HSV>;
+type HSLA = WithAlpha<HSL>;
+type HEX = string;
+type P3String = `color(display-p3 ${number} ${number} ${number}${` / ${number}` | ''})`;
+type RGBString = `rgb(${number} ${number} ${number}${` / ${number}` | ''})`;
+declare function rgbaToHex({ r, g, b, a }: RGBA): HEX;
+declare function hslaToHex(hsla: HSLA): HEX;
+declare function hsvaToHex(hsla: HSVA): HEX;
+declare function rgbaToHsva({ r, g, b, a }: RGBA): HSVA;
+declare function hsvaToRgba({ h, s, v, a }: HSVA): RGBA;
+declare function hslaToHsva({ h, s, l, a }: HSLA): HSVA;
+declare function hsvaToHsla({ h, s, v, a }: HSVA): HSLA;
+declare function hslaToRgba(hsla: HSLA): RGBA;
+declare function rgbaToHsla(rgba: RGBA): HSLA;
+declare function rgbaToP3String(color: RGBA): P3String;
+declare function rgbaToCssString(color: RGBA): RGBString;
+declare function blendWithWhite(color: RGBA): RGBA;
+declare function roundHsva(hsva: HSVA): HSVA;
+declare function roundHsla(hsla: HSLA): HSLA;
+export type { RGB, HSV, HSL, RGBA, HSVA, HSLA, HEX, P3String, RGBString };
+export { rgbaToHex, rgbaToHsva, hsvaToRgba, hslaToHsva, hsvaToHsla, hslaToRgba, rgbaToHsla, rgbaToP3String, rgbaToCssString, blendWithWhite, roundHsva, roundHsla, hslaToHex, hsvaToHex, };

package/dist/lib/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SMALL_NUDGE = 1;
+export declare const DEFAULT_BIG_NUDGE = 10;

package/dist/lib/dom/focus.d.ts

@@ -0,0 +1,14 @@
+type FocusableTarget = HTMLElement | {
+    focus(): void;
+};
+/**
+ * Focus a given element and optionally select its content if it is a selectable input.
+ *
+ * @param element - The element to focus. Optional.
+ * @param options
+ * @param options.select - Whether to select the content of the element if it is a selectable input (default: false).
+ */
+export declare function focus(element?: FocusableTarget | null, { select }?: {
+    select?: boolean | undefined;
+}): void;
+export {};

package/dist/lib/dom/set-input-value.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Set the value of an HTMLInputElement and optionally dispatch an input event.
+ *
+ * @param inputElement - The HTMLInputElement to set the value for.
+ * @param value - The value to set on the input element.
+ * @param dispatchEvent - Whether to dispatch an input event (default: true).
+ */
+export declare const setInputElementValue: (inputElement: HTMLInputElement | null, value: string, dispatchEvent?: boolean) => void;

package/dist/lib/number/clamp.d.ts

@@ -0,0 +1 @@
+export declare function clamp(value: number, min: number, max?: number): number;

package/dist/lib/number/normalize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Map a value to a specified range.
+ * https://stats.stackexchange.com/a/281164
+ *
+ * @param sourceRange {[number, number]} - input range
+ * @param targetRange {[number, number]} - The target range to map the value to
+ * @return {function(number): number} A function that takes a number and maps it to the specified range
+ *
+ * @example:
+ * normalize([0, 1], [0, 100])(0.5) -> 50
+ * normalize([0, 1], [0, 255])(1) -> 255
+ */
+export declare function normalize(sourceRange: [number, number], targetRange: [number, number]): (value: number) => number;

package/dist/lib/react/add-class-name.d.ts

@@ -0,0 +1,4 @@
+type ClassName<State> = string | ((state: State) => string | undefined) | undefined;
+declare function addClassName<State>(className: ClassName<State>, value: string): ClassName<State>;
+export type { ClassName };
+export { addClassName };

package/dist/lib/react/create-context.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * MIT License
+ * Copyright (c) 2022 WorkOS
+ * https://github.com/radix-ui/primitives/blob/main/LICENSE
+ * */
+import React from 'react';
+declare function createContext<ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType): readonly [{
+    (props: ContextValueType & {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}, (consumerName: string) => ContextValueType];
+export { createContext };

package/dist/lib/react/use-compose-refs.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * MIT License
+ * Copyright (c) 2022 WorkOS
+ * https://github.com/radix-ui/primitives/blob/main/LICENSE
+ * */
+import * as React from 'react';
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+export { composeRefs, useComposedRefs };

package/dist/lib/react/use-controllable-state.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * MIT License
+ * Copyright (c) 2022 WorkOS
+ * https://github.com/radix-ui/primitives/blob/main/LICENSE
+ * */
+import * as React from 'react';
+type UseControllableStateParams<T> = {
+    prop?: T | undefined;
+    defaultProp?: T | undefined;
+    onChange?: (state: T) => void;
+};
+declare function useControllableState<T>({ prop, defaultProp, onChange }: UseControllableStateParams<T>): readonly [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
+export { useControllableState };

package/dist/lib/react/use-select-on-input-click.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+/**
+ * Selects the target element's contents on click, unless the user is selecting manually.
+ * */
+export declare function useSelectOnInputClick(): {
+    onMouseLeave: () => void;
+    onMouseUp: (event: React.MouseEvent<HTMLInputElement>) => void;
+    onFocus: () => void;
+};

package/dist/styles.css

@@ -114,7 +114,7 @@
   --color-text-menu-tertiary: var(--figma-color-text-oncomponent-tertiary);
   --color-icon-menu: var(--figma-color-icon-oncomponent);
   --shadow-menu: var(--elevation-400);
-  --font-size-menu: 12px;
+  --font-size-menu: var(--font-size-3);
 
   --color-bg-tooltip: #1e1e1e;
   --color-text-tooltip: #fff;
@@ -523,6 +523,7 @@
 .fp-ValueFieldRoot {
   box-sizing: border-box;
   display: flex;
+  position: relative;
   align-items: center;
   border-radius: var(--radius-medium);
   padding: 0 1px;
@@ -552,6 +553,52 @@
     cursor: default;
     outline: 0;
   }
+.fp-ValueFieldScrubber {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  cursor: ew-resize;
+  color: var(--figma-color-text-secondary);
+  --color-icon: var(--figma-color-icon-secondary);
+}
+.fp-ValueFieldScrubber:empty {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: var(--space-6);
+  }
+.fp-ValueFieldScrubber[data-disabled] {
+    cursor: default;
+    color: var(--figma-color-text-disabled);
+    --color-icon: var(--figma-color-icon-disabled);
+  }
+.fp-ValueFieldScrubber:not(:empty) + .fp-ValueFieldBase {
+    padding-left: 0;
+  }
+.fp-ValueFieldScrubber .fp-ValueFieldLabel:last-child {
+    width: var(--space-6);
+  }
+.fp-ValueFieldScrubberCursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483647;
+  width: 26px;
+  height: 14px;
+  pointer-events: none;
+  color: var(--figma-color-text-oninverse);
+  filter: drop-shadow(0 1px 1px var(--figma-color-bg-inverse));
+}
+.fp-ValueFieldScrubberCursorIcon {
+  display: block;
+  width: 26px;
+  height: 14px;
+  fill: var(--figma-color-bg-inverse);
+  stroke: var(--figma-color-text-oninverse);
+}
 .fp-ValueFieldLabel {
   display: flex;
   align-items: center;
@@ -578,6 +625,7 @@
   }
 .fp-ValueFieldMulti {
   display: flex;
+  position: relative;
   border-radius: var(--radius-medium);
   outline-offset: -1px;
   box-sizing: border-box;
@@ -618,6 +666,70 @@
     background-color: transparent;
     padding-left: calc(var(--space-2) - 1px);
   }
+.fp-ValueFieldNumericSelect {
+  width: 100%;
+}
+.fp-ValueFieldNumericSelect:hover:where(:not([data-disabled])) {
+    border-color: transparent;
+  }
+.fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled])) {
+    border-color: var(--figma-color-border);
+  }
+.fp-ValueFieldNumericSelect .fp-ValueFieldNumericSelectField {
+    min-width: 0;
+  }
+.fp-ValueFieldNumericSelectTrigger {
+  all: unset;
+  appearance: none;
+  box-sizing: border-box;
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 var(--space-6);
+  height: var(--space-6);
+  margin-top: -1px;
+  border-left: 1px solid var(--figma-color-bg);
+  border-top-right-radius: var(--radius-medium);
+  border-bottom-right-radius: var(--radius-medium);
+  color: var(--figma-color-text);
+  --color-icon: var(--figma-color-icon);
+}
+.fp-ValueFieldNumericSelectTrigger:hover:where(:not(:disabled)) {
+    background-color: var(--figma-color-bg-tertiary);
+  }
+.fp-ValueFieldNumericSelectTrigger:disabled {
+    color: var(--figma-color-text-disabled);
+    --color-icon: var(--figma-color-icon-disabled);
+  }
+.fp-ValueFieldNumericSelectTrigger > span:first-child {
+  position: absolute;
+  left: var(--space-2);
+  top: 0;
+  width: 0;
+  height: var(--space-6);
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+}
+.fp-ValueFieldNumericSelectPositioner {
+  display: flex;
+  flex-direction: column;
+  min-width: calc(var(--anchor-width) + var(--space-6) - 2px);
+  min-height: calc(var(--available-height) + var(--space-6) - 2px);
+}
+.fp-ValueFieldNumericSelectPositionerInOptions {
+  margin-top: calc(var(--space-2) + 1px) !important;
+}
+.fp-ValueFieldNumericSelectIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fp-ValueFieldNumericSelectCurrentItem {
+  background-color: var(--color-bg-menu-selected);
+}
 .fp-tooltip {
   box-sizing: border-box;
   padding: var(--space-1) var(--space-2);
@@ -638,8 +750,22 @@
   fill: var(--color-bg-tooltip);
   width: var(--space-3_5);
   height: 7px;
-  position: relative;
-  bottom: 1px;
+  position: absolute;
+}
+.fp-tooltip-arrow[data-side='top'] {
+  top: calc(100% - 1px);
+}
+.fp-tooltip-arrow[data-side='bottom'] {
+  bottom: calc(100% - 1px);
+  transform: rotate(180deg);
+}
+.fp-tooltip-arrow[data-side='left'] {
+  left: calc(100% - 1px);
+  transform: rotate(-90deg);
+}
+.fp-tooltip-arrow[data-side='right'] {
+  right: calc(100% - 1px);
+  transform: rotate(90deg);
 }
 .fp-textarea {
   all: unset;
@@ -691,6 +817,7 @@
   letter-spacing: var(--letter-spacing-default);
   color: var(--color-text-menu);
   box-shadow: var(--elevation-400);
+  outline: 0;
 }
 .fp-MenuItem {
   position: relative;
@@ -719,7 +846,7 @@
   display: flex;
   align-items: center;
   height: var(--space-6);
-  padding: 0 var(--space-4);
+  padding: 0 var(--space-2);
   color: var(--color-text-menu-tertiary);
 }
 .fp-MenuLabel:where(.fp-MenuContent:has(.fp-MenuCheckboxItem, .fp-MenuRadioItem) .fp-MenuLabel) {
@@ -773,6 +900,11 @@
 .fp-SelectTriggerIcon {
   margin-left: auto;
 }
+.fp-SelectPositioner {
+  display: flex;
+  flex-direction: column;
+  min-width: calc(var(--anchor-width) + var(--space-6) - 1px);
+}
 .fp-SelectScrollUpButton,
 .fp-SelectScrollDownButton {
   position: absolute;
@@ -797,6 +929,117 @@
   bottom: 0;
   border-radius: 0 0 var(--radius-large) var(--radius-large);
 }
+.fp-ComboboxTrigger {
+  cursor: default;
+}
+.fp-ComboboxTrigger:focus-visible {
+    border-color: var(--figma-color-border-selected);
+  }
+.fp-ComboboxTrigger[data-disabled] {
+    color: var(--figma-color-text-disabled);
+    border-color: var(--figma-color-border-disabled);
+  }
+.fp-ComboboxPositioner {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--anchor-width);
+  max-width: min(var(--available-width), 24rem);
+}
+.fp-ComboboxPopup {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-height: min(var(--available-height), 20rem);
+  min-width: var(--anchor-width);
+  padding: var(--space-2);
+  background-color: var(--figma-color-bg);
+  border-radius: var(--radius-large);
+  box-shadow: var(--elevation-500);
+  color: var(--figma-color-text);
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-default);
+  font-weight: var(--font-weight-default);
+  letter-spacing: var(--letter-spacing-default);
+  outline: 0;
+  overflow: auto;
+}
+.fp-ComboboxInputGroup {
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+  --color-icon: var(--figma-color-icon-secondary);
+}
+.fp-ComboboxInputGroup > .fp-Icon {
+    position: absolute;
+    top: 50%;
+    left: var(--space-2);
+    z-index: 1;
+    transform: translateY(-50%);
+  }
+.fp-ComboboxInputGroup:has(.fp-ComboboxInput:disabled) {
+    --color-icon: var(--figma-color-icon-disabled);
+  }
+.fp-ComboboxInput {
+  min-width: 0;
+  padding-left: calc(var(--space-2) + var(--space-6) + var(--space-1));
+  padding-right: var(--space-6);
+}
+.fp-ComboboxList {
+  display: flex;
+  flex-direction: column;
+}
+.fp-ComboboxItem {
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--figma-color-text);
+  line-height: var(--line-height-default);
+}
+.fp-ComboboxItem[data-selected] {
+    background-color: var(--figma-color-bg-selected-secondary);
+  }
+.fp-ComboboxItem[data-highlighted] {
+    background-color: var(--figma-color-bg-hover);
+  }
+.fp-ComboboxItem[data-selected][data-highlighted] {
+    background-color: var(--figma-color-bg-selected);
+  }
+.fp-ComboboxItem[data-disabled] {
+    color: var(--figma-color-text-disabled);
+  }
+.fp-ComboboxItemIndicator {
+  --color-icon: var(--figma-color-icon);
+}
+.fp-ComboboxMessage {
+  display: flex;
+  align-items: center;
+  min-height: var(--space-6);
+  padding: 0 var(--space-2);
+  color: var(--figma-color-text-secondary);
+}
+.fp-ComboboxMessage:empty {
+    min-height: 0;
+    padding: 0;
+  }
+.fp-ComboboxClear.fp-IconButton,
+.fp-ComboboxSearchClear.fp-IconButton {
+  --color-icon: var(--figma-color-icon-secondary);
+}
+.fp-ComboboxClear.fp-IconButton:hover, .fp-ComboboxSearchClear.fp-IconButton:hover {
+    background-color: transparent;
+    --color-icon: var(--figma-color-icon-secondary-hover);
+  }
+.fp-ComboboxClear.fp-IconButton[data-disabled] {
+  --color-icon: var(--figma-color-icon-disabled);
+}
+.fp-ComboboxSearchClear.fp-IconButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.fp-ComboboxInput:placeholder-shown + .fp-ComboboxSearchClear.fp-IconButton {
+  display: none;
+}
 .fp-Button {
   box-sizing: border-box;
   background-clip: border-box;
@@ -966,11 +1209,11 @@
   width: var(--space-8);
   height: var(--space-8);
 }
-.fp-IconButton[data-state='open']:where(.fp-active-appearance-subtle) {
+.fp-IconButton:where(.fp-active-appearance-subtle):where([data-state='open'], [data-popup-open]) {
     background-color: var(--figma-color-bg-selected);
     --color-icon: var(--figma-color-icon-brand);
   }
-.fp-IconButton[data-state='open']:where(.fp-active-appearance-solid) {
+.fp-IconButton:where(.fp-active-appearance-solid):where([data-state='open'], [data-popup-open]) {
     background-color: var(--figma-color-bg-selected-strong);
     --color-icon: var(--figma-color-icon-onbrand);
   }
@@ -998,10 +1241,10 @@
     background: none;
     content: '';
   }
-.fp-switchRoot[data-state='unchecked']::before {
+.fp-switchRoot[data-unchecked]::before {
     background: var(--figma-color-bg-tertiary);
   }
-.fp-switchRoot[data-state='checked']::before {
+.fp-switchRoot[data-checked]::before {
     background: var(--figma-color-bg-brand);
   }
 .fp-switchRoot:focus-visible {
@@ -1011,12 +1254,12 @@
 .fp-switchRoot:focus-visible::before {
       inset: 2px;
     }
-.fp-switchRoot[data-disabled][data-state='unchecked']::before {
+.fp-switchRoot[data-disabled][data-unchecked]::before {
       /* This gives it more contrast than the disabled checked state but this is
       how it is in Figma. ¯\_(ツ)_/¯  */
       background: var(--figma-color-bg-disabled);
     }
-.fp-switchRoot[data-disabled][data-state='checked']::before {
+.fp-switchRoot[data-disabled][data-checked]::before {
       background: var(--figma-color-bg-tertiary);
     }
 .fp-switchThumb {
@@ -1033,10 +1276,10 @@
 .fp-switchThumb[data-disabled] {
     background-color: var(--figma-color-icon-ondisabled);
   }
-.fp-switchThumb[data-state='unchecked'] {
+.fp-switchThumb[data-unchecked] {
     left: 1px;
   }
-.fp-switchThumb[data-state='checked'] {
+.fp-switchThumb[data-checked] {
     left: calc(100% - var(--space-3_5) - 1px);
   }
 :root,
@@ -1070,10 +1313,22 @@
     width: var(--slider-root-size);
     border-width: calc(var(--slider-thumb-width) / 2) 0;
   }
+.fp-SliderControl {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+  outline: 0;
+}
+.fp-SliderRoot[data-orientation='vertical'] .fp-SliderControl {
+  flex-direction: column;
+}
 .fp-SliderTrack {
   box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
+  position: static;
+  overflow: visible;
   flex-grow: 1;
   background: var(--slider-track-bg);
   border-radius: var(--radius-full);
@@ -1112,6 +1367,7 @@
 .fp-SliderThumb {
   box-sizing: border-box;
   display: block;
+  z-index: 1;
   width: var(--slider-track-size);
   height: var(--slider-track-size);
   background-color: var(--slider-thumb-bg);
@@ -1284,11 +1540,11 @@
   line-height: var(--line-height-default);
   white-space: nowrap;
 }
-.fp-TabsTrigger:where([data-state='inactive']) {
+.fp-TabsTrigger:where(:not([data-active])) {
     color: var(--figma-color-text-secondary);
     --color-icon: var(--figma-color-icon-secondary);
   }
-.fp-TabsTrigger:where([data-state='active']) {
+.fp-TabsTrigger:where([data-active]) {
     font-weight: var(--font-weight-strong);
     color: var(--figma-color-text);
     --color-icon: var(--figma-color-icon);
@@ -1378,6 +1634,7 @@
 .fp-RadioGroupItem {
   all: unset;
   box-sizing: border-box;
+  display: inline-block;
   width: 16px;
   height: 16px;
   background-color: var(--figma-color-bg);
@@ -1389,14 +1646,14 @@
 .fp-RadioGroupItem:focus-visible {
     outline-color: var(--figma-color-border-selected);
   }
-.fp-RadioGroupItem[data-state='checked'] {
+.fp-RadioGroupItem[data-checked] {
     background-color: var(--figma-color-icon);
     border-color: var(--figma-color-bg);
   }
 .fp-RadioGroupItem[data-disabled] {
     outline-color: var(--figma-color-icon-disabled);
   }
-.fp-RadioGroupItem[data-disabled][data-state='checked'] {
+.fp-RadioGroupItem[data-disabled][data-checked] {
     background-color: var(--figma-color-icon-disabled);
   }
 .fp-RadioGroupLabel {
@@ -1433,7 +1690,7 @@
   white-space: nowrap;
   --color-icon: var(--figma-color-icon-secondary);
 }
-.fp-SegmentedControlItem[aria-checked='true'] {
+.fp-SegmentedControlItem[data-pressed] {
     --color-icon: var(--figma-color-icon);
     background-color: var(--figma-color-bg);
     box-shadow: inset 0 0 0 var(--space-px) var(--figma-color-border);
@@ -1473,7 +1730,7 @@
 .fp-CollapsibleIndicator {
   --color-icon: var(--figma-color-icon-secondary);
 }
-[data-state='open'] > .fp-CollapsibleIndicator {
+[data-panel-open] > .fp-CollapsibleIndicator {
     transform: rotate(90deg);
   }
 .fp-CollapsibleContent {