@pathscale/ui 1.2.1 → 1.2.2

package/dist/components/radio-group/RadioGroup.classes.d.ts

@@ -0,0 +1,21 @@
+export declare const CLASSES: {
+    readonly base: "radio-group";
+    readonly slot: {
+        readonly label: "radio-group__label";
+        readonly description: "radio-group__description";
+        readonly error: "radio-group__error";
+        readonly items: "radio-group__items";
+    };
+    readonly orientation: {
+        readonly vertical: "radio-group--vertical";
+        readonly horizontal: "radio-group--horizontal";
+    };
+    readonly variant: {
+        readonly primary: "radio-group--primary";
+        readonly secondary: "radio-group--secondary";
+    };
+    readonly flag: {
+        readonly disabled: "radio-group--disabled";
+        readonly invalid: "radio-group--invalid";
+    };
+};

package/dist/components/radio-group/RadioGroup.classes.js

@@ -0,0 +1,22 @@
+const CLASSES = {
+    base: "radio-group",
+    slot: {
+        label: "radio-group__label",
+        description: "radio-group__description",
+        error: "radio-group__error",
+        items: "radio-group__items"
+    },
+    orientation: {
+        vertical: "radio-group--vertical",
+        horizontal: "radio-group--horizontal"
+    },
+    variant: {
+        primary: "radio-group--primary",
+        secondary: "radio-group--secondary"
+    },
+    flag: {
+        disabled: "radio-group--disabled",
+        invalid: "radio-group--invalid"
+    }
+};
+export { CLASSES };

package/dist/components/radio-group/RadioGroup.js

@@ -3,16 +3,9 @@ import "./RadioGroup.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__context_js_80e2871f__ from "./context.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=radio-group__label data-slot=label>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=radio-group__description data-slot=description>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=radio-group__error data-slot=error-message>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=radio-group__items data-slot=radio-group-items>");
-const ORIENTATION_CLASS_MAP = {
-    vertical: "radio-group--vertical",
-    horizontal: "radio-group--horizontal"
-};
-const VARIANT_CLASS_MAP = {
-    primary: "radio-group--primary",
-    secondary: "radio-group--secondary"
-};
-const RadioGroup_RadioGroup = (props)=>{
+import * as __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__ from "./RadioGroup.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
+const RadioGroup = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "class",
@@ -73,7 +66,7 @@ const RadioGroup_RadioGroup = (props)=>{
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__.RadioGroupContext.Provider, {
         value: contextValue,
         get children () {
-            var _el$ = _tmpl$4(), _el$4 = _el$.firstChild;
+            var _el$ = _tmpl$2(), _el$4 = _el$.firstChild;
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
                 role: "radiogroup",
                 get ["aria-invalid"] () {
@@ -100,11 +93,10 @@ const RadioGroup_RadioGroup = (props)=>{
                 },
                 get ["data-invalid"] () {
                     return isInvalid() ? "true" : "false";
-                },
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("radio-group", ORIENTATION_CLASS_MAP[orientation()], VARIANT_CLASS_MAP[variant()], isDisabled() && "radio-group--disabled", isInvalid() && "radio-group--invalid", local.class, local.className);
                 }
-            }), false, true);
+            }, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.orientation[orientation()], __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.variant[variant()], isDisabled() && __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.flag.disabled, isInvalid() && __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.flag.invalid, local.class, local.className)
+                })), false, true);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                 get when () {
                     return local.label;
@@ -112,6 +104,11 @@ const RadioGroup_RadioGroup = (props)=>{
                 get children () {
                     var _el$2 = _tmpl$();
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "id", labelId);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.slot.label
+                        }), {
+                        "data-slot": "label"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.label);
                     return _el$2;
                 }
@@ -121,20 +118,35 @@ const RadioGroup_RadioGroup = (props)=>{
                     return local.description;
                 },
                 get children () {
-                    var _el$3 = _tmpl$2();
+                    var _el$3 = _tmpl$();
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "id", descriptionId);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.slot.description
+                        }), {
+                        "data-slot": "description"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.description);
                     return _el$3;
                 }
             }), _el$4);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                    class: __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.slot.items
+                }), {
+                "data-slot": "radio-group-items"
+            }), false, true);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                 get when () {
                     return local.errorMessage;
                 },
                 get children () {
-                    var _el$5 = _tmpl$3();
+                    var _el$5 = _tmpl$();
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", errorId);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__RadioGroup_classes_js_a7b0adc2__.CLASSES.slot.error
+                        }), {
+                        "data-slot": "error-message"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.errorMessage);
                     return _el$5;
                 }
@@ -143,5 +155,5 @@ const RadioGroup_RadioGroup = (props)=>{
         }
     });
 };
-const RadioGroup = RadioGroup_RadioGroup;
-export { RadioGroup as default };
+const radio_group_RadioGroup = RadioGroup;
+export { radio_group_RadioGroup as default };

package/dist/components/range-calendar/RangeCalendar.classes.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "range-calendar";
+        readonly flag: {
+            readonly disabled: "range-calendar--disabled";
+        };
+    };
+    readonly Calendar: {
+        readonly base: "range-calendar__calendar";
+    };
+};

package/dist/components/range-calendar/RangeCalendar.classes.js

@@ -0,0 +1,12 @@
+const CLASSES = {
+    Root: {
+        base: "range-calendar",
+        flag: {
+            disabled: "range-calendar--disabled"
+        }
+    },
+    Calendar: {
+        base: "range-calendar__calendar"
+    }
+};
+export { CLASSES };

package/dist/components/range-calendar/RangeCalendar.css

@@ -0,0 +1,51 @@
+@layer components {
+  .range-calendar {
+    width: 15.75rem;
+    max-width: 100%;
+    container-type: inline-size;
+  }
+
+  .range-calendar--disabled {
+    opacity: var(--disabled-opacity, 0.72);
+  }
+
+  .range-calendar__calendar {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .range-calendar__calendar .calendar {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .range-calendar__calendar .calendar__heading {
+    text-align: center;
+  }
+
+  .range-calendar__calendar .calendar__cell--in-range,
+  .range-calendar__calendar .calendar__cell--in-preview-range {
+    border-radius: 0.5rem;
+  }
+
+  .range-calendar__calendar .calendar__cell--range-start.calendar__cell--in-range,
+  .range-calendar__calendar .calendar__cell--range-start.calendar__cell--in-preview-range {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+    border-top-right-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  .range-calendar__calendar .calendar__cell--range-end.calendar__cell--in-range,
+  .range-calendar__calendar .calendar__cell--range-end.calendar__cell--in-preview-range {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+    border-top-left-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+  }
+
+  .range-calendar__calendar .calendar__cell--range-start.calendar__cell--range-end {
+    border-radius: 9999px;
+  }
+}
+

package/dist/components/range-calendar/RangeCalendar.d.ts

@@ -0,0 +1,24 @@
+import "./RangeCalendar.css";
+import { type JSX } from "solid-js";
+import { type ControlledDateRangeValue } from "../../hooks/date";
+import { type CalendarWeekdayFormat } from "../calendar";
+import type { IComponentBaseProps } from "../types";
+export type RangeCalendarValue = ControlledDateRangeValue;
+type RangeCalendarBaseProps = {
+    value?: RangeCalendarValue;
+    defaultValue?: RangeCalendarValue;
+    onChange?: (value: RangeCalendarValue) => void;
+    locale?: string;
+    weekdayFormat?: CalendarWeekdayFormat;
+    minValue?: Date;
+    maxValue?: Date;
+    isDateUnavailable?: (date: Date) => boolean;
+    showOutsideDays?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    onDaySelect?: (date: Date) => void;
+    onDayHover?: (date?: Date) => void;
+};
+export type RangeCalendarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & RangeCalendarBaseProps;
+declare const RangeCalendar: (props: RangeCalendarProps) => JSX.Element;
+export default RangeCalendar;

package/dist/components/range-calendar/RangeCalendar.js

@@ -0,0 +1,110 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./RangeCalendar.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__hooks_date_index_js_897f0efe__ from "../../hooks/date/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__calendar_index_js_fe41d1b9__ from "../calendar/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RangeCalendar_classes_js_4681dcc3__ from "./RangeCalendar.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const RangeCalendar_RangeCalendar = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "ref",
+        "value",
+        "defaultValue",
+        "onChange",
+        "locale",
+        "weekdayFormat",
+        "minValue",
+        "maxValue",
+        "isDateUnavailable",
+        "showOutsideDays",
+        "isDisabled",
+        "disabled",
+        "onDaySelect",
+        "onDayHover"
+    ]);
+    const isDisabled = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
+    const rangeSelection = (0, __WEBPACK_EXTERNAL_MODULE__hooks_date_index_js_897f0efe__.useRangeSelection)({
+        value: ()=>local.value,
+        defaultValue: ()=>local.defaultValue,
+        onChange: ()=>local.onChange
+    });
+    const handleDaySelect = (date)=>{
+        local.onDaySelect?.(date);
+        rangeSelection.selectDate(date);
+    };
+    const handleDayHover = (date)=>{
+        local.onDayHover?.(date);
+        rangeSelection.setHoverDate(date);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+            if ("function" == typeof local.ref) local.ref(node);
+        }, _el$);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "data-slot": "range-calendar",
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__RangeCalendar_classes_js_4681dcc3__.CLASSES.Root.base, isDisabled() && __WEBPACK_EXTERNAL_MODULE__RangeCalendar_classes_js_4681dcc3__.CLASSES.Root.flag.disabled, local.class, local.className)
+            })), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__calendar_index_js_fe41d1b9__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__RangeCalendar_classes_js_4681dcc3__.CLASSES.Calendar.base
+            }), {
+            selectionMode: "range",
+            get value () {
+                return rangeSelection.focusDate() ?? void 0;
+            },
+            get rangeStart () {
+                return rangeSelection.rangeStart() ?? void 0;
+            },
+            get rangeEnd () {
+                return rangeSelection.rangeEnd() ?? void 0;
+            },
+            get rangePreview () {
+                return rangeSelection.hoveredDate() ?? void 0;
+            },
+            get locale () {
+                return local.locale;
+            },
+            get weekdayFormat () {
+                return local.weekdayFormat;
+            },
+            get minValue () {
+                return local.minValue;
+            },
+            get maxValue () {
+                return local.maxValue;
+            },
+            get isDateUnavailable () {
+                return local.isDateUnavailable;
+            },
+            get showOutsideDays () {
+                return local.showOutsideDays;
+            },
+            get isDisabled () {
+                return isDisabled();
+            },
+            onDaySelect: handleDaySelect,
+            onDayHover: handleDayHover
+        })));
+        return _el$;
+    })();
+};
+const RangeCalendar = RangeCalendar_RangeCalendar;
+export { RangeCalendar as default };

package/dist/components/range-calendar/index.d.ts

@@ -0,0 +1 @@
+export { default, type RangeCalendarProps, type RangeCalendarValue, } from "./RangeCalendar";

package/dist/components/range-calendar/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__RangeCalendar_js_087f6a97__ from "./RangeCalendar.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__RangeCalendar_js_087f6a97__["default"];
+export { __webpack_exports__default as default };

package/dist/components/scroll-shadow/ScrollShadow.classes.d.ts

@@ -0,0 +1,13 @@
+export declare const CLASSES: {
+    readonly base: "scroll-shadow";
+    readonly orientation: {
+        readonly vertical: "scroll-shadow--vertical";
+        readonly horizontal: "scroll-shadow--horizontal";
+    };
+    readonly variant: {
+        readonly fade: "scroll-shadow--fade";
+    };
+    readonly flag: {
+        readonly hideScrollBar: "scroll-shadow--hide-scrollbar";
+    };
+};

package/dist/components/scroll-shadow/ScrollShadow.classes.js

@@ -0,0 +1,14 @@
+const CLASSES = {
+    base: "scroll-shadow",
+    orientation: {
+        vertical: "scroll-shadow--vertical",
+        horizontal: "scroll-shadow--horizontal"
+    },
+    variant: {
+        fade: "scroll-shadow--fade"
+    },
+    flag: {
+        hideScrollBar: "scroll-shadow--hide-scrollbar"
+    }
+};
+export { CLASSES };

package/dist/components/scroll-shadow/ScrollShadow.css

@@ -0,0 +1,93 @@
+@layer components {
+  .scroll-shadow {
+    position: relative;
+    --scroll-shadow-size: 40px;
+  }
+
+  .scroll-shadow--vertical {
+    overflow-y: auto;
+  }
+
+  .scroll-shadow--horizontal {
+    overflow-x: auto;
+  }
+
+  .scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll="true"] {
+    --scroll-linear-gradient:
+      0deg,
+      #000 calc(100% - var(--scroll-shadow-size)),
+      transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  .scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll="true"] {
+    --scroll-linear-gradient:
+      180deg,
+      #000 calc(100% - var(--scroll-shadow-size)),
+      transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  .scroll-shadow--fade.scroll-shadow--vertical[data-top-bottom-scroll="true"] {
+    --scroll-linear-gradient:
+      #000,
+      #000,
+      transparent 0,
+      #000 var(--scroll-shadow-size),
+      #000 calc(100% - var(--scroll-shadow-size)),
+      transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  .scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"] {
+    --scroll-linear-gradient:
+      270deg,
+      #000 calc(100% - var(--scroll-shadow-size)),
+      transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  .scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"] {
+    --scroll-linear-gradient:
+      90deg,
+      #000 calc(100% - var(--scroll-shadow-size)),
+      transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  .scroll-shadow--fade.scroll-shadow--horizontal[data-left-right-scroll="true"] {
+    --scroll-linear-gradient:
+      to right,
+      #000,
+      #000,
+      transparent 0,
+      #000 var(--scroll-shadow-size),
+      #000 calc(100% - var(--scroll-shadow-size)),
+      transparent;
+
+    mask-image: linear-gradient(var(--scroll-linear-gradient));
+    -webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
+  }
+
+  .scroll-shadow--hide-scrollbar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .scroll-shadow--hide-scrollbar::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+

package/dist/components/scroll-shadow/ScrollShadow.d.ts

@@ -0,0 +1,18 @@
+import "./ScrollShadow.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ScrollShadowVisibility = "auto" | "both" | "top" | "bottom" | "left" | "right" | "none";
+export type ScrollShadowOrientation = "vertical" | "horizontal";
+export type ScrollShadowVariant = "fade";
+export type ScrollShadowProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "size"> & {
+    size?: number;
+    offset?: number;
+    visibility?: ScrollShadowVisibility;
+    isEnabled?: boolean;
+    orientation?: ScrollShadowOrientation;
+    variant?: ScrollShadowVariant;
+    hideScrollBar?: boolean;
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+};
+declare const ScrollShadow: (props: ScrollShadowProps) => JSX.Element;
+export default ScrollShadow;

package/dist/components/scroll-shadow/ScrollShadow.js

@@ -0,0 +1,87 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ScrollShadow.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__ScrollShadow_classes_js_12f8416d__ from "./ScrollShadow.classes.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__ from "./useScrollShadow.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const ScrollShadow = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "size",
+        "offset",
+        "visibility",
+        "isEnabled",
+        "orientation",
+        "variant",
+        "hideScrollBar",
+        "onVisibilityChange",
+        "ref"
+    ]);
+    let containerRef;
+    const size = ()=>local.size ?? 40;
+    const offset = ()=>local.offset ?? 0;
+    const variant = ()=>local.variant ?? "fade";
+    const visibility = ()=>local.visibility ?? "auto";
+    const orientation = ()=>local.orientation ?? "vertical";
+    const isEnabled = ()=>local.isEnabled ?? true;
+    (0, __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__.useScrollShadow)({
+        containerRef: ()=>containerRef,
+        orientation,
+        offset,
+        visibility,
+        isEnabled,
+        onVisibilityChange: ()=>local.onVisibilityChange
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const el = containerRef;
+        if (!el) return;
+        if (!isEnabled()) return void (0, __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__.clearScrollShadowDataAttributes)(el);
+        const currentVisibility = visibility();
+        if ("auto" === currentVisibility) return;
+        (0, __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__.applyControlledScrollShadowVisibility)(el, currentVisibility, orientation());
+    });
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.orientation[orientation()], __WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.variant[variant()], local.hideScrollBar && __WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.flag.hideScrollBar, local.class, local.className));
+    const style = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if ("string" == typeof local.style) {
+            const trimmed = local.style.trim();
+            const suffix = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
+            return `${trimmed}${suffix} --scroll-shadow-size: ${size()}px;`;
+        }
+        return {
+            ...local.style ?? {},
+            "--scroll-shadow-size": `${size()}px`
+        };
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+            containerRef = el;
+            if ("function" == typeof local.ref) local.ref(el);
+        }, _el$);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: classes()
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["data-orientation"] () {
+                return orientation();
+            },
+            get ["data-scroll-shadow-size"] () {
+                return size();
+            },
+            get style () {
+                return style();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const scroll_shadow_ScrollShadow = ScrollShadow;
+export { scroll_shadow_ScrollShadow as default };

package/dist/components/scroll-shadow/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ScrollShadow";
+export type { ScrollShadowProps, ScrollShadowVisibility, ScrollShadowOrientation, ScrollShadowVariant, } from "./ScrollShadow";

package/dist/components/scroll-shadow/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ScrollShadow_js_a859c3d0__ from "./ScrollShadow.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ScrollShadow_js_a859c3d0__["default"];
+export { __webpack_exports__default as default };

package/dist/components/scroll-shadow/useScrollShadow.d.ts

@@ -0,0 +1,13 @@
+import { type Accessor } from "solid-js";
+import type { ScrollShadowOrientation, ScrollShadowVisibility } from "./ScrollShadow";
+export interface UseScrollShadowProps {
+    containerRef: Accessor<HTMLElement | undefined>;
+    orientation: Accessor<ScrollShadowOrientation>;
+    offset: Accessor<number>;
+    visibility: Accessor<ScrollShadowVisibility>;
+    isEnabled: Accessor<boolean>;
+    onVisibilityChange?: Accessor<((visibility: ScrollShadowVisibility) => void) | undefined>;
+}
+export declare const clearScrollShadowDataAttributes: (el: HTMLElement) => void;
+export declare const applyControlledScrollShadowVisibility: (el: HTMLElement, visibility: ScrollShadowVisibility, orientation: ScrollShadowOrientation) => void;
+export declare const useScrollShadow: (props: UseScrollShadowProps) => void;