@refineui/react 0.0.8 → 0.0.9

package/dist/index.cjs

@@ -3204,13 +3204,26 @@ var selectStyles = {
     "border-refineui-hairline border-refineui-alias-border-default",
     "bg-refineui-alias-background-primary px-refineui-size-medium py-refineui-size-x-small",
     "text-refineui-alias-foreground-primary outline-none",
-    "transition-[color,background-color,border-color] duration-[var(--refineui-motion-duration-fast)]"
+    "transition-[color,background-color,border-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+  ),
+  /** Ghost plate — same gap/radius as filled, no field border (Button ghost-like). */
+  triggerGhost: (0, import_clsx27.clsx)(
+    "box-border inline-flex cursor-pointer items-center justify-between",
+    "gap-refineui-size-x-small rounded-refineui-large",
+    "border-refineui-none border-transparent bg-transparent",
+    "px-refineui-size-x-small py-refineui-size-xx-small",
+    "text-refineui-alias-foreground-primary outline-none",
+    "transition-[color,background-color,transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
   ),
   /** Flush shell — consumer / parent owns padding, radius, surface. */
-  triggerPlain: "box-border inline-flex cursor-pointer items-center outline-none",
+  triggerPlain: (0, import_clsx27.clsx)(
+    "box-border inline-flex cursor-pointer items-center outline-none",
+    "transition-[transform] duration-[var(--refineui-motion-duration-fast)] ease-[var(--refineui-motion-easing-ease-out)]"
+  ),
   triggerInner: "min-w-0 flex-1 overflow-hidden text-start",
   triggerOpen: "text-refineui-alias-foreground-primary",
   triggerDisabled: "cursor-not-allowed border-refineui-alias-border-disabled bg-refineui-alias-background-surface-disabled text-refineui-alias-foreground-disabled",
+  triggerGhostDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   triggerPlainDisabled: "cursor-not-allowed text-refineui-alias-foreground-disabled",
   value: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start",
   iconWrap: "inline-flex size-refineui-icon-xsmall shrink-0 items-center justify-center",
@@ -3491,9 +3504,12 @@ function Select({
 }
 var SelectTrigger = (0, import_react11.forwardRef)(function SelectTrigger2(props, forwardedRef) {
   const { className, children, style, appearance = "filled", ...triggerRest } = props;
-  const { open, setOpen, triggerRef, onKeyDown, size, fullWidth, disabled, value, getLabelByValue } = useSelectCtx();
-  const hasLabel = Boolean(getLabelByValue(value));
+  const { open, setOpen, triggerRef, onKeyDown, size, fullWidth, disabled, value } = useSelectCtx();
+  const isPlaceholder = value === "";
   const isPlain = appearance === "plain";
+  const isGhost = appearance === "ghost";
+  const isFilled = appearance === "filled";
+  const [pressed, setPressed] = (0, import_react11.useState)(false);
   const setRefs = (0, import_react11.useCallback)(
     (node) => {
       triggerRef.current = node;
@@ -3502,6 +3518,7 @@ var SelectTrigger = (0, import_react11.forwardRef)(function SelectTrigger2(props
     },
     [forwardedRef, triggerRef]
   );
+  const clearPressed = (0, import_react11.useCallback)(() => setPressed(false), []);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "button",
     {
@@ -3514,20 +3531,31 @@ var SelectTrigger = (0, import_react11.forwardRef)(function SelectTrigger2(props
       "data-appearance": appearance,
       "data-size": size,
       "data-state": open ? "open" : "closed",
-      "data-placeholder": hasLabel ? void 0 : "",
+      "data-pressed": pressed ? "" : void 0,
+      "data-placeholder": isPlaceholder ? "" : void 0,
       disabled,
+      onPointerDown: (event) => {
+        if (disabled || event.button !== 0) return;
+        setPressed(true);
+      },
+      onPointerUp: clearPressed,
+      onPointerLeave: clearPressed,
+      onPointerCancel: clearPressed,
       onMouseDown: (event) => {
         event.preventDefault();
+        if (disabled) return;
         setOpen(!open);
         triggerRef.current?.focus();
       },
       onKeyDown,
       className: (0, import_clsx28.clsx)(
         "data-[placeholder]:[&_[data-refineui-select-value]]:text-refineui-alias-foreground-placeholder",
-        isPlain ? selectStyles.triggerPlain : selectStyles.trigger,
-        !isPlain && selectTriggerSizeClass[size],
-        !isPlain && open && selectStyles.triggerOpen,
-        disabled && (isPlain ? selectStyles.triggerPlainDisabled : selectStyles.triggerDisabled),
+        isPlain && selectStyles.triggerPlain,
+        isGhost && selectStyles.triggerGhost,
+        isFilled && selectStyles.trigger,
+        (isFilled || isGhost) && selectTriggerSizeClass[size],
+        isFilled && open && selectStyles.triggerOpen,
+        disabled && (isPlain ? selectStyles.triggerPlainDisabled : isGhost ? selectStyles.triggerGhostDisabled : selectStyles.triggerDisabled),
         fullWidth && "w-full",
         className
       ),
@@ -3553,7 +3581,20 @@ SelectTrigger.displayName = "SelectTrigger";
 function SelectValue({ placeholder, className, ...props }) {
   const { value, getLabelByValue, placeholder: rootPlaceholder } = useSelectCtx();
   const label = getLabelByValue(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "data-refineui-select-value": "", className: (0, import_clsx28.clsx)(selectStyles.value, !label && "text-refineui-alias-foreground-placeholder", className), ...props, children: label || placeholder || rootPlaceholder || "Select..." });
+  const isPlaceholder = value === "";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "span",
+    {
+      "data-refineui-select-value": "",
+      className: (0, import_clsx28.clsx)(
+        selectStyles.value,
+        isPlaceholder && "text-refineui-alias-foreground-placeholder",
+        className
+      ),
+      ...props,
+      children: label || placeholder || rootPlaceholder || "Select..."
+    }
+  );
 }
 function SelectIcon({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx28.clsx)(selectStyles.iconWrap, className), ...props, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WebIcon, { name: "chevron-down", size: import_tokens8.iconSizes.xsmall }) });
@@ -7609,15 +7650,10 @@ var calendarStyles = {
   dayWrapEndpoint: "box-border flex size-refineui-calendar-day-size items-center justify-center bg-refineui-alias-background-primary-hover",
   dayWrapEndpointStart: "rounded-s-refineui-large",
   dayWrapEndpointEnd: "rounded-e-refineui-large",
-  root: "box-border flex w-fit min-w-refineui-calendar-min-width flex-col gap-refineui-size-none rounded-refineui-large bg-refineui-alias-background-primary p-refineui-size-x-large",
+  root: "box-border flex w-fit min-w-refineui-calendar-min-width flex-col gap-refineui-size-none rounded-refineui-xx-large border-refineui-thin border-refineui-alias-border-default bg-refineui-alias-background-primary p-refineui-size-x-large",
   header: "flex w-full min-w-0 items-center justify-between pb-refineui-size-large",
   navButton: "shrink-0 text-refineui-alias-foreground-primary",
-  captionButton: (0, import_clsx58.clsx)(
-    "shrink-0",
-    "border-refineui-none border-transparent bg-transparent",
-    "px-refineui-size-x-small py-refineui-size-xx-small",
-    "text-refineui-alias-foreground-primary"
-  ),
+  captionButton: "shrink-0",
   body: "flex flex-col gap-refineui-size-small",
   weekday: (0, import_clsx58.clsx)(
     componentTextClass(componentTypographyTokens.calendar.weekday),
@@ -7646,12 +7682,15 @@ function normalizeRange(start, end) {
 function getWeekdayLabels(weekStartsOn) {
   return [...WEEKDAYS.slice(weekStartsOn), ...WEEKDAYS.slice(0, weekStartsOn)];
 }
-function formatMonthName(year, month) {
+function formatMonthLabel(year, month) {
+  return new Intl.DateTimeFormat("en-US", { month: "short" }).format(new Date(year, month, 1));
+}
+function formatMonthNameLong(year, month) {
   return new Intl.DateTimeFormat("en-US", { month: "long" }).format(new Date(year, month, 1));
 }
 var MONTH_LABELS = Array.from(
   { length: MONTH_COUNT },
-  (_, monthIndex) => formatMonthName(2e3, monthIndex)
+  (_, monthIndex) => formatMonthLabel(2e3, monthIndex)
 );
 function yearOptionsForView(viewYear) {
   const referenceYear = (/* @__PURE__ */ new Date()).getFullYear();
@@ -7672,16 +7711,16 @@ function CalendarCaptionSelect({
   children
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Select, { value, onValueChange, "aria-label": ariaLabel, size: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       SelectTrigger,
       {
-        appearance: "plain",
+        appearance: "ghost",
         "data-calendar-header": header,
-        className: calendarStyles.captionButton,
-        children: [
-          "                ",
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectValue, { placeholder })
-        ]
+        className: (0, import_clsx59.clsx)(
+          calendarStyles.captionButton,
+          header === "caption-year" && "tabular-nums"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectValue, { placeholder })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectGroup, { children }) }) })
@@ -7737,7 +7776,9 @@ function Calendar({
   const cells = getMonthGrid(year, month, weekStartsOn);
   const weeks = chunkWeeks(cells);
   const weekdayLabels = getWeekdayLabels(weekStartsOn);
-  const monthName = formatMonthName(year, month);
+  const monthLabel = formatMonthLabel(year, month);
+  const monthNameLong = formatMonthNameLong(year, month);
+  const yearOptions = yearOptionsForView(year);
   const getDateFromCell = (d, monthOffset) => new Date(year, month + monthOffset, d);
   const setRange = (start, end) => {
     if (onRangeChange) onRangeChange(start, end);
@@ -7928,8 +7969,8 @@ function Calendar({
             CalendarCaptionSelect,
             {
               value: String(month),
-              placeholder: monthName,
-              ariaLabel: `Month: ${monthName}`,
+              placeholder: monthLabel,
+              ariaLabel: `Month: ${monthNameLong}`,
               header: "caption-month",
               onValueChange: (nextMonth) => {
                 setView(new Date(year, Number.parseInt(nextMonth, 10), 1));
@@ -7947,7 +7988,7 @@ function Calendar({
               onValueChange: (nextYear) => {
                 setView(new Date(Number.parseInt(nextYear, 10), month, 1));
               },
-              children: yearOptionsForView(year).map((yearOption) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
+              children: yearOptions.map((yearOption) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(