@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/modal/Modal.recipe.d.ts

@@ -1,104 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "modal";
-        readonly flag: {
-            readonly open: "modal--open";
-        };
-    };
-    readonly Trigger: {
-        readonly base: "modal__trigger";
-    };
-    readonly Backdrop: {
-        readonly base: "modal__backdrop";
-        readonly variant: {
-            readonly transparent: "modal__backdrop--transparent";
-            readonly opaque: "modal__backdrop--opaque";
-            readonly blur: "modal__backdrop--blur";
-        };
-        readonly state: {
-            readonly entering: "modal__backdrop--entering";
-            readonly exiting: "modal__backdrop--exiting";
-        };
-    };
-    readonly Container: {
-        readonly base: "modal__container";
-        readonly placement: {
-            readonly auto: "modal__container--auto";
-            readonly top: "modal__container--top";
-            readonly center: "modal__container--center";
-            readonly bottom: "modal__container--bottom";
-        };
-        readonly scroll: {
-            readonly inside: "modal__container--scroll-inside";
-            readonly outside: "modal__container--scroll-outside";
-        };
-        readonly size: {
-            readonly cover: "modal__container--size-cover";
-            readonly full: "modal__container--size-full";
-        };
-        readonly state: {
-            readonly entering: "modal__container--entering";
-            readonly exiting: "modal__container--exiting";
-        };
-    };
-    readonly Content: {
-        readonly base: "modal__content";
-        readonly scroll: {
-            readonly inside: "modal__content--scroll-inside";
-            readonly outside: "modal__content--scroll-outside";
-        };
-        readonly size: {
-            readonly xs: "modal__content--xs";
-            readonly sm: "modal__content--sm";
-            readonly md: "modal__content--md";
-            readonly lg: "modal__content--lg";
-            readonly cover: "modal__content--cover";
-            readonly full: "modal__content--full";
-        };
-        readonly state: {
-            readonly entering: "modal__content--entering";
-            readonly exiting: "modal__content--exiting";
-        };
-    };
-    readonly Header: {
-        readonly base: "modal__header";
-    };
-    readonly Heading: {
-        readonly base: "modal__heading";
-    };
-    readonly Icon: {
-        readonly base: "modal__icon";
-    };
-    readonly Body: {
-        readonly base: "modal__body";
-        readonly scroll: {
-            readonly inside: "modal__body--scroll-inside";
-            readonly outside: "modal__body--scroll-outside";
-        };
-    };
-    readonly Footer: {
-        readonly base: "modal__footer";
-    };
-    readonly CloseTrigger: {
-        readonly base: "modal__close-trigger";
-        readonly icon: "modal__close-trigger-icon";
-    };
-};
-export declare const componentRecipe: import("solid-layouts").Recipe<{
-    readonly component: "modal";
-    readonly slots: {
-        readonly "modal-backdrop": {};
-        readonly "modal-body": {};
-        readonly "modal-close-trigger": {};
-        readonly "modal-close-trigger-icon": {};
-        readonly "modal-container": {};
-        readonly "modal-content": {};
-        readonly "modal-footer": {};
-        readonly "modal-header": {};
-        readonly "modal-heading": {};
-        readonly "modal-icon": {};
-        readonly "modal-root": {};
-        readonly "modal-trigger": {};
-        readonly root: {};
-    };
-}>;

package/dist/components/modal/Modal.recipe.js

@@ -1,178 +0,0 @@
-import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    Root: {
-        base: "modal",
-        flag: {
-            open: "modal--open"
-        }
-    },
-    Trigger: {
-        base: "modal__trigger"
-    },
-    Backdrop: {
-        base: "modal__backdrop",
-        variant: {
-            transparent: "modal__backdrop--transparent",
-            opaque: "modal__backdrop--opaque",
-            blur: "modal__backdrop--blur"
-        },
-        state: {
-            entering: "modal__backdrop--entering",
-            exiting: "modal__backdrop--exiting"
-        }
-    },
-    Container: {
-        base: "modal__container",
-        placement: {
-            auto: "modal__container--auto",
-            top: "modal__container--top",
-            center: "modal__container--center",
-            bottom: "modal__container--bottom"
-        },
-        scroll: {
-            inside: "modal__container--scroll-inside",
-            outside: "modal__container--scroll-outside"
-        },
-        size: {
-            cover: "modal__container--size-cover",
-            full: "modal__container--size-full"
-        },
-        state: {
-            entering: "modal__container--entering",
-            exiting: "modal__container--exiting"
-        }
-    },
-    Content: {
-        base: "modal__content",
-        scroll: {
-            inside: "modal__content--scroll-inside",
-            outside: "modal__content--scroll-outside"
-        },
-        size: {
-            xs: "modal__content--xs",
-            sm: "modal__content--sm",
-            md: "modal__content--md",
-            lg: "modal__content--lg",
-            cover: "modal__content--cover",
-            full: "modal__content--full"
-        },
-        state: {
-            entering: "modal__content--entering",
-            exiting: "modal__content--exiting"
-        }
-    },
-    Header: {
-        base: "modal__header"
-    },
-    Heading: {
-        base: "modal__heading"
-    },
-    Icon: {
-        base: "modal__icon"
-    },
-    Body: {
-        base: "modal__body",
-        scroll: {
-            inside: "modal__body--scroll-inside",
-            outside: "modal__body--scroll-outside"
-        }
-    },
-    Footer: {
-        base: "modal__footer"
-    },
-    CloseTrigger: {
-        base: "modal__close-trigger",
-        icon: "modal__close-trigger-icon"
-    }
-};
-const componentRecipe = recipe({
-    component: "modal",
-    slots: {
-        "modal-backdrop": {},
-        "modal-body": {},
-        "modal-close-trigger": {},
-        "modal-close-trigger-icon": {},
-        "modal-container": {},
-        "modal-content": {},
-        "modal-footer": {},
-        "modal-header": {},
-        "modal-heading": {},
-        "modal-icon": {},
-        "modal-root": {},
-        "modal-trigger": {},
-        root: {}
-    },
-    _layouts: {
-        slots: {
-            "modal-backdrop": {
-                base: "",
-                axes: {}
-            },
-            "modal-body": {
-                base: "",
-                axes: {}
-            },
-            "modal-close-trigger": {
-                base: "",
-                axes: {}
-            },
-            "modal-close-trigger-icon": {
-                base: "",
-                axes: {}
-            },
-            "modal-container": {
-                base: "",
-                axes: {}
-            },
-            "modal-content": {
-                base: "",
-                axes: {}
-            },
-            "modal-footer": {
-                base: "",
-                axes: {}
-            },
-            "modal-header": {
-                base: "",
-                axes: {}
-            },
-            "modal-heading": {
-                base: "",
-                axes: {}
-            },
-            "modal-icon": {
-                base: "",
-                axes: {}
-            },
-            "modal-root": {
-                base: "",
-                axes: {}
-            },
-            "modal-trigger": {
-                base: "",
-                axes: {}
-            },
-            root: {
-                base: "",
-                axes: {}
-            }
-        },
-        stateKeys: [],
-        slotIds: {
-            "modal-backdrop": 0,
-            "modal-body": 1,
-            "modal-close-trigger": 2,
-            "modal-close-trigger-icon": 3,
-            "modal-container": 4,
-            "modal-content": 5,
-            "modal-footer": 6,
-            "modal-header": 7,
-            "modal-heading": 8,
-            "modal-icon": 9,
-            "modal-root": 10,
-            "modal-trigger": 11,
-            root: 12
-        }
-    }
-});
-export { CLASSES, componentRecipe };

package/dist/components/modal/index.d.ts

@@ -1 +0,0 @@
-export { default, ModalRoot, ModalTrigger, ModalBackdrop, ModalContent, ModalHeader, ModalHeading, ModalIcon, ModalBody, ModalFooter, ModalCloseTrigger, type ModalProps, type DialogProps, type ModalPlacement, type ModalSize, type ModalBackdropVariant, type ModalScrollBehavior, type ModalRootProps, type ModalTriggerProps, type ModalBackdropProps, type ModalContentProps, type ModalHeaderProps, type ModalHeadingProps, type ModalIconProps, type ModalBodyProps, type ModalFooterProps, type ModalCloseTriggerProps, } from "./Modal.generated";

package/dist/components/modal/index.js

@@ -1 +0,0 @@
-export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger, default } from "./Modal.generated.js";

package/dist/components/number-field/NumberField.css

@@ -1,198 +0,0 @@
-@layer components {
-  .number-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .number-field[data-invalid="true"] [data-slot="description"],
-  .number-field[aria-invalid="true"] [data-slot="description"] {
-    display: none;
-  }
-
-  .number-field [data-slot="label"] {
-    width: fit-content;
-  }
-
-  .number-field [data-slot="description"] {
-    padding-inline: 0.25rem;
-  }
-
-  .number-field__group {
-    display: grid;
-    grid-template-columns: 2.5rem 1fr 2.5rem;
-    align-items: center;
-    height: 2.25rem;
-    overflow: hidden;
-    border-radius: var(--radius-field, 0.75rem);
-    border: var(--border-width-field, 1px) solid
-      var(--color-field-border, color-mix(in oklab, var(--color-base-content) 16%, transparent));
-    background-color: var(--color-field, var(--color-base-100));
-    color: var(--color-field-foreground, var(--color-base-content));
-    box-shadow:
-      0 1px 0 color-mix(in oklab, var(--color-base-content) 8%, transparent),
-      0 1px 0 color-mix(in oklab, var(--color-base-100) 60%, transparent) inset;
-    outline: none;
-    transition:
-      background-color 150ms var(--ease-smooth),
-      border-color 150ms var(--ease-smooth),
-      box-shadow 150ms var(--ease-out);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .number-field__group {
-      transition: none;
-    }
-  }
-
-  @media (hover: hover) {
-    .number-field__group:hover:not(:focus-within):not([data-disabled="true"]) {
-      background-color: var(--color-field-hover, var(--color-base-200));
-      border-color: var(--color-field-border-hover, color-mix(in oklab, var(--color-base-content) 22%, transparent));
-    }
-  }
-
-  .number-field__group:focus-within,
-  .number-field__group[data-focus-within="true"] {
-    border-color: var(--color-field-border-focus, var(--color-accent));
-    background-color: var(--color-field-focus, var(--color-base-100));
-    box-shadow:
-      0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
-      0 1px 0 color-mix(in oklab, var(--color-accent) 24%, transparent);
-  }
-
-  .number-field__group[data-invalid="true"] {
-    border-color: var(--color-field-border-invalid, var(--color-danger));
-    background-color: var(--color-field-focus, var(--color-base-100));
-    box-shadow:
-      0 0 0 3px color-mix(in oklab, var(--color-danger) 20%, transparent),
-      0 1px 0 color-mix(in oklab, var(--color-danger) 20%, transparent);
-  }
-
-  .number-field__group[data-disabled="true"],
-  .number-field__group[aria-disabled="true"] {
-    cursor: not-allowed;
-    background-color: var(--color-base-200);
-    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
-    opacity: var(--disabled-opacity, 0.6);
-    box-shadow: none;
-  }
-
-  .number-field__input {
-    min-width: 0;
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-    padding-block: 0.5rem;
-    padding-inline: 0.75rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: inherit;
-    outline: none;
-    box-shadow: none;
-    text-align: center;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .number-field__input::placeholder {
-    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
-  }
-
-  .number-field__input:focus,
-  .number-field__input:focus-visible {
-    outline: none;
-  }
-
-  .number-field__increment-button,
-  .number-field__decrement-button {
-    display: flex;
-    width: 2.5rem;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    cursor: var(--cursor-interactive, pointer);
-    outline: none;
-    transition:
-      background-color 150ms var(--ease-smooth),
-      border-color 150ms var(--ease-smooth),
-      transform 150ms var(--ease-out);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .number-field__increment-button,
-    .number-field__decrement-button {
-      transition: none;
-    }
-  }
-
-  .number-field__increment-button {
-    border-inline-start: var(--border-width-field, 1px) solid
-      color-mix(in oklab, var(--color-field-placeholder, var(--color-base-content)) 25%, transparent);
-  }
-
-  .number-field__decrement-button {
-    border-inline-end: var(--border-width-field, 1px) solid
-      color-mix(in oklab, var(--color-field-placeholder, var(--color-base-content)) 25%, transparent);
-  }
-
-  @media (hover: hover) {
-    .number-field__increment-button:hover:not(:disabled),
-    .number-field__decrement-button:hover:not(:disabled) {
-      background-color: color-mix(in oklab, var(--color-base-content) 7%, transparent);
-    }
-  }
-
-  .number-field__increment-button:active:not(:disabled),
-  .number-field__increment-button[data-pressed="true"],
-  .number-field__decrement-button:active:not(:disabled),
-  .number-field__decrement-button[data-pressed="true"] {
-    background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
-    transform: scale(0.97);
-  }
-
-  .number-field__increment-button:disabled,
-  .number-field__decrement-button:disabled,
-  .number-field__increment-button[data-disabled="true"],
-  .number-field__decrement-button[data-disabled="true"] {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-
-  .number-field__increment-button [data-slot="number-field-increment-button-icon"],
-  .number-field__decrement-button [data-slot="number-field-decrement-button-icon"] {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .number-field--secondary .number-field__group {
-    box-shadow: none;
-    background-color: var(--number-field-group-bg, var(--color-default, var(--color-base-200)));
-  }
-
-  @media (hover: hover) {
-    .number-field--secondary .number-field__group:hover:not(:focus-within):not([data-disabled="true"]) {
-      background-color: var(--number-field-group-bg-hover, var(--color-default-hover, var(--color-base-300)));
-    }
-  }
-
-  .number-field--secondary .number-field__group:focus-within,
-  .number-field--secondary .number-field__group[data-focus-within="true"] {
-    background-color: var(--number-field-group-bg-focus, var(--color-default, var(--color-base-200)));
-  }
-
-  .number-field--secondary .number-field__group[data-invalid="true"] {
-    border-color: var(--color-field-border-invalid, var(--color-danger));
-    background-color: var(--number-field-group-bg-focus, var(--color-default, var(--color-base-200)));
-  }
-
-  .number-field--full-width {
-    width: 100%;
-  }
-
-  .number-field__group--full-width {
-    width: 100%;
-  }
-}

package/dist/components/number-field/NumberField.generated.d.ts

@@ -1,49 +0,0 @@
-import type { Component as __LayoutComponent } from "solid-js";
-import "./NumberField.css";
-import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type NumberFieldVariant = "primary" | "secondary";
-export type NumberFieldRenderProps = {
-    value: number | undefined;
-    isInvalid: boolean;
-    isDisabled: boolean;
-};
-export type NumberFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & IComponentBaseProps & {
-    children?: JSX.Element | ((props: NumberFieldRenderProps) => JSX.Element);
-    name?: string;
-    value?: number;
-    defaultValue?: number;
-    onChange?: (value: number | undefined) => void;
-    onBlur?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
-    min?: number;
-    max?: number;
-    step?: number;
-    fullWidth?: boolean;
-    variant?: NumberFieldVariant;
-    isDisabled?: boolean;
-    disabled?: boolean;
-    isInvalid?: boolean;
-};
-export type NumberFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element | ((props: NumberFieldRenderProps) => JSX.Element);
-};
-export type NumberFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & IComponentBaseProps & {
-    onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
-};
-export type NumberFieldIncrementButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & IComponentBaseProps;
-export type NumberFieldDecrementButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & IComponentBaseProps;
-declare const NumberFieldRoot: __LayoutComponent<NumberFieldRootProps>;
-declare const NumberFieldGroup: __LayoutComponent<NumberFieldGroupProps>;
-declare const NumberFieldInput: __LayoutComponent<NumberFieldInputProps>;
-declare const NumberFieldIncrementButton: __LayoutComponent<NumberFieldIncrementButtonProps>;
-declare const NumberFieldDecrementButton: __LayoutComponent<NumberFieldDecrementButtonProps>;
-declare const NumberField: __LayoutComponent<NumberFieldRootProps> & {
-    Root: __LayoutComponent<NumberFieldRootProps>;
-    Group: __LayoutComponent<NumberFieldGroupProps>;
-    Input: __LayoutComponent<NumberFieldInputProps>;
-    IncrementButton: __LayoutComponent<NumberFieldIncrementButtonProps>;
-    DecrementButton: __LayoutComponent<NumberFieldDecrementButtonProps>;
-};
-export default NumberField;
-export { NumberField, NumberFieldRoot, NumberFieldGroup, NumberFieldInput, NumberFieldIncrementButton, NumberFieldDecrementButton, };
-export type { NumberFieldRootProps as NumberFieldProps };