@arcfusionz/arc-primitive-ui 0.3.2 → 0.3.4

package/dist/components/Combobox/Combobox.d.ts

@@ -55,6 +55,13 @@ interface ComboboxInputGroupProps extends Omit<ComponentPropsWithoutRef<typeof C
   clearLabel?: string;
   /** Accessible name for the folded chevron button — override with localized copy. */
   triggerLabel?: string;
+  /**
+   * Leading static badge before the input. Pass the existing `<Badge>`
+   * component to use its variants, appearances, sizes, icons, dots, and
+   * custom classes. Keep it non-interactive so clicking the adornment can
+   * continue to focus the input.
+   */
+  badge?: ReactNode;
   className?: string;
 }
 /**
@@ -107,6 +114,13 @@ interface ComboboxTriggerProps extends Omit<BaseTriggerProps, "className"> {
    * convenience prop.
    */
   anchorWidth?: CSSProperties["width"];
+  /**
+   * Leading static badge before the selected value. Pass the existing
+   * `<Badge>` component to use its variants, appearances, sizes, icons, dots,
+   * and custom classes. Keep it non-interactive: links and delete buttons
+   * cannot be nested inside the trigger button.
+   */
+  badge?: ReactNode;
   /** Replaces the up-down carets. Decorative — hidden from assistive technology. */
   icon?: ReactNode;
   className?: string;

package/dist/components/Combobox/Combobox.js

@@ -112,13 +112,17 @@ function comboboxInputGroupVariants({ size = "md", className } = {}) {
 * this frame. Give the input an accessible name: a native `<label htmlFor>`,
 * a composed `FieldLabel`, or `aria-label` on `ComboboxInput`.
 */
-const ComboboxInputGroup = forwardRef(({ size = "md", showTrigger = true, showClear = false, clearLabel = "Clear selection", triggerLabel = "Show options", className, children, ...rest }, ref) => /* @__PURE__ */ jsx(ComboboxInputGroupContext.Provider, {
+const ComboboxInputGroup = forwardRef(({ size = "md", showTrigger = true, showClear = false, clearLabel = "Clear selection", triggerLabel = "Show options", badge, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(ComboboxInputGroupContext.Provider, {
 	value: size,
 	children: /* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		ref,
 		className: cn(comboboxInputGroupVariants({ size }), className),
 		...rest,
 		children: [
+			badge != null && /* @__PURE__ */ jsx("span", {
+				className: "flex shrink-0",
+				children: badge
+			}),
 			children,
 			showClear && /* @__PURE__ */ jsx(ComboboxClear, {
 				"aria-label": clearLabel,
@@ -186,7 +190,7 @@ function mergeAnchorWidth(anchorWidth, style) {
 * `ComboboxLabel` (or a composed `FieldLabel`); without one, pass
 * `aria-label`.
 */
-const ComboboxTrigger = forwardRef(({ variant = "outline", size = "md", fullWidth = false, anchorWidth, icon, style, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Combobox.Trigger, {
+const ComboboxTrigger = forwardRef(({ variant = "outline", size = "md", fullWidth = false, anchorWidth, badge, icon, style, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Combobox.Trigger, {
 	ref,
 	className: cn("group/combobox-trigger", selectTriggerVariants({
 		variant,
@@ -195,7 +199,16 @@ const ComboboxTrigger = forwardRef(({ variant = "outline", size = "md", fullWidt
 	}), className),
 	style: mergeAnchorWidth(anchorWidth, style),
 	...rest,
-	children: [/* @__PURE__ */ jsx("span", {
+	children: [badge != null ? /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0",
+			children: badge
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate text-primary group-data-placeholder/combobox-trigger:text-muted-foreground",
+			children
+		})]
+	}) : /* @__PURE__ */ jsx("span", {
 		className: "min-w-0 truncate text-primary group-data-placeholder/combobox-trigger:text-muted-foreground",
 		children
 	}), /* @__PURE__ */ jsx(Combobox.Icon, {

package/dist/components/Select/Select.d.ts

@@ -51,6 +51,13 @@ interface SelectTriggerProps extends Omit<BaseTriggerProps, "className"> {
    * A consumer `style.width` can override this convenience prop.
    */
   anchorWidth?: CSSProperties["width"];
+  /**
+   * Leading static badge before the selected value. Pass the existing
+   * `<Badge>` component to use its variants, appearances, sizes, icons, dots,
+   * and custom classes. Keep it non-interactive: links and delete buttons
+   * cannot be nested inside the trigger button.
+   */
+  badge?: ReactNode;
   /** Replaces the dropdown chevron. Decorative — hidden from assistive technology. */
   icon?: ReactNode;
   className?: string;

package/dist/components/Select/Select.js

@@ -99,7 +99,7 @@ function mergeAnchorWidth(anchorWidth, style) {
 * `SelectLabel` (or a composed `Field.Label`); without one, pass
 * `aria-label`.
 */
-const SelectTrigger = forwardRef(({ variant = "outline", size = "md", fullWidth = false, anchorWidth, icon, style, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Select.Trigger, {
+const SelectTrigger = forwardRef(({ variant = "outline", size = "md", fullWidth = false, anchorWidth, badge, icon, style, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Select.Trigger, {
 	ref,
 	className: cn(selectTriggerVariants({
 		variant,
@@ -108,7 +108,13 @@ const SelectTrigger = forwardRef(({ variant = "outline", size = "md", fullWidth
 	}), className),
 	style: mergeAnchorWidth(anchorWidth, style),
 	...rest,
-	children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+	children: [badge != null ? /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0",
+			children: badge
+		}), children]
+	}) : children, /* @__PURE__ */ jsx(Select.Icon, {
 		"aria-hidden": "true",
 		className: "flex text-muted-foreground",
 		children: icon ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})

package/dist/components/Table/Table.d.ts

@@ -16,6 +16,8 @@ interface TableRenderState extends Record<string, unknown> {
   hoverable: boolean;
   /** Whether column headers stay pinned inside a scrolling container. */
   stickyHeader: boolean;
+  /** Whether the first column stays pinned while the container scrolls horizontally. */
+  stickyFirstColumn: boolean;
   /** Whether adjacent cells are visually separated. */
   showColumnBorders: boolean;
 }
@@ -51,6 +53,8 @@ interface TableProps extends Omit<ComponentPropsWithoutRef<"table">, "className"
   hoverable?: boolean;
   /** Pin column headers to the top of the nearest scrolling `TableContainer`; give the container a max height for vertical scrolling. */
   stickyHeader?: boolean;
+  /** Pin the first column to the left edge of the nearest scrolling `TableContainer` so each row keeps its identifying cell in view. Only visible once the table is wider than the container — give the table a minimum width or enough columns to overflow. Put the row's label in the first column; a checkbox or drag handle should not be what stays pinned. */
+  stickyFirstColumn?: boolean;
   /** Draw semantic-border separators between adjacent columns. */
   showColumnBorders?: boolean;
   /** Replace the rendered `table` or inspect the visual state in a render callback. Preserve native table semantics. */

package/dist/components/Table/Table.js

@@ -21,10 +21,11 @@ const tableLayoutClasses = {
 const tableHeaderClasses = "bg-surface [&_tr]:border-b [&_tr]:border-border [&_th]:border-b [&_th]:border-border";
 const tableBodyClasses = "[&_tr:last-child]:border-b-0";
 const tableFooterClasses = "border-t border-border bg-surface font-sans font-semibold text-foreground [&>tr]:border-b-0";
-const tableRowClasses = "border-b border-border transition-colors duration-150 data-selected:bg-secondary data-selected:hover:bg-secondary";
-const tableHeadClasses = "whitespace-nowrap text-left align-middle font-sans text-xs font-semibold uppercase tracking-widest text-muted-foreground";
+const tableRowClasses = "border-b border-border transition-colors duration-150 data-selected:bg-primary-50 data-selected:hover:bg-primary-100";
+const tableHeadClasses = "whitespace-nowrap text-left align-middle font-sans text-xs font-semibold capitalize text-muted-foreground";
 const tableCellClasses = "align-middle font-sans text-sm text-foreground";
 const tableCaptionClasses = "px-4 py-3 text-left font-sans text-xs text-muted-foreground";
+const stickyFirstColumnClasses = "[&_thead_tr]:bg-surface [&_tfoot_tr]:bg-surface [&_tbody_tr]:bg-background [&_tr>*:first-child]:sticky [&_tr>*:first-child]:left-0 [&_tr>*:first-child]:bg-inherit [&_tr>*:first-child]:shadow-[inset_-1px_0_0_var(--color-border)] [&_tbody_tr>*:first-child]:z-10 [&_tfoot_tr>*:first-child]:z-10 [&_thead_tr>*:first-child]:z-20";
 const captionSideClasses = {
 	top: "caption-top border-b border-border",
 	bottom: "caption-bottom border-t border-border"
@@ -42,7 +43,7 @@ const TableContainer = forwardRef(({ variant = "elevated", render, className, ..
 	});
 });
 TableContainer.displayName = "TableContainer";
-const Table = forwardRef(({ size = "md", layout = "auto", striped = false, hoverable = true, stickyHeader = false, showColumnBorders = false, render, className, ...rest }, ref) => {
+const Table = forwardRef(({ size = "md", layout = "auto", striped = false, hoverable = true, stickyHeader = false, stickyFirstColumn = false, showColumnBorders = false, render, className, ...rest }, ref) => {
 	return useRender({
 		defaultTagName: "table",
 		render,
@@ -53,11 +54,12 @@ const Table = forwardRef(({ size = "md", layout = "auto", striped = false, hover
 			striped,
 			hoverable,
 			stickyHeader,
+			stickyFirstColumn,
 			showColumnBorders
 		},
 		props: {
 			...rest,
-			className: cn(tableClasses, tableSizeClasses[size], tableLayoutClasses[layout], striped && "[&_tbody_tr:nth-child(even)]:bg-surface", hoverable && "[&_tbody_tr]:hover:bg-muted", stickyHeader && "[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-surface", showColumnBorders && "[&_tr>*+*]:border-l [&_tr>*+*]:border-border", className)
+			className: cn(tableClasses, tableSizeClasses[size], tableLayoutClasses[layout], striped && "[&_tbody_tr:nth-child(even)]:bg-surface", hoverable && "[&_tbody_tr]:hover:bg-slate-50", stickyHeader && "[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-surface", stickyFirstColumn && stickyFirstColumnClasses, showColumnBorders && "[&_tr>*+*]:border-l [&_tr>*+*]:border-border", className)
 		}
 	});
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcfusionz/arc-primitive-ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "ArcFusion primitive UI components",
   "license": "MIT",
   "type": "module",