@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/color-wheel-flower/ColorWheelFlower.palette.d.ts

@@ -0,0 +1,11 @@
+export type ColorWheelFlowerMode = "light" | "dark";
+export declare const COLOR_WHEEL_FLOWER_COLOR_COUNT = 31;
+/**
+ * Default literal palettes. Dark mode stays dark-oriented; light mode uses
+ * the same hue positions at materially lighter levels.
+ */
+export declare const COLOR_WHEEL_FLOWER_PALETTES: {
+    light: readonly string[];
+    dark: readonly string[];
+};
+export declare function resolveColorWheelFlowerPalette(mode: ColorWheelFlowerMode, palette?: readonly string[]): readonly string[];

package/dist/components/color-wheel-flower/ColorWheelFlower.palette.js

@@ -0,0 +1,50 @@
+import { createColorFromHsl } from "./ColorUtils.js";
+const COLOR_WHEEL_FLOWER_COLOR_COUNT = 31;
+const RING_HUES = [
+    42,
+    24,
+    4,
+    336,
+    300,
+    268,
+    238,
+    210,
+    184,
+    162,
+    132,
+    94
+];
+const INNER_HUES = [
+    30,
+    330,
+    270,
+    210,
+    150,
+    90
+];
+const hslHex = (hue, saturation, lightness)=>createColorFromHsl(hue, saturation, lightness).hex.toUpperCase();
+const createPalette = (mode)=>{
+    const levels = "dark" === mode ? [
+        22,
+        33,
+        44
+    ] : [
+        52,
+        66,
+        80
+    ];
+    return [
+        ...RING_HUES.map((hue)=>hslHex(hue, 72, levels[0])),
+        ...RING_HUES.map((hue)=>hslHex(hue, 68, levels[1])),
+        ...INNER_HUES.map((hue)=>hslHex(hue, 55, levels[2])),
+        "dark" === mode ? "#30343B" : "#F1F3F5"
+    ];
+};
+const COLOR_WHEEL_FLOWER_PALETTES = {
+    light: createPalette("light"),
+    dark: createPalette("dark")
+};
+function resolveColorWheelFlowerPalette(mode, palette) {
+    return palette?.length === COLOR_WHEEL_FLOWER_COLOR_COUNT ? palette : COLOR_WHEEL_FLOWER_PALETTES[mode];
+}
+export { COLOR_WHEEL_FLOWER_COLOR_COUNT, COLOR_WHEEL_FLOWER_PALETTES, resolveColorWheelFlowerPalette };

package/dist/components/color-wheel-flower/ColorWheelFlower.recipe.d.ts

@@ -0,0 +1,40 @@
+export declare const CLASSES: {
+    readonly base: "color-wheel-flower";
+    readonly flag: {
+        readonly disabled: "color-wheel-flower--disabled";
+    };
+    readonly rings: "color-wheel-flower__rings";
+    readonly ringShell: {
+        readonly base: "color-wheel-flower__ring-shell";
+        readonly outer: "color-wheel-flower__ring-shell--outer";
+        readonly inner: "color-wheel-flower__ring-shell--inner";
+    };
+    readonly ring: {
+        readonly base: "color-wheel-flower__ring";
+        readonly outer: "color-wheel-flower__ring--outer";
+        readonly inner: "color-wheel-flower__ring--inner";
+    };
+    readonly picker: "color-wheel-flower__picker";
+    readonly dot: {
+        readonly base: "color-wheel-flower__dot";
+        readonly frame: "color-wheel-flower__dot-frame";
+        readonly motion: "color-wheel-flower__dot-motion";
+    };
+    readonly halo: "color-wheel-flower__halo";
+    readonly swatch: {
+        readonly base: "color-wheel-flower__swatch";
+        readonly center: "color-wheel-flower__swatch--center";
+    };
+    readonly highlight: {
+        readonly base: "color-wheel-flower__highlight";
+        readonly hovered: "color-wheel-flower__highlight--hovered";
+        readonly pulsing: "color-wheel-flower__highlight--pulsing";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "color-wheel-flower";
+    readonly slots: {
+        readonly "color-wheel-flower": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/color-wheel-flower/ColorWheelFlower.recipe.js

@@ -0,0 +1,59 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "color-wheel-flower",
+    flag: {
+        disabled: "color-wheel-flower--disabled"
+    },
+    rings: "color-wheel-flower__rings",
+    ringShell: {
+        base: "color-wheel-flower__ring-shell",
+        outer: "color-wheel-flower__ring-shell--outer",
+        inner: "color-wheel-flower__ring-shell--inner"
+    },
+    ring: {
+        base: "color-wheel-flower__ring",
+        outer: "color-wheel-flower__ring--outer",
+        inner: "color-wheel-flower__ring--inner"
+    },
+    picker: "color-wheel-flower__picker",
+    dot: {
+        base: "color-wheel-flower__dot",
+        frame: "color-wheel-flower__dot-frame",
+        motion: "color-wheel-flower__dot-motion"
+    },
+    halo: "color-wheel-flower__halo",
+    swatch: {
+        base: "color-wheel-flower__swatch",
+        center: "color-wheel-flower__swatch--center"
+    },
+    highlight: {
+        base: "color-wheel-flower__highlight",
+        hovered: "color-wheel-flower__highlight--hovered",
+        pulsing: "color-wheel-flower__highlight--pulsing"
+    }
+};
+const componentRecipe = recipe({
+    component: "color-wheel-flower",
+    slots: {
+        "color-wheel-flower": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "color-wheel-flower": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "color-wheel-flower": 0,
+            root: 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/color-wheel-flower/index.d.ts

@@ -1,5 +1,7 @@
-export { default as ColorWheelFlower } from "./ColorWheelFlower";
-export type { ColorWheelFlowerProps } from "./ColorWheelFlower";
-export { ColorPickerContext, useColorPickerContext } from "./colorWheelFlowerContext";
+export { default as ColorWheelFlower } from "./ColorWheelFlower.generated";
+export type { ColorWheelFlowerProps } from "./ColorWheelFlower.generated";
+export { COLOR_WHEEL_FLOWER_COLOR_COUNT, COLOR_WHEEL_FLOWER_PALETTES, resolveColorWheelFlowerPalette, } from "./ColorWheelFlower.palette";
+export type { ColorWheelFlowerMode } from "./ColorWheelFlower.palette";
+export { ColorPickerContext, useColorPickerContext, } from "./colorWheelFlowerContext";
 export type { ColorPickerContextType } from "./colorWheelFlowerContext";
 export type { ColorFormat, ColorValue, RGB, RGBA, HSL, HSLA, } from "./ColorUtils";

package/dist/components/color-wheel-flower/index.js

@@ -1,2 +1,3 @@
-export { default as ColorWheelFlower } from "./ColorWheelFlower.js";
+export { default as ColorWheelFlower } from "./ColorWheelFlower.generated.js";
+export { COLOR_WHEEL_FLOWER_COLOR_COUNT, COLOR_WHEEL_FLOWER_PALETTES, resolveColorWheelFlowerPalette } from "./ColorWheelFlower.palette.js";
 export { ColorPickerContext, useColorPickerContext } from "./colorWheelFlowerContext.js";

package/dist/components/combo-box/ComboBox.generated.d.ts

@@ -0,0 +1,87 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ComboBox.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ComboBoxVariant = "primary" | "secondary";
+export type ComboBoxMenuTrigger = "focus" | "input" | "manual";
+export type ComboBoxKey = string | number;
+export type ComboBoxItem = {
+    id?: ComboBoxKey;
+    key?: ComboBoxKey;
+    label?: string;
+    textValue?: string;
+    disabled?: boolean;
+};
+export type ComboBoxRootProps<T = ComboBoxItem> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+    items?: readonly T[];
+    selectedKey?: ComboBoxKey | null;
+    defaultSelectedKey?: ComboBoxKey | null;
+    onSelectionChange?: (key: string | null) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputChange?: (value: string) => void;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    fullWidth?: boolean;
+    variant?: ComboBoxVariant;
+    menuTrigger?: ComboBoxMenuTrigger;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    allowsCustomValue?: boolean;
+    placeholder?: string;
+    name?: string;
+    isRequired?: boolean;
+    required?: boolean;
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    itemKey?: (item: T, index: number) => ComboBoxKey;
+    itemTextValue?: (item: T, index: number) => string;
+    itemDisabled?: (item: T, index: number) => boolean;
+};
+export type ComboBoxInputGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type ComboBoxInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "disabled"> & IComponentBaseProps & {
+    onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
+};
+export type ComboBoxTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled"> & IComponentBaseProps & {
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+};
+export type ComboBoxPopoverProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type ComboBoxListRenderItem = {
+    key: string;
+    textValue: string;
+    isSelected: boolean;
+    isActive: boolean;
+    isDisabled: boolean;
+    item: unknown;
+};
+export type ComboBoxListProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element | ((item: ComboBoxListRenderItem) => JSX.Element);
+    renderEmptyState?: () => JSX.Element;
+    endIcon?: JSX.Element;
+};
+declare const ComboBoxRoot: __LayoutComponent<ComboBoxRootProps>;
+declare const ComboBoxInputGroup: __LayoutComponent<ComboBoxInputGroupProps>;
+declare const ComboBoxInput: __LayoutComponent<ComboBoxInputProps>;
+declare const ComboBoxTrigger: __LayoutComponent<ComboBoxTriggerProps>;
+declare const ComboBoxPopover: __LayoutComponent<ComboBoxPopoverProps>;
+declare const ComboBoxList: __LayoutComponent<ComboBoxListProps>;
+declare const ComboBox: __LayoutComponent<ComboBoxRootProps<ComboBoxItem>> & {
+    Root: __LayoutComponent<ComboBoxRootProps<ComboBoxItem>>;
+    InputGroup: __LayoutComponent<ComboBoxInputGroupProps>;
+    Input: __LayoutComponent<ComboBoxInputProps>;
+    Trigger: __LayoutComponent<ComboBoxTriggerProps>;
+    Popover: __LayoutComponent<ComboBoxPopoverProps>;
+    List: __LayoutComponent<ComboBoxListProps>;
+};
+export default ComboBox;
+export { ComboBox, ComboBoxRoot, ComboBoxInputGroup, ComboBoxInput, ComboBoxTrigger, ComboBoxPopover, ComboBoxList, };
+export type { ComboBoxRootProps as ComboBoxProps };