@crisp-ui-kit/crisp 0.1.0 → 0.2.0

package/dist/recordstable.css

@@ -177,16 +177,7 @@
     & .recordstable-sum-btn[data-empty] { opacity: 0; justify-content: flex-start; }
     & .recordstable-sum-btn[data-empty]:hover { opacity: 1; }
 
-    /* bulk action bar — Attio's white floating pill */
-    & .recordstable-bulkbar { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-0-5); height: 44px; padding: 0 var(--space-1) 0 var(--space-1-5); border-radius: 14px; background: var(--bg-surface); box-shadow: 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16); color: var(--fg-primary); z-index: 10; opacity: 1; transition: opacity .16s ease, transform .16s ease; @starting-style { opacity: 0; transform: translateX(-50%) translateY(10px); } }
-    & .recordstable-bulk-count { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 4%, transparent); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-muted); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .recordstable-bulk-count:hover { background: color-mix(in srgb, var(--fg-primary) 8%, transparent); color: var(--fg-primary); }
-    & .recordstable-bulk-count svg { flex-shrink: 0; }
-    & .recordstable-bulk-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .recordstable-bulk-btn:hover { background: var(--bg-raised); }
-    & .recordstable-bulk-btn--danger { color: var(--bg-danger); }
-    & .recordstable-bulk-btn--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
-    & .recordstable-bulk-btn svg { flex-shrink: 0; }
+    /* bulk action bar lives in its own component now — see components/bulkbar */
     & .recordstable-bulk-sep { width: 1px; height: 20px; margin: 0 var(--space-0-5); background: var(--border-subtle); }
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer; }
     & .recordstable-bulk-close:hover { background: var(--bg-raised); color: var(--fg-primary); }

package/dist/styles.css

@@ -679,6 +679,20 @@
   
 }
 
+.bulkbar {
+  position: absolute; left: 0; right: 0; bottom: var(--space-4); display: flex; justify-content: center; pointer-events: none; z-index: 10;
+    & .bulkbar-bar { pointer-events: auto; display: flex; align-items: center; gap: var(--space-0-5); height: 44px; padding: 0 var(--space-1) 0 var(--space-1-5); border-radius: 14px; background: var(--bg-surface); box-shadow: 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16); color: var(--fg-primary); transition: opacity .16s ease, transform .16s ease; }
+    & .bulkbar-bar { @starting-style { opacity: 0; transform: translateY(10px); } }
+    & .bulkbar-count { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 4%, transparent); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-muted); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-count:hover { background: color-mix(in srgb, var(--fg-primary) 8%, transparent); color: var(--fg-primary); }
+    & .bulkbar-count svg { flex-shrink: 0; }
+    & .bulkbar-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
+    & .bulkbar-btn:hover { background: var(--bg-raised); }
+    & .bulkbar-btn--danger { color: var(--bg-danger); }
+    & .bulkbar-btn--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
+    & .bulkbar-btn svg { flex-shrink: 0; }
+}
+
 .badge {
   display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); font-family: var(--font-sans); font-weight: var(--weight-medium); letter-spacing: -0.1px; white-space: nowrap;
     & .badge-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--radius-full); background: currentColor; }
@@ -1249,16 +1263,7 @@
     & .recordstable-sum-btn[data-empty] { opacity: 0; justify-content: flex-start; }
     & .recordstable-sum-btn[data-empty]:hover { opacity: 1; }
 
-    /* bulk action bar — Attio's white floating pill */
-    & .recordstable-bulkbar { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-0-5); height: 44px; padding: 0 var(--space-1) 0 var(--space-1-5); border-radius: 14px; background: var(--bg-surface); box-shadow: 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16); color: var(--fg-primary); z-index: 10; opacity: 1; transition: opacity .16s ease, transform .16s ease; @starting-style { opacity: 0; transform: translateX(-50%) translateY(10px); } }
-    & .recordstable-bulk-count { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fg-primary) 4%, transparent); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-muted); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .recordstable-bulk-count:hover { background: color-mix(in srgb, var(--fg-primary) 8%, transparent); color: var(--fg-primary); }
-    & .recordstable-bulk-count svg { flex-shrink: 0; }
-    & .recordstable-bulk-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
-    & .recordstable-bulk-btn:hover { background: var(--bg-raised); }
-    & .recordstable-bulk-btn--danger { color: var(--bg-danger); }
-    & .recordstable-bulk-btn--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
-    & .recordstable-bulk-btn svg { flex-shrink: 0; }
+    /* bulk action bar lives in its own component now — see components/bulkbar */
     & .recordstable-bulk-sep { width: 1px; height: 20px; margin: 0 var(--space-0-5); background: var(--border-subtle); }
     & .recordstable-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); cursor: pointer; }
     & .recordstable-bulk-close:hover { background: var(--bg-raised); color: var(--fg-primary); }

package/dist/types/components/bulkbar/bulkbar.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export type BulkBarProps = {
+    /** Selected count — renders the leading "N selected" pill when provided. */
+    count?: number;
+    /** Called when the count pill (its ✕) is pressed — clear the selection. */
+    onClear?: () => void;
+    /** Word after the count in the pill (default "selected"). */
+    countLabel?: string;
+    /** Action buttons — usually `<BulkBarButton>`s and a `<Menu>` overflow. */
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * A floating bulk-action bar. Rises from the bottom-centre of its nearest
+ * positioned ancestor when a selection is active; render it conditionally
+ * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
+ */
+export declare function BulkBar({ count, onClear, countLabel, children, className, }: BulkBarProps): React.JSX.Element;
+export declare namespace BulkBar {
+    var displayName: string;
+}
+export type BulkBarButtonProps = React.ComponentPropsWithoutRef<"button"> & {
+    icon?: React.ReactNode;
+    /** Danger styling (e.g. a destructive "Delete"). */
+    danger?: boolean;
+};
+/** A styled action button for use inside a `<BulkBar>` (or as a `<Menu>` trigger). */
+export declare const BulkBarButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    icon?: React.ReactNode;
+    /** Danger styling (e.g. a destructive "Delete"). */
+    danger?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/bulkbar/bulkbar.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const bulkbarRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/components/bulkbar/index.d.ts

@@ -0,0 +1,2 @@
+export { BulkBar, BulkBarButton, type BulkBarButtonProps, type BulkBarProps, } from "./bulkbar";
+export { bulkbarRecipe } from "./bulkbar.recipe";

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/avatargroup";
 export * from "./components/badge";
 export * from "./components/barchart";
 export * from "./components/breadcrumb";
+export * from "./components/bulkbar";
 export * from "./components/button";
 export * from "./components/callout";
 export * from "./components/card";

package/dist/types/product/recordstable/recordstable.d.ts

@@ -42,6 +42,8 @@ export type RecordsTableProps = {
     onSelectionChange?: (ids: string[]) => void;
     /** Show the toolbar's "New" button (hide it when the page provides its own). */
     showNew?: boolean;
+    /** Allow adding columns via the trailing "+" header button (default true). */
+    allowAddColumn?: boolean;
     /** Called when a row's open (↗) button is pressed — opens a record panel. */
     onOpenRecord?: (row: Row) => void;
     /** Called when a row's entity name is clicked — navigate to its full record page. */
@@ -57,7 +59,7 @@ export declare function tagTone(t: string): string;
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
  */
-export declare function RecordsTable({ columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, onOpenRecord, onOpenRecordPage, className, }: RecordsTableProps): React.JSX.Element;
+export declare function RecordsTable({ columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, className, }: RecordsTableProps): React.JSX.Element;
 export declare const defaultColumns: Column[];
 export declare const defaultRows: Row[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",