@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Combobox.js

@@ -0,0 +1,179 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+//#region src/components/Combobox.tsx
+function ComboboxInput({ className = "", ref, ...props }) {
+	const classes = ["combobox__input", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		ref,
+		"data-slot": "combobox-input",
+		className: classes,
+		...props
+	});
+}
+function ComboboxTrigger({ className = "", ref, ...props }) {
+	const classes = ["combobox__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+		ref,
+		"data-slot": "combobox-trigger",
+		className: classes,
+		...props
+	});
+}
+function Clear({ className = "", ref, ...props }) {
+	const classes = ["combobox__clear", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		ref,
+		"data-slot": "combobox-clear",
+		className: classes,
+		...props
+	});
+}
+function ComboboxPositioner({ className = "", ref, ...props }) {
+	const classes = ["combobox__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		ref,
+		"data-slot": "combobox-positioner",
+		className: classes,
+		...props
+	});
+}
+function ComboboxPopup({ className = "", tabIndex = 0, ref, ...props }) {
+	const classes = ["combobox__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Popup, {
+		ref,
+		"data-slot": "combobox-content",
+		tabIndex,
+		className: classes,
+		...props
+	});
+}
+function ComboboxList({ className = "", ref, ...props }) {
+	const classes = ["combobox__list", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		ref,
+		"data-slot": "combobox-list",
+		className: classes,
+		...props
+	});
+}
+function ComboboxItem({ className = "", ref, ...props }) {
+	const classes = ["combobox__item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Item, {
+		ref,
+		"data-slot": "combobox-item",
+		className: classes,
+		...props
+	});
+}
+function ItemIndicator({ className = "", ref, ...props }) {
+	const classes = ["combobox__item-indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+		ref,
+		"data-slot": "combobox-item-indicator",
+		className: classes,
+		...props
+	});
+}
+function ComboboxEmpty({ className = "", ref, ...props }) {
+	const classes = ["combobox__empty", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		ref,
+		"data-slot": "combobox-empty",
+		className: classes,
+		...props
+	});
+}
+function ComboboxGroup({ className = "", ref, ...props }) {
+	const classes = ["combobox__group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		ref,
+		"data-slot": "combobox-group",
+		className: classes,
+		...props
+	});
+}
+function ComboboxLabel({ className = "", ref, ...props }) {
+	const classes = ["combobox__group-label", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		ref,
+		"data-slot": "combobox-group-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* An input combined with a filterable list of predefined items.
+* Supports single and multiple selection, async search, and grouping.
+*
+* @example
+* ```tsx
+* // Basic single select
+* const fruits = [
+*   { label: 'Apple', value: 'apple' },
+*   { label: 'Banana', value: 'banana' },
+*   { label: 'Orange', value: 'orange' },
+* ];
+*
+* <Combobox.Root items={fruits}>
+*   <Combobox.Input placeholder="Select a fruit" />
+*   <Combobox.Trigger>
+*     <ChevronDownIcon />
+*   </Combobox.Trigger>
+*   <Combobox.Portal>
+*     <Combobox.Positioner>
+*       <Combobox.Popup>
+*         <Combobox.List>
+*           {(item) => (
+*             <Combobox.Item value={item}>
+*               <Combobox.ItemIndicator>
+*                 <CheckIcon />
+*               </Combobox.ItemIndicator>
+*               {item.label}
+*             </Combobox.Item>
+*           )}
+*         </Combobox.List>
+*         <Combobox.Empty>No results found</Combobox.Empty>
+*       </Combobox.Popup>
+*     </Combobox.Positioner>
+*   </Combobox.Portal>
+* </Combobox.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/combobox | Base UI Combobox}
+*/
+const ComboboxContent = ComboboxPopup;
+const ComboboxValue = Combobox$1.Value;
+const ComboboxChips = Combobox$1.Chips;
+const ComboboxChip = Combobox$1.Chip;
+const ComboboxChipsInput = ComboboxInput;
+const ComboboxCollection = Combobox$1.Collection;
+const ComboboxSeparator = Combobox$1.Separator;
+function useComboboxAnchor() {
+	return React.useRef(null);
+}
+const Combobox = Object.assign(Combobox$1.Root, {
+	Root: Combobox$1.Root,
+	Input: ComboboxInput,
+	Trigger: ComboboxTrigger,
+	Clear,
+	Portal: Combobox$1.Portal,
+	Positioner: ComboboxPositioner,
+	Popup: ComboboxPopup,
+	Content: ComboboxContent,
+	List: ComboboxList,
+	Item: ComboboxItem,
+	ItemIndicator,
+	Empty: ComboboxEmpty,
+	Group: ComboboxGroup,
+	GroupLabel: ComboboxLabel,
+	Label: ComboboxLabel,
+	Value: ComboboxValue,
+	Chips: ComboboxChips,
+	Chip: ComboboxChip,
+	ChipsInput: ComboboxChipsInput,
+	Collection: ComboboxCollection,
+	Separator: ComboboxSeparator
+});
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPositioner, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/components/Commit.d.ts

@@ -0,0 +1,265 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/Commit.d.ts
+type CommitFileStatusValue = "added" | "modified" | "deleted" | "renamed";
+interface CommitProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * A collapsible git commit card. Compose CommitHeader with metadata
+ * (CommitAuthor, CommitInfo, etc.) and CommitContent with a CommitFiles list.
+ *
+ * Built internally for git and agent review surfaces. Use it for commit
+ * summaries with expandable file details. Do not use it as a generic
+ * accordion; use Collapsible or Accordion directly.
+ *
+ * Styling consumes Sigvelo surface, border, spacing, radius, badge, and focus
+ * tokens. Add shared metadata/file affordances here instead of forking commit
+ * cards in apps.
+ *
+ * @example
+ * ```tsx
+ * <Commit defaultOpen>
+ *   <CommitHeader>
+ *     <CommitAuthor>
+ *       <CommitAuthorAvatar initials="AN" />
+ *       <CommitInfo>
+ *         <CommitMessage>Improve Storybook docs</CommitMessage>
+ *         <CommitMetadata>
+ *           <CommitHash hash="abc1234" />
+ *         </CommitMetadata>
+ *       </CommitInfo>
+ *     </CommitAuthor>
+ *   </CommitHeader>
+ *   <CommitContent>
+ *     <CommitFiles>
+ *       <CommitFile status="modified">
+ *         <CommitFilePath>packages/react-components/src/Button.tsx</CommitFilePath>
+ *       </CommitFile>
+ *     </CommitFiles>
+ *   </CommitContent>
+ * </Commit>
+ * ```
+ */
+declare function Commit({
+  className,
+  ref,
+  ...props
+}: CommitProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CommitHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+  className?: string;
+}
+declare function CommitHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitHeaderProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface CommitAuthorProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function CommitAuthor({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitAuthorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CommitAuthorAvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  initials: string;
+  src?: string;
+  alt?: string;
+}
+declare function CommitAuthorAvatar({
+  className,
+  initials,
+  src,
+  alt,
+  ref,
+  ...props
+}: CommitAuthorAvatarProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface CommitInfoProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CommitMessageProps extends React.HTMLAttributes<HTMLSpanElement> {}
+interface CommitMetadataProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CommitSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function CommitInfo({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitInfoProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CommitMessage({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitMessageProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function CommitMetadata({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitMetadataProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function CommitSeparator({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitSeparatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface CommitHashProps extends React.HTMLAttributes<HTMLSpanElement> {
+  hash?: string;
+}
+declare function CommitHash({
+  className,
+  children,
+  hash,
+  ref,
+  ...props
+}: CommitHashProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface CommitCopyButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick"> {
+  hash: string;
+  label?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function CommitCopyButton({
+  className,
+  hash,
+  label,
+  onClick,
+  ...props
+}: CommitCopyButtonProps): React.JSX.Element;
+interface CommitTimestampProps extends React.HTMLAttributes<HTMLTimeElement> {
+  date: Date;
+}
+declare function CommitTimestamp({
+  className,
+  children,
+  date,
+  ref,
+  ...props
+}: CommitTimestampProps & {
+  ref?: React.Ref<HTMLTimeElement>;
+}): React.JSX.Element;
+interface CommitActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function CommitActions({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CommitContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+declare function CommitContent({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface CommitFilesProps extends React.HTMLAttributes<HTMLUListElement> {}
+declare function CommitFiles({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitFilesProps & {
+  ref?: React.Ref<HTMLUListElement>;
+}): React.JSX.Element;
+interface CommitFileProps extends React.LiHTMLAttributes<HTMLLIElement> {}
+declare function CommitFile({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitFileProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+interface CommitFileStatusProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+  status: CommitFileStatusValue;
+}
+declare function CommitFileStatus({
+  className,
+  status,
+  ref,
+  ...props
+}: CommitFileStatusProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface CommitFileIconProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function CommitFileIcon({
+  className,
+  ref,
+  ...props
+}: CommitFileIconProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface CommitFilePathProps extends React.HTMLAttributes<HTMLSpanElement> {}
+interface CommitFileInfoProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function CommitFilePath({
+  className,
+  children,
+  ref,
+  ...props
+}: CommitFilePathProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare const CommitFileInfo: typeof CommitFilePath;
+interface CommitFileAdditionsProps extends React.HTMLAttributes<HTMLSpanElement> {
+  count: number;
+}
+declare function CommitFileAdditions({
+  className,
+  count,
+  ref,
+  ...props
+}: CommitFileAdditionsProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element | null;
+interface CommitFileDeletionsProps extends React.HTMLAttributes<HTMLSpanElement> {
+  count: number;
+}
+interface CommitFileChangesProps extends React.HTMLAttributes<HTMLSpanElement> {
+  additions?: number;
+  deletions?: number;
+}
+declare function CommitFileDeletions({
+  className,
+  count,
+  ref,
+  ...props
+}: CommitFileDeletionsProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element | null;
+declare function CommitFileChanges({
+  className,
+  additions,
+  deletions,
+  ref,
+  ...props
+}: CommitFileChangesProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Commit, CommitActions, CommitActionsProps, CommitAuthor, CommitAuthorAvatar, CommitAuthorAvatarProps, CommitAuthorProps, CommitContent, CommitContentProps, CommitCopyButton, CommitCopyButtonProps, CommitFile, CommitFileAdditions, CommitFileAdditionsProps, CommitFileChanges, CommitFileChangesProps, CommitFileDeletions, CommitFileDeletionsProps, CommitFileIcon, CommitFileIconProps, CommitFileInfo, CommitFileInfoProps, CommitFilePath, CommitFilePathProps, CommitFileProps, CommitFileStatus, CommitFileStatusProps, CommitFileStatusValue, CommitFiles, CommitFilesProps, CommitHash, CommitHashProps, CommitHeader, CommitHeaderProps, CommitInfo, CommitInfoProps, CommitMessage, CommitMessageProps, CommitMetadata, CommitMetadataProps, CommitProps, CommitSeparator, CommitSeparatorProps, CommitTimestamp, CommitTimestampProps };