@pathscale/ui 1.1.12 → 1.1.14

package/dist/components/pagination/Pagination.css

@@ -0,0 +1,121 @@
+@layer components {
+  .pagination {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .pagination {
+      flex-direction: row;
+    }
+  }
+
+  .pagination__summary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: flex-start;
+    font-size: 0.875rem;
+    opacity: 0.7;
+  }
+
+  @media (min-width: 640px) {
+    .pagination__summary {
+      align-self: center;
+    }
+  }
+
+  .pagination__content {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    align-self: flex-start;
+  }
+
+  @media (min-width: 640px) {
+    .pagination__content {
+      align-self: center;
+    }
+  }
+
+  .pagination__item {
+    display: inline-flex;
+  }
+
+  .pagination__link {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    height: 2.25rem;
+    width: 2.25rem;
+    transform-origin: center;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    border: 0;
+    background-color: transparent;
+    color: var(--color-base-content);
+    font-size: 0.875rem;
+    font-weight: 500;
+    white-space: nowrap;
+    outline: none;
+    user-select: none;
+    cursor: pointer;
+    transition:
+      transform 250ms var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)),
+      background-color 100ms ease-out,
+      box-shadow 100ms ease-out;
+  }
+
+  .pagination__link:focus-visible,
+  .pagination__link[data-focus-visible="true"] {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-focus, var(--color-accent));
+  }
+
+  .pagination__link:disabled,
+  .pagination__link[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  @media (hover: hover) {
+    .pagination__link:hover:not(:disabled),
+    .pagination__link[data-hovered="true"]:not(:disabled) {
+      background-color: var(--color-base-200);
+    }
+  }
+
+  .pagination__link:active:not(:disabled),
+  .pagination__link[data-pressed="true"]:not(:disabled) {
+    background-color: var(--color-base-300);
+    transform: scale(0.97);
+  }
+
+  .pagination__link[data-active="true"] {
+    background-color: var(--color-base-300);
+    color: var(--color-base-content);
+  }
+
+  .pagination__ellipsis {
+    display: inline-flex;
+    height: 2.25rem;
+    width: 2.25rem;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    opacity: 0.65;
+    user-select: none;
+  }
+
+  .pagination__link--nav {
+    width: auto;
+    gap: 0.375rem;
+    padding-inline: 0.625rem;
+  }
+}
+

package/dist/components/pagination/Pagination.d.ts

@@ -1,5 +1,11 @@
+import "./Pagination.css";
 import { type JSX } from "solid-js";
-import { type JoinProps } from "../join/Join";
-export type PaginationProps = JoinProps;
+import type { IComponentBaseProps } from "../types";
+export type PaginationProps = Omit<JSX.HTMLAttributes<HTMLElement>, "onChange"> & IComponentBaseProps & {
+    page: number;
+    total: number;
+    onChange: (page: number) => void;
+    isDisabled?: boolean;
+};
 declare const Pagination: (props: PaginationProps) => JSX.Element;
 export default Pagination;

package/dist/components/pagination/Pagination.js

@@ -1,17 +1,123 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Pagination.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__join_Join_js_ac0d20a5__ from "../join/Join.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<nav><div class=pagination__summary data-slot=pagination-summary>Page <!> of </div><ul class=pagination__content data-slot=pagination-content><li class=pagination__item data-slot=pagination-item><button type=button class="pagination__link pagination__link--nav"data-slot=pagination-previous aria-label="Go to previous page"><span aria-hidden=true>\u{2039}</span><span>Previous</span></button></li><li class=pagination__item data-slot=pagination-item><button type=button class="pagination__link pagination__link--nav"data-slot=pagination-next aria-label="Go to next page"><span>Next</span><span aria-hidden=true>\u{203A}`), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li class=pagination__item data-slot=pagination-item>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button class=pagination__link data-slot=pagination-link>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span class=pagination__ellipsis data-slot=pagination-ellipsis aria-hidden=true>\u{2026}`);
+const clampPage = (page, total)=>{
+    if (!Number.isFinite(page)) return 1;
+    return Math.min(Math.max(1, Math.floor(page)), total);
+};
+const getPaginationTokens = (page, total)=>{
+    if (total <= 0) return [];
+    if (total <= 7) return Array.from({
+        length: total
+    }, (_, index)=>index + 1);
+    if (page <= 4) return [
+        1,
+        2,
+        3,
+        4,
+        5,
+        "ellipsis-right",
+        total
+    ];
+    if (page >= total - 3) return [
+        1,
+        "ellipsis-left",
+        total - 4,
+        total - 3,
+        total - 2,
+        total - 1,
+        total
+    ];
+    return [
+        1,
+        "ellipsis-left",
+        page - 1,
+        page,
+        page + 1,
+        "ellipsis-right",
+        total
+    ];
+};
 const Pagination = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
-        "className"
+        "className",
+        "dataTheme",
+        "page",
+        "total",
+        "onChange",
+        "isDisabled"
     ]);
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__join_Join_js_ac0d20a5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
-        }
-    }));
+    const safeTotal = ()=>Math.max(1, Math.floor(local.total || 0));
+    const currentPage = ()=>clampPage(local.page, safeTotal());
+    const tokens = ()=>getPaginationTokens(currentPage(), safeTotal());
+    const disabled = ()=>Boolean(local.isDisabled);
+    const handleChange = (nextPage)=>{
+        if (disabled()) return;
+        const bounded = clampPage(nextPage, safeTotal());
+        if (bounded === currentPage()) return;
+        local.onChange(bounded);
+    };
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = (_el$5.nextSibling, _el$2.nextSibling), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "aria-label": "pagination",
+            role: "navigation",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("pagination", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "pagination"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, currentPage, _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, safeTotal, null);
+        _el$8.$$click = ()=>handleChange(currentPage() - 1);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            get each () {
+                return tokens();
+            },
+            children: (token)=>(()=>{
+                    var _el$1 = _tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, "number" == typeof token ? (()=>{
+                        var _el$10 = _tmpl$3();
+                        _el$10.$$click = ()=>handleChange(token);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-label", `Go to page ${token}`);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, token);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                            var _v$3 = token === currentPage() ? "true" : void 0, _v$4 = token === currentPage() ? "page" : void 0, _v$5 = disabled();
+                            _v$3 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "data-active", _p$.e = _v$3);
+                            _v$4 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-current", _p$.t = _v$4);
+                            _v$5 !== _p$.a && (_el$10.disabled = _p$.a = _v$5);
+                            return _p$;
+                        }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0
+                        });
+                        return _el$10;
+                    })() : _tmpl$4());
+                    return _el$1;
+                })()
+        }), _el$9);
+        _el$0.$$click = ()=>handleChange(currentPage() + 1);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = disabled() || currentPage() <= 1, _v$2 = disabled() || currentPage() >= safeTotal();
+            _v$ !== _p$.e && (_el$8.disabled = _p$.e = _v$);
+            _v$2 !== _p$.t && (_el$0.disabled = _p$.t = _v$2);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$;
+    })();
 };
 const pagination_Pagination = Pagination;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
 export { pagination_Pagination as default };

package/dist/components/select/Select.css

@@ -0,0 +1,244 @@
+@layer components {
+  .ui-select {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .ui-select--full-width {
+    width: 100%;
+  }
+
+  .ui-select__trigger {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    min-height: 2.25rem;
+    width: fit-content;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--color-field-border, var(--color-base-300));
+    background-color: var(--color-field, var(--color-base-100));
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+    font-size: 0.875rem;
+    line-height: 1.25;
+    color: var(--color-field-foreground, var(--color-base-content));
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    box-shadow:
+      0 1px 2px oklch(0% 0 0 / 0.06),
+      0 1px 0 oklch(100% 0 0 / 0.04) inset;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease,
+      box-shadow 150ms ease,
+      transform 150ms ease,
+      color 150ms ease;
+  }
+
+  .ui-select__trigger--full-width {
+    width: 100%;
+  }
+
+  @media (hover: hover) {
+    .ui-select__trigger:hover:not(:disabled) {
+      background-color: var(--color-base-200);
+      border-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+    }
+  }
+
+  .ui-select__trigger:focus-visible,
+  .ui-select__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-color: var(--color-accent);
+    background-color: color-mix(in oklch, var(--color-accent) 8%, var(--color-base-100));
+  }
+
+  .ui-select__trigger:active:not(:disabled) {
+    transform: scale(0.99);
+  }
+
+  .ui-select__trigger:disabled,
+  .ui-select[data-disabled="true"] .ui-select__trigger,
+  .ui-select__trigger[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+    background-color: var(--color-base-200);
+  }
+
+  .ui-select--secondary .ui-select__trigger {
+    border-color: transparent;
+    background-color: var(--color-base-200);
+    box-shadow: none;
+  }
+
+  @media (hover: hover) {
+    .ui-select--secondary .ui-select__trigger:hover:not(:disabled) {
+      background-color: var(--color-base-300);
+    }
+  }
+
+  .ui-select__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-select__value[data-placeholder="true"] {
+    color: color-mix(in oklch, var(--color-base-content) 42%, transparent);
+  }
+
+  .ui-select__indicator {
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+    transition:
+      transform 150ms ease,
+      color 150ms ease;
+  }
+
+  .ui-select__indicator svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ui-select__indicator[data-open="true"] {
+    transform: rotate(180deg);
+    color: var(--color-base-content);
+  }
+
+  .ui-select__popover {
+    display: none;
+    position: absolute;
+    z-index: 80;
+    top: calc(100% + 0.375rem);
+    inset-inline-start: 0;
+    min-width: max(100%, 14rem);
+    max-width: min(30rem, calc(100vw - 2rem));
+    max-height: min(24rem, 70vh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-radius: 1.5rem;
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+    background-color: var(--color-base-100);
+    box-shadow:
+      0 20px 32px oklch(0% 0 0 / 0.16),
+      0 8px 18px oklch(0% 0 0 / 0.1);
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+    transform-origin: top;
+    pointer-events: none;
+    transition:
+      opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
+      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
+      visibility 150ms ease;
+  }
+
+  .ui-select__popover[data-open="true"] {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+  }
+
+  .ui-select__listbox {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0.375rem;
+    outline: none;
+  }
+
+  .ui-select__option {
+    display: flex;
+    min-height: 2.25rem;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    border: 0;
+    border-radius: 1rem;
+    background: transparent;
+    padding: 0.5rem 0.625rem;
+    text-align: start;
+    font-size: 0.875rem;
+    line-height: 1.2;
+    color: var(--color-base-content);
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color 150ms ease,
+      color 120ms ease,
+      transform 150ms ease,
+      opacity 120ms ease;
+  }
+
+  .ui-select__option-label {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .ui-select__option-indicator {
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: scale(0.85);
+    transition:
+      opacity 120ms ease,
+      transform 150ms ease;
+  }
+
+  .ui-select__option-indicator svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ui-select__option[data-selected="true"] .ui-select__option-indicator {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .ui-select__option[data-focused="true"],
+  .ui-select__option:focus-visible {
+    background-color: var(--color-base-200);
+  }
+
+  @media (hover: hover) {
+    .ui-select__option:hover:not(:disabled):not([data-disabled="true"]) {
+      background-color: var(--color-base-200);
+    }
+  }
+
+  .ui-select__option:active:not(:disabled):not([data-disabled="true"]) {
+    transform: scale(0.99);
+    background-color: var(--color-base-300);
+  }
+
+  .ui-select__option[data-selected="true"] {
+    color: var(--color-base-content);
+  }
+
+  .ui-select__option:disabled,
+  .ui-select__option[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+}

package/dist/components/select/Select.d.ts

@@ -1,16 +1,47 @@
-import "./select.css";
-import { type JSX, type Component } from "solid-js";
-import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
-type SelectBaseProps = {
-    color?: ComponentColor;
-    size?: ComponentSize;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
+import "./Select.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type SelectKey = string | number;
+export type SelectValueType = SelectKey | SelectKey[] | null;
+export type SelectVariant = "primary" | "secondary";
+export type SelectSelectionMode = "single" | "multiple";
+export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & IComponentBaseProps & {
+    children: JSX.Element;
     placeholder?: string;
-    value?: string | string[] | number;
+    value?: SelectValueType;
+    defaultValue?: SelectValueType;
+    selectedKeys?: Iterable<SelectKey>;
+    defaultSelectedKeys?: Iterable<SelectKey>;
+    onChange?: (value: string | string[] | null) => void;
+    onSelectionChange?: (keys: Set<string>) => void;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    variant?: SelectVariant;
+    selectionMode?: SelectSelectionMode;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
-export type SelectProps = SelectBaseProps & IComponentBaseProps & Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, keyof SelectBaseProps>;
-declare const Select: Component<SelectProps>;
+export type SelectTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & IComponentBaseProps;
+export type SelectValueProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
+export type SelectIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
+export type SelectPopoverProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type SelectListboxProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type SelectOptionProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "value"> & IComponentBaseProps & {
+    value: SelectKey;
+    textValue?: string;
+    isDisabled?: boolean;
+};
+export type SelectProps = SelectRootProps;
+type SelectComponent = Component<SelectRootProps> & {
+    Root: Component<SelectRootProps>;
+    Trigger: Component<SelectTriggerProps>;
+    Value: Component<SelectValueProps>;
+    Indicator: Component<SelectIndicatorProps>;
+    Popover: Component<SelectPopoverProps>;
+    Listbox: Component<SelectListboxProps>;
+    Option: Component<SelectOptionProps>;
+};
+declare const Select: SelectComponent;
 export default Select;