@nurix/ui-component-library 1.1.3-stage.102 → 1.1.3-stage.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.mts +8 -3
  2. package/dist/index.d.ts +8 -3
  3. package/dist/index.js +60 -71
  4. package/dist/index.mjs +60 -71
  5. package/dist/styles.css +39 -18
  6. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -506,7 +506,10 @@ declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimit
506
506
  leadIcon?: React$1.ReactNode;
507
507
  /** Size of lead icon. "xs" = 16px, "sm" = 24px (default) */
508
508
  leadIconSize?: "xs" | "sm";
509
- size?: "regular" | "large";
509
+ /** Size variant. "small" = 32px height, "regular" = 48px, "large" = 64px */
510
+ size?: "small" | "regular" | "large";
511
+ /** Background variant. "default" = input grey, "white" = card white */
512
+ bg?: "default" | "white";
510
513
  } & React$1.RefAttributes<HTMLButtonElement>>;
511
514
  declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
512
515
  declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -1134,7 +1137,7 @@ declare const DEFAULT_THEME: {
1134
1137
  readonly popover: "#ffffff";
1135
1138
  readonly popoverForeground: "#0a0a0a";
1136
1139
  readonly primaryForeground: "#fafafa";
1137
- readonly input: "#f5f5f5";
1140
+ readonly input: "#eee";
1138
1141
  readonly sidebar: "#fafafa";
1139
1142
  readonly sidebarForeground: "#0a0a0a";
1140
1143
  readonly sidebarPrimary: "#171717";
@@ -1192,7 +1195,7 @@ declare const DEFAULT_THEME: {
1192
1195
  readonly popover: "#262626";
1193
1196
  readonly popoverForeground: "#fafafa";
1194
1197
  readonly primaryForeground: "#171717";
1195
- readonly input: "#2e3034";
1198
+ readonly input: "#171717";
1196
1199
  readonly sidebar: "#171717";
1197
1200
  readonly sidebarForeground: "#fafafa";
1198
1201
  readonly sidebarPrimary: "#0588f0";
@@ -1686,6 +1689,8 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
1686
1689
  items: FilterItem<T>[];
1687
1690
  /** Enable drag-and-drop reordering (default: false) */
1688
1691
  draggable?: boolean;
1692
+ /** To show clear button regardless of selected items or text / date content (default: true) */
1693
+ showClearBtn?: boolean;
1689
1694
  /** Callback when selection changes */
1690
1695
  onSelectionChange?: (values: T[]) => void;
1691
1696
  /** Callback when order changes (draggable mode) */
package/dist/index.d.ts CHANGED
@@ -506,7 +506,10 @@ declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimit
506
506
  leadIcon?: React$1.ReactNode;
507
507
  /** Size of lead icon. "xs" = 16px, "sm" = 24px (default) */
508
508
  leadIconSize?: "xs" | "sm";
509
- size?: "regular" | "large";
509
+ /** Size variant. "small" = 32px height, "regular" = 48px, "large" = 64px */
510
+ size?: "small" | "regular" | "large";
511
+ /** Background variant. "default" = input grey, "white" = card white */
512
+ bg?: "default" | "white";
510
513
  } & React$1.RefAttributes<HTMLButtonElement>>;
511
514
  declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
512
515
  declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -1134,7 +1137,7 @@ declare const DEFAULT_THEME: {
1134
1137
  readonly popover: "#ffffff";
1135
1138
  readonly popoverForeground: "#0a0a0a";
1136
1139
  readonly primaryForeground: "#fafafa";
1137
- readonly input: "#f5f5f5";
1140
+ readonly input: "#eee";
1138
1141
  readonly sidebar: "#fafafa";
1139
1142
  readonly sidebarForeground: "#0a0a0a";
1140
1143
  readonly sidebarPrimary: "#171717";
@@ -1192,7 +1195,7 @@ declare const DEFAULT_THEME: {
1192
1195
  readonly popover: "#262626";
1193
1196
  readonly popoverForeground: "#fafafa";
1194
1197
  readonly primaryForeground: "#171717";
1195
- readonly input: "#2e3034";
1198
+ readonly input: "#171717";
1196
1199
  readonly sidebar: "#171717";
1197
1200
  readonly sidebarForeground: "#fafafa";
1198
1201
  readonly sidebarPrimary: "#0588f0";
@@ -1686,6 +1689,8 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
1686
1689
  items: FilterItem<T>[];
1687
1690
  /** Enable drag-and-drop reordering (default: false) */
1688
1691
  draggable?: boolean;
1692
+ /** To show clear button regardless of selected items or text / date content (default: true) */
1693
+ showClearBtn?: boolean;
1689
1694
  /** Callback when selection changes */
1690
1695
  onSelectionChange?: (values: T[]) => void;
1691
1696
  /** Callback when order changes (draggable mode) */
package/dist/index.js CHANGED
@@ -6938,7 +6938,7 @@ var DEFAULT_THEME = {
6938
6938
  popover: "#ffffff",
6939
6939
  popoverForeground: "#0a0a0a",
6940
6940
  primaryForeground: "#fafafa",
6941
- input: "#f5f5f5",
6941
+ input: "#eee",
6942
6942
  sidebar: "#fafafa",
6943
6943
  sidebarForeground: "#0a0a0a",
6944
6944
  sidebarPrimary: "#171717",
@@ -6996,7 +6996,7 @@ var DEFAULT_THEME = {
6996
6996
  popover: "#262626",
6997
6997
  popoverForeground: "#fafafa",
6998
6998
  primaryForeground: "#171717",
6999
- input: "#2e3034",
6999
+ input: "#171717",
7000
7000
  sidebar: "#171717",
7001
7001
  sidebarForeground: "#fafafa",
7002
7002
  sidebarPrimary: "#0588f0",
@@ -7341,7 +7341,7 @@ var INPUT_GROUP_TOKENS = {
7341
7341
  segment: "shrink-0 h-9 flex items-center text-sm font-medium text-foreground px-4",
7342
7342
  segmentDivider: "h-9 border-border",
7343
7343
  // Textarea
7344
- textareaField: "w-full bg-input pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 text-sm border border-transparent focus-visible:outline-none focus-visible:border-primary disabled:pointer-events-none shadow-none",
7344
+ textareaField: "w-full bg-input py-1 px-2 text-sm border border-transparent focus-visible:outline-none focus-visible:border-primary disabled:pointer-events-none shadow-none",
7345
7345
  textareaDisabled: "opacity-50",
7346
7346
  radius: {
7347
7347
  none: `${DEFAULT_THEME.radius.mode1.roundedNone}px`,
@@ -8482,11 +8482,15 @@ var import_lucide_react5 = require("lucide-react");
8482
8482
  var SELECT_TOKENS = {
8483
8483
  // Main select container
8484
8484
  container: {
8485
- // Figma: trigger uses rounded-lg (8px), padding pl-16 pr-12 py-4
8486
- default: "bg-input rounded-[var(--rounded-lg,8px)] data-[state=open]:rounded-b-none flex items-center justify-between pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:outline-none",
8487
- singleLineRegular: "h-[var(--input-height)]",
8488
- singleLineLarge: "h-[var(--input-height-large)]",
8489
- doubleLine: "h-[var(--input-height-large)]"
8485
+ // Figma: trigger uses rounded-lg (8px), padding pl-12 pr-12 py-4
8486
+ default: "rounded-[var(--rounded-lg,8px)] flex items-center justify-between gap-1 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none data-[state=open]:border-1 data-[state=open]:border-primary",
8487
+ // bg variants: default = input (grey), white = card
8488
+ bgDefault: "bg-input",
8489
+ bgWhite: "bg-card",
8490
+ singleLineSmall: "min-h-8 max-h-12 px-3 py-1 min-w-[80px] w-[max-content] max-w-[125px]",
8491
+ singleLineRegular: "h-[var(--input-height)] pl-[var(--input-padding-horizontal,16px)] pr-3 py-1",
8492
+ singleLineLarge: "h-[var(--input-height-large)] pl-[var(--input-padding-horizontal,16px)] pr-3 py-1",
8493
+ doubleLine: "h-[var(--input-height-large)] pl-[var(--input-padding-horizontal,16px)] pr-3 py-1"
8490
8494
  },
8491
8495
  // Select button (when open, top part)
8492
8496
  selectButton: {
@@ -8521,13 +8525,11 @@ var SELECT_TOKENS = {
8521
8525
  },
8522
8526
  // Chevron icon - Figma: foreground color
8523
8527
  chevron: "size-4 shrink-0 text-muted-foreground",
8524
- // Dropdown container — Figma: rounded-[--input/radius,16px], gap-8px, p-8px
8525
8528
  dropdown: {
8526
- base: "bg-input flex flex-col gap-2 items-center p-2 rounded-[var(--input-radius,16px)] shrink-0 w-[var(--radix-select-trigger-width)] shadow-sm"
8529
+ base: "bg-[var(--filter-input)] rounded-[var(--rounded-lg)] shrink-0 w-[var(--radix-select-trigger-width)] shadow-sm text-foreground"
8527
8530
  },
8528
- // Search input — Figma: h-48px, rounded-[--input/radius,16px], icon 24px
8529
8531
  search: {
8530
- container: "bg-input flex h-[var(--input-height)] items-center gap-2 pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 rounded-[var(--input-radius,16px)] border border-border shrink-0 w-full",
8532
+ container: "bg-card flex items-center gap-1 px-2 py-1 rounded-[var(--rounded-lg)] shrink-0 border border-transparent focus-within:border-primary transition-colors text-xs",
8531
8533
  iconWrap: "flex items-center shrink-0",
8532
8534
  icon: "size-4 shrink-0",
8533
8535
  inputWrap: "flex flex-1 h-9 items-center min-h-px min-w-px pl-2 pr-3 py-1",
@@ -8539,7 +8541,7 @@ var SELECT_TOKENS = {
8539
8541
  sectionLabel: "flex h-8 items-center px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-md,6px)] shrink-0 w-full",
8540
8542
  sectionText: "text-xs leading-4 text-muted-foreground font-normal tracking-normal shrink-0",
8541
8543
  item: {
8542
- base: "flex items-center justify-between px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-sm,4px)] shrink-0 w-full",
8544
+ base: "flex items-center justify-between px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-lg)] shrink-0 w-full",
8543
8545
  singleLine: "h-8",
8544
8546
  doubleLine: "min-h-[50px]",
8545
8547
  hover: "bg-foreground/10",
@@ -8570,7 +8572,7 @@ var SELECT_TOKENS = {
8570
8572
  },
8571
8573
  // Select group (label + select)
8572
8574
  group: {
8573
- container: "flex flex-col gap-1 items-start"
8575
+ container: "flex flex-col gap-1 p-1 items-start"
8574
8576
  },
8575
8577
  // Spec card (for storybook)
8576
8578
  specCard: "border border-border flex flex-col gap-10 items-start p-14 rounded-3xl size-full",
@@ -8721,6 +8723,8 @@ function themeJsonToCssVars(theme, mode) {
8721
8723
  if (radius) {
8722
8724
  out["--rounded-sm"] = `${radius.roundedSm}px`;
8723
8725
  out["--rounded-md"] = `${radius.roundedMd}px`;
8726
+ out["--rounded-lg"] = `${radius.roundedLg}px`;
8727
+ out["--rounded-xl"] = `${radius.roundedXl}px`;
8724
8728
  out["--rounded-2xl"] = `${radius.rounded2xl}px`;
8725
8729
  out["--rounded-full"] = `${radius.roundedFull}px`;
8726
8730
  }
@@ -8868,7 +8872,7 @@ var SelectGroup = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
8868
8872
  SelectPrimitive.Group,
8869
8873
  {
8870
8874
  ref,
8871
- className: cn("flex flex-col gap-0", className),
8875
+ className: cn(SELECT_TOKENS.group.container, className),
8872
8876
  ...props
8873
8877
  }
8874
8878
  ));
@@ -8896,6 +8900,7 @@ var SelectTrigger = React19.forwardRef(
8896
8900
  leadIcon,
8897
8901
  leadIconSize = "sm",
8898
8902
  size = "regular",
8903
+ bg = "default",
8899
8904
  ...props
8900
8905
  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
8901
8906
  SelectPrimitive.Trigger,
@@ -8903,7 +8908,8 @@ var SelectTrigger = React19.forwardRef(
8903
8908
  ref,
8904
8909
  className: cn(
8905
8910
  SELECT_TOKENS.container.default,
8906
- size === "large" ? SELECT_TOKENS.container.singleLineLarge : SELECT_TOKENS.container.singleLineRegular,
8911
+ bg === "white" ? SELECT_TOKENS.container.bgWhite : SELECT_TOKENS.container.bgDefault,
8912
+ size === "small" ? SELECT_TOKENS.container.singleLineSmall : size === "large" ? SELECT_TOKENS.container.singleLineLarge : SELECT_TOKENS.container.singleLineRegular,
8907
8913
  // Provide placeholder styling hook and consistent typography inheritance
8908
8914
  "group",
8909
8915
  "w-full",
@@ -9018,7 +9024,7 @@ var SelectContent = React19.forwardRef(
9018
9024
  showSearch = false,
9019
9025
  searchPlaceholder = "Search...",
9020
9026
  side = "bottom",
9021
- sideOffset = 0,
9027
+ sideOffset = 4,
9022
9028
  ...props
9023
9029
  }, ref) => {
9024
9030
  const { theme } = useTheme();
@@ -9096,7 +9102,6 @@ var SelectContent = React19.forwardRef(
9096
9102
  "relative z-50 overflow-hidden",
9097
9103
  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
9098
9104
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
9099
- "data-[side=bottom]:rounded-t-none",
9100
9105
  className
9101
9106
  ),
9102
9107
  position,
@@ -9115,8 +9120,9 @@ var SelectContent = React19.forwardRef(
9115
9120
  onKeyDown: handleSearchKeyDown,
9116
9121
  placeholder: searchPlaceholder,
9117
9122
  className: cn(
9118
- "flex-1 min-w-0 h-9 bg-transparent pl-2 pr-3 py-1 text-sm leading-5 font-normal tracking-normal text-accent-foreground placeholder:text-muted-foreground outline-none border-0"
9119
- )
9123
+ "flex-1 min-w-0 bg-transparent px-2 py-1 text-accent-foreground placeholder:text-muted-foreground outline-none focus:border-primary rounded-[var(--rounded-lg)]"
9124
+ ),
9125
+ autoFocus: true
9120
9126
  }
9121
9127
  )
9122
9128
  ] }),
@@ -9200,29 +9206,8 @@ var SelectItem = React19.forwardRef(
9200
9206
  "min-w-0 flex-1"
9201
9207
  ),
9202
9208
  children: [
9203
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
9204
- Typography,
9205
- {
9206
- as: "p",
9207
- variant: "p2",
9208
- tone: "inherit",
9209
- className: cn(
9210
- SELECT_TOKENS.menu.itemText,
9211
- "text-accent-foreground"
9212
- ),
9213
- children
9214
- }
9215
- ) }),
9216
- subtext && type === "double" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
9217
- Typography,
9218
- {
9219
- as: "p",
9220
- variant: "p3",
9221
- tone: "muted",
9222
- className: SELECT_TOKENS.menu.itemSubtext,
9223
- children: subtext
9224
- }
9225
- )
9209
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs", children }) }),
9210
+ subtext && type === "double" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xs text-muted-foreground", children: subtext })
9226
9211
  ]
9227
9212
  }
9228
9213
  )
@@ -10301,18 +10286,18 @@ var import_lucide_react10 = require("lucide-react");
10301
10286
  // src/table/variables.ts
10302
10287
  var TABLE_TOKENS = {
10303
10288
  /** Outer wrapper: flex column, constrained height so table body scrolls; header stays sticky */
10304
- wrapper: "w-full flex flex-col overflow-hidden border border:[var(--border)] rounded-lg bg-card",
10289
+ wrapper: "w-full flex flex-col overflow-hidden rounded-lg",
10305
10290
  /** Scrollable table area — vertical scroll here so sticky header works; horizontal scroll for wide tables */
10306
10291
  scrollContainer: "flex-1 min-h-0 overflow-auto",
10307
10292
  /** Inner block so the scroll container's content has a defined width and sticky works correctly */
10308
10293
  scrollContent: "inline-block min-w-full",
10309
10294
  /** The <table> element */
10310
- table: "w-full border-collapse text-sm table-fixed bg-background",
10295
+ table: "w-full border-collapse text-sm table-fixed",
10311
10296
  // ── Header ──────────────────────────────────────────────────────────────────
10312
10297
  /** <thead> row */
10313
- headerRow: "border-b border:[var(--border)] bg-primary-foreground",
10298
+ headerRow: "border-b border:[var(--border)] bg-card",
10314
10299
  /** Sticky top for every <th> — must be inside scrollContainer; thead/tr sticky is unreliable */
10315
- headerCellStickyTop: "sticky top-0 z-30 bg-primary-foreground",
10300
+ headerCellStickyTop: "sticky top-0 z-30 bg-card",
10316
10301
  /** <th> base styles */
10317
10302
  headerCell: "px-3 py-2 text-left text-xs font-semibold text-muted-foreground whitespace-nowrap align-middle",
10318
10303
  /** Added to sortable <th> */
@@ -10341,7 +10326,7 @@ var TABLE_TOKENS = {
10341
10326
  actionsCell: "px-3 py-2 text-right whitespace-nowrap",
10342
10327
  // ── Pagination ───────────────────────────────────────────────────────────────
10343
10328
  /** Container around the pagination bar */
10344
- pagination: "border-t border:[var(--border)] bg-background"
10329
+ pagination: "border-t border:[var(--border)]"
10345
10330
  };
10346
10331
  var COLUMN_WIDTH_MAP = {
10347
10332
  xs: 100,
@@ -10398,7 +10383,7 @@ function Pagination({
10398
10383
  };
10399
10384
  const isFirstPage = currentPage === 1;
10400
10385
  const isLastPage = currentPage === totalPages || totalPages === 0;
10401
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 text-sm", children: [
10386
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between px-3 py-2", children: [
10402
10387
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Typography, { tone: "muted", variant: "p2", children: [
10403
10388
  "Showing ",
10404
10389
  formatNumber(start),
@@ -10412,16 +10397,24 @@ function Pagination({
10412
10397
  total !== 1 ? "s" : ""
10413
10398
  ] }),
10414
10399
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-4", children: [
10415
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
10416
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { tone: "muted", variant: "p2", children: "Rows per page" }),
10400
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2", children: [
10401
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { tone: "muted", variant: "p2", className: "whitespace-nowrap", children: "Rows per page" }),
10417
10402
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
10418
10403
  Select,
10419
10404
  {
10420
10405
  value: String(rowsPerPage),
10421
10406
  onValueChange: handleRowsPerPageSelect,
10422
10407
  children: [
10423
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectTrigger, { className: "h-8 w-[76px] text-xs px-2 py-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectValue, {}) }),
10424
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectContent, { children: ROWS_PER_PAGE_OPTIONS.map((n) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: String(n), children: n }, n)) })
10408
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectTrigger, { size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectValue, {}) }),
10409
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10410
+ SelectContent,
10411
+ {
10412
+ items: ROWS_PER_PAGE_OPTIONS.map((n) => ({
10413
+ value: String(n),
10414
+ label: String(n)
10415
+ }))
10416
+ }
10417
+ )
10425
10418
  ]
10426
10419
  }
10427
10420
  )
@@ -10874,7 +10867,7 @@ var import_react_day_picker = require("react-day-picker");
10874
10867
  var FILTER_SELECT_TOKENS = {
10875
10868
  // Trigger button container - Figma: default bg filter-input, hover gradient overlay, clicked primary border
10876
10869
  trigger: {
10877
- base: "content-stretch flex gap-2 items-center justify-between px-2.5 py-2 relative rounded-[var(--rounded-2xl)] transition-colors outline-none",
10870
+ base: "content-stretch flex gap-2 items-center justify-between px-3 py-2 relative rounded-[var(--rounded-2xl)] transition-colors outline-none",
10878
10871
  default: "bg-[var(--filter-input)] border border-border border-solid",
10879
10872
  hover: "hover:[background:linear-gradient(0deg,var(--hover)_0%,var(--hover)_100%),var(--filter-input)]",
10880
10873
  open: "data-[state=open]:border-primary data-[state=open]:border"
@@ -10892,10 +10885,10 @@ var FILTER_SELECT_TOKENS = {
10892
10885
  base: "shrink-0 size-4 text-muted-foreground"
10893
10886
  },
10894
10887
  dropdown: {
10895
- base: "bg-[var(--filter-input)] flex flex-col gap-0 items-start p-2 rounded-[var(--input-radius)] shadow-sm border border-border min-w-[196px]"
10888
+ base: "bg-[var(--filter-input)] flex flex-col gap-0 items-start p-1 pb-2 rounded-[var(--input-radius)] shadow-sm border border-border min-w-[196px]"
10896
10889
  },
10897
10890
  listItem: {
10898
- base: "content-stretch flex gap-2 items-center p-1.5 relative rounded-[var(--rounded-sm)] w-full min-w-0 cursor-pointer outline-none hover:bg-[var(--hover)]"
10891
+ base: "content-stretch flex gap-2 items-center p-1.5 relative rounded-[var(--rounded-xl)] w-full min-w-0 cursor-pointer outline-none hover:bg-[var(--hover)]"
10899
10892
  },
10900
10893
  dragHandle: "shrink-0 size-4 text-foreground cursor-grab active:cursor-grabbing",
10901
10894
  itemLabel: "font-normal text-xs leading-4 relative shrink-0 text-foreground tracking-normal whitespace-nowrap",
@@ -10906,7 +10899,7 @@ var FILTER_SELECT_TOKENS = {
10906
10899
  },
10907
10900
  // Date preset button - Figma: default no bg, hover bg-[var(--hover)], selected bg-[var(--primary10)] text-primary
10908
10901
  datePreset: {
10909
- base: "w-full text-left px-3 py-2 rounded-lg text-xs font-medium leading-4 cursor-pointer transition-colors",
10902
+ base: "w-full text-left px-3 py-2 rounded-[var(--rounded-xl)] text-xs font-medium leading-4 cursor-pointer transition-colors",
10910
10903
  default: "text-secondary-foreground hover:bg-[var(--hover)]",
10911
10904
  selected: "bg-[var(--primary10)] text-primary"
10912
10905
  },
@@ -11171,6 +11164,7 @@ var FilterSelect = React35.forwardRef(
11171
11164
  selectedItems = [],
11172
11165
  items,
11173
11166
  draggable = false,
11167
+ showClearBtn = true,
11174
11168
  onSelectionChange,
11175
11169
  onOrderChange,
11176
11170
  selectedItemsMaxWidth = "25ch",
@@ -11573,7 +11567,7 @@ var FilterSelect = React35.forwardRef(
11573
11567
  autoFocus: true
11574
11568
  }
11575
11569
  ),
11576
- hasContentToClear && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11570
+ (showClearBtn || hasContentToClear) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11577
11571
  "button",
11578
11572
  {
11579
11573
  type: "button",
@@ -11602,19 +11596,14 @@ var FilterSelect = React35.forwardRef(
11602
11596
  value: operand != null ? operand : "",
11603
11597
  onValueChange: onOperandChange,
11604
11598
  children: [
11605
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-9 w-full bg-input shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
11606
- SelectValue,
11607
- {
11608
- placeholder: operandPlaceholder,
11609
- style: { zIndex: "60" }
11610
- }
11611
- ) }),
11599
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectValue, { placeholder: operandPlaceholder }) }),
11612
11600
  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
11613
11601
  SelectContent,
11614
11602
  {
11615
- style: { zIndex: "60" },
11616
- className: "bg-[var(--filter-input)]",
11617
- children: operands.map((op) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: op.value, children: op.label }, op.value))
11603
+ items: operands.map((op) => ({
11604
+ value: op.value,
11605
+ label: op.label
11606
+ }))
11618
11607
  }
11619
11608
  )
11620
11609
  ]
@@ -11637,7 +11626,7 @@ var FilterSelect = React35.forwardRef(
11637
11626
  autoFocus: true
11638
11627
  }
11639
11628
  ),
11640
- hasContentToClear && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11629
+ (showClearBtn || hasContentToClear) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11641
11630
  "button",
11642
11631
  {
11643
11632
  type: "button",
@@ -11690,7 +11679,7 @@ var FilterSelect = React35.forwardRef(
11690
11679
  preset.value
11691
11680
  );
11692
11681
  }) }),
11693
- hasContentToClear && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11682
+ (showClearBtn || hasContentToClear) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11694
11683
  "button",
11695
11684
  {
11696
11685
  type: "button",
@@ -11847,7 +11836,7 @@ var FilterSelect = React35.forwardRef(
11847
11836
  })
11848
11837
  }
11849
11838
  ),
11850
- selectedItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11839
+ (showClearBtn || selectedItems.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
11851
11840
  "button",
11852
11841
  {
11853
11842
  type: "button",
package/dist/index.mjs CHANGED
@@ -6850,7 +6850,7 @@ var DEFAULT_THEME = {
6850
6850
  popover: "#ffffff",
6851
6851
  popoverForeground: "#0a0a0a",
6852
6852
  primaryForeground: "#fafafa",
6853
- input: "#f5f5f5",
6853
+ input: "#eee",
6854
6854
  sidebar: "#fafafa",
6855
6855
  sidebarForeground: "#0a0a0a",
6856
6856
  sidebarPrimary: "#171717",
@@ -6908,7 +6908,7 @@ var DEFAULT_THEME = {
6908
6908
  popover: "#262626",
6909
6909
  popoverForeground: "#fafafa",
6910
6910
  primaryForeground: "#171717",
6911
- input: "#2e3034",
6911
+ input: "#171717",
6912
6912
  sidebar: "#171717",
6913
6913
  sidebarForeground: "#fafafa",
6914
6914
  sidebarPrimary: "#0588f0",
@@ -7253,7 +7253,7 @@ var INPUT_GROUP_TOKENS = {
7253
7253
  segment: "shrink-0 h-9 flex items-center text-sm font-medium text-foreground px-4",
7254
7254
  segmentDivider: "h-9 border-border",
7255
7255
  // Textarea
7256
- textareaField: "w-full bg-input pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 text-sm border border-transparent focus-visible:outline-none focus-visible:border-primary disabled:pointer-events-none shadow-none",
7256
+ textareaField: "w-full bg-input py-1 px-2 text-sm border border-transparent focus-visible:outline-none focus-visible:border-primary disabled:pointer-events-none shadow-none",
7257
7257
  textareaDisabled: "opacity-50",
7258
7258
  radius: {
7259
7259
  none: `${DEFAULT_THEME.radius.mode1.roundedNone}px`,
@@ -8394,11 +8394,15 @@ import { Check as Check2, ChevronDown as ChevronDown2, Search } from "lucide-rea
8394
8394
  var SELECT_TOKENS = {
8395
8395
  // Main select container
8396
8396
  container: {
8397
- // Figma: trigger uses rounded-lg (8px), padding pl-16 pr-12 py-4
8398
- default: "bg-input rounded-[var(--rounded-lg,8px)] data-[state=open]:rounded-b-none flex items-center justify-between pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:outline-none",
8399
- singleLineRegular: "h-[var(--input-height)]",
8400
- singleLineLarge: "h-[var(--input-height-large)]",
8401
- doubleLine: "h-[var(--input-height-large)]"
8397
+ // Figma: trigger uses rounded-lg (8px), padding pl-12 pr-12 py-4
8398
+ default: "rounded-[var(--rounded-lg,8px)] flex items-center justify-between gap-1 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none data-[state=open]:border-1 data-[state=open]:border-primary",
8399
+ // bg variants: default = input (grey), white = card
8400
+ bgDefault: "bg-input",
8401
+ bgWhite: "bg-card",
8402
+ singleLineSmall: "min-h-8 max-h-12 px-3 py-1 min-w-[80px] w-[max-content] max-w-[125px]",
8403
+ singleLineRegular: "h-[var(--input-height)] pl-[var(--input-padding-horizontal,16px)] pr-3 py-1",
8404
+ singleLineLarge: "h-[var(--input-height-large)] pl-[var(--input-padding-horizontal,16px)] pr-3 py-1",
8405
+ doubleLine: "h-[var(--input-height-large)] pl-[var(--input-padding-horizontal,16px)] pr-3 py-1"
8402
8406
  },
8403
8407
  // Select button (when open, top part)
8404
8408
  selectButton: {
@@ -8433,13 +8437,11 @@ var SELECT_TOKENS = {
8433
8437
  },
8434
8438
  // Chevron icon - Figma: foreground color
8435
8439
  chevron: "size-4 shrink-0 text-muted-foreground",
8436
- // Dropdown container — Figma: rounded-[--input/radius,16px], gap-8px, p-8px
8437
8440
  dropdown: {
8438
- base: "bg-input flex flex-col gap-2 items-center p-2 rounded-[var(--input-radius,16px)] shrink-0 w-[var(--radix-select-trigger-width)] shadow-sm"
8441
+ base: "bg-[var(--filter-input)] rounded-[var(--rounded-lg)] shrink-0 w-[var(--radix-select-trigger-width)] shadow-sm text-foreground"
8439
8442
  },
8440
- // Search input — Figma: h-48px, rounded-[--input/radius,16px], icon 24px
8441
8443
  search: {
8442
- container: "bg-input flex h-[var(--input-height)] items-center gap-2 pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 rounded-[var(--input-radius,16px)] border border-border shrink-0 w-full",
8444
+ container: "bg-card flex items-center gap-1 px-2 py-1 rounded-[var(--rounded-lg)] shrink-0 border border-transparent focus-within:border-primary transition-colors text-xs",
8443
8445
  iconWrap: "flex items-center shrink-0",
8444
8446
  icon: "size-4 shrink-0",
8445
8447
  inputWrap: "flex flex-1 h-9 items-center min-h-px min-w-px pl-2 pr-3 py-1",
@@ -8451,7 +8453,7 @@ var SELECT_TOKENS = {
8451
8453
  sectionLabel: "flex h-8 items-center px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-md,6px)] shrink-0 w-full",
8452
8454
  sectionText: "text-xs leading-4 text-muted-foreground font-normal tracking-normal shrink-0",
8453
8455
  item: {
8454
- base: "flex items-center justify-between px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-sm,4px)] shrink-0 w-full",
8456
+ base: "flex items-center justify-between px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-lg)] shrink-0 w-full",
8455
8457
  singleLine: "h-8",
8456
8458
  doubleLine: "min-h-[50px]",
8457
8459
  hover: "bg-foreground/10",
@@ -8482,7 +8484,7 @@ var SELECT_TOKENS = {
8482
8484
  },
8483
8485
  // Select group (label + select)
8484
8486
  group: {
8485
- container: "flex flex-col gap-1 items-start"
8487
+ container: "flex flex-col gap-1 p-1 items-start"
8486
8488
  },
8487
8489
  // Spec card (for storybook)
8488
8490
  specCard: "border border-border flex flex-col gap-10 items-start p-14 rounded-3xl size-full",
@@ -8633,6 +8635,8 @@ function themeJsonToCssVars(theme, mode) {
8633
8635
  if (radius) {
8634
8636
  out["--rounded-sm"] = `${radius.roundedSm}px`;
8635
8637
  out["--rounded-md"] = `${radius.roundedMd}px`;
8638
+ out["--rounded-lg"] = `${radius.roundedLg}px`;
8639
+ out["--rounded-xl"] = `${radius.roundedXl}px`;
8636
8640
  out["--rounded-2xl"] = `${radius.rounded2xl}px`;
8637
8641
  out["--rounded-full"] = `${radius.roundedFull}px`;
8638
8642
  }
@@ -8780,7 +8784,7 @@ var SelectGroup = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
8780
8784
  SelectPrimitive.Group,
8781
8785
  {
8782
8786
  ref,
8783
- className: cn("flex flex-col gap-0", className),
8787
+ className: cn(SELECT_TOKENS.group.container, className),
8784
8788
  ...props
8785
8789
  }
8786
8790
  ));
@@ -8808,6 +8812,7 @@ var SelectTrigger = React19.forwardRef(
8808
8812
  leadIcon,
8809
8813
  leadIconSize = "sm",
8810
8814
  size = "regular",
8815
+ bg = "default",
8811
8816
  ...props
8812
8817
  }, ref) => /* @__PURE__ */ jsxs12(
8813
8818
  SelectPrimitive.Trigger,
@@ -8815,7 +8820,8 @@ var SelectTrigger = React19.forwardRef(
8815
8820
  ref,
8816
8821
  className: cn(
8817
8822
  SELECT_TOKENS.container.default,
8818
- size === "large" ? SELECT_TOKENS.container.singleLineLarge : SELECT_TOKENS.container.singleLineRegular,
8823
+ bg === "white" ? SELECT_TOKENS.container.bgWhite : SELECT_TOKENS.container.bgDefault,
8824
+ size === "small" ? SELECT_TOKENS.container.singleLineSmall : size === "large" ? SELECT_TOKENS.container.singleLineLarge : SELECT_TOKENS.container.singleLineRegular,
8819
8825
  // Provide placeholder styling hook and consistent typography inheritance
8820
8826
  "group",
8821
8827
  "w-full",
@@ -8930,7 +8936,7 @@ var SelectContent = React19.forwardRef(
8930
8936
  showSearch = false,
8931
8937
  searchPlaceholder = "Search...",
8932
8938
  side = "bottom",
8933
- sideOffset = 0,
8939
+ sideOffset = 4,
8934
8940
  ...props
8935
8941
  }, ref) => {
8936
8942
  const { theme } = useTheme();
@@ -9008,7 +9014,6 @@ var SelectContent = React19.forwardRef(
9008
9014
  "relative z-50 overflow-hidden",
9009
9015
  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
9010
9016
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
9011
- "data-[side=bottom]:rounded-t-none",
9012
9017
  className
9013
9018
  ),
9014
9019
  position,
@@ -9027,8 +9032,9 @@ var SelectContent = React19.forwardRef(
9027
9032
  onKeyDown: handleSearchKeyDown,
9028
9033
  placeholder: searchPlaceholder,
9029
9034
  className: cn(
9030
- "flex-1 min-w-0 h-9 bg-transparent pl-2 pr-3 py-1 text-sm leading-5 font-normal tracking-normal text-accent-foreground placeholder:text-muted-foreground outline-none border-0"
9031
- )
9035
+ "flex-1 min-w-0 bg-transparent px-2 py-1 text-accent-foreground placeholder:text-muted-foreground outline-none focus:border-primary rounded-[var(--rounded-lg)]"
9036
+ ),
9037
+ autoFocus: true
9032
9038
  }
9033
9039
  )
9034
9040
  ] }),
@@ -9112,29 +9118,8 @@ var SelectItem = React19.forwardRef(
9112
9118
  "min-w-0 flex-1"
9113
9119
  ),
9114
9120
  children: [
9115
- /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ jsx17(
9116
- Typography,
9117
- {
9118
- as: "p",
9119
- variant: "p2",
9120
- tone: "inherit",
9121
- className: cn(
9122
- SELECT_TOKENS.menu.itemText,
9123
- "text-accent-foreground"
9124
- ),
9125
- children
9126
- }
9127
- ) }),
9128
- subtext && type === "double" && /* @__PURE__ */ jsx17(
9129
- Typography,
9130
- {
9131
- as: "p",
9132
- variant: "p3",
9133
- tone: "muted",
9134
- className: SELECT_TOKENS.menu.itemSubtext,
9135
- children: subtext
9136
- }
9137
- )
9121
+ /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ jsx17("p", { className: "text-xs", children }) }),
9122
+ subtext && type === "double" && /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: subtext })
9138
9123
  ]
9139
9124
  }
9140
9125
  )
@@ -10221,18 +10206,18 @@ import {
10221
10206
  // src/table/variables.ts
10222
10207
  var TABLE_TOKENS = {
10223
10208
  /** Outer wrapper: flex column, constrained height so table body scrolls; header stays sticky */
10224
- wrapper: "w-full flex flex-col overflow-hidden border border:[var(--border)] rounded-lg bg-card",
10209
+ wrapper: "w-full flex flex-col overflow-hidden rounded-lg",
10225
10210
  /** Scrollable table area — vertical scroll here so sticky header works; horizontal scroll for wide tables */
10226
10211
  scrollContainer: "flex-1 min-h-0 overflow-auto",
10227
10212
  /** Inner block so the scroll container's content has a defined width and sticky works correctly */
10228
10213
  scrollContent: "inline-block min-w-full",
10229
10214
  /** The <table> element */
10230
- table: "w-full border-collapse text-sm table-fixed bg-background",
10215
+ table: "w-full border-collapse text-sm table-fixed",
10231
10216
  // ── Header ──────────────────────────────────────────────────────────────────
10232
10217
  /** <thead> row */
10233
- headerRow: "border-b border:[var(--border)] bg-primary-foreground",
10218
+ headerRow: "border-b border:[var(--border)] bg-card",
10234
10219
  /** Sticky top for every <th> — must be inside scrollContainer; thead/tr sticky is unreliable */
10235
- headerCellStickyTop: "sticky top-0 z-30 bg-primary-foreground",
10220
+ headerCellStickyTop: "sticky top-0 z-30 bg-card",
10236
10221
  /** <th> base styles */
10237
10222
  headerCell: "px-3 py-2 text-left text-xs font-semibold text-muted-foreground whitespace-nowrap align-middle",
10238
10223
  /** Added to sortable <th> */
@@ -10261,7 +10246,7 @@ var TABLE_TOKENS = {
10261
10246
  actionsCell: "px-3 py-2 text-right whitespace-nowrap",
10262
10247
  // ── Pagination ───────────────────────────────────────────────────────────────
10263
10248
  /** Container around the pagination bar */
10264
- pagination: "border-t border:[var(--border)] bg-background"
10249
+ pagination: "border-t border:[var(--border)]"
10265
10250
  };
10266
10251
  var COLUMN_WIDTH_MAP = {
10267
10252
  xs: 100,
@@ -10318,7 +10303,7 @@ function Pagination({
10318
10303
  };
10319
10304
  const isFirstPage = currentPage === 1;
10320
10305
  const isLastPage = currentPage === totalPages || totalPages === 0;
10321
- return /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between px-3 py-2 text-sm", children: [
10306
+ return /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between px-3 py-2", children: [
10322
10307
  /* @__PURE__ */ jsxs20(Typography, { tone: "muted", variant: "p2", children: [
10323
10308
  "Showing ",
10324
10309
  formatNumber(start),
@@ -10332,16 +10317,24 @@ function Pagination({
10332
10317
  total !== 1 ? "s" : ""
10333
10318
  ] }),
10334
10319
  /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-4", children: [
10335
- /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-xs", children: [
10336
- /* @__PURE__ */ jsx27(Typography, { tone: "muted", variant: "p2", children: "Rows per page" }),
10320
+ /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
10321
+ /* @__PURE__ */ jsx27(Typography, { tone: "muted", variant: "p2", className: "whitespace-nowrap", children: "Rows per page" }),
10337
10322
  /* @__PURE__ */ jsxs20(
10338
10323
  Select,
10339
10324
  {
10340
10325
  value: String(rowsPerPage),
10341
10326
  onValueChange: handleRowsPerPageSelect,
10342
10327
  children: [
10343
- /* @__PURE__ */ jsx27(SelectTrigger, { className: "h-8 w-[76px] text-xs px-2 py-1 min-h-0", children: /* @__PURE__ */ jsx27(SelectValue, {}) }),
10344
- /* @__PURE__ */ jsx27(SelectContent, { children: ROWS_PER_PAGE_OPTIONS.map((n) => /* @__PURE__ */ jsx27(SelectItem, { value: String(n), children: n }, n)) })
10328
+ /* @__PURE__ */ jsx27(SelectTrigger, { size: "small", children: /* @__PURE__ */ jsx27(SelectValue, {}) }),
10329
+ /* @__PURE__ */ jsx27(
10330
+ SelectContent,
10331
+ {
10332
+ items: ROWS_PER_PAGE_OPTIONS.map((n) => ({
10333
+ value: String(n),
10334
+ label: String(n)
10335
+ }))
10336
+ }
10337
+ )
10345
10338
  ]
10346
10339
  }
10347
10340
  )
@@ -10794,7 +10787,7 @@ import { DayPicker } from "react-day-picker";
10794
10787
  var FILTER_SELECT_TOKENS = {
10795
10788
  // Trigger button container - Figma: default bg filter-input, hover gradient overlay, clicked primary border
10796
10789
  trigger: {
10797
- base: "content-stretch flex gap-2 items-center justify-between px-2.5 py-2 relative rounded-[var(--rounded-2xl)] transition-colors outline-none",
10790
+ base: "content-stretch flex gap-2 items-center justify-between px-3 py-2 relative rounded-[var(--rounded-2xl)] transition-colors outline-none",
10798
10791
  default: "bg-[var(--filter-input)] border border-border border-solid",
10799
10792
  hover: "hover:[background:linear-gradient(0deg,var(--hover)_0%,var(--hover)_100%),var(--filter-input)]",
10800
10793
  open: "data-[state=open]:border-primary data-[state=open]:border"
@@ -10812,10 +10805,10 @@ var FILTER_SELECT_TOKENS = {
10812
10805
  base: "shrink-0 size-4 text-muted-foreground"
10813
10806
  },
10814
10807
  dropdown: {
10815
- base: "bg-[var(--filter-input)] flex flex-col gap-0 items-start p-2 rounded-[var(--input-radius)] shadow-sm border border-border min-w-[196px]"
10808
+ base: "bg-[var(--filter-input)] flex flex-col gap-0 items-start p-1 pb-2 rounded-[var(--input-radius)] shadow-sm border border-border min-w-[196px]"
10816
10809
  },
10817
10810
  listItem: {
10818
- base: "content-stretch flex gap-2 items-center p-1.5 relative rounded-[var(--rounded-sm)] w-full min-w-0 cursor-pointer outline-none hover:bg-[var(--hover)]"
10811
+ base: "content-stretch flex gap-2 items-center p-1.5 relative rounded-[var(--rounded-xl)] w-full min-w-0 cursor-pointer outline-none hover:bg-[var(--hover)]"
10819
10812
  },
10820
10813
  dragHandle: "shrink-0 size-4 text-foreground cursor-grab active:cursor-grabbing",
10821
10814
  itemLabel: "font-normal text-xs leading-4 relative shrink-0 text-foreground tracking-normal whitespace-nowrap",
@@ -10826,7 +10819,7 @@ var FILTER_SELECT_TOKENS = {
10826
10819
  },
10827
10820
  // Date preset button - Figma: default no bg, hover bg-[var(--hover)], selected bg-[var(--primary10)] text-primary
10828
10821
  datePreset: {
10829
- base: "w-full text-left px-3 py-2 rounded-lg text-xs font-medium leading-4 cursor-pointer transition-colors",
10822
+ base: "w-full text-left px-3 py-2 rounded-[var(--rounded-xl)] text-xs font-medium leading-4 cursor-pointer transition-colors",
10830
10823
  default: "text-secondary-foreground hover:bg-[var(--hover)]",
10831
10824
  selected: "bg-[var(--primary10)] text-primary"
10832
10825
  },
@@ -11091,6 +11084,7 @@ var FilterSelect = React35.forwardRef(
11091
11084
  selectedItems = [],
11092
11085
  items,
11093
11086
  draggable = false,
11087
+ showClearBtn = true,
11094
11088
  onSelectionChange,
11095
11089
  onOrderChange,
11096
11090
  selectedItemsMaxWidth = "25ch",
@@ -11493,7 +11487,7 @@ var FilterSelect = React35.forwardRef(
11493
11487
  autoFocus: true
11494
11488
  }
11495
11489
  ),
11496
- hasContentToClear && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ jsxs22(
11490
+ (showClearBtn || hasContentToClear) && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ jsxs22(
11497
11491
  "button",
11498
11492
  {
11499
11493
  type: "button",
@@ -11522,19 +11516,14 @@ var FilterSelect = React35.forwardRef(
11522
11516
  value: operand != null ? operand : "",
11523
11517
  onValueChange: onOperandChange,
11524
11518
  children: [
11525
- /* @__PURE__ */ jsx31(SelectTrigger, { className: "h-9 w-full bg-input shadow-sm", children: /* @__PURE__ */ jsx31(
11526
- SelectValue,
11527
- {
11528
- placeholder: operandPlaceholder,
11529
- style: { zIndex: "60" }
11530
- }
11531
- ) }),
11519
+ /* @__PURE__ */ jsx31(SelectTrigger, { size: "small", children: /* @__PURE__ */ jsx31(SelectValue, { placeholder: operandPlaceholder }) }),
11532
11520
  /* @__PURE__ */ jsx31(
11533
11521
  SelectContent,
11534
11522
  {
11535
- style: { zIndex: "60" },
11536
- className: "bg-[var(--filter-input)]",
11537
- children: operands.map((op) => /* @__PURE__ */ jsx31(SelectItem, { value: op.value, children: op.label }, op.value))
11523
+ items: operands.map((op) => ({
11524
+ value: op.value,
11525
+ label: op.label
11526
+ }))
11538
11527
  }
11539
11528
  )
11540
11529
  ]
@@ -11557,7 +11546,7 @@ var FilterSelect = React35.forwardRef(
11557
11546
  autoFocus: true
11558
11547
  }
11559
11548
  ),
11560
- hasContentToClear && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ jsxs22(
11549
+ (showClearBtn || hasContentToClear) && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ jsxs22(
11561
11550
  "button",
11562
11551
  {
11563
11552
  type: "button",
@@ -11610,7 +11599,7 @@ var FilterSelect = React35.forwardRef(
11610
11599
  preset.value
11611
11600
  );
11612
11601
  }) }),
11613
- hasContentToClear && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0", children: /* @__PURE__ */ jsxs22(
11602
+ (showClearBtn || hasContentToClear) && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0", children: /* @__PURE__ */ jsxs22(
11614
11603
  "button",
11615
11604
  {
11616
11605
  type: "button",
@@ -11767,7 +11756,7 @@ var FilterSelect = React35.forwardRef(
11767
11756
  })
11768
11757
  }
11769
11758
  ),
11770
- selectedItems.length > 0 && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ jsxs22(
11759
+ (showClearBtn || selectedItems.length > 0) && /* @__PURE__ */ jsx31("div", { className: "border-t border-border pt-1 mt-1 shrink-0 w-full", children: /* @__PURE__ */ jsxs22(
11771
11760
  "button",
11772
11761
  {
11773
11762
  type: "button",
package/dist/styles.css CHANGED
@@ -534,6 +534,9 @@
534
534
  .lego-land .h-px {
535
535
  height: 1px;
536
536
  }
537
+ .lego-land .max-h-12 {
538
+ max-height: calc(var(--spacing) * 12);
539
+ }
537
540
  .lego-land .max-h-\[80vh\] {
538
541
  max-height: 80vh;
539
542
  }
@@ -546,6 +549,9 @@
546
549
  .lego-land .min-h-0 {
547
550
  min-height: calc(var(--spacing) * 0);
548
551
  }
552
+ .lego-land .min-h-8 {
553
+ min-height: calc(var(--spacing) * 8);
554
+ }
549
555
  .lego-land .min-h-12 {
550
556
  min-height: calc(var(--spacing) * 12);
551
557
  }
@@ -618,9 +624,6 @@
618
624
  .lego-land .w-\[22px\] {
619
625
  width: 22px;
620
626
  }
621
- .lego-land .w-\[76px\] {
622
- width: 76px;
623
- }
624
627
  .lego-land .w-\[85vw\] {
625
628
  width: 85vw;
626
629
  }
@@ -666,6 +669,10 @@
666
669
  .lego-land .w-\[960px\] {
667
670
  width: 960px;
668
671
  }
672
+ .lego-land .w-\[max-content\] {
673
+ width: -moz-max-content;
674
+ width: max-content;
675
+ }
669
676
  .lego-land .w-\[min-content\] {
670
677
  width: -moz-min-content;
671
678
  width: min-content;
@@ -682,6 +689,9 @@
682
689
  .lego-land .max-w-\[85vw\] {
683
690
  max-width: 85vw;
684
691
  }
692
+ .lego-land .max-w-\[125px\] {
693
+ max-width: 125px;
694
+ }
685
695
  .lego-land .max-w-\[426px\] {
686
696
  max-width: 426px;
687
697
  }
@@ -715,6 +725,9 @@
715
725
  .lego-land .min-w-\[77px\] {
716
726
  min-width: 77px;
717
727
  }
728
+ .lego-land .min-w-\[80px\] {
729
+ min-width: 80px;
730
+ }
718
731
  .lego-land .min-w-\[196px\] {
719
732
  min-width: 196px;
720
733
  }
@@ -906,6 +919,9 @@
906
919
  .lego-land .rounded-\[var\(--rounded-2xl\)\] {
907
920
  border-radius: var(--rounded-2xl);
908
921
  }
922
+ .lego-land .rounded-\[var\(--rounded-lg\)\] {
923
+ border-radius: var(--rounded-lg);
924
+ }
909
925
  .lego-land .rounded-\[var\(--rounded-lg\,8px\)\] {
910
926
  border-radius: var(--rounded-lg,8px);
911
927
  }
@@ -918,6 +934,9 @@
918
934
  .lego-land .rounded-\[var\(--rounded-sm\,4px\)\] {
919
935
  border-radius: var(--rounded-sm,4px);
920
936
  }
937
+ .lego-land .rounded-\[var\(--rounded-xl\)\] {
938
+ border-radius: var(--rounded-xl);
939
+ }
921
940
  .lego-land .rounded-full {
922
941
  border-radius: calc(infinity * 1px);
923
942
  }
@@ -1081,6 +1100,9 @@
1081
1100
  .lego-land .bg-muted {
1082
1101
  background-color: hsl(var(--muted));
1083
1102
  }
1103
+ .lego-land .bg-muted-foreground {
1104
+ background-color: hsl(var(--muted-foreground));
1105
+ }
1084
1106
  .lego-land .bg-muted\/50 {
1085
1107
  background-color: hsl(var(--muted));
1086
1108
  @supports (color: color-mix(in lab, red, red)) {
@@ -1093,9 +1115,6 @@
1093
1115
  .lego-land .bg-primary {
1094
1116
  background-color: hsl(var(--primary));
1095
1117
  }
1096
- .lego-land .bg-primary-foreground {
1097
- background-color: hsl(var(--primary-foreground));
1098
- }
1099
1118
  .lego-land .bg-primary\/10 {
1100
1119
  background-color: hsl(var(--primary));
1101
1120
  @supports (color: color-mix(in lab, red, red)) {
@@ -1146,6 +1165,9 @@
1146
1165
  .lego-land .p-2 {
1147
1166
  padding: calc(var(--spacing) * 2);
1148
1167
  }
1168
+ .lego-land .p-4 {
1169
+ padding: calc(var(--spacing) * 4);
1170
+ }
1149
1171
  .lego-land .p-6 {
1150
1172
  padding: calc(var(--spacing) * 6);
1151
1173
  }
@@ -1248,8 +1270,8 @@
1248
1270
  .lego-land .pl-5 {
1249
1271
  padding-left: calc(var(--spacing) * 5);
1250
1272
  }
1251
- .lego-land .pl-16 {
1252
- padding-left: calc(var(--spacing) * 16);
1273
+ .lego-land .pl-12 {
1274
+ padding-left: calc(var(--spacing) * 12);
1253
1275
  }
1254
1276
  .lego-land .pl-\[var\(--input-padding-horizontal\,16px\)\] {
1255
1277
  padding-left: var(--input-padding-horizontal,16px);
@@ -1764,6 +1786,11 @@
1764
1786
  }
1765
1787
  }
1766
1788
  }
1789
+ .lego-land .focus\:border-primary {
1790
+ .lego-land &:focus {
1791
+ border-color: hsl(var(--primary));
1792
+ }
1793
+ }
1767
1794
  .lego-land .focus-visible\:border-primary {
1768
1795
  .lego-land &:focus-visible {
1769
1796
  border-color: hsl(var(--primary));
@@ -1855,12 +1882,6 @@
1855
1882
  opacity: 100%;
1856
1883
  }
1857
1884
  }
1858
- .lego-land .data-\[side\=bottom\]\:rounded-t-none {
1859
- .lego-land &[data-side="bottom"] {
1860
- border-top-left-radius: 0;
1861
- border-top-right-radius: 0;
1862
- }
1863
- }
1864
1885
  .lego-land .data-\[state\=checked\]\:translate-x-5 {
1865
1886
  .lego-land &[data-state="checked"] {
1866
1887
  --tw-translate-x: calc(var(--spacing) * 5);
@@ -1901,13 +1922,13 @@
1901
1922
  display: none;
1902
1923
  }
1903
1924
  }
1904
- .lego-land .data-\[state\=open\]\:rounded-b-none {
1925
+ .lego-land .data-\[state\=open\]\:border {
1905
1926
  .lego-land &[data-state="open"] {
1906
- border-bottom-right-radius: 0;
1907
- border-bottom-left-radius: 0;
1927
+ border-style: var(--tw-border-style);
1928
+ border-width: 1px;
1908
1929
  }
1909
1930
  }
1910
- .lego-land .data-\[state\=open\]\:border {
1931
+ .lego-land .data-\[state\=open\]\:border-1 {
1911
1932
  .lego-land &[data-state="open"] {
1912
1933
  border-style: var(--tw-border-style);
1913
1934
  border-width: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nurix/ui-component-library",
3
- "version": "1.1.3-stage.102",
3
+ "version": "1.1.3-stage.103",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",