@refineui/react 0.0.8 → 0.0.9

package/dist/index.d.cts

@@ -6087,9 +6087,10 @@ declare const RadioInput: react.ForwardRefExoticComponent<RadioInputProps & reac
 type SelectSize = "sm" | "md" | "lg";
 /**
  * `filled` — standalone field chrome (border + surface).
- * `plain` — flush trigger for composed surfaces (Footer locale, Calendar caption).
+ * `ghost` — compact chrome without field border (Calendar caption, Button-like ghost).
+ * `plain` — flush trigger; consumer / parent owns padding, radius, surface.
  */
-type SelectTriggerAppearance = "filled" | "plain";
+type SelectTriggerAppearance = "filled" | "ghost" | "plain";
 interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     value?: string;
     defaultValue?: string;
@@ -6106,7 +6107,8 @@ interface SelectTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     children?: ReactNode;
     /**
      * `filled` — default field chrome.
-     * `plain` — no field chrome; compose visuals via `className` / parent recipe.
+     * `ghost` — no field border; gap + radius + ghost hover plate.
+     * `plain` — no chrome; compose visuals via `className` / parent recipe.
      * @default "filled"
      */
     appearance?: SelectTriggerAppearance;

package/dist/index.d.ts

@@ -6087,9 +6087,10 @@ declare const RadioInput: react.ForwardRefExoticComponent<RadioInputProps & reac
 type SelectSize = "sm" | "md" | "lg";
 /**
  * `filled` — standalone field chrome (border + surface).
- * `plain` — flush trigger for composed surfaces (Footer locale, Calendar caption).
+ * `ghost` — compact chrome without field border (Calendar caption, Button-like ghost).
+ * `plain` — flush trigger; consumer / parent owns padding, radius, surface.
  */
-type SelectTriggerAppearance = "filled" | "plain";
+type SelectTriggerAppearance = "filled" | "ghost" | "plain";
 interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     value?: string;
     defaultValue?: string;
@@ -6106,7 +6107,8 @@ interface SelectTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     children?: ReactNode;
     /**
      * `filled` — default field chrome.
-     * `plain` — no field chrome; compose visuals via `className` / parent recipe.
+     * `ghost` — no field border; gap + radius + ghost hover plate.
+     * `plain` — no chrome; compose visuals via `className` / parent recipe.
      * @default "filled"
      */
     appearance?: SelectTriggerAppearance;

package/dist/index.js

@@ -2937,13 +2937,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: clsx27(
+    "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: clsx27(
+    "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",
@@ -3224,9 +3237,12 @@ function Select({
 }
 var SelectTrigger = forwardRef6(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] = useState5(false);
   const setRefs = useCallback4(
     (node) => {
       triggerRef.current = node;
@@ -3235,6 +3251,7 @@ var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
     },
     [forwardedRef, triggerRef]
   );
+  const clearPressed = useCallback4(() => setPressed(false), []);
   return /* @__PURE__ */ jsxs4(
     "button",
     {
@@ -3247,20 +3264,31 @@ var SelectTrigger = forwardRef6(function SelectTrigger2(props, forwardedRef) {
       "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: clsx28(
         "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
       ),
@@ -3286,7 +3314,20 @@ SelectTrigger.displayName = "SelectTrigger";
 function SelectValue({ placeholder, className, ...props }) {
   const { value, getLabelByValue, placeholder: rootPlaceholder } = useSelectCtx();
   const label = getLabelByValue(value);
-  return /* @__PURE__ */ jsx22("span", { "data-refineui-select-value": "", className: clsx28(selectStyles.value, !label && "text-refineui-alias-foreground-placeholder", className), ...props, children: label || placeholder || rootPlaceholder || "Select..." });
+  const isPlaceholder = value === "";
+  return /* @__PURE__ */ jsx22(
+    "span",
+    {
+      "data-refineui-select-value": "",
+      className: clsx28(
+        selectStyles.value,
+        isPlaceholder && "text-refineui-alias-foreground-placeholder",
+        className
+      ),
+      ...props,
+      children: label || placeholder || rootPlaceholder || "Select..."
+    }
+  );
 }
 function SelectIcon({ children, className, ...props }) {
   return /* @__PURE__ */ jsx22("span", { className: clsx28(selectStyles.iconWrap, className), ...props, children: children ?? /* @__PURE__ */ jsx22(WebIcon, { name: "chevron-down", size: iconSizes4.xsmall }) });
@@ -7394,15 +7435,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: clsx58(
-    "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: clsx58(
     componentTextClass(componentTypographyTokens.calendar.weekday),
@@ -7431,12 +7467,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();
@@ -7457,16 +7496,16 @@ function CalendarCaptionSelect({
   children
 }) {
   return /* @__PURE__ */ jsxs16(Select, { value, onValueChange, "aria-label": ariaLabel, size: "sm", children: [
-    /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsx45(
       SelectTrigger,
       {
-        appearance: "plain",
+        appearance: "ghost",
         "data-calendar-header": header,
-        className: calendarStyles.captionButton,
-        children: [
-          "                ",
-          /* @__PURE__ */ jsx45(SelectValue, { placeholder })
-        ]
+        className: clsx59(
+          calendarStyles.captionButton,
+          header === "caption-year" && "tabular-nums"
+        ),
+        children: /* @__PURE__ */ jsx45(SelectValue, { placeholder })
       }
     ),
     /* @__PURE__ */ jsx45(SelectPortal, { children: /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectGroup, { children }) }) })
@@ -7522,7 +7561,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);
@@ -7713,8 +7754,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));
@@ -7732,7 +7773,7 @@ function Calendar({
               onValueChange: (nextYear) => {
                 setView(new Date(Number.parseInt(nextYear, 10), month, 1));
               },
-              children: yearOptionsForView(year).map((yearOption) => /* @__PURE__ */ jsx45(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
+              children: yearOptions.map((yearOption) => /* @__PURE__ */ jsx45(SelectItem, { value: String(yearOption), children: String(yearOption) }, yearOption))
             }
           ),
           /* @__PURE__ */ jsx45(