@contractspec/lib.design-system 1.46.2 → 1.47.0

package/dist/components/molecules/FiltersToolbar.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime68 from "react/jsx-runtime";
+import * as react_jsx_runtime69 from "react/jsx-runtime";
 
 //#region src/components/molecules/FiltersToolbar.d.ts
 interface ActiveFilterChip {
@@ -30,7 +30,7 @@ declare function FiltersToolbar({
   debounceMs,
   activeChips,
   onClearAll
-}: FiltersToolbarProps): react_jsx_runtime68.JSX.Element;
+}: FiltersToolbarProps): react_jsx_runtime69.JSX.Element;
 //#endregion
 export { FiltersToolbar };
 //# sourceMappingURL=FiltersToolbar.d.ts.map

package/dist/components/molecules/FiltersToolbar.js

@@ -1,6 +1,5 @@
 import { Button } from "../atoms/Button.js";
 import { Input } from "../atoms/Input.js";
-import "../../index.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";

package/dist/components/molecules/FiltersToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FiltersToolbar.js","names":[],"sources":["../../../src/components/molecules/FiltersToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { Button, Input } from '../../index';\nimport { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';\n\nexport interface ActiveFilterChip {\n  key: string;\n  label: React.ReactNode;\n  onRemove?: () => void;\n}\n\nexport interface FiltersToolbarProps {\n  className?: string;\n  children?: React.ReactNode;\n  right?: React.ReactNode;\n  searchPlaceholder?: string;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  onSearchSubmit?: () => void;\n  debounceMs?: number;\n  activeChips?: ActiveFilterChip[];\n  onClearAll?: () => void;\n}\n\nexport function FiltersToolbar({\n  className,\n  children,\n  right,\n  searchPlaceholder,\n  searchValue,\n  onSearchChange,\n  onSearchSubmit,\n  debounceMs = 250,\n  activeChips = [],\n  onClearAll,\n}: FiltersToolbarProps) {\n  const [q, setQ] = React.useState<string>(searchValue ?? '');\n\n  React.useEffect(() => {\n    setQ(searchValue ?? '');\n  }, [searchValue]);\n\n  React.useEffect(() => {\n    if (!onSearchChange) return;\n    const id = setTimeout(() => onSearchChange(q), debounceMs);\n    return () => clearTimeout(id);\n  }, [q, debounceMs, onSearchChange]);\n\n  return (\n    <div className={cn('space-y-2', className)}>\n      <div className=\"flex flex-col items-stretch gap-2 md:flex-row md:items-center md:justify-between\">\n        <div className=\"flex flex-1 items-center gap-2\">\n          {onSearchChange ? (\n            <div className=\"flex flex-1 items-center gap-2\">\n              <Input\n                value={q}\n                onChange={(e) => setQ(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') onSearchSubmit?.();\n                }}\n                placeholder={searchPlaceholder}\n                keyboard={{ kind: 'search' }}\n              />\n              <Button\n                variant=\"outline\"\n                onPress={() => onSearchSubmit?.()}\n                className=\"shrink-0\"\n              >\n                Rechercher\n              </Button>\n            </div>\n          ) : null}\n          {children}\n        </div>\n        {right}\n      </div>\n\n      {(activeChips.length > 0 || onClearAll) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {activeChips.map((c) => (\n            <Badge\n              key={c.key}\n              variant=\"secondary\"\n              className=\"inline-flex items-center gap-2\"\n            >\n              <span>{c.label}</span>\n              {c.onRemove && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Supprimer le filtre\"\n                  onClick={c.onRemove}\n                  className=\"hover:bg-muted rounded-xs px-1 text-base\"\n                >\n                  ×\n                </button>\n              )}\n            </Badge>\n          ))}\n          {onClearAll && (\n            <Button size=\"sm\" variant=\"ghost\" onPress={onClearAll}>\n              Effacer les filtres\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAwBA,SAAgB,eAAe,EAC7B,WACA,UACA,OACA,mBACA,aACA,gBACA,gBACA,aAAa,KACb,cAAc,EAAE,EAChB,cACsB;CACtB,MAAM,CAAC,GAAG,QAAQ,MAAM,SAAiB,eAAe,GAAG;AAE3D,OAAM,gBAAgB;AACpB,OAAK,eAAe,GAAG;IACtB,CAAC,YAAY,CAAC;AAEjB,OAAM,gBAAgB;AACpB,MAAI,CAAC,eAAgB;EACrB,MAAM,KAAK,iBAAiB,eAAe,EAAE,EAAE,WAAW;AAC1D,eAAa,aAAa,GAAG;IAC5B;EAAC;EAAG;EAAY;EAAe,CAAC;AAEnC,QACE,qBAAC;EAAI,WAAW,GAAG,aAAa,UAAU;aACxC,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;eACZ,iBACC,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,OAAO;MACP,WAAW,MAAM,KAAK,EAAE,OAAO,MAAM;MACrC,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,QAAS,mBAAkB;;MAE3C,aAAa;MACb,UAAU,EAAE,MAAM,UAAU;OAC5B,EACF,oBAAC;MACC,SAAQ;MACR,eAAe,kBAAkB;MACjC,WAAU;gBACX;OAEQ;MACL,GACJ,MACH;KACG,EACL;IACG,GAEJ,YAAY,SAAS,KAAK,eAC1B,qBAAC;GAAI,WAAU;cACZ,YAAY,KAAK,MAChB,qBAAC;IAEC,SAAQ;IACR,WAAU;eAEV,oBAAC,oBAAM,EAAE,QAAa,EACrB,EAAE,YACD,oBAAC;KACC,MAAK;KACL,cAAW;KACX,SAAS,EAAE;KACX,WAAU;eACX;MAEQ;MAbN,EAAE,IAeD,CACR,EACD,cACC,oBAAC;IAAO,MAAK;IAAK,SAAQ;IAAQ,SAAS;cAAY;KAE9C;IAEP;GAEJ"}
+{"version":3,"file":"FiltersToolbar.js","names":[],"sources":["../../../src/components/molecules/FiltersToolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { Button, Input } from '../../index';\nimport { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';\n\nexport interface ActiveFilterChip {\n  key: string;\n  label: React.ReactNode;\n  onRemove?: () => void;\n}\n\nexport interface FiltersToolbarProps {\n  className?: string;\n  children?: React.ReactNode;\n  right?: React.ReactNode;\n  searchPlaceholder?: string;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  onSearchSubmit?: () => void;\n  debounceMs?: number;\n  activeChips?: ActiveFilterChip[];\n  onClearAll?: () => void;\n}\n\nexport function FiltersToolbar({\n  className,\n  children,\n  right,\n  searchPlaceholder,\n  searchValue,\n  onSearchChange,\n  onSearchSubmit,\n  debounceMs = 250,\n  activeChips = [],\n  onClearAll,\n}: FiltersToolbarProps) {\n  const [q, setQ] = React.useState<string>(searchValue ?? '');\n\n  React.useEffect(() => {\n    setQ(searchValue ?? '');\n  }, [searchValue]);\n\n  React.useEffect(() => {\n    if (!onSearchChange) return;\n    const id = setTimeout(() => onSearchChange(q), debounceMs);\n    return () => clearTimeout(id);\n  }, [q, debounceMs, onSearchChange]);\n\n  return (\n    <div className={cn('space-y-2', className)}>\n      <div className=\"flex flex-col items-stretch gap-2 md:flex-row md:items-center md:justify-between\">\n        <div className=\"flex flex-1 items-center gap-2\">\n          {onSearchChange ? (\n            <div className=\"flex flex-1 items-center gap-2\">\n              <Input\n                value={q}\n                onChange={(e) => setQ(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') onSearchSubmit?.();\n                }}\n                placeholder={searchPlaceholder}\n                keyboard={{ kind: 'search' }}\n              />\n              <Button\n                variant=\"outline\"\n                onPress={() => onSearchSubmit?.()}\n                className=\"shrink-0\"\n              >\n                Rechercher\n              </Button>\n            </div>\n          ) : null}\n          {children}\n        </div>\n        {right}\n      </div>\n\n      {(activeChips.length > 0 || onClearAll) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {activeChips.map((c) => (\n            <Badge\n              key={c.key}\n              variant=\"secondary\"\n              className=\"inline-flex items-center gap-2\"\n            >\n              <span>{c.label}</span>\n              {c.onRemove && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Supprimer le filtre\"\n                  onClick={c.onRemove}\n                  className=\"hover:bg-muted rounded-xs px-1 text-base\"\n                >\n                  ×\n                </button>\n              )}\n            </Badge>\n          ))}\n          {onClearAll && (\n            <Button size=\"sm\" variant=\"ghost\" onPress={onClearAll}>\n              Effacer les filtres\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,eAAe,EAC7B,WACA,UACA,OACA,mBACA,aACA,gBACA,gBACA,aAAa,KACb,cAAc,EAAE,EAChB,cACsB;CACtB,MAAM,CAAC,GAAG,QAAQ,MAAM,SAAiB,eAAe,GAAG;AAE3D,OAAM,gBAAgB;AACpB,OAAK,eAAe,GAAG;IACtB,CAAC,YAAY,CAAC;AAEjB,OAAM,gBAAgB;AACpB,MAAI,CAAC,eAAgB;EACrB,MAAM,KAAK,iBAAiB,eAAe,EAAE,EAAE,WAAW;AAC1D,eAAa,aAAa,GAAG;IAC5B;EAAC;EAAG;EAAY;EAAe,CAAC;AAEnC,QACE,qBAAC;EAAI,WAAW,GAAG,aAAa,UAAU;aACxC,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;eACZ,iBACC,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,OAAO;MACP,WAAW,MAAM,KAAK,EAAE,OAAO,MAAM;MACrC,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,QAAS,mBAAkB;;MAE3C,aAAa;MACb,UAAU,EAAE,MAAM,UAAU;OAC5B,EACF,oBAAC;MACC,SAAQ;MACR,eAAe,kBAAkB;MACjC,WAAU;gBACX;OAEQ;MACL,GACJ,MACH;KACG,EACL;IACG,GAEJ,YAAY,SAAS,KAAK,eAC1B,qBAAC;GAAI,WAAU;cACZ,YAAY,KAAK,MAChB,qBAAC;IAEC,SAAQ;IACR,WAAU;eAEV,oBAAC,oBAAM,EAAE,QAAa,EACrB,EAAE,YACD,oBAAC;KACC,MAAK;KACL,cAAW;KACX,SAAS,EAAE;KACX,WAAU;eACX;MAEQ;MAbN,EAAE,IAeD,CACR,EACD,cACC,oBAAC;IAAO,MAAK;IAAK,SAAQ;IAAQ,SAAS;cAAY;KAE9C;IAEP;GAEJ"}

package/dist/components/molecules/HoverPreview.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime50 from "react/jsx-runtime";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 
 //#region src/components/molecules/HoverPreview.d.ts
 interface HoverPreviewProps {
@@ -15,7 +15,7 @@ declare function HoverPreview({
   align,
   sideOffset,
   className
-}: HoverPreviewProps): react_jsx_runtime50.JSX.Element;
+}: HoverPreviewProps): react_jsx_runtime51.JSX.Element;
 //#endregion
 export { HoverPreview };
 //# sourceMappingURL=HoverPreview.d.ts.map

package/dist/components/molecules/InstallCommand/InstallCommand.d.ts

@@ -0,0 +1,27 @@
+import { InstallCommandProps } from "./types.js";
+import * as react_jsx_runtime118 from "react/jsx-runtime";
+
+//#region src/components/molecules/InstallCommand/InstallCommand.d.ts
+
+/**
+ * Convenience component for displaying package installation commands.
+ * Automatically generates the correct command for each package manager.
+ *
+ * @example
+ * ```tsx
+ * <InstallCommand package="@contractspec/lib.contracts" />
+ * <InstallCommand package={["react", "react-dom"]} />
+ * <InstallCommand package="typescript" dev />
+ * <InstallCommand package="create-next-app" type="exec" />
+ * ```
+ */
+declare function InstallCommand({
+  package: packageName,
+  type,
+  dev,
+  global,
+  ...props
+}: InstallCommandProps): react_jsx_runtime118.JSX.Element;
+//#endregion
+export { InstallCommand };
+//# sourceMappingURL=InstallCommand.d.ts.map

package/dist/components/molecules/InstallCommand/InstallCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstallCommand.d.ts","names":[],"sources":["../../../../src/components/molecules/InstallCommand/InstallCommand.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAwFA;;;;;;;;;iBAAgB,cAAA;WACL;;;;;GAKR,sBAAmB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/components/molecules/InstallCommand/InstallCommand.js

@@ -0,0 +1,68 @@
+'use client';
+
+import { CommandTabs } from "../CommandTabs/CommandTabs.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/molecules/InstallCommand/InstallCommand.tsx
+function buildCommand(pm, packageNames, type, dev, global) {
+	const packages = packageNames.join(" ");
+	if (type === "exec") switch (pm) {
+		case "bun": return `bunx ${packages}`;
+		case "npm": return `npx ${packages}`;
+		case "yarn": return `yarn dlx ${packages}`;
+		case "pnpm": return `pnpm dlx ${packages}`;
+	}
+	if (type === "create") switch (pm) {
+		case "bun": return `bun create ${packages}`;
+		case "npm": return `npm create ${packages}`;
+		case "yarn": return `yarn create ${packages}`;
+		case "pnpm": return `pnpm create ${packages}`;
+	}
+	if (type === "run") switch (pm) {
+		case "bun": return `bun run ${packages}`;
+		case "npm": return `npm run ${packages}`;
+		case "yarn": return `yarn ${packages}`;
+		case "pnpm": return `pnpm ${packages}`;
+	}
+	const flags = [dev ? pm === "npm" ? "--save-dev" : "-D" : "", global ? "-g" : ""].filter(Boolean).join(" ");
+	switch (pm) {
+		case "bun": return `bun add ${packages}${flags ? ` ${flags}` : ""}`;
+		case "npm": return `npm install ${packages}${flags ? ` ${flags}` : ""}`;
+		case "yarn": return `yarn add ${packages}${flags ? ` ${flags}` : ""}`;
+		case "pnpm": return `pnpm add ${packages}${flags ? ` ${flags}` : ""}`;
+	}
+}
+/**
+* Convenience component for displaying package installation commands.
+* Automatically generates the correct command for each package manager.
+*
+* @example
+* ```tsx
+* <InstallCommand package="@contractspec/lib.contracts" />
+* <InstallCommand package={["react", "react-dom"]} />
+* <InstallCommand package="typescript" dev />
+* <InstallCommand package="create-next-app" type="exec" />
+* ```
+*/
+function InstallCommand({ package: packageName, type = "add", dev = false, global = false, ...props }) {
+	const packageNames = useMemo(() => Array.isArray(packageName) ? packageName : [packageName], [packageName]);
+	return /* @__PURE__ */ jsx(CommandTabs, {
+		commands: useMemo(() => ({
+			bun: buildCommand("bun", packageNames, type, dev, global),
+			npm: buildCommand("npm", packageNames, type, dev, global),
+			yarn: buildCommand("yarn", packageNames, type, dev, global),
+			pnpm: buildCommand("pnpm", packageNames, type, dev, global)
+		}), [
+			packageNames,
+			type,
+			dev,
+			global
+		]),
+		...props
+	});
+}
+
+//#endregion
+export { InstallCommand };
+//# sourceMappingURL=InstallCommand.js.map

package/dist/components/molecules/InstallCommand/InstallCommand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstallCommand.js","names":[],"sources":["../../../../src/components/molecules/InstallCommand/InstallCommand.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport { CommandTabs } from '../CommandTabs';\nimport type { PackageManager } from '../CommandTabs/types';\nimport type { InstallCommandProps, InstallCommandType } from './types';\n\nfunction buildCommand(\n  pm: PackageManager,\n  packageNames: string[],\n  type: InstallCommandType,\n  dev: boolean,\n  global: boolean\n): string {\n  const packages = packageNames.join(' ');\n\n  // Handle exec/run commands (npx, bunx, etc.)\n  if (type === 'exec') {\n    switch (pm) {\n      case 'bun':\n        return `bunx ${packages}`;\n      case 'npm':\n        return `npx ${packages}`;\n      case 'yarn':\n        return `yarn dlx ${packages}`;\n      case 'pnpm':\n        return `pnpm dlx ${packages}`;\n    }\n  }\n\n  // Handle create commands\n  if (type === 'create') {\n    switch (pm) {\n      case 'bun':\n        return `bun create ${packages}`;\n      case 'npm':\n        return `npm create ${packages}`;\n      case 'yarn':\n        return `yarn create ${packages}`;\n      case 'pnpm':\n        return `pnpm create ${packages}`;\n    }\n  }\n\n  // Handle run commands\n  if (type === 'run') {\n    switch (pm) {\n      case 'bun':\n        return `bun run ${packages}`;\n      case 'npm':\n        return `npm run ${packages}`;\n      case 'yarn':\n        return `yarn ${packages}`;\n      case 'pnpm':\n        return `pnpm ${packages}`;\n    }\n  }\n\n  // Build flags\n  const devFlag = dev ? (pm === 'npm' ? '--save-dev' : '-D') : '';\n  const globalFlag = global ? '-g' : '';\n  const flags = [devFlag, globalFlag].filter(Boolean).join(' ');\n\n  // Handle add/install commands\n  switch (pm) {\n    case 'bun':\n      return `bun add ${packages}${flags ? ` ${flags}` : ''}`;\n    case 'npm':\n      return `npm install ${packages}${flags ? ` ${flags}` : ''}`;\n    case 'yarn':\n      return `yarn add ${packages}${flags ? ` ${flags}` : ''}`;\n    case 'pnpm':\n      return `pnpm add ${packages}${flags ? ` ${flags}` : ''}`;\n  }\n}\n\n/**\n * Convenience component for displaying package installation commands.\n * Automatically generates the correct command for each package manager.\n *\n * @example\n * ```tsx\n * <InstallCommand package=\"@contractspec/lib.contracts\" />\n * <InstallCommand package={[\"react\", \"react-dom\"]} />\n * <InstallCommand package=\"typescript\" dev />\n * <InstallCommand package=\"create-next-app\" type=\"exec\" />\n * ```\n */\nexport function InstallCommand({\n  package: packageName,\n  type = 'add',\n  dev = false,\n  global = false,\n  ...props\n}: InstallCommandProps) {\n  const packageNames = useMemo(\n    () => (Array.isArray(packageName) ? packageName : [packageName]),\n    [packageName]\n  );\n\n  const commands = useMemo(\n    () => ({\n      bun: buildCommand('bun', packageNames, type, dev, global),\n      npm: buildCommand('npm', packageNames, type, dev, global),\n      yarn: buildCommand('yarn', packageNames, type, dev, global),\n      pnpm: buildCommand('pnpm', packageNames, type, dev, global),\n    }),\n    [packageNames, type, dev, global]\n  );\n\n  return <CommandTabs commands={commands} {...props} />;\n}\n"],"mappings":";;;;;;;AAOA,SAAS,aACP,IACA,cACA,MACA,KACA,QACQ;CACR,MAAM,WAAW,aAAa,KAAK,IAAI;AAGvC,KAAI,SAAS,OACX,SAAQ,IAAR;EACE,KAAK,MACH,QAAO,QAAQ;EACjB,KAAK,MACH,QAAO,OAAO;EAChB,KAAK,OACH,QAAO,YAAY;EACrB,KAAK,OACH,QAAO,YAAY;;AAKzB,KAAI,SAAS,SACX,SAAQ,IAAR;EACE,KAAK,MACH,QAAO,cAAc;EACvB,KAAK,MACH,QAAO,cAAc;EACvB,KAAK,OACH,QAAO,eAAe;EACxB,KAAK,OACH,QAAO,eAAe;;AAK5B,KAAI,SAAS,MACX,SAAQ,IAAR;EACE,KAAK,MACH,QAAO,WAAW;EACpB,KAAK,MACH,QAAO,WAAW;EACpB,KAAK,OACH,QAAO,QAAQ;EACjB,KAAK,OACH,QAAO,QAAQ;;CAOrB,MAAM,QAAQ,CAFE,MAAO,OAAO,QAAQ,eAAe,OAAQ,IAC1C,SAAS,OAAO,GACA,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAG7D,SAAQ,IAAR;EACE,KAAK,MACH,QAAO,WAAW,WAAW,QAAQ,IAAI,UAAU;EACrD,KAAK,MACH,QAAO,eAAe,WAAW,QAAQ,IAAI,UAAU;EACzD,KAAK,OACH,QAAO,YAAY,WAAW,QAAQ,IAAI,UAAU;EACtD,KAAK,OACH,QAAO,YAAY,WAAW,QAAQ,IAAI,UAAU;;;;;;;;;;;;;;;AAgB1D,SAAgB,eAAe,EAC7B,SAAS,aACT,OAAO,OACP,MAAM,OACN,SAAS,OACT,GAAG,SACmB;CACtB,MAAM,eAAe,cACZ,MAAM,QAAQ,YAAY,GAAG,cAAc,CAAC,YAAY,EAC/D,CAAC,YAAY,CACd;AAYD,QAAO,oBAAC;EAAY,UAVH,eACR;GACL,KAAK,aAAa,OAAO,cAAc,MAAM,KAAK,OAAO;GACzD,KAAK,aAAa,OAAO,cAAc,MAAM,KAAK,OAAO;GACzD,MAAM,aAAa,QAAQ,cAAc,MAAM,KAAK,OAAO;GAC3D,MAAM,aAAa,QAAQ,cAAc,MAAM,KAAK,OAAO;GAC5D,GACD;GAAC;GAAc;GAAM;GAAK;GAAO,CAClC;EAEuC,GAAI;GAAS"}

package/dist/components/molecules/InstallCommand/index.d.ts

@@ -0,0 +1,2 @@
+import { InstallCommandProps, InstallCommandType } from "./types.js";
+import { InstallCommand } from "./InstallCommand.js";

package/dist/components/molecules/InstallCommand/types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+
+//#region src/components/molecules/InstallCommand/types.d.ts
+type InstallCommandType = 'add' | 'install' | 'create' | 'run' | 'exec';
+interface InstallCommandProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** The package name(s) to install */
+  package: string | string[];
+  /** The type of command (defaults to 'add' for package installation) */
+  type?: InstallCommandType;
+  /** Whether this is a dev dependency (adds -D flag) */
+  dev?: boolean;
+  /** Whether this is a global installation (adds -g flag) */
+  global?: boolean;
+}
+//#endregion
+export { InstallCommandProps, InstallCommandType };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/molecules/InstallCommand/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/molecules/InstallCommand/types.ts"],"sourcesContent":[],"mappings":";;;KAEY,kBAAA;UAEK,mBAAA,SAA4B,KAC3C,eAAe;EAHL;EAEK,OAAA,EAAA,MAAA,GAAA,MAAoB,EAAA;EACpB;EAAf,IAAA,CAAA,EAMO,kBANP;EAMO;EAPoC,GAAA,CAAA,EAAA,OAAA;EAAI"}

package/dist/components/molecules/LangSwitch.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime42 from "react/jsx-runtime";
 
 //#region src/components/molecules/LangSwitch.d.ts
 interface LangOption {
@@ -17,7 +17,7 @@ declare function LangSwitch({
   options,
   onChange,
   size
-}: LangSwitchProps): react_jsx_runtime41.JSX.Element;
+}: LangSwitchProps): react_jsx_runtime42.JSX.Element;
 //#endregion
 export { LangSwitch, LangSwitchProps };
 //# sourceMappingURL=LangSwitch.d.ts.map

package/dist/components/molecules/LoaderBlock.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime73 from "react/jsx-runtime";
+import * as react_jsx_runtime74 from "react/jsx-runtime";
 
 //#region src/components/molecules/LoaderBlock.d.ts
 interface LoaderBlockProps {
@@ -13,7 +13,7 @@ declare function LoaderBlock({
   description,
   className,
   size
-}: LoaderBlockProps): react_jsx_runtime73.JSX.Element;
+}: LoaderBlockProps): react_jsx_runtime74.JSX.Element;
 //#endregion
 export { LoaderBlock };
 //# sourceMappingURL=LoaderBlock.d.ts.map

package/dist/components/molecules/OverviewCard.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime49 from "react/jsx-runtime";
+import * as react_jsx_runtime50 from "react/jsx-runtime";
 
 //#region src/components/molecules/OverviewCard.d.ts
 interface OverviewCardProps {
@@ -15,7 +15,7 @@ declare function OverviewCard({
   href,
   preview,
   ctaLabel
-}: OverviewCardProps): react_jsx_runtime49.JSX.Element;
+}: OverviewCardProps): react_jsx_runtime50.JSX.Element;
 //#endregion
 export { OverviewCard };
 //# sourceMappingURL=OverviewCard.d.ts.map

package/dist/components/molecules/SkeletonBlock/index.web.d.ts

@@ -1,5 +1,5 @@
 import { SkeletonBlockProps } from "./types.js";
-import * as react_jsx_runtime108 from "react/jsx-runtime";
+import * as react_jsx_runtime112 from "react/jsx-runtime";
 
 //#region src/components/molecules/SkeletonBlock/index.web.d.ts
 declare function SkeletonBlock({
@@ -7,7 +7,7 @@ declare function SkeletonBlock({
   h,
   rounded,
   className
-}: SkeletonBlockProps): react_jsx_runtime108.JSX.Element;
+}: SkeletonBlockProps): react_jsx_runtime112.JSX.Element;
 //#endregion
 export { SkeletonBlock };
 //# sourceMappingURL=index.web.d.ts.map

package/dist/components/molecules/SkeletonCircle/index.web.d.ts

@@ -1,12 +1,12 @@
 import { SkeletonCircleProps } from "./types.js";
-import * as react_jsx_runtime109 from "react/jsx-runtime";
+import * as react_jsx_runtime113 from "react/jsx-runtime";
 
 //#region src/components/molecules/SkeletonCircle/index.web.d.ts
 declare function SkeletonCircle({
   size,
   sizeClass,
   className
-}: SkeletonCircleProps): react_jsx_runtime109.JSX.Element;
+}: SkeletonCircleProps): react_jsx_runtime113.JSX.Element;
 //#endregion
 export { SkeletonCircle };
 //# sourceMappingURL=index.web.d.ts.map

package/dist/components/molecules/SkeletonList/index.web.d.ts

@@ -1,11 +1,11 @@
 import { SkeletonListProps } from "./types.js";
-import * as react_jsx_runtime110 from "react/jsx-runtime";
+import * as react_jsx_runtime114 from "react/jsx-runtime";
 
 //#region src/components/molecules/SkeletonList/index.web.d.ts
 declare function SkeletonList({
   count,
   className
-}: SkeletonListProps): react_jsx_runtime110.JSX.Element;
+}: SkeletonListProps): react_jsx_runtime114.JSX.Element;
 //#endregion
 export { SkeletonList };
 //# sourceMappingURL=index.web.d.ts.map

package/dist/components/molecules/StatCard.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime47 from "react/jsx-runtime";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
 import * as class_variance_authority_types8 from "class-variance-authority/types";
@@ -24,14 +24,14 @@ declare function StatCard({
   density,
   className,
   ...props
-}: StatCardProps): react_jsx_runtime47.JSX.Element;
+}: StatCardProps): react_jsx_runtime48.JSX.Element;
 declare function StatCardGroup({
   children,
   className
 }: {
   children: React.ReactNode;
   className?: string;
-}): react_jsx_runtime47.JSX.Element;
+}): react_jsx_runtime48.JSX.Element;
 //#endregion
 export { StatCard, StatCardGroup };
 //# sourceMappingURL=StatCard.d.ts.map

package/dist/components/molecules/StatusChip.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime45 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types6 from "class-variance-authority/types";
 
@@ -21,7 +21,7 @@ declare function StatusChip({
   className,
   hoverContent,
   ...props
-}: StatusChipProps): react_jsx_runtime45.JSX.Element;
+}: StatusChipProps): react_jsx_runtime46.JSX.Element;
 //#endregion
 export { StatusChip };
 //# sourceMappingURL=StatusChip.d.ts.map

package/dist/components/molecules/hover-previews/Doc.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime53 from "react/jsx-runtime";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
 
 //#region src/components/molecules/hover-previews/Doc.d.ts
 interface HoverPreviewDocProps {
@@ -22,7 +22,7 @@ declare function HoverPreviewDoc({
   status,
   amount,
   className
-}: HoverPreviewDocProps): react_jsx_runtime53.JSX.Element;
+}: HoverPreviewDocProps): react_jsx_runtime54.JSX.Element;
 //#endregion
 export { HoverPreviewDoc };
 //# sourceMappingURL=Doc.d.ts.map

package/dist/components/molecules/hover-previews/Media.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime52 from "react/jsx-runtime";
+import * as react_jsx_runtime53 from "react/jsx-runtime";
 
 //#region src/components/molecules/hover-previews/Media.d.ts
 interface HoverPreviewMediaProps {
@@ -15,7 +15,7 @@ declare function HoverPreviewMedia({
   media,
   caption,
   className
-}: HoverPreviewMediaProps): react_jsx_runtime52.JSX.Element;
+}: HoverPreviewMediaProps): react_jsx_runtime53.JSX.Element;
 //#endregion
 export { HoverPreviewMedia };
 //# sourceMappingURL=Media.d.ts.map

package/dist/components/molecules/hover-previews/Simple.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime51 from "react/jsx-runtime";
+import * as react_jsx_runtime52 from "react/jsx-runtime";
 
 //#region src/components/molecules/hover-previews/Simple.d.ts
 interface HoverPreviewLine {
@@ -20,7 +20,7 @@ declare function HoverPreviewSimple({
   lines,
   footer,
   className
-}: HoverPreviewSimpleProps): react_jsx_runtime51.JSX.Element;
+}: HoverPreviewSimpleProps): react_jsx_runtime52.JSX.Element;
 //#endregion
 export { HoverPreviewSimple };
 //# sourceMappingURL=Simple.d.ts.map

package/dist/components/molecules/hover-previews/Stats.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime55 from "react/jsx-runtime";
+import * as react_jsx_runtime56 from "react/jsx-runtime";
 
 //#region src/components/molecules/hover-previews/Stats.d.ts
 interface HoverPreviewStat {
@@ -17,7 +17,7 @@ declare function HoverPreviewStats({
   stats: HoverPreviewStat[];
   footer?: React.ReactNode;
   className?: string;
-}): react_jsx_runtime55.JSX.Element;
+}): react_jsx_runtime56.JSX.Element;
 //#endregion
 export { HoverPreviewStats };
 //# sourceMappingURL=Stats.d.ts.map

package/dist/components/molecules/hover-previews/User.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime54 from "react/jsx-runtime";
+import * as react_jsx_runtime55 from "react/jsx-runtime";
 
 //#region src/components/molecules/hover-previews/User.d.ts
 interface HoverPreviewUserProps {
@@ -20,7 +20,7 @@ declare function HoverPreviewUser({
   meta,
   actions,
   className
-}: HoverPreviewUserProps): react_jsx_runtime54.JSX.Element;
+}: HoverPreviewUserProps): react_jsx_runtime55.JSX.Element;
 //#endregion
 export { HoverPreviewUser };
 //# sourceMappingURL=User.d.ts.map

package/dist/components/organisms/AcademyLayout.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
 
 //#region src/components/organisms/AcademyLayout.d.ts
 interface AcademyLayoutProps {
@@ -24,7 +24,7 @@ declare function AcademyLayout({
   rightPanel,
   footer,
   className
-}: AcademyLayoutProps): react_jsx_runtime38.JSX.Element;
+}: AcademyLayoutProps): react_jsx_runtime39.JSX.Element;
 //#endregion
 export { AcademyLayout };
 //# sourceMappingURL=AcademyLayout.d.ts.map

package/dist/components/organisms/AppHeader.d.ts

@@ -1,6 +1,6 @@
 import { HeaderProps } from "./Header.js";
 import * as React from "react";
-import * as react_jsx_runtime39 from "react/jsx-runtime";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
 
 //#region src/components/organisms/AppHeader.d.ts
 interface AppHeaderProps extends HeaderProps {
@@ -13,7 +13,7 @@ declare function AppHeader({
   toolbarRight,
   className,
   ...props
-}: AppHeaderProps): react_jsx_runtime39.JSX.Element;
+}: AppHeaderProps): react_jsx_runtime40.JSX.Element;
 //#endregion
 export { AppHeader };
 //# sourceMappingURL=AppHeader.d.ts.map

package/dist/components/organisms/AppLayout.d.ts

@@ -1,6 +1,6 @@
 import { AppSidebar } from "./AppSidebar.js";
 import * as React from "react";
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 
 //#region src/components/organisms/AppLayout.d.ts
 interface AppLayoutProps {
@@ -23,7 +23,7 @@ declare function AppLayout({
   children,
   footer,
   className
-}: AppLayoutProps): react_jsx_runtime37.JSX.Element;
+}: AppLayoutProps): react_jsx_runtime38.JSX.Element;
 //#endregion
 export { AppLayout };
 //# sourceMappingURL=AppLayout.d.ts.map

package/dist/components/organisms/AppSidebar.d.ts

@@ -1,6 +1,6 @@
 import { NavSection } from "../../types/navigation.js";
 import * as React from "react";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/components/organisms/AppSidebar.d.ts
 interface AppSidebarProps {
@@ -18,7 +18,7 @@ declare function AppSidebar({
   searchPlaceholder,
   className,
   density
-}: AppSidebarProps): react_jsx_runtime21.JSX.Element;
+}: AppSidebarProps): react_jsx_runtime22.JSX.Element;
 //#endregion
 export { AppSidebar };
 //# sourceMappingURL=AppSidebar.d.ts.map

package/dist/components/organisms/EmptyDataList.d.ts

@@ -1,5 +1,5 @@
 import { EmptyDataListProps } from "./EmptyDataList.types.js";
-import * as react_jsx_runtime70 from "react/jsx-runtime";
+import * as react_jsx_runtime71 from "react/jsx-runtime";
 
 //#region src/components/organisms/EmptyDataList.d.ts
 declare function EmptyDataList({
@@ -15,7 +15,7 @@ declare function EmptyDataList({
   onLearnMore,
   handleLearnMore,
   className
-}: EmptyDataListProps): react_jsx_runtime70.JSX.Element;
+}: EmptyDataListProps): react_jsx_runtime71.JSX.Element;
 //#endregion
 export { EmptyDataList };
 //# sourceMappingURL=EmptyDataList.d.ts.map

package/dist/components/organisms/EmptySearchResult.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime71 from "react/jsx-runtime";
+import * as react_jsx_runtime72 from "react/jsx-runtime";
 
 //#region src/components/organisms/EmptySearchResult.d.ts
 interface EmptySearchResultProps {
@@ -19,7 +19,7 @@ declare function EmptySearchResult({
   onSearchChange,
   handleSearchChange,
   className
-}: EmptySearchResultProps): react_jsx_runtime71.JSX.Element;
+}: EmptySearchResultProps): react_jsx_runtime72.JSX.Element;
 //#endregion
 export { EmptySearchResult };
 //# sourceMappingURL=EmptySearchResult.d.ts.map

package/dist/components/organisms/FAQSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime63 from "react/jsx-runtime";
+import * as react_jsx_runtime64 from "react/jsx-runtime";
 
 //#region src/components/organisms/FAQSection.d.ts
 interface FAQItem {
@@ -26,7 +26,7 @@ declare function FAQSection({
   collapsible?: boolean;
   defaultOpenIndex?: number;
   accordionClassName?: string;
-}): react_jsx_runtime63.JSX.Element;
+}): react_jsx_runtime64.JSX.Element;
 //#endregion
 export { FAQSection };
 //# sourceMappingURL=FAQSection.d.ts.map

package/dist/components/organisms/FeatureCarousel.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/organisms/FeatureCarousel.d.ts
 interface FeatureSlide {
@@ -13,7 +13,7 @@ declare function FeatureCarousel({
 }: {
   slides: FeatureSlide[];
   className?: string;
-}): react_jsx_runtime26.JSX.Element;
+}): react_jsx_runtime27.JSX.Element;
 //#endregion
 export { FeatureCarousel };
 //# sourceMappingURL=FeatureCarousel.d.ts.map

package/dist/components/organisms/FeaturesSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime60 from "react/jsx-runtime";
+import * as react_jsx_runtime61 from "react/jsx-runtime";
 
 //#region src/components/organisms/FeaturesSection.d.ts
 declare function FeaturesSection({
@@ -14,7 +14,7 @@ declare function FeaturesSection({
   children: React.ReactNode;
   className?: string;
   density?: 'compact' | 'comfortable';
-}): react_jsx_runtime60.JSX.Element;
+}): react_jsx_runtime61.JSX.Element;
 //#endregion
 export { FeaturesSection };
 //# sourceMappingURL=FeaturesSection.d.ts.map

package/dist/components/organisms/Footer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/organisms/Footer.d.ts
 interface FooterProps {
@@ -20,7 +20,7 @@ declare function Footer({
   links,
   className,
   variant
-}: FooterProps): react_jsx_runtime25.JSX.Element;
+}: FooterProps): react_jsx_runtime26.JSX.Element;
 //#endregion
 export { Footer };
 //# sourceMappingURL=Footer.d.ts.map

package/dist/components/organisms/Header.d.ts

@@ -1,7 +1,7 @@
 import { CtaAction, HeaderNavItem, NavSection } from "../../types/navigation.js";
 import { NavUser } from "../molecules/NavUser.js";
 import * as React from "react";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/organisms/Header.d.ts
 interface HeaderProps {
@@ -24,15 +24,15 @@ declare function DesktopHeader({
   cta,
   className,
   density
-}: HeaderProps): react_jsx_runtime22.JSX.Element;
+}: HeaderProps): react_jsx_runtime23.JSX.Element;
 declare function MobileHeader({
   logo,
   userMenu,
   mobileSidebar,
   className,
   density
-}: HeaderProps): react_jsx_runtime22.JSX.Element;
-declare function Header(props: HeaderProps): react_jsx_runtime22.JSX.Element;
+}: HeaderProps): react_jsx_runtime23.JSX.Element;
+declare function Header(props: HeaderProps): react_jsx_runtime23.JSX.Element;
 //#endregion
 export { DesktopHeader, Header, HeaderProps, MobileHeader };
 //# sourceMappingURL=Header.d.ts.map