@refineui/react 0.0.7 → 0.0.9

package/dist/index.cjs

@@ -122,7 +122,6 @@ __export(index_exports, {
   Divider: () => Divider,
   Drawer: () => Drawer,
   DrawerBody: () => DrawerBody,
-  DrawerClose: () => DrawerClose,
   DrawerContent: () => DrawerContent,
   DrawerDescription: () => DrawerDescription,
   DrawerFooter: () => DrawerFooter,
@@ -3205,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",
@@ -3492,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;
@@ -3503,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",
     {
@@ -3515,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
       ),
@@ -3554,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 }) });
@@ -7610,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),
@@ -7647,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();
@@ -7673,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 }) }) })
@@ -7738,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);
@@ -7929,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));
@@ -7948,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)(
@@ -8650,7 +8690,6 @@ function DrawerContent({
 function DrawerHeader({
   className,
   children,
-  showClose = true,
   actions,
   ...props
 }) {
@@ -8666,8 +8705,7 @@ function DrawerHeader({
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: drawerStyles.headerMain, children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: drawerStyles.headerMainText, children }),
-        hasActions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: drawerStyles.headerActions, children: actions }) : null,
-        showClose ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DrawerClose, {}) : null
+        hasActions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: drawerStyles.headerActions, children: actions }) : null
       ] })
     }
   );
@@ -8746,36 +8784,6 @@ function DrawerFooter({ className, ...props }) {
     }
   );
 }
-function DrawerClose({
-  children,
-  onClick,
-  className,
-  type = "button",
-  variant,
-  size,
-  layout,
-  ...props
-}) {
-  const { setOpen } = useDrawerContext("DrawerClose");
-  const iconOnly = children == null;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    Button,
-    {
-      ...props,
-      type,
-      variant: variant ?? (iconOnly ? "ghost" : "outline"),
-      size: size ?? "md",
-      layout: layout ?? (iconOnly ? "icon" : "label"),
-      "aria-label": iconOnly ? "Close" : void 0,
-      className,
-      onClick: (e) => {
-        onClick?.(e);
-        if (!e.defaultPrevented) setOpen(false);
-      },
-      children: iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(WebIcon, { name: "dismiss", size: import_tokens19.iconSizes.xlarge, color: "currentColor", iconStyle: "regular", "aria-hidden": true }) : children
-    }
-  );
-}
 
 // src/components/Dropdown/Dropdown.tsx
 var import_clsx70 = require("clsx");
@@ -15538,7 +15546,18 @@ var Collapsible = (0, import_react59.forwardRef)(function Collapsible2({ open: o
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CollapsibleContext.Provider, { value: contextValue, children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react60.Slot, { ...shared, children }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...shared, children }) });
 });
 var CollapsibleTrigger = (0, import_react59.forwardRef)(
-  function CollapsibleTrigger2({ asChild = false, onClick, className, children, ...props }, ref) {
+  function CollapsibleTrigger2({
+    asChild = false,
+    onClick,
+    className,
+    children,
+    variant = "ghost",
+    size,
+    layout,
+    fullWidth,
+    type = "button",
+    ...props
+  }, ref) {
     const { open, toggle, contentId, triggerId } = useCollapsibleContext("CollapsibleTrigger");
     const shared = {
       ...props,
@@ -15547,7 +15566,6 @@ var CollapsibleTrigger = (0, import_react59.forwardRef)(
       "aria-expanded": open,
       "aria-controls": contentId,
       "data-state": open ? "open" : "closed",
-      "data-refineui": "collapsible-trigger",
       className,
       onClick: (event) => {
         onClick?.(event);
@@ -15555,7 +15573,18 @@ var CollapsibleTrigger = (0, import_react59.forwardRef)(
       }
     };
     if (asChild) return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react60.Slot, { ...shared, children });
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", { ...shared, type: "button", children });
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      Button,
+      {
+        ...shared,
+        type,
+        variant,
+        size,
+        layout,
+        fullWidth,
+        children
+      }
+    );
   }
 );
 var CollapsibleContent = (0, import_react59.forwardRef)(
@@ -16081,7 +16110,6 @@ var ContextMenuSubContent = (0, import_react61.forwardRef)(
   Divider,
   Drawer,
   DrawerBody,
-  DrawerClose,
   DrawerContent,
   DrawerDescription,
   DrawerFooter,