@solidxai/core-ui 0.1.13-beta.4 → 0.1.13-beta.5

package/dist/components/shad-cn-ui/SolidDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDatePicker.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ReactDatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { SolidInput } from \"./SolidInput\";\n\ntype SolidDatePickerProps = React.ComponentProps<typeof ReactDatePicker> & {\n  timeOnly?: boolean;\n  inputClassName?: string;\n};\n\ntype SolidDatePickerInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  displayValue?: string;\n};\n\nfunction formatDateValue(value: Date | null | undefined, pattern?: string) {\n  if (!value || !(value instanceof Date) || Number.isNaN(value.getTime())) {\n    return \"\";\n  }\n  if (!pattern) {\n    return value.toISOString();\n  }\n  const pad = (num: number, length = 2) => String(num).padStart(length, \"0\");\n  const hours = value.getHours();\n  const minutes = value.getMinutes();\n  const seconds = value.getSeconds();\n  const ampm = hours >= 12 ? \"PM\" : \"AM\";\n  const h12 = hours % 12 || 12;\n\n  return pattern\n    .replace(/yyyy/g, String(value.getFullYear()))\n    .replace(/MM/g, pad(value.getMonth() + 1))\n    .replace(/dd/g, pad(value.getDate()))\n    .replace(/HH/g, pad(hours))\n    .replace(/hh/g, pad(h12))\n    .replace(/h/g, String(h12))\n    .replace(/mm/g, pad(minutes))\n    .replace(/ss/g, pad(seconds))\n    .replace(/aa/g, ampm)\n    .replace(/a/g, ampm);\n}\n\nconst SolidDatePickerInput = React.forwardRef<HTMLInputElement, SolidDatePickerInputProps>(\n  ({ className, displayValue, ...props }, ref) => (\n    <SolidInput\n      ref={ref}\n      {...props}\n      value={displayValue ?? (typeof props.value === \"string\" ? props.value : \"\")}\n      readOnly\n      className={className}\n    />\n  )\n);\n\nSolidDatePickerInput.displayName = \"SolidDatePickerInput\";\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport function SolidDatePicker({\n  timeOnly,\n  showTimeSelect,\n  inputClassName,\n  selected,\n  dateFormat,\n  calendarClassName,\n  popperClassName,\n  className,\n  ...props\n}: SolidDatePickerProps) {\n  const resolvedShowTime = timeOnly ? true : showTimeSelect;\n  const resolvedFormat = (Array.isArray(dateFormat) ? dateFormat[0] : dateFormat) ?? \"yyyy-MM-dd\";\n  const displayValue = formatDateValue(selected as Date | null | undefined, resolvedFormat);\n\n  return (\n    <ReactDatePicker\n      popperProps={{ strategy: \"fixed\" }}\n      popperPlacement=\"bottom-start\"\n      {...props}\n      selected={selected}\n      showTimeSelect={resolvedShowTime}\n      showTimeSelectOnly={timeOnly}\n      calendarClassName={cx(\"solid-react-datepicker-calendar\", calendarClassName)}\n      popperClassName={cx(\"solid-react-datepicker-popper\", popperClassName)}\n      customInput={<SolidDatePickerInput className={inputClassName} displayValue={displayValue} />}\n      className={cx(\"solid-datepicker\", className)}\n    />\n  );\n}\n"]}
+{"version":3,"file":"SolidDatePicker.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ReactDatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { SolidInput } from \"./SolidInput\";\nimport { SolidSelect } from \"./SolidSelect\";\n\ntype SolidDatePickerProps = React.ComponentProps<typeof ReactDatePicker> & {\n  timeOnly?: boolean;\n  inputClassName?: string;\n};\n\ntype SolidDatePickerInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  displayValue?: string;\n};\n\nfunction formatDateValue(value: Date | null | undefined, pattern?: string) {\n  if (!value || !(value instanceof Date) || Number.isNaN(value.getTime())) {\n    return \"\";\n  }\n  if (!pattern) {\n    return value.toISOString();\n  }\n  const pad = (num: number, length = 2) => String(num).padStart(length, \"0\");\n  const hours = value.getHours();\n  const minutes = value.getMinutes();\n  const seconds = value.getSeconds();\n  const ampm = hours >= 12 ? \"PM\" : \"AM\";\n  const h12 = hours % 12 || 12;\n\n  return pattern\n    .replace(/yyyy/g, String(value.getFullYear()))\n    .replace(/MM/g, pad(value.getMonth() + 1))\n    .replace(/dd/g, pad(value.getDate()))\n    .replace(/HH/g, pad(hours))\n    .replace(/hh/g, pad(h12))\n    .replace(/h/g, String(h12))\n    .replace(/mm/g, pad(minutes))\n    .replace(/ss/g, pad(seconds))\n    .replace(/aa/g, ampm)\n    .replace(/a/g, ampm);\n}\n\nconst SolidDatePickerInput = React.forwardRef<HTMLInputElement, SolidDatePickerInputProps>(\n  ({ className, displayValue, ...props }, ref) => (\n    <SolidInput\n      ref={ref}\n      {...props}\n      value={displayValue ?? (typeof props.value === \"string\" ? props.value : \"\")}\n      readOnly\n      className={className}\n    />\n  )\n);\n\nSolidDatePickerInput.displayName = \"SolidDatePickerInput\";\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst MONTH_OPTIONS = Array.from({ length: 12 }, (_, monthIndex) => ({\n  value: monthIndex,\n  label: new Intl.DateTimeFormat(undefined, { month: \"long\" }).format(new Date(2026, monthIndex, 1)),\n}));\n\nfunction buildYearOptions(selected: Date | null | undefined, minDate?: Date | null, maxDate?: Date | null) {\n  const selectedYear = selected?.getFullYear() ?? new Date().getFullYear();\n  const minYear = minDate?.getFullYear() ?? 1900;\n  const maxYear = maxDate?.getFullYear() ?? Math.max(2100, selectedYear + 25);\n  const years: number[] = [];\n\n  for (let year = minYear; year <= maxYear; year += 1) {\n    years.push(year);\n  }\n\n  return years;\n}\n\nexport function SolidDatePicker({\n  timeOnly,\n  showTimeSelect,\n  inputClassName,\n  selected,\n  dateFormat,\n  calendarClassName,\n  popperClassName,\n  className,\n  minDate,\n  maxDate,\n  renderCustomHeader,\n  showMonthDropdown,\n  showYearDropdown,\n  ...props\n}: SolidDatePickerProps) {\n  const resolvedShowTime = timeOnly ? true : showTimeSelect;\n  const resolvedFormat = (Array.isArray(dateFormat) ? dateFormat[0] : dateFormat) ?? \"yyyy-MM-dd\";\n  const displayValue = formatDateValue(selected as Date | null | undefined, resolvedFormat);\n  const enableMonthDropdown = showMonthDropdown ?? !timeOnly;\n  const enableYearDropdown = showYearDropdown ?? !timeOnly;\n  const shouldUseCustomHeader = !timeOnly && !renderCustomHeader;\n  const yearOptions = buildYearOptions(selected as Date | null | undefined, minDate as Date | null | undefined, maxDate as Date | null | undefined);\n\n  return (\n    <ReactDatePicker\n      popperProps={{ strategy: \"fixed\" }}\n      popperPlacement=\"bottom-start\"\n      {...props}\n      selected={selected}\n      minDate={minDate}\n      maxDate={maxDate}\n      showTimeSelect={resolvedShowTime}\n      showTimeSelectOnly={timeOnly}\n      showMonthDropdown={enableMonthDropdown}\n      showYearDropdown={enableYearDropdown}\n      renderCustomHeader={\n        shouldUseCustomHeader\n          ? ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }: any) => (\n              <div className=\"solid-react-datepicker-header\">\n                <button\n                  type=\"button\"\n                  className=\"solid-react-datepicker-nav\"\n                  onClick={decreaseMonth}\n                  disabled={prevMonthButtonDisabled}\n                  aria-label=\"Previous month\"\n                >\n                  <ChevronLeft size={16} />\n                </button>\n\n                <div className=\"solid-react-datepicker-selects\">\n                  <div className=\"solid-react-datepicker-select-shell solid-react-datepicker-select-shell--month\">\n                    <SolidSelect\n                      native={false}\n                      className=\"solid-react-datepicker-select-wrap\"\n                      value={date.getMonth()}\n                      options={MONTH_OPTIONS}\n                      menuPlacement=\"bottom\"\n                      onChange={({ value }) => changeMonth(Number(value))}\n                    />\n                  </div>\n\n                  <div className=\"solid-react-datepicker-select-shell solid-react-datepicker-select-shell--year\">\n                    <SolidSelect\n                      native={false}\n                      className=\"solid-react-datepicker-select-wrap\"\n                      value={date.getFullYear()}\n                      options={yearOptions.map((year) => ({ label: String(year), value: year }))}\n                      menuPlacement=\"bottom\"\n                      onChange={({ value }) => changeYear(Number(value))}\n                    />\n                  </div>\n                </div>\n\n                <button\n                  type=\"button\"\n                  className=\"solid-react-datepicker-nav\"\n                  onClick={increaseMonth}\n                  disabled={nextMonthButtonDisabled}\n                  aria-label=\"Next month\"\n                >\n                  <ChevronRight size={16} />\n                </button>\n              </div>\n            )\n          : renderCustomHeader\n      }\n      calendarClassName={cx(\"solid-react-datepicker-calendar\", calendarClassName)}\n      popperClassName={cx(\"solid-react-datepicker-popper\", popperClassName)}\n      customInput={<SolidDatePickerInput className={inputClassName} displayValue={displayValue} />}\n      className={cx(\"solid-datepicker\", className)}\n    />\n  );\n}\n"]}

package/dist/components/shad-cn-ui/SolidDatePicker.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { SolidInput } from "./SolidInput";
+import { SolidSelect } from "./SolidSelect";
 
 type SolidDatePickerProps = React.ComponentProps<typeof ReactDatePicker> & {
   timeOnly?: boolean;
@@ -57,6 +59,24 @@ function cx(...parts: Array<string | false | undefined>) {
   return parts.filter(Boolean).join(" ");
 }
 
+const MONTH_OPTIONS = Array.from({ length: 12 }, (_, monthIndex) => ({
+  value: monthIndex,
+  label: new Intl.DateTimeFormat(undefined, { month: "long" }).format(new Date(2026, monthIndex, 1)),
+}));
+
+function buildYearOptions(selected: Date | null | undefined, minDate?: Date | null, maxDate?: Date | null) {
+  const selectedYear = selected?.getFullYear() ?? new Date().getFullYear();
+  const minYear = minDate?.getFullYear() ?? 1900;
+  const maxYear = maxDate?.getFullYear() ?? Math.max(2100, selectedYear + 25);
+  const years: number[] = [];
+
+  for (let year = minYear; year <= maxYear; year += 1) {
+    years.push(year);
+  }
+
+  return years;
+}
+
 export function SolidDatePicker({
   timeOnly,
   showTimeSelect,
@@ -66,11 +86,20 @@ export function SolidDatePicker({
   calendarClassName,
   popperClassName,
   className,
+  minDate,
+  maxDate,
+  renderCustomHeader,
+  showMonthDropdown,
+  showYearDropdown,
   ...props
 }: SolidDatePickerProps) {
   const resolvedShowTime = timeOnly ? true : showTimeSelect;
   const resolvedFormat = (Array.isArray(dateFormat) ? dateFormat[0] : dateFormat) ?? "yyyy-MM-dd";
   const displayValue = formatDateValue(selected as Date | null | undefined, resolvedFormat);
+  const enableMonthDropdown = showMonthDropdown ?? !timeOnly;
+  const enableYearDropdown = showYearDropdown ?? !timeOnly;
+  const shouldUseCustomHeader = !timeOnly && !renderCustomHeader;
+  const yearOptions = buildYearOptions(selected as Date | null | undefined, minDate as Date | null | undefined, maxDate as Date | null | undefined);
 
   return (
     <ReactDatePicker
@@ -78,8 +107,63 @@ export function SolidDatePicker({
       popperPlacement="bottom-start"
       {...props}
       selected={selected}
+      minDate={minDate}
+      maxDate={maxDate}
       showTimeSelect={resolvedShowTime}
       showTimeSelectOnly={timeOnly}
+      showMonthDropdown={enableMonthDropdown}
+      showYearDropdown={enableYearDropdown}
+      renderCustomHeader={
+        shouldUseCustomHeader
+          ? ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }: any) => (
+              <div className="solid-react-datepicker-header">
+                <button
+                  type="button"
+                  className="solid-react-datepicker-nav"
+                  onClick={decreaseMonth}
+                  disabled={prevMonthButtonDisabled}
+                  aria-label="Previous month"
+                >
+                  <ChevronLeft size={16} />
+                </button>
+
+                <div className="solid-react-datepicker-selects">
+                  <div className="solid-react-datepicker-select-shell solid-react-datepicker-select-shell--month">
+                    <SolidSelect
+                      native={false}
+                      className="solid-react-datepicker-select-wrap"
+                      value={date.getMonth()}
+                      options={MONTH_OPTIONS}
+                      menuPlacement="bottom"
+                      onChange={({ value }) => changeMonth(Number(value))}
+                    />
+                  </div>
+
+                  <div className="solid-react-datepicker-select-shell solid-react-datepicker-select-shell--year">
+                    <SolidSelect
+                      native={false}
+                      className="solid-react-datepicker-select-wrap"
+                      value={date.getFullYear()}
+                      options={yearOptions.map((year) => ({ label: String(year), value: year }))}
+                      menuPlacement="bottom"
+                      onChange={({ value }) => changeYear(Number(value))}
+                    />
+                  </div>
+                </div>
+
+                <button
+                  type="button"
+                  className="solid-react-datepicker-nav"
+                  onClick={increaseMonth}
+                  disabled={nextMonthButtonDisabled}
+                  aria-label="Next month"
+                >
+                  <ChevronRight size={16} />
+                </button>
+              </div>
+            )
+          : renderCustomHeader
+      }
       calendarClassName={cx("solid-react-datepicker-calendar", calendarClassName)}
       popperClassName={cx("solid-react-datepicker-popper", popperClassName)}
       customInput={<SolidDatePickerInput className={inputClassName} displayValue={displayValue} />}

package/dist/components/shad-cn-ui/SolidTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAMF,eAAO,MAAM,YAAY,iEAKtB,iBAAiB,4CAMnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,0BAAmC,wBAAwB,4CAE1F,CAAC;AAEF,eAAO,MAAM,mBAAmB,0CAK7B,wBAAwB,4CAgB1B,CAAC"}
+{"version":3,"file":"SolidTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgCF,eAAO,MAAM,YAAY,iEAKtB,iBAAiB,4CA4CnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,0BAAmC,wBAAwB,4CAa1F,CAAC;AAEF,eAAO,MAAM,mBAAmB,0CAK7B,wBAAwB,4CAkC1B,CAAC"}

package/dist/components/shad-cn-ui/SolidTooltip.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
+import { SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "./SolidPopover";
+var SolidTooltipContext = React.createContext(null);
 function cx() {
     var parts = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -7,16 +10,66 @@ function cx() {
     }
     return parts.filter(Boolean).join(" ");
 }
+function canUseTapPopoverTrigger(children, asChild, isTouchDevice) {
+    if (!isTouchDevice) {
+        return false;
+    }
+    if (!asChild || !React.isValidElement(children)) {
+        return true;
+    }
+    var childProps = children.props;
+    return (typeof childProps.onClick !== "function" &&
+        typeof childProps.href !== "string" &&
+        typeof childProps.to !== "string");
+}
 export var SolidTooltip = function (_a) {
     var children = _a.children, defaultOpen = _a.defaultOpen, _b = _a.delayDuration, delayDuration = _b === void 0 ? 200 : _b, _c = _a.skipDelayDuration, skipDelayDuration = _c === void 0 ? 300 : _c;
-    return (_jsx(Tooltip.Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, children: _jsx(Tooltip.Root, { defaultOpen: defaultOpen, children: children }) }));
+    var _d = React.useState(false), isTouchDevice = _d[0], setIsTouchDevice = _d[1];
+    var _e = React.useState(false), useTapPopover = _e[0], setUseTapPopover = _e[1];
+    React.useEffect(function () {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return;
+        }
+        var touchMedia = window.matchMedia("(hover: none), (pointer: coarse)");
+        var updateMode = function () { return setIsTouchDevice(touchMedia.matches); };
+        updateMode();
+        if (typeof touchMedia.addEventListener === "function") {
+            touchMedia.addEventListener("change", updateMode);
+            return function () { return touchMedia.removeEventListener("change", updateMode); };
+        }
+        touchMedia.addListener(updateMode);
+        return function () { return touchMedia.removeListener(updateMode); };
+    }, []);
+    React.useEffect(function () {
+        if (!isTouchDevice && useTapPopover) {
+            setUseTapPopover(false);
+        }
+    }, [isTouchDevice, useTapPopover]);
+    var content = (_jsx(SolidTooltipContext.Provider, { value: { isTouchDevice: isTouchDevice, useTapPopover: useTapPopover, setUseTapPopover: setUseTapPopover }, children: children }));
+    if (isTouchDevice && useTapPopover) {
+        return _jsx(SolidPopover, { autoCloseGroup: "solid-tooltip", children: content });
+    }
+    return (_jsx(Tooltip.Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, children: _jsx(Tooltip.Root, { defaultOpen: defaultOpen, children: content }) }));
 };
 export var SolidTooltipTrigger = function (_a) {
-    var children = _a.children, _b = _a.asChild, asChild = _b === void 0 ? false : _b;
+    var _b;
+    var children = _a.children, _c = _a.asChild, asChild = _c === void 0 ? false : _c;
+    var context = React.useContext(SolidTooltipContext);
+    var shouldUseTapPopover = canUseTapPopoverTrigger(children, asChild, (_b = context === null || context === void 0 ? void 0 : context.isTouchDevice) !== null && _b !== void 0 ? _b : false);
+    React.useEffect(function () {
+        context === null || context === void 0 ? void 0 : context.setUseTapPopover(shouldUseTapPopover);
+    }, [context, shouldUseTapPopover]);
+    if (context === null || context === void 0 ? void 0 : context.useTapPopover) {
+        return _jsx(SolidPopoverTrigger, { asChild: asChild, children: children });
+    }
     return _jsx(Tooltip.Trigger, { asChild: asChild, children: children });
 };
 export var SolidTooltipContent = function (_a) {
     var children = _a.children, _b = _a.side, side = _b === void 0 ? "top" : _b, _c = _a.align, align = _c === void 0 ? "center" : _c, className = _a.className;
+    var context = React.useContext(SolidTooltipContext);
+    if ((context === null || context === void 0 ? void 0 : context.isTouchDevice) && context.useTapPopover) {
+        return (_jsx(SolidPopoverContent, { side: side, align: align, className: cx("solid-tooltip-content", className), sideOffset: 6, children: children }));
+    }
     return (_jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { side: side, align: align, className: cx("solid-tooltip-content", className), sideOffset: 6, children: children }) }));
 };
 //# sourceMappingURL=SolidTooltip.js.map

package/dist/components/shad-cn-ui/SolidTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidTooltip.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTooltip.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC;AAqBnD,SAAS,EAAE;IAAC,eAA2C;SAA3C,UAA2C,EAA3C,qBAA2C,EAA3C,IAA2C;QAA3C,0BAA2C;;IACrD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,EAKT;QAJlB,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,qBAAmB,EAAnB,aAAa,mBAAG,GAAG,KAAA,EACnB,yBAAuB,EAAvB,iBAAiB,mBAAG,GAAG,KAAA;IAEvB,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,YAClF,KAAC,OAAO,CAAC,IAAI,IAAC,WAAW,EAAE,WAAW,YAAG,QAAQ,GAAgB,GAChD,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAuD;QAArD,QAAQ,cAAA,EAAE,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA;IAC7D,OAAO,KAAC,OAAO,CAAC,OAAO,IAAC,OAAO,EAAE,OAAO,YAAG,QAAQ,GAAmB,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAKT;QAJzB,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,SAAS,eAAA;IAET,OAAO,CACL,KAAC,OAAO,CAAC,MAAM,cACb,KAAC,OAAO,CAAC,OAAO,IACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,SAAS,CACV,EACD,UAAU,EAAE,CAAC,YAEZ,QAAQ,GACO,GACH,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport * as Tooltip from \"@radix-ui/react-tooltip\";\n\ntype SolidTooltipProps = {\n  children: React.ReactNode;\n  defaultOpen?: boolean;\n  delayDuration?: number;\n  skipDelayDuration?: number;\n};\n\ntype SolidTooltipContentProps = {\n  children: React.ReactNode;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n};\n\ntype SolidTooltipTriggerProps = {\n  children: React.ReactNode;\n  asChild?: boolean;\n};\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport const SolidTooltip = ({\n  children,\n  defaultOpen,\n  delayDuration = 200,\n  skipDelayDuration = 300,\n}: SolidTooltipProps) => {\n  return (\n    <Tooltip.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>\n      <Tooltip.Root defaultOpen={defaultOpen}>{children}</Tooltip.Root>\n    </Tooltip.Provider>\n  );\n};\n\nexport const SolidTooltipTrigger = ({ children, asChild = false }: SolidTooltipTriggerProps) => {\n  return <Tooltip.Trigger asChild={asChild}>{children}</Tooltip.Trigger>;\n};\n\nexport const SolidTooltipContent = ({\n  children,\n  side = \"top\",\n  align = \"center\",\n  className,\n}: SolidTooltipContentProps) => {\n  return (\n    <Tooltip.Portal>\n      <Tooltip.Content\n        side={side}\n        align={align}\n        className={cx(\n          \"solid-tooltip-content\",\n          className\n        )}\n        sideOffset={6}\n      >\n        {children}\n      </Tooltip.Content>\n    </Tooltip.Portal>\n  );\n};\n"]}
+{"version":3,"file":"SolidTooltip.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport * as Tooltip from \"@radix-ui/react-tooltip\";\nimport { SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from \"./SolidPopover\";\n\ntype SolidTooltipProps = {\n  children: React.ReactNode;\n  defaultOpen?: boolean;\n  delayDuration?: number;\n  skipDelayDuration?: number;\n};\n\ntype SolidTooltipContentProps = {\n  children: React.ReactNode;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n};\n\ntype SolidTooltipTriggerProps = {\n  children: React.ReactNode;\n  asChild?: boolean;\n};\n\ntype SolidTooltipContextValue = {\n  isTouchDevice: boolean;\n  useTapPopover: boolean;\n  setUseTapPopover: (value: boolean) => void;\n};\n\nconst SolidTooltipContext = React.createContext<SolidTooltipContextValue | null>(null);\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nfunction canUseTapPopoverTrigger(children: React.ReactNode, asChild: boolean, isTouchDevice: boolean) {\n  if (!isTouchDevice) {\n    return false;\n  }\n\n  if (!asChild || !React.isValidElement(children)) {\n    return true;\n  }\n\n  const childProps = children.props as Record<string, unknown>;\n\n  return (\n    typeof childProps.onClick !== \"function\" &&\n    typeof childProps.href !== \"string\" &&\n    typeof childProps.to !== \"string\"\n  );\n}\n\nexport const SolidTooltip = ({\n  children,\n  defaultOpen,\n  delayDuration = 200,\n  skipDelayDuration = 300,\n}: SolidTooltipProps) => {\n  const [isTouchDevice, setIsTouchDevice] = React.useState(false);\n  const [useTapPopover, setUseTapPopover] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n      return;\n    }\n\n    const touchMedia = window.matchMedia(\"(hover: none), (pointer: coarse)\");\n    const updateMode = () => setIsTouchDevice(touchMedia.matches);\n\n    updateMode();\n\n    if (typeof touchMedia.addEventListener === \"function\") {\n      touchMedia.addEventListener(\"change\", updateMode);\n      return () => touchMedia.removeEventListener(\"change\", updateMode);\n    }\n\n    touchMedia.addListener(updateMode);\n    return () => touchMedia.removeListener(updateMode);\n  }, []);\n\n  React.useEffect(() => {\n    if (!isTouchDevice && useTapPopover) {\n      setUseTapPopover(false);\n    }\n  }, [isTouchDevice, useTapPopover]);\n\n  const content = (\n    <SolidTooltipContext.Provider value={{ isTouchDevice, useTapPopover, setUseTapPopover }}>\n      {children}\n    </SolidTooltipContext.Provider>\n  );\n\n  if (isTouchDevice && useTapPopover) {\n    return <SolidPopover autoCloseGroup=\"solid-tooltip\">{content}</SolidPopover>;\n  }\n\n  return (\n    <Tooltip.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>\n      <Tooltip.Root defaultOpen={defaultOpen}>{content}</Tooltip.Root>\n    </Tooltip.Provider>\n  );\n};\n\nexport const SolidTooltipTrigger = ({ children, asChild = false }: SolidTooltipTriggerProps) => {\n  const context = React.useContext(SolidTooltipContext);\n  const shouldUseTapPopover = canUseTapPopoverTrigger(children, asChild, context?.isTouchDevice ?? false);\n\n  React.useEffect(() => {\n    context?.setUseTapPopover(shouldUseTapPopover);\n  }, [context, shouldUseTapPopover]);\n\n  if (context?.useTapPopover) {\n    return <SolidPopoverTrigger asChild={asChild}>{children}</SolidPopoverTrigger>;\n  }\n\n  return <Tooltip.Trigger asChild={asChild}>{children}</Tooltip.Trigger>;\n};\n\nexport const SolidTooltipContent = ({\n  children,\n  side = \"top\",\n  align = \"center\",\n  className,\n}: SolidTooltipContentProps) => {\n  const context = React.useContext(SolidTooltipContext);\n\n  if (context?.isTouchDevice && context.useTapPopover) {\n    return (\n      <SolidPopoverContent\n        side={side}\n        align={align}\n        className={cx(\n          \"solid-tooltip-content\",\n          className\n        )}\n        sideOffset={6}\n      >\n        {children}\n      </SolidPopoverContent>\n    );\n  }\n\n  return (\n    <Tooltip.Portal>\n      <Tooltip.Content\n        side={side}\n        align={align}\n        className={cx(\n          \"solid-tooltip-content\",\n          className\n        )}\n        sideOffset={6}\n      >\n        {children}\n      </Tooltip.Content>\n    </Tooltip.Portal>\n  );\n};\n"]}

package/dist/components/shad-cn-ui/SolidTooltip.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
+import { SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "./SolidPopover";
 
 type SolidTooltipProps = {
   children: React.ReactNode;
@@ -20,24 +21,99 @@ type SolidTooltipTriggerProps = {
   asChild?: boolean;
 };
 
+type SolidTooltipContextValue = {
+  isTouchDevice: boolean;
+  useTapPopover: boolean;
+  setUseTapPopover: (value: boolean) => void;
+};
+
+const SolidTooltipContext = React.createContext<SolidTooltipContextValue | null>(null);
+
 function cx(...parts: Array<string | false | undefined>) {
   return parts.filter(Boolean).join(" ");
 }
 
+function canUseTapPopoverTrigger(children: React.ReactNode, asChild: boolean, isTouchDevice: boolean) {
+  if (!isTouchDevice) {
+    return false;
+  }
+
+  if (!asChild || !React.isValidElement(children)) {
+    return true;
+  }
+
+  const childProps = children.props as Record<string, unknown>;
+
+  return (
+    typeof childProps.onClick !== "function" &&
+    typeof childProps.href !== "string" &&
+    typeof childProps.to !== "string"
+  );
+}
+
 export const SolidTooltip = ({
   children,
   defaultOpen,
   delayDuration = 200,
   skipDelayDuration = 300,
 }: SolidTooltipProps) => {
+  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
+  const [useTapPopover, setUseTapPopover] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+
+    const touchMedia = window.matchMedia("(hover: none), (pointer: coarse)");
+    const updateMode = () => setIsTouchDevice(touchMedia.matches);
+
+    updateMode();
+
+    if (typeof touchMedia.addEventListener === "function") {
+      touchMedia.addEventListener("change", updateMode);
+      return () => touchMedia.removeEventListener("change", updateMode);
+    }
+
+    touchMedia.addListener(updateMode);
+    return () => touchMedia.removeListener(updateMode);
+  }, []);
+
+  React.useEffect(() => {
+    if (!isTouchDevice && useTapPopover) {
+      setUseTapPopover(false);
+    }
+  }, [isTouchDevice, useTapPopover]);
+
+  const content = (
+    <SolidTooltipContext.Provider value={{ isTouchDevice, useTapPopover, setUseTapPopover }}>
+      {children}
+    </SolidTooltipContext.Provider>
+  );
+
+  if (isTouchDevice && useTapPopover) {
+    return <SolidPopover autoCloseGroup="solid-tooltip">{content}</SolidPopover>;
+  }
+
   return (
     <Tooltip.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>
-      <Tooltip.Root defaultOpen={defaultOpen}>{children}</Tooltip.Root>
+      <Tooltip.Root defaultOpen={defaultOpen}>{content}</Tooltip.Root>
     </Tooltip.Provider>
   );
 };
 
 export const SolidTooltipTrigger = ({ children, asChild = false }: SolidTooltipTriggerProps) => {
+  const context = React.useContext(SolidTooltipContext);
+  const shouldUseTapPopover = canUseTapPopoverTrigger(children, asChild, context?.isTouchDevice ?? false);
+
+  React.useEffect(() => {
+    context?.setUseTapPopover(shouldUseTapPopover);
+  }, [context, shouldUseTapPopover]);
+
+  if (context?.useTapPopover) {
+    return <SolidPopoverTrigger asChild={asChild}>{children}</SolidPopoverTrigger>;
+  }
+
   return <Tooltip.Trigger asChild={asChild}>{children}</Tooltip.Trigger>;
 };
 
@@ -47,6 +123,24 @@ export const SolidTooltipContent = ({
   align = "center",
   className,
 }: SolidTooltipContentProps) => {
+  const context = React.useContext(SolidTooltipContext);
+
+  if (context?.isTouchDevice && context.useTapPopover) {
+    return (
+      <SolidPopoverContent
+        side={side}
+        align={align}
+        className={cx(
+          "solid-tooltip-content",
+          className
+        )}
+        sideOffset={6}
+      >
+        {children}
+      </SolidPopoverContent>
+    );
+  }
+
   return (
     <Tooltip.Portal>
       <Tooltip.Content

package/dist/resources/globals.css

@@ -204,17 +204,22 @@ a {
   background: var(--card);
   color: var(--foreground);
   box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
-  overflow: hidden;
+  overflow: visible;
 }
 
 .solid-react-datepicker-calendar .react-datepicker__month-container {
   float: left;
   width: auto;
+  overflow: visible;
 }
 
 .solid-react-datepicker-calendar .react-datepicker__header {
   background: color-mix(in srgb, var(--card) 92%, white 8%);
   border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  padding: 4px;
+  position: relative;
+  overflow: visible;
+  z-index: 2;
 }
 
 .solid-react-datepicker-calendar .react-datepicker__current-month,
@@ -223,10 +228,111 @@ a {
   color: var(--foreground);
 }
 
+.solid-react-datepicker-header {
+  display: grid;
+  grid-template-columns: 24px auto 24px;
+  align-items: center;
+  gap: 4px;
+}
+
+.solid-react-datepicker-selects {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.solid-react-datepicker-select-shell {
+  flex: 0 0 auto;
+}
+
+.solid-react-datepicker-select-shell--month {
+  width: 96px;
+}
+
+.solid-react-datepicker-select-shell--year {
+  width: 64px;
+}
+
+.solid-react-datepicker-select-wrap {
+  width: 100%;
+}
+
+.solid-react-datepicker-select-shell .solid-select-wrap {
+  width: 100%;
+}
+
+.solid-react-datepicker-select-shell .solid-select-trigger {
+  min-height: 32px;
+  height: 30px;
+  border-radius: 6px;
+  padding: 0 22px 0 6px;
+  font-size: 11px;
+  font-weight: 500;
+  border-color: color-mix(in srgb, var(--border) 88%, transparent);
+}
+
+.solid-react-datepicker-select-shell .solid-select-trigger:focus-visible,
+.solid-react-datepicker-select-shell .solid-select-trigger:focus {
+  border-color: color-mix(in srgb, var(--primary-color, var(--primary)) 60%, var(--border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, var(--primary)) 14%, transparent);
+}
+
+.solid-react-datepicker-select-shell .solid-select-trigger-label {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.solid-react-datepicker-select-shell .solid-select-icon {
+  right: 6px;
+}
+
+.solid-react-datepicker-select-shell .solid-select-menu {
+  min-width: 100%;
+  z-index: calc(var(--z-overlay) + 5);
+}
+
+.solid-react-datepicker-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
+}
+
+.solid-react-datepicker-nav:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 72%, transparent);
+  border-color: color-mix(in srgb, var(--border) 82%, transparent);
+}
+
+.solid-react-datepicker-nav:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .solid-react-datepicker-calendar .react-datepicker__day-name {
   color: color-mix(in srgb, var(--foreground) 64%, transparent);
 }
 
+.solid-react-datepicker-calendar .react-datepicker__day-names {
+  margin-bottom: -4px;
+}
+
+.solid-react-datepicker-calendar .react-datepicker__month {
+  margin: 0.25rem 0.3rem 0.35rem;
+}
+
+.solid-react-datepicker-calendar .react-datepicker__day-name,
+.solid-react-datepicker-calendar .react-datepicker__day {
+  margin: 0.12rem;
+}
+
 .solid-react-datepicker-calendar .react-datepicker__day,
 .solid-react-datepicker-calendar .react-datepicker__month-text,
 .solid-react-datepicker-calendar .react-datepicker__quarter-text,
@@ -530,6 +636,8 @@ html.dark .solid-react-datepicker-calendar .react-datepicker__year-option,
 [data-theme="dark"] .solid-react-datepicker-calendar .react-datepicker__year-option,
 html.dark .solid-react-datepicker-calendar .react-datepicker__month-year-option,
 [data-theme="dark"] .solid-react-datepicker-calendar .react-datepicker__month-year-option,
+html.dark .solid-react-datepicker-select,
+[data-theme="dark"] .solid-react-datepicker-select,
 html.dark .solid-react-datepicker-calendar .react-datepicker__navigation-icon::before,
 [data-theme="dark"] .solid-react-datepicker-calendar .react-datepicker__navigation-icon::before,
 html.dark .solid-react-datepicker-calendar .react-datepicker__month-read-view--down-arrow,

package/dist/resources/solid-custom.css

@@ -2001,6 +2001,12 @@ textarea {
   margin-top: 10px;
 }
 
+.solid-auth-tablist {
+  width: 100% !important;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
 .solid-auth-divider .solid-divider {
   height: 1px;
   background: var(--border);
@@ -2345,7 +2351,7 @@ textarea {
 }
 
 .solid-auth-input-label {
-  color: #e4e4e7;
+  color: #020617;
   font-size: 13px;
   font-weight: 500;
 }
@@ -3724,6 +3730,8 @@ html.dark .solid-header-cog-trigger:hover,
 .solid-data-table-viewport {
   min-height: 0;
   height: 100%;
+  position: relative;
+  z-index: 0;
   overflow-y: auto;
   overflow-x: auto;
 }
@@ -3840,7 +3848,7 @@ html.dark .solid-header-cog-trigger:hover,
   flex-shrink: 0;
   min-height: 44px;
   position: relative;
-  z-index: 1;
+  z-index: 2;
   background: var(--card);
   border-color: color-mix(in srgb, var(--border) 86%, transparent) !important;
   border-bottom: 0;
@@ -3851,7 +3859,7 @@ html.dark .solid-header-cog-trigger:hover,
 }
 
 .solid-table-paginator:focus-within {
-  z-index: 8;
+  z-index: 12;
 }
 
 .solid-table-paginator-align-end {
@@ -3884,6 +3892,7 @@ html.dark .solid-header-cog-trigger:hover,
 }
 
 .solid-select-wrap.solid-paginator-select {
+  position: relative;
   display: inline-block;
   width: auto;
   min-width: 46px;
@@ -3923,6 +3932,7 @@ html.dark .solid-header-cog-trigger:hover,
   min-width: 100%;
   left: 0;
   right: auto;
+  z-index: calc(var(--z-overlay) + 8);
 }
 
 .solid-select-wrap.solid-paginator-select .solid-select-trigger:hover,
@@ -4613,6 +4623,21 @@ html.dark .solid-paginator-btn:hover:not(:disabled),
   transform: none;
 }
 
+.solid-popover-content.solid-tooltip-content,
+.solid-popover-content.solid-field-tooltip-popover {
+  z-index: 9999;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 6px;
+  background: #111827;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.3;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  max-width: 280px;
+  word-break: break-word;
+}
+
 .solid-popover-content[data-portal="true"] {
   max-width: calc(100vw - 16px);
 }
@@ -4885,6 +4910,31 @@ html.dark .solid-paginator-btn:hover:not(:disabled),
   padding-left: 4px;
 }
 
+.solid-dropdown-menu-radio-item[data-state="checked"] {
+  background: color-mix(in srgb, var(--primary-color, var(--primary)) 12%, transparent);
+  border-color: color-mix(in srgb, var(--primary-color, var(--primary)) 30%, transparent);
+  color: var(--primary-color, var(--primary));
+}
+
+.solid-dropdown-menu-radio-item[data-state="checked"] .solid-dropdown-menu-item-text {
+  font-weight: 600;
+}
+
+.customize-layout-panel .solid-dropdown-menu-label {
+  padding: 8px 8px 5px;
+}
+
+.customize-layout-panel .solid-dropdown-menu-radio-item,
+.customize-layout-panel .solid-dropdown-menu-item {
+  min-height: 32px;
+  gap: 8px;
+  padding: 0 8px;
+}
+
+.customize-layout-panel .solid-dropdown-menu-separator {
+  margin: 6px 0;
+}
+
 .solid-header-dropdown-item-danger {
   color: var(--destructive);
 }