@traefik-labs/faency 12.0.11 → 12.1.0

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { AspectRatio } from '@radix-ui/react-aspect-ratio';
 import { AtRule } from '@stitches/react/types/css';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Language as CodeBlockLanguage } from 'prism-react-renderer';
 import { ComponentProps } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import { ComponentType } from 'react';
@@ -23,6 +24,7 @@ import { ExoticComponent } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { Function as Function_2 } from '@stitches/react/types/util';
+import { HTMLAttributes } from 'react';
 import { IconProps } from '@radix-ui/react-icons/dist/types';
 import { JSXElementConstructor } from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -6442,12 +6444,47 @@ declare type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & {
 
 declare type CheckboxVariants = VariantProps<typeof StyledCheckbox>;
 
+export declare const CodeBlock: default_2.ForwardRefExoticComponent<Omit<CodeBlockProps, "ref"> & default_2.RefAttributes<HTMLPreElement>>;
+
+export { CodeBlockLanguage }
+
+export declare type CodeBlockProps = {
+    lang: CodeBlockLanguage;
+    code: string;
+    copyable?: boolean;
+    copyText?: string;
+    copiedText?: string;
+    copyButtonAlign?: 'top' | 'bottom';
+    noBorder?: boolean;
+    wrapText?: boolean;
+    colorScheme?: 'light' | 'dark';
+    maxHeight?: number | string;
+    css?: CSS_2;
+} & Omit<ComponentProps<typeof Pre>, 'css'>;
+
+export declare const CodeBlockVanilla: default_2.ForwardRefExoticComponent<CodeBlockVanillaProps & default_2.RefAttributes<HTMLPreElement>>;
+
+export declare interface CodeBlockVanillaProps extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>, CSSProps {
+    lang: CodeBlockLanguage;
+    code: string;
+    copyable?: boolean;
+    copyText?: string;
+    copiedText?: string;
+    copyButtonAlign?: 'top' | 'bottom';
+    noBorder?: boolean;
+    wrapText?: boolean;
+    colorScheme?: 'light' | 'dark';
+    maxHeight?: number | string;
+}
+
 declare type COLOR_VALUES = (typeof BADGE_COLORS_VANILLA)[number];
 
 declare type ColorMap = {
     [key: string]: string;
 };
 
+declare type ColorScheme = 'light' | 'dark';
+
 declare type ColorVariants = Record<COLOR_VALUES, {
     bc: string;
     color: string;
@@ -18312,6 +18349,355 @@ export declare const PopoverTrigger: default_2.ForwardRefExoticComponent<Popover
 
 export { Portal }
 
+declare const Pre: StyledComponent<"pre", {
+noBorder?: boolean | "true" | undefined;
+}, {
+bp1: "(min-width: 520px) and (max-width: 899px)";
+bp2: "(min-width: 900px) and (max-width: 1199px)";
+bp3: "(min-width: 1200px) and (max-width: 1799px)";
+bp4: "(min-width: 1800px)";
+motion: "(prefers-reduced-motion)";
+hover: "(any-hover: hover)";
+dark: "(prefers-color-scheme: dark)";
+light: "(prefers-color-scheme: light)";
+}, CSS_4<    {
+bp1: "(min-width: 520px) and (max-width: 899px)";
+bp2: "(min-width: 900px) and (max-width: 1199px)";
+bp3: "(min-width: 1200px) and (max-width: 1799px)";
+bp4: "(min-width: 1800px)";
+motion: "(prefers-reduced-motion)";
+hover: "(any-hover: hover)";
+dark: "(prefers-color-scheme: dark)";
+light: "(prefers-color-scheme: light)";
+}, {
+colors: {
+sidePanelBackground: Property;
+headingDefault: Property;
+textareaBg: Property;
+textareaBorder: Property;
+textareaFocusBg: Property;
+textareaFocusBorder: Property;
+textareaHoverBg: Property;
+textareaText: Property;
+textareaPlaceholder: Property;
+textareaDisabledText: Property;
+textareaInvalidBorder: Property;
+tooltipContentBg: Property;
+tooltipText: Property;
+iconButtonBackground: Property;
+iconButtonHoverBorder: Property;
+iconButtonHoverBackground: Property;
+iconButtonFocusBorder: Property;
+dialogBackground: Property;
+skeletonBackground: Property;
+skeletonAnimation: Property;
+selectBg: Property;
+selectBorder: Property;
+selectFocusBg: Property;
+selectFocusBorder: Property;
+selectHoverBg: Property;
+selectText: Property;
+selectPlaceholder: Property;
+selectDisabledText: Property;
+selectInvalidBorder: Property;
+textSubtle: Property;
+textDefault: Property;
+textContrast: Property;
+textInvalid: Property;
+textRed: Property;
+tableText: Property;
+tableSubtleText: Property;
+tableHoverBackground: Property;
+tableActiveText: Property;
+tableActiveHoverText: Property;
+tableHeaderLayerBackground: Property;
+tableFooterLayerBackground: Property;
+tableHeaderText: Property;
+tableFooterText: Property;
+tableHoverText: Property;
+tableRowBorder: Property;
+inputBg: Property;
+inputBorder: Property;
+inputFocusBg: Property;
+inputFocusBorder: Property;
+inputHoverBg: Property;
+inputText: Property;
+inputPlaceholder: Property;
+inputDisabledText: Property;
+inputInvalidBorder: Property;
+radioBorder: Property;
+radioHoverBg: Property;
+radioHoverBorder: Property;
+radioFocusBorder: Property;
+radioDisabledBg: Property;
+radioDisabledBorder: Property;
+radioIndicatorDisabledBg: Property;
+listItemHoverBg: Property;
+listItemActiveBg: Property;
+listItemFocusBorder: Property;
+linkSubtle: Property;
+linkBlueTextDecoration: Property;
+linkBlueHoverTextDecoration: Property;
+linkBlueFocusOutline: Property;
+linkContrast: Property;
+linkContrastTextDecoration: Property;
+linkContrastHoverTextDecoration: Property;
+linkContrastFocusOutline: Property;
+linkSubtleTextDecoration: Property;
+linkSubtleHoverTextDecoration: Property;
+linkSubtleFocusOutline: Property;
+linkPrimary: Property;
+linkPrimaryTextDecoration: Property;
+linkPrimaryHoverTextDecoration: Property;
+linkPrimaryFocusOutline: Property;
+checkboxIcon: Property;
+checkboxBg: Property;
+checkboxCheckedBg: Property;
+checkboxBorder: Property;
+checkboxCheckedIcon: Property;
+checkboxCheckedHoverBg: Property;
+checkboxHoverBg: Property;
+checkboxHoverBorder: Property;
+checkboxFocusBorder: Property;
+checkboxDisabledBg: Property;
+checkboxDisabledBorder: Property;
+checkboxIndicatorDisabledBg: Property;
+cardBackground: Property;
+cardBorder: Property;
+cardShadow: Property;
+cardHoverBackground: Property;
+cardHoverBorder: Property;
+cardActiveBackground: Property;
+cardActiveBorder: Property;
+cardGhostBackground: Property;
+innerCardBgColor: Property;
+switchBackground: Property;
+switchActiveBackground: Property;
+switchFocusBorder: Property;
+switchThumb: Property;
+buttonSwitchContainerBg: Property;
+buttonSwitchActiveBg: Property;
+buttonSwitchOffBg: Property;
+buttonSwitchOffColor: Property;
+buttonSwitchActiveColor: Property;
+buttonPrimaryBg: Property;
+buttonPrimaryText: Property;
+buttonPrimaryFocusBorder: Property;
+buttonPrimaryGhostHoverText: Property;
+buttonSecondaryBg: Property;
+buttonSecondaryText: Property;
+buttonSecondaryBorder: Property;
+buttonSecondaryFocusBorder: Property;
+buttonRedBg: Property;
+buttonRedText: Property;
+buttonRedHoverText: Property;
+buttonRedFocusBg: Property;
+badgeInteractiveBackgroundActive: Property;
+badgeInteractiveBackgroundHover: Property;
+accordionBackground: Property;
+accordionHoverShadow: Property;
+accordionActiveShadow: Property;
+accordionText: Property;
+accordionLabel: Property;
+};
+fonts: {
+rubik: "Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif";
+};
+space: {
+1: "4px";
+2: "8px";
+3: "16px";
+4: "20px";
+5: "24px";
+6: "32px";
+7: "48px";
+8: "64px";
+9: "80px";
+};
+sizes: {
+1: "4px";
+2: "8px";
+3: "16px";
+4: "20px";
+5: "24px";
+6: "32px";
+7: "40px";
+8: "48px";
+9: "64px";
+10: "80px";
+};
+fontSizes: {
+0: "11px";
+1: "12px";
+2: "13px";
+3: "14px";
+4: "16px";
+5: "18px";
+6: "20px";
+7: "22px";
+8: "24px";
+9: "26px";
+10: "28px";
+11: "32px";
+12: "38px";
+};
+fontWeights: {
+light: 300;
+regular: 400;
+medium: 500;
+semiBold: 600;
+bold: 700;
+};
+radii: {
+1: "4px";
+2: "6px";
+3: "8px";
+4: "12px";
+round: "50%";
+pill: "9999px";
+};
+zIndices: {
+1: "100";
+2: "200";
+3: "300";
+4: "400";
+max: "999";
+};
+}, DefaultThemeMap, {
+p: (value: PropertyValue<"padding">) => {
+padding: WithPropertyValue<"padding">;
+};
+pt: (value: PropertyValue<"paddingTop">) => {
+paddingTop: WithPropertyValue<"paddingTop">;
+};
+pr: (value: PropertyValue<"paddingRight">) => {
+paddingRight: WithPropertyValue<"paddingRight">;
+};
+pb: (value: PropertyValue<"paddingBottom">) => {
+paddingBottom: WithPropertyValue<"paddingBottom">;
+};
+pl: (value: PropertyValue<"paddingLeft">) => {
+paddingLeft: WithPropertyValue<"paddingLeft">;
+};
+px: (value: PropertyValue<"paddingLeft">) => {
+paddingLeft: WithPropertyValue<"paddingLeft">;
+paddingRight: WithPropertyValue<"paddingLeft">;
+};
+py: (value: PropertyValue<"paddingTop">) => {
+paddingTop: WithPropertyValue<"paddingTop">;
+paddingBottom: WithPropertyValue<"paddingTop">;
+};
+m: (value: PropertyValue<"margin">) => {
+margin: WithPropertyValue<"margin">;
+};
+mt: (value: PropertyValue<"marginTop">) => {
+marginTop: WithPropertyValue<"marginTop">;
+};
+mr: (value: PropertyValue<"marginRight">) => {
+marginRight: WithPropertyValue<"marginRight">;
+};
+mb: (value: PropertyValue<"marginBottom">) => {
+marginBottom: WithPropertyValue<"marginBottom">;
+};
+ml: (value: PropertyValue<"marginLeft">) => {
+marginLeft: WithPropertyValue<"marginLeft">;
+};
+mx: (value: PropertyValue<"marginLeft">) => {
+marginLeft: WithPropertyValue<"marginLeft">;
+marginRight: WithPropertyValue<"marginLeft">;
+};
+my: (value: PropertyValue<"marginTop">) => {
+marginTop: WithPropertyValue<"marginTop">;
+marginBottom: WithPropertyValue<"marginTop">;
+};
+ta: (value: PropertyValue<"textAlign">) => {
+textAlign: WithPropertyValue<"textAlign">;
+};
+fd: (value: PropertyValue<"flexDirection">) => {
+flexDirection: WithPropertyValue<"flexDirection">;
+};
+fw: (value: PropertyValue<"flexWrap">) => {
+flexWrap: WithPropertyValue<"flexWrap">;
+};
+ai: (value: PropertyValue<"alignItems">) => {
+alignItems: WithPropertyValue<"alignItems">;
+};
+ac: (value: PropertyValue<"alignContent">) => {
+alignContent: WithPropertyValue<"alignContent">;
+};
+jc: (value: PropertyValue<"justifyContent">) => {
+justifyContent: WithPropertyValue<"justifyContent">;
+};
+as: (value: PropertyValue<"alignSelf">) => {
+alignSelf: WithPropertyValue<"alignSelf">;
+};
+fg: (value: PropertyValue<"flexGrow">) => {
+flexGrow: WithPropertyValue<"flexGrow">;
+};
+fs: (value: PropertyValue<"flexShrink">) => {
+flexShrink: WithPropertyValue<"flexShrink">;
+};
+fb: (value: PropertyValue<"flexBasis">) => {
+flexBasis: WithPropertyValue<"flexBasis">;
+};
+bc: (value: PropertyValue<"backgroundColor">) => {
+backgroundColor: WithPropertyValue<"backgroundColor">;
+};
+br: (value: PropertyValue<"borderRadius">) => {
+borderRadius: WithPropertyValue<"borderRadius">;
+};
+btrr: (value: PropertyValue<"borderTopRightRadius">) => {
+borderTopRightRadius: WithPropertyValue<"borderTopRightRadius">;
+};
+bbrr: (value: PropertyValue<"borderBottomRightRadius">) => {
+borderBottomRightRadius: WithPropertyValue<"borderBottomRightRadius">;
+};
+bblr: (value: PropertyValue<"borderBottomLeftRadius">) => {
+borderBottomLeftRadius: WithPropertyValue<"borderBottomLeftRadius">;
+};
+btlr: (value: PropertyValue<"borderTopLeftRadius">) => {
+borderTopLeftRadius: WithPropertyValue<"borderTopLeftRadius">;
+};
+bs: (value: PropertyValue<"boxShadow">) => {
+boxShadow: WithPropertyValue<"boxShadow">;
+};
+c: (value: PropertyValue<"color">) => {
+color: WithPropertyValue<"color">;
+};
+lh: (value: PropertyValue<"lineHeight">) => {
+lineHeight: WithPropertyValue<"lineHeight">;
+};
+ox: (value: PropertyValue<"overflowX">) => {
+overflowX: WithPropertyValue<"overflowX">;
+};
+oy: (value: PropertyValue<"overflowY">) => {
+overflowY: WithPropertyValue<"overflowY">;
+};
+pe: (value: PropertyValue<"pointerEvents">) => {
+pointerEvents: WithPropertyValue<"pointerEvents">;
+};
+us: (value: PropertyValue<"userSelect">) => {
+WebkitUserSelect: WithPropertyValue<"userSelect">;
+userSelect: WithPropertyValue<"userSelect">;
+};
+userSelect: (value: PropertyValue<"userSelect">) => {
+WebkitUserSelect: WithPropertyValue<"userSelect">;
+userSelect: WithPropertyValue<"userSelect">;
+};
+size: (value: PropertyValue<"width">) => {
+width: WithPropertyValue<"width">;
+height: WithPropertyValue<"width">;
+};
+appearance: (value: PropertyValue<"appearance">) => {
+WebkitAppearance: WithPropertyValue<"appearance">;
+appearance: WithPropertyValue<"appearance">;
+};
+backgroundClip: (value: PropertyValue<"backgroundClip">) => {
+WebkitBackgroundClip: WithPropertyValue<"backgroundClip">;
+backgroundClip: WithPropertyValue<"backgroundClip">;
+};
+}>>;
+
 export declare type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';
 
 declare type PrimaryColor_2 = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';
@@ -33842,6 +34228,8 @@ declare type TrProps = ComponentProps<typeof StyledTr_2> & VariantProps<typeof S
 
 export declare const Ul: default_2.ForwardRefExoticComponent<Omit<ListProps, "ref"> & default_2.RefAttributes<HTMLUListElement>>;
 
+export declare function useColorScheme(): ColorScheme;
+
 export declare function useVanillaExtractTheme(): ThemeContextValue;
 
 export declare const vanillaDarkTheme: string;

package/dist/index.js

@@ -1,4 +1,5 @@
 import { FaencyProvider } from "./components/FaencyProvider.js";
+import { useColorScheme } from "./components/colorSchemeContext.js";
 import { Overlay } from "./components/Overlay.js";
 import { AspectRatio } from "@radix-ui/react-aspect-ratio";
 import { Portal } from "@radix-ui/react-portal";
@@ -18,6 +19,8 @@ import { Blockquote } from "./components/Blockquote/Blockquote.js";
 import { BlockquoteVanilla } from "./components/Blockquote/Blockquote.vanilla.js";
 import { Box } from "./components/Box/Box.js";
 import { BoxVanilla } from "./components/Box/Box.vanilla.js";
+import { CodeBlock } from "./components/CodeBlock/CodeBlock.js";
+import { CodeBlockVanilla } from "./components/CodeBlock/CodeBlock.vanilla.js";
 import { Bubble } from "./components/Bubble/Bubble.js";
 import { BubbleVanilla } from "./components/Bubble/Bubble.vanilla.js";
 import { Button } from "./components/Button/Button.js";
@@ -114,6 +117,8 @@ export {
   Card,
   CardVanilla,
   Checkbox,
+  CodeBlock,
+  CodeBlockVanilla,
   Container,
   ContainerVanilla,
   DateTimePicker,
@@ -235,6 +240,7 @@ export {
   lightTheme,
   panelStyles,
   styled,
+  useColorScheme,
   useVanillaExtractTheme,
   darkTheme2 as vanillaDarkTheme,
   lightTheme2 as vanillaLightTheme,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@traefik-labs/faency",
   "description": "Traefik Labs design system",
-  "version": "12.0.11",
+  "version": "12.1.0",
   "license": "Apache-2.0",
   "keywords": [
     "traefiklabs",
@@ -85,10 +85,10 @@
     "@radix-ui/react-use-layout-effect": "^1.0.0",
     "@radix-ui/react-visually-hidden": "^1.0.1",
     "@rehookify/datepicker": "^6.6.7",
-    "@semantic-release/commit-analyzer": "^9.0.2",
-    "@semantic-release/github": "^8.0.2",
-    "@semantic-release/npm": "^9.0.0",
-    "@semantic-release/release-notes-generator": "^10.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.5",
+    "@semantic-release/release-notes-generator": "^14.1.0",
     "@stitches/react": "1.2.8",
     "@storybook/addon-docs": "10.2.10",
     "@storybook/addon-links": "10.2.10",
@@ -107,7 +107,7 @@
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^5.1.1",
     "babel-loader": "^8.2.2",
-    "conventional-changelog-conventionalcommits": "^4.6.3",
+    "conventional-changelog-conventionalcommits": "^9.2.0",
     "cross-env": "^7.0.3",
     "date-fns": "^4.1.0",
     "husky": "^8.0.0",
@@ -116,23 +116,24 @@
     "np": "^8.0.4",
     "patch-package": "^8.0.0",
     "prettier": "^3.6.2",
+    "prism-react-renderer": "2.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "semantic-release": "^19.0.2",
+    "semantic-release": "^25.0.3",
     "storybook": "10.2.10",
     "tinycolor2": "^1.4.2",
     "typescript": "^5.8.3",
     "use-debounce": "9.0.2",
-    "vite": "7.1.3",
+    "vite": "7.1.11",
     "vite-plugin-dts": "^4.5.4"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",
     "@eslint/js": "^9.32.0",
-    "@storybook/addon-docs": "10.0.8",
-    "@storybook/addon-links": "10.0.8",
-    "@storybook/builder-vite": "10.0.8",
-    "@storybook/react-vite": "10.0.8",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-links": "10.2.10",
+    "@storybook/builder-vite": "10.2.10",
+    "@storybook/react-vite": "10.2.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@vueless/storybook-dark-mode": "^10.0.3",
@@ -148,9 +149,9 @@
     "globals": "^15.8.0",
     "jest": "^27.5.1",
     "jest-axe": "^6.0.0",
-    "storybook": "10.0.8",
+    "storybook": "10.2.10",
     "typescript-eslint": "^8.38.0",
-    "webpack": "^5.94.0"
+    "webpack": "5.104.1"
   },
   "resolutions": {
     "@typescript-eslint/project-service@^8.56.0": "8.56.0",
@@ -160,22 +161,23 @@
     "@typescript-eslint/typescript-estree@^8.56.0": "8.56.0",
     "@typescript-eslint/utils@^8.56.0": "8.56.0",
     "@typescript-eslint/visitor-keys@^8.56.0": "8.56.0",
-    "balanced-match@^4.0.2": "4.0.3",
-    "brace-expansion@^5.0.2": "5.0.2",
-    "glob@^13.0.1": "13.0.5",
-    "minimatch@^3.0.4": "3.1.2",
-    "minimatch@^3.1.1": "3.1.2",
-    "minimatch@^5.0.1": "5.1.2",
-    "minimatch@^5.1.0": "5.1.2",
-    "minimatch@^9.0.0": "9.0.5",
-    "minimatch@^9.0.5": "9.0.5",
-    "minimatch@^10.2.1": "10.2.1",
-    "minimatch@^10.2.2": "10.2.1",
-    "path-scurry@^2.0.0": "2.0.1"
+    "baseline-browser-mapping@^2.9.0": "2.10.8",
+    "browserslist@^4.28.1": "4.28.1",
+    "caniuse-lite@^1.0.30001759": "1.0.30001779",
+    "conventional-changelog-angular@^8.0.0": "8.3.0",
+    "conventional-changelog-conventionalcommits@^9.2.0": "9.2.0",
+    "conventional-commits-parser@^6.0.0": "6.3.0",
+    "electron-to-chromium@^1.5.263": "1.5.313",
+    "minimatch@^10.0.3": "10.2.4",
+    "minimatch@^10.1.1": "10.2.4",
+    "minimatch@^10.2.1": "10.2.4",
+    "minimatch@^10.2.2": "10.2.4",
+    "minimatch@^10.2.4": "10.2.4",
+    "undici@^7.0.0": "7.24.4"
   },
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org"
+    "registry": "https://registry.npmjs.org/"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx,css,md}": "prettier --write"
@@ -198,7 +200,12 @@
           "preset": "conventionalcommits"
         }
       ],
-      "@semantic-release/npm",
+      [
+        "@semantic-release/npm",
+        {
+          "provenance": true
+        }
+      ],
       "@semantic-release/github"
     ]
   },