@usefragments/ui 1.6.0 → 2.0.0

package/dist/components/Chip/Chip.module.scss.cjs

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const chip = "_chip_lhx6w_1";
-const withRemove = "_withRemove_lhx6w_43";
-const xs = "_xs_lhx6w_48";
-const sm = "_sm_lhx6w_60";
-const md = "_md_lhx6w_72";
-const lg = "_lg_lhx6w_84";
-const filled = "_filled_lhx6w_96";
-const selected = "_selected_lhx6w_106";
-const outlined = "_outlined_lhx6w_118";
-const soft = "_soft_lhx6w_145";
-const avatar = "_avatar_lhx6w_167";
-const icon = "_icon_lhx6w_186";
-const removableChip = "_removableChip_lhx6w_191";
-const remove = "_remove_lhx6w_196";
-const group = "_group_lhx6w_352";
+const chip = "_chip_giwee_1";
+const withRemove = "_withRemove_giwee_45";
+const xs = "_xs_giwee_50";
+const sm = "_sm_giwee_62";
+const md = "_md_giwee_74";
+const lg = "_lg_giwee_86";
+const solid = "_solid_giwee_98";
+const selected = "_selected_giwee_108";
+const outline = "_outline_giwee_120";
+const soft = "_soft_giwee_147";
+const avatar = "_avatar_giwee_169";
+const icon = "_icon_giwee_188";
+const removableChip = "_removableChip_giwee_193";
+const remove = "_remove_giwee_198";
+const group = "_group_giwee_357";
 const styles = {
   chip,
   withRemove,
@@ -22,9 +22,9 @@ const styles = {
   sm,
   md,
   lg,
-  filled,
+  solid,
   selected,
-  outlined,
+  outline,
   soft,
   avatar,
   icon,
@@ -35,16 +35,16 @@ const styles = {
 exports.avatar = avatar;
 exports.chip = chip;
 exports.default = styles;
-exports.filled = filled;
 exports.group = group;
 exports.icon = icon;
 exports.lg = lg;
 exports.md = md;
-exports.outlined = outlined;
+exports.outline = outline;
 exports.removableChip = removableChip;
 exports.remove = remove;
 exports.selected = selected;
 exports.sm = sm;
 exports.soft = soft;
+exports.solid = solid;
 exports.withRemove = withRemove;
 exports.xs = xs;

package/dist/components/Chip/Chip.module.scss.js

@@ -1,18 +1,18 @@
-const chip = "_chip_lhx6w_1";
-const withRemove = "_withRemove_lhx6w_43";
-const xs = "_xs_lhx6w_48";
-const sm = "_sm_lhx6w_60";
-const md = "_md_lhx6w_72";
-const lg = "_lg_lhx6w_84";
-const filled = "_filled_lhx6w_96";
-const selected = "_selected_lhx6w_106";
-const outlined = "_outlined_lhx6w_118";
-const soft = "_soft_lhx6w_145";
-const avatar = "_avatar_lhx6w_167";
-const icon = "_icon_lhx6w_186";
-const removableChip = "_removableChip_lhx6w_191";
-const remove = "_remove_lhx6w_196";
-const group = "_group_lhx6w_352";
+const chip = "_chip_giwee_1";
+const withRemove = "_withRemove_giwee_45";
+const xs = "_xs_giwee_50";
+const sm = "_sm_giwee_62";
+const md = "_md_giwee_74";
+const lg = "_lg_giwee_86";
+const solid = "_solid_giwee_98";
+const selected = "_selected_giwee_108";
+const outline = "_outline_giwee_120";
+const soft = "_soft_giwee_147";
+const avatar = "_avatar_giwee_169";
+const icon = "_icon_giwee_188";
+const removableChip = "_removableChip_giwee_193";
+const remove = "_remove_giwee_198";
+const group = "_group_giwee_357";
 const styles = {
   chip,
   withRemove,
@@ -20,9 +20,9 @@ const styles = {
   sm,
   md,
   lg,
-  filled,
+  solid,
   selected,
-  outlined,
+  outline,
   soft,
   avatar,
   icon,
@@ -34,17 +34,17 @@ export {
   avatar,
   chip,
   styles as default,
-  filled,
   group,
   icon,
   lg,
   md,
-  outlined,
+  outline,
   removableChip,
   remove,
   selected,
   sm,
   soft,
+  solid,
   withRemove,
   xs
 };

package/dist/components/Chip/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Chip_module = require("./Chip.module.scss.cjs");
+const env = require("../../utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -23,7 +24,7 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ChipBase = React__namespace.forwardRef(function Chip2({
   children,
-  variant: variantProp = "filled",
+  variant = "solid",
   size: sizeProp,
   selected = false,
   disabled = false,
@@ -36,7 +37,6 @@ const ChipBase = React__namespace.forwardRef(function Chip2({
   ...htmlProps
 }, ref) {
   const size = sizeProp ?? "xs";
-  const variant = variantProp === "outline" ? "outlined" : variantProp;
   const classes = [
     Chip_module.default.chip,
     Chip_module.default[size],
@@ -114,7 +114,7 @@ function ChipGroupInner({
       if (child.props.value != null) return child.props.value;
       if (typeof child.props.children === "string") return child.props.children;
       if (child.key != null) return String(child.key);
-      if (process.env.NODE_ENV !== "production") {
+      if (!env.isProductionBuild()) {
         console.warn(
           "Chip.Group: Chips with non-string children should provide a `value` prop."
         );

package/dist/components/Chip/index.d.ts

@@ -3,12 +3,17 @@ import * as React from "react";
  * Chip for selections, filters, and tags. Use with Chip.Group for multi-select.
  * @see https://usefragments.com/components/chip
  */
+export type ChipVariant = "solid" | "outline" | "soft";
 export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     children: React.ReactNode;
-    /** Visual style variant. `"outline"` is an alias for `"outlined"`.
-     * @default "filled"
+    /** Chrome family.
+     *
+     * - `solid` (default): tinted pill for filters and tags.
+     * - `outline`: hairline-bordered, transparent.
+     * - `soft`: info-tinted, for a chip that carries a suggestion.
+     * @default "solid"
      * @see https://usefragments.com/components/chip#variants */
-    variant?: "filled" | "outlined" | "outline" | "soft";
+    variant?: ChipVariant;
     /** Chip size.
      * @default "xs" */
     size?: "xs" | "sm" | "md" | "lg";

package/dist/components/Chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;gEAE4D;IAC5D,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACrD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,UAAU,CACxB;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAuJD,eAAO,MAAM,IAAI;;CAAgD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;gEAM4D;IAC5D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,UAAU,CACxB;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAqJD,eAAO,MAAM,IAAI;;CAAgD,CAAC"}

package/dist/components/Chip/index.js

@@ -2,9 +2,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./Chip.module.scss.js";
+import { isProductionBuild } from "../../utils/env.js";
 const ChipBase = React.forwardRef(function Chip2({
   children,
-  variant: variantProp = "filled",
+  variant = "solid",
   size: sizeProp,
   selected = false,
   disabled = false,
@@ -17,7 +18,6 @@ const ChipBase = React.forwardRef(function Chip2({
   ...htmlProps
 }, ref) {
   const size = sizeProp ?? "xs";
-  const variant = variantProp === "outline" ? "outlined" : variantProp;
   const classes = [
     styles.chip,
     styles[size],
@@ -95,7 +95,7 @@ function ChipGroupInner({
       if (child.props.value != null) return child.props.value;
       if (typeof child.props.children === "string") return child.props.children;
       if (child.key != null) return String(child.key);
-      if (process.env.NODE_ENV !== "production") {
+      if (!isProductionBuild()) {
         console.warn(
           "Chip.Group: Chips with non-string children should provide a `value` prop."
         );

package/dist/components/CodeBlock/CodeBlock.module.scss.cjs

@@ -1,26 +1,27 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const container = "_container_13oe3_1";
-const title = "_title_13oe3_6";
-const caption = "_caption_13oe3_7";
-const wrapper = "_wrapper_13oe3_21";
-const header = "_header_13oe3_29";
-const filename = "_filename_13oe3_38";
-const copyButton = "_copyButton_13oe3_47";
-const copied = "_copied_13oe3_116";
-const copyOverlay = "_copyOverlay_13oe3_121";
-const withCopyOverlay = "_withCopyOverlay_13oe3_130";
-const codeContainer = "_codeContainer_13oe3_135";
-const loading = "_loading_13oe3_136";
-const icon = "_icon_13oe3_140";
-const persistentCopy = "_persistentCopy_13oe3_146";
-const persistentCopyWrapper = "_persistentCopyWrapper_13oe3_152";
-const withLineNumbers = "_withLineNumbers_13oe3_222";
-const withDiff = "_withDiff_13oe3_226";
-const compact = "_compact_13oe3_251";
-const wordWrap = "_wordWrap_13oe3_272";
-const collapseButton = "_collapseButton_13oe3_282";
-const tabbedPanel = "_tabbedPanel_13oe3_331";
+const container = "_container_19hjz_1";
+const title = "_title_19hjz_6";
+const caption = "_caption_19hjz_7";
+const wrapper = "_wrapper_19hjz_20";
+const header = "_header_19hjz_40";
+const filename = "_filename_19hjz_49";
+const copyButton = "_copyButton_19hjz_58";
+const copied = "_copied_19hjz_61";
+const copyOverlay = "_copyOverlay_19hjz_66";
+const withCopyOverlay = "_withCopyOverlay_19hjz_75";
+const icon = "_icon_19hjz_81";
+const persistentCopy = "_persistentCopy_19hjz_87";
+const persistentCopyWrapper = "_persistentCopyWrapper_19hjz_93";
+const codeContainer = "_codeContainer_19hjz_97";
+const loading = "_loading_19hjz_98";
+const withLineNumbers = "_withLineNumbers_19hjz_170";
+const withDiff = "_withDiff_19hjz_174";
+const compact = "_compact_19hjz_199";
+const wordWrap = "_wordWrap_19hjz_220";
+const collapseButton = "_collapseButton_19hjz_230";
+const collapseExpand = "_collapseExpand_19hjz_244";
+const tabbedPanel = "_tabbedPanel_19hjz_248";
 const styles = {
   container,
   title,
@@ -32,21 +33,23 @@ const styles = {
   copied,
   copyOverlay,
   withCopyOverlay,
-  codeContainer,
-  loading,
   icon,
   persistentCopy,
   persistentCopyWrapper,
+  codeContainer,
+  loading,
   withLineNumbers,
   withDiff,
   compact,
   wordWrap,
   collapseButton,
+  collapseExpand,
   tabbedPanel
 };
 exports.caption = caption;
 exports.codeContainer = codeContainer;
 exports.collapseButton = collapseButton;
+exports.collapseExpand = collapseExpand;
 exports.compact = compact;
 exports.container = container;
 exports.copied = copied;

package/dist/components/CodeBlock/CodeBlock.module.scss.js

@@ -1,24 +1,25 @@
-const container = "_container_13oe3_1";
-const title = "_title_13oe3_6";
-const caption = "_caption_13oe3_7";
-const wrapper = "_wrapper_13oe3_21";
-const header = "_header_13oe3_29";
-const filename = "_filename_13oe3_38";
-const copyButton = "_copyButton_13oe3_47";
-const copied = "_copied_13oe3_116";
-const copyOverlay = "_copyOverlay_13oe3_121";
-const withCopyOverlay = "_withCopyOverlay_13oe3_130";
-const codeContainer = "_codeContainer_13oe3_135";
-const loading = "_loading_13oe3_136";
-const icon = "_icon_13oe3_140";
-const persistentCopy = "_persistentCopy_13oe3_146";
-const persistentCopyWrapper = "_persistentCopyWrapper_13oe3_152";
-const withLineNumbers = "_withLineNumbers_13oe3_222";
-const withDiff = "_withDiff_13oe3_226";
-const compact = "_compact_13oe3_251";
-const wordWrap = "_wordWrap_13oe3_272";
-const collapseButton = "_collapseButton_13oe3_282";
-const tabbedPanel = "_tabbedPanel_13oe3_331";
+const container = "_container_19hjz_1";
+const title = "_title_19hjz_6";
+const caption = "_caption_19hjz_7";
+const wrapper = "_wrapper_19hjz_20";
+const header = "_header_19hjz_40";
+const filename = "_filename_19hjz_49";
+const copyButton = "_copyButton_19hjz_58";
+const copied = "_copied_19hjz_61";
+const copyOverlay = "_copyOverlay_19hjz_66";
+const withCopyOverlay = "_withCopyOverlay_19hjz_75";
+const icon = "_icon_19hjz_81";
+const persistentCopy = "_persistentCopy_19hjz_87";
+const persistentCopyWrapper = "_persistentCopyWrapper_19hjz_93";
+const codeContainer = "_codeContainer_19hjz_97";
+const loading = "_loading_19hjz_98";
+const withLineNumbers = "_withLineNumbers_19hjz_170";
+const withDiff = "_withDiff_19hjz_174";
+const compact = "_compact_19hjz_199";
+const wordWrap = "_wordWrap_19hjz_220";
+const collapseButton = "_collapseButton_19hjz_230";
+const collapseExpand = "_collapseExpand_19hjz_244";
+const tabbedPanel = "_tabbedPanel_19hjz_248";
 const styles = {
   container,
   title,
@@ -30,22 +31,24 @@ const styles = {
   copied,
   copyOverlay,
   withCopyOverlay,
-  codeContainer,
-  loading,
   icon,
   persistentCopy,
   persistentCopyWrapper,
+  codeContainer,
+  loading,
   withLineNumbers,
   withDiff,
   compact,
   wordWrap,
   collapseButton,
+  collapseExpand,
   tabbedPanel
 };
 export {
   caption,
   codeContainer,
   collapseButton,
+  collapseExpand,
   compact,
   container,
   copied,

package/dist/components/CodeBlock/css-variables-theme.cjs

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const FUI_CSS_VARIABLES_THEME = {
+  name: "css-variables",
+  type: "dark",
+  colors: {
+    "editor.foreground": "var(--fui-code-text)",
+    "editor.background": "var(--fui-code-bg)"
+  },
+  tokenColors: [
+    { settings: { foreground: "var(--fui-code-text)" } },
+    {
+      scope: [
+        "comment",
+        "punctuation.definition.comment",
+        "string.comment",
+        "string.quoted.docstring.multi"
+      ],
+      settings: { foreground: "var(--fui-code-token-comment)" }
+    },
+    {
+      scope: [
+        "keyword",
+        "keyword.control",
+        "keyword.other",
+        "storage",
+        "storage.type",
+        "storage.modifier",
+        "storage.control.clojure"
+      ],
+      settings: { foreground: "var(--fui-code-token-keyword)" }
+    },
+    {
+      scope: [
+        "string",
+        "string.quoted",
+        "string.template",
+        "string.interpolated",
+        "string.regexp",
+        "string.unquoted.plain.out.yaml",
+        "markup.inline"
+      ],
+      settings: { foreground: "var(--fui-code-token-string)" }
+    },
+    {
+      scope: [
+        "constant.numeric",
+        "constant.language",
+        "constant.other",
+        "constant.character.format.placeholder",
+        "constant.other.placeholder"
+      ],
+      settings: { foreground: "var(--fui-code-token-number)" }
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "meta.function-call",
+        "meta.instance.constructor",
+        "entity.other.attribute-name",
+        "entity.name.tag",
+        "support.class.component",
+        "meta.tag"
+      ],
+      settings: { foreground: "var(--fui-code-token-function)" }
+    },
+    {
+      scope: [
+        "punctuation",
+        "punctuation.separator",
+        "punctuation.definition.arguments",
+        "punctuation.definition.dict",
+        "punctuation.definition.string",
+        "punctuation.definition.template-expression",
+        "meta.brace",
+        "keyword.operator",
+        "keyword.operator.accessor"
+      ],
+      settings: { foreground: "var(--fui-code-token-punctuation)" }
+    },
+    {
+      scope: [
+        "variable",
+        "variable.other",
+        "variable.parameter",
+        "variable.language",
+        "entity.name",
+        "support.variable",
+        "support.type",
+        "meta.property-name",
+        "meta.property-value"
+      ],
+      settings: { foreground: "var(--fui-code-token-variable)" }
+    }
+  ]
+};
+exports.FUI_CSS_VARIABLES_THEME = FUI_CSS_VARIABLES_THEME;

package/dist/components/CodeBlock/css-variables-theme.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Shiki theme whose token colors are CSS variables from the kit palette.
+ *
+ * Bundled shiki themes (including the old `css-variables` theme) were removed
+ * from shiki 3; this object is the replacement. `codeToHtml` accepts it as the
+ * `theme` option and writes `color: var(--fui-code-token-*)` onto spans.
+ */
+export declare const FUI_CSS_VARIABLES_THEME: {
+    name: string;
+    type: "dark";
+    colors: {
+        "editor.foreground": string;
+        "editor.background": string;
+    };
+    tokenColors: ({
+        settings: {
+            foreground: string;
+        };
+        scope?: undefined;
+    } | {
+        scope: string[];
+        settings: {
+            foreground: string;
+        };
+    })[];
+};
+//# sourceMappingURL=css-variables-theme.d.ts.map

package/dist/components/CodeBlock/css-variables-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-variables-theme.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/css-variables-theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;CA8FnC,CAAC"}

package/dist/components/CodeBlock/css-variables-theme.js

@@ -0,0 +1,98 @@
+const FUI_CSS_VARIABLES_THEME = {
+  name: "css-variables",
+  type: "dark",
+  colors: {
+    "editor.foreground": "var(--fui-code-text)",
+    "editor.background": "var(--fui-code-bg)"
+  },
+  tokenColors: [
+    { settings: { foreground: "var(--fui-code-text)" } },
+    {
+      scope: [
+        "comment",
+        "punctuation.definition.comment",
+        "string.comment",
+        "string.quoted.docstring.multi"
+      ],
+      settings: { foreground: "var(--fui-code-token-comment)" }
+    },
+    {
+      scope: [
+        "keyword",
+        "keyword.control",
+        "keyword.other",
+        "storage",
+        "storage.type",
+        "storage.modifier",
+        "storage.control.clojure"
+      ],
+      settings: { foreground: "var(--fui-code-token-keyword)" }
+    },
+    {
+      scope: [
+        "string",
+        "string.quoted",
+        "string.template",
+        "string.interpolated",
+        "string.regexp",
+        "string.unquoted.plain.out.yaml",
+        "markup.inline"
+      ],
+      settings: { foreground: "var(--fui-code-token-string)" }
+    },
+    {
+      scope: [
+        "constant.numeric",
+        "constant.language",
+        "constant.other",
+        "constant.character.format.placeholder",
+        "constant.other.placeholder"
+      ],
+      settings: { foreground: "var(--fui-code-token-number)" }
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "meta.function-call",
+        "meta.instance.constructor",
+        "entity.other.attribute-name",
+        "entity.name.tag",
+        "support.class.component",
+        "meta.tag"
+      ],
+      settings: { foreground: "var(--fui-code-token-function)" }
+    },
+    {
+      scope: [
+        "punctuation",
+        "punctuation.separator",
+        "punctuation.definition.arguments",
+        "punctuation.definition.dict",
+        "punctuation.definition.string",
+        "punctuation.definition.template-expression",
+        "meta.brace",
+        "keyword.operator",
+        "keyword.operator.accessor"
+      ],
+      settings: { foreground: "var(--fui-code-token-punctuation)" }
+    },
+    {
+      scope: [
+        "variable",
+        "variable.other",
+        "variable.parameter",
+        "variable.language",
+        "entity.name",
+        "support.variable",
+        "support.type",
+        "meta.property-name",
+        "meta.property-value"
+      ],
+      settings: { foreground: "var(--fui-code-token-variable)" }
+    }
+  ]
+};
+export {
+  FUI_CSS_VARIABLES_THEME
+};

package/dist/components/CodeBlock/index.d.ts

@@ -1,14 +1,15 @@
 import * as React from "react";
+import { type TabsVariant } from "../Tabs";
 export type CodeBlockLanguage = "tsx" | "typescript" | "ts" | "javascript" | "js" | "jsx" | "bash" | "shell" | "css" | "scss" | "sass" | "json" | "html" | "xml" | "markdown" | "md" | "yaml" | "yml" | "python" | "py" | "ruby" | "go" | "rust" | "java" | "kotlin" | "swift" | "c" | "cpp" | "csharp" | "php" | "sql" | "graphql" | "diff" | "plaintext" | "text";
 /** Available syntax highlighting themes */
-export type CodeBlockTheme = "synthwave-84" | "github-dark" | "github-light" | "one-dark-pro" | "dracula" | "nord" | "monokai" | "vitesse-dark" | "vitesse-light" | "min-dark" | "min-light";
+export type CodeBlockTheme = "css-variables" | "synthwave-84" | "github-dark" | "github-light" | "one-dark-pro" | "dracula" | "nord" | "monokai" | "vitesse-dark" | "vitesse-light" | "min-dark" | "min-light";
 export type CodeBlockCopyPlacement = "auto" | "header" | "overlay";
 export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Code string to display */
     code: string;
     /** Programming language for syntax highlighting */
     language?: CodeBlockLanguage;
-    /** Syntax highlighting theme */
+    /** Syntax highlighting theme. Default follows `--fui-code-token-*` via shiki css-variables. */
     theme?: CodeBlockTheme;
     /** Show copy button */
     showCopy?: boolean;
@@ -38,6 +39,12 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
     defaultCollapsed?: boolean;
     /** Number of lines to show when collapsed */
     collapsedLines?: number;
+    /**
+     * Collapse control copy. `lines` keeps “Show N more lines” / “Show less”
+     * (docs prose). `expand` is one right-aligned Expand / Collapse control
+     * for preview+code capsules.
+     */
+    collapseAction?: "lines" | "expand";
     /** Compact mode with reduced padding */
     compact?: boolean;
     /** Show a persistent copy button (always visible, uses Button component) */
@@ -76,18 +83,26 @@ export interface TabbedCodeBlockProps {
     showLineNumbers?: boolean;
     /** Syntax highlighting theme (applies to all tabs) */
     theme?: CodeBlockTheme;
-    /** Tab list visual style */
-    tabsVariant?: "underline" | "pills";
+    /** Tab list chrome: `soft` (default) is the filled rail, `ghost` the underline strip. */
+    tabsVariant?: TabsVariant;
     /** Enable word wrapping for long lines */
     wordWrap?: boolean;
     /** Maximum height in pixels (enables scrolling) */
     maxHeight?: number;
+    /** Allow collapsing/expanding each tab's code (forwarded to every panel) */
+    collapsible?: boolean;
+    /** Initial collapsed state (only applies when collapsible is true) */
+    defaultCollapsed?: boolean;
+    /** Number of lines to show when collapsed */
+    collapsedLines?: number;
+    /** Forwarded to every panel (see CodeBlock `collapseAction`) */
+    collapseAction?: "lines" | "expand";
     /** Additional class name */
     className?: string;
     /** Callback fired when a tab's copy button is clicked. Receives the tab label. */
     onCopy?: (tabLabel: string) => void;
 }
-declare function TabbedCodeBlock({ tabs, defaultTab, value, onValueChange, showCopy, copyPlacement, showLineNumbers, theme, tabsVariant, wordWrap, maxHeight, className, onCopy, }: TabbedCodeBlockProps): import("react/jsx-runtime").JSX.Element;
+declare function TabbedCodeBlock({ tabs, defaultTab, value, onValueChange, showCopy, copyPlacement, showLineNumbers, theme, tabsVariant, wordWrap, maxHeight, collapsible, defaultCollapsed, collapsedLines, collapseAction, className, onCopy, }: TabbedCodeBlockProps): import("react/jsx-runtime").JSX.Element;
 export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>> & {
     Tabbed: typeof TabbedCodeBlock;
 };