@themodcraft/core-ui 1.1.0 → 1.1.2

package/dist/components/button/Button.d.ts

@@ -1,2 +1,2 @@
 import type { ButtonProps } from "./Button.types";
-export declare function Button({ active, btype, className, labeling, onClick, onMouseOver, size, tone, buttonStyleType, style, type, children, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ active, btype, className, disabled, labeling, size, tone, buttonStyleType, style, type, children, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/components/button/Button.js

@@ -1,123 +1,81 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { darken, getReadableTextColor } from "../../utils/color";
+import { getReadableTextColor, darken } from '../../utils/color.js';
+import styles from './Button.module.css';
+import { jsx } from 'react/jsx-runtime';
+
 const toneToStyleType = {
-    neutral: "normal",
-    accent: "submit",
-    danger: "danger",
-};
-const sizeStyles = {
-    sm: {
-        fontSize: "0.875rem",
-        minHeight: "2rem",
-        padding: "0 0.75rem",
-    },
-    md: {
-        fontSize: "0.95rem",
-        minHeight: "5vh",
-        padding: "0 1rem",
-    },
+  neutral: "normal",
+  accent: "submit",
+  danger: "danger"
 };
-const StyledButton = styled.button `
-  --button-color: var(--tmc-color-surface-raised, #fbfcfe);
-  --button-text-color: var(--tmc-color-text, #151821);
-  --button-shadow-color: rgba(21, 24, 33, 0.18);
-  --button-hover-color: var(--tmc-color-surface-muted, #e7ebf0);
-  --button-focus-color: var(--tmc-color-focus, #d99a00);
-  align-items: center;
-  background-color: var(--button-color);
-  border: none;
-  border-radius: 15px;
-  box-shadow:
-    3px 3px 6px 1px var(--button-shadow-color),
-    inset -1px -1px 20px -8px var(--button-shadow-color);
-  color: var(--button-text-color);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
-  font-weight: 600;
-  gap: 0.5rem;
-  height: auto;
-  justify-content: center;
-  margin: 10px;
-  min-height: ${({ $size }) => sizeStyles[$size].minHeight};
-  padding: ${({ $size }) => sizeStyles[$size].padding};
-  transition:
-    background-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-  width: 100%;
-
-  &:hover {
-    background-color: var(--button-hover-color);
-  }
-
-  &:active {
-    transform: translateY(1px);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--button-focus-color);
-    outline-offset: 3px;
-  }
-
-  &:disabled,
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-    opacity: 0.55;
-    pointer-events: none;
-  }
-`;
 function resolveButtonPalette(styleType) {
-    switch (styleType) {
-        case "submit":
-            return getDynamicPalette("#2454D6");
-        case "success":
-            return getDynamicPalette("#1F9D55");
-        case "warning":
-            return getDynamicPalette("#D97706");
-        case "danger":
-            return getDynamicPalette("#DC2626");
-        case "normal":
-        default:
-            return {
-                background: "var(--tmc-button-surface, var(--tmc-color-surface-raised, #fbfcfe))",
-                focus: "var(--tmc-button-focus, var(--tmc-color-focus, #d99a00))",
-                hover: "var(--tmc-button-hover, var(--tmc-color-surface-muted, #e7ebf0))",
-                shadow: "var(--tmc-button-shadow, rgba(21, 24, 33, 0.18))",
-                text: "var(--tmc-button-text, var(--tmc-color-text, #151821))",
-            };
-    }
+  switch (styleType) {
+    case "submit":
+      return getDynamicPalette("#2454D6");
+    case "success":
+      return getDynamicPalette("#1F9D55");
+    case "warning":
+      return getDynamicPalette("#D97706");
+    case "danger":
+      return getDynamicPalette("#DC2626");
+    case "normal":
+    default:
+      return {
+        background: "var(--tmc-button-surface, var(--tmc-color-surface-raised, #fbfcfe))",
+        focus: "var(--tmc-button-focus, var(--tmc-color-focus, #d99a00))",
+        hover: "var(--tmc-button-hover, var(--tmc-color-surface-muted, #e7ebf0))",
+        shadow: "var(--tmc-button-shadow, rgba(21, 24, 33, 0.18))",
+        text: "var(--tmc-button-text, var(--tmc-color-text, #151821))"
+      };
+  }
 }
 function getDynamicPalette(background) {
-    return {
-        background,
-        focus: darken(background, 28),
-        hover: darken(background, 24),
-        shadow: darken(background, 54),
-        text: getReadableTextColor(background),
-    };
+  return {
+    background,
+    focus: darken(background, 28),
+    hover: darken(background, 24),
+    shadow: darken(background, 54),
+    text: getReadableTextColor(background)
+  };
 }
 function isButtonActive(active) {
-    return active !== false && active !== "false";
+  return active !== false && active !== "false";
+}
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
 }
-export function Button({ active = true, btype = "button", className, labeling, onClick, onMouseOver, size = "md", tone = "neutral", buttonStyleType = toneToStyleType[tone], style, type, children, ...props }) {
-    const palette = resolveButtonPalette(buttonStyleType);
-    const cssVariables = {
-        "--button-color": palette.background,
-        "--button-focus-color": palette.focus,
-        "--button-hover-color": palette.hover,
-        "--button-shadow-color": palette.shadow,
-        "--button-text-color": palette.text,
-    };
-    return (_jsx(StyledButton, { "$size": size, className: className, onClick: (event) => {
-            if (!isButtonActive(active)) {
-                event.preventDefault();
-                return;
-            }
-            onClick?.(event);
-        }, onMouseOver: (event) => {
-            onMouseOver?.(event);
-        }, style: { ...cssVariables, ...style }, type: buttonStyleType === "submit" ? "submit" : (type ?? btype), ...props, children: children ?? labeling }));
+function Button({
+  active = true,
+  btype = "button",
+  className,
+  disabled,
+  labeling,
+  size = "md",
+  tone = "neutral",
+  buttonStyleType = toneToStyleType[tone],
+  style,
+  type,
+  children,
+  ...props
+}) {
+  const palette = resolveButtonPalette(buttonStyleType);
+  const cssVariables = {
+    "--button-color": palette.background,
+    "--button-focus-color": palette.focus,
+    "--button-hover-color": palette.hover,
+    "--button-shadow-color": palette.shadow,
+    "--button-text-color": palette.text
+  };
+  return /*#__PURE__*/jsx("button", {
+    className: classNames(styles.button, styles[size], className),
+    disabled: disabled || !isButtonActive(active),
+    style: {
+      ...cssVariables,
+      ...style
+    },
+    type: buttonStyleType === "submit" ? "submit" : type ?? btype,
+    ...props,
+    children: children ?? labeling
+  });
 }
+
+export { Button };

package/dist/components/button/Button.module.css

@@ -0,0 +1 @@
+.button{--button-color:var(--tmc-color-surface-raised,#fbfcfe);--button-text-color:var(--tmc-color-text,#151821);--button-shadow-color:rgba(21,24,33,.18);--button-hover-color:var(--tmc-color-surface-muted,#e7ebf0);--button-focus-color:var(--tmc-color-focus,#d99a00);align-items:center;background-color:var(--button-color);border:0;border-radius:15px;box-shadow:3px 3px 6px 1px var(--button-shadow-color),inset -1px -1px 20px -8px var(--button-shadow-color);color:var(--button-text-color);cursor:pointer;display:inline-flex;font-weight:600;gap:.5rem;height:auto;justify-content:center;margin:10px;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;width:100%}.button:hover{background-color:var(--button-hover-color)}.button:active{transform:translateY(1px)}.button:focus-visible{outline:2px solid var(--button-focus-color);outline-offset:3px}.button:disabled,.button[aria-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}.sm{font-size:.875rem;min-height:2rem;padding:0 .75rem}.md{font-size:.95rem;min-height:5vh;padding:0 1rem}

package/dist/components/button/index.js

@@ -1 +1 @@
-export { Button } from "./Button";
+export { Button } from './Button.js';

package/dist/components/checkbox/Checkbox.js

@@ -1,47 +1,29 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { useContrastedFieldStyle } from "../text-input/shared";
-const CheckboxRoot = styled.label `
-  align-items: flex-start;
-  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
-  cursor: pointer;
-  display: inline-flex;
-  gap: 0.7rem;
-`;
-const CheckboxInput = styled.input `
-  accent-color: var(--cta-color, #30fa00);
-  cursor: pointer;
-  flex: 0 0 auto;
-  height: 1.1rem;
-  margin-top: 0.1rem;
-  width: 1.1rem;
+import styles from './Checkbox.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-  &:focus-visible {
-    outline: 2px solid var(--cta-color, #30fa00);
-    outline-offset: 3px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-`;
-const CheckboxCopy = styled.span `
-  display: grid;
-  gap: 0.2rem;
-  line-height: 1.35;
-`;
-const CheckboxLabel = styled.span `
-  color: inherit;
-  font-size: 0.95rem;
-  font-weight: 600;
-`;
-const CheckboxDescription = styled.span `
-  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
-  font-size: 0.82rem;
-`;
-export function Checkbox({ description, label, children, ...props }) {
-    const fieldStyle = useContrastedFieldStyle();
-    return (_jsxs(CheckboxRoot, { ...fieldStyle, children: [_jsx(CheckboxInput, { type: "checkbox", ...props }), (label || description || children) && (_jsxs(CheckboxCopy, { children: [(label || children) && _jsx(CheckboxLabel, { children: label ?? children }), description && _jsx(CheckboxDescription, { children: description })] }))] }));
+function Checkbox({
+  description,
+  label,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs("label", {
+    className: styles.checkboxRoot,
+    children: [/*#__PURE__*/jsx("input", {
+      className: styles.checkboxInput,
+      type: "checkbox",
+      ...props
+    }), (label || description || children) && /*#__PURE__*/jsxs("span", {
+      className: styles.copy,
+      children: [(label || children) && /*#__PURE__*/jsx("span", {
+        className: styles.label,
+        children: label ?? children
+      }), description && /*#__PURE__*/jsx("span", {
+        className: styles.description,
+        children: description
+      })]
+    })]
+  });
 }
+
+export { Checkbox };

package/dist/components/checkbox/Checkbox.module.css

@@ -0,0 +1 @@
+.checkboxRoot{align-items:flex-start;color:var(--tmc-field-label-text,var(--tmc-field-auto-text,var(--tmc-color-text,#151821)));cursor:pointer;display:inline-flex;gap:.7rem}.checkboxInput{accent-color:var(--cta-color,#30fa00);cursor:pointer;flex:0 0 auto;height:1.1rem;margin-top:.1rem;width:1.1rem}.checkboxInput:focus-visible{outline:2px solid var(--cta-color,#30fa00);outline-offset:3px}.checkboxInput:disabled{cursor:not-allowed;opacity:.55}.copy{display:grid;gap:.2rem;line-height:1.35}.label{color:inherit;font-size:.95rem;font-weight:600}.description{color:var(--tmc-field-description-text,var(--tmc-color-text-muted,var(--tmc-field-auto-text,#5f6b7a)));font-size:.82rem}

package/dist/components/checkbox/Switch.js

@@ -1,79 +1,34 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { useContrastedFieldStyle } from "../text-input/shared";
-const SwitchRoot = styled.label `
-  align-items: center;
-  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
-  cursor: pointer;
-  display: inline-flex;
-  gap: 0.75rem;
-`;
-const SwitchInput = styled.input `
-  height: 0;
-  opacity: 0;
-  position: absolute;
-  width: 0;
-`;
-const SwitchTrack = styled.span `
-  background-color: color-mix(in srgb, var(--tmc-color-surface-muted, #e7ebf0) 78%, var(--tmc-color-text, #151821) 22%);
-  border: 1px solid color-mix(in srgb, var(--tmc-color-text-muted, #5f6b7a) 38%, transparent);
-  border-radius: 34px;
-  display: inline-block;
-  flex: 0 0 auto;
-  height: 34px;
-  position: relative;
-  transition: background-color 0.4s ease, box-shadow 0.2s ease;
-  width: 60px;
+import styles from './Switch.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-  &::before {
-    background-color: var(--tmc-switch-thumb, #f8fafc);
-    border-radius: 50%;
-    bottom: 4px;
-    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.18);
-    content: "";
-    height: 24px;
-    left: 4px;
-    position: absolute;
-    transition: transform 0.4s ease;
-    width: 24px;
-  }
-`;
-const SwitchCopy = styled.span `
-  display: grid;
-  gap: 0.2rem;
-  line-height: 1.35;
-`;
-const SwitchLabel = styled.span `
-  color: inherit;
-  font-size: 0.95rem;
-  font-weight: 600;
-`;
-const SwitchDescription = styled.span `
-  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
-  font-size: 0.82rem;
-`;
-const SwitchControl = styled.span `
-  display: inline-flex;
-
-  .tmc-switch-input:checked + .tmc-switch-track {
-    background-color: var(--cta-color, var(--tmc-color-accent, #2454d6));
-  }
-
-  .tmc-switch-input:focus-visible + .tmc-switch-track {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta-color, var(--tmc-color-accent, #2454d6)) 35%, transparent);
-  }
-
-  .tmc-switch-input:checked + .tmc-switch-track::before {
-    transform: translateX(28px);
-  }
-
-  .tmc-switch-input:disabled + .tmc-switch-track {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-`;
-export function Switch({ description, label, children, ...props }) {
-    const fieldStyle = useContrastedFieldStyle();
-    return (_jsxs(SwitchRoot, { ...fieldStyle, children: [_jsxs(SwitchControl, { children: [_jsx(SwitchInput, { className: "tmc-switch-input", type: "checkbox", ...props }), _jsx(SwitchTrack, { className: "tmc-switch-track" })] }), (label || description || children) && (_jsxs(SwitchCopy, { children: [(label || children) && _jsx(SwitchLabel, { children: label ?? children }), description && _jsx(SwitchDescription, { children: description })] }))] }));
+function Switch({
+  description,
+  label,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs("label", {
+    className: styles.switchRoot,
+    children: [/*#__PURE__*/jsxs("span", {
+      className: styles.switchControl,
+      children: [/*#__PURE__*/jsx("input", {
+        className: styles.switchInput,
+        type: "checkbox",
+        ...props
+      }), /*#__PURE__*/jsx("span", {
+        className: styles.switchTrack
+      })]
+    }), (label || description || children) && /*#__PURE__*/jsxs("span", {
+      className: styles.copy,
+      children: [(label || children) && /*#__PURE__*/jsx("span", {
+        className: styles.label,
+        children: label ?? children
+      }), description && /*#__PURE__*/jsx("span", {
+        className: styles.description,
+        children: description
+      })]
+    })]
+  });
 }
+
+export { Switch };

package/dist/components/checkbox/Switch.module.css

@@ -0,0 +1 @@
+.switchRoot{align-items:center;color:var(--tmc-field-label-text,var(--tmc-field-auto-text,var(--tmc-color-text,#151821)));cursor:pointer;display:inline-flex;gap:.75rem}.switchInput{height:0;opacity:0;position:absolute;width:0}.switchTrack{background-color:color-mix(in srgb,var(--tmc-color-surface-muted,#e7ebf0) 78%,var(--tmc-color-text,#151821) 22%);border:1px solid color-mix(in srgb,var(--tmc-color-text-muted,#5f6b7a) 38%,transparent);border-radius:34px;display:inline-block;flex:0 0 auto;height:34px;position:relative;transition:background-color .4s ease,box-shadow .2s ease;width:60px}.switchTrack:before{background-color:var(--tmc-switch-thumb,#f8fafc);border-radius:50%;bottom:4px;box-shadow:0 1px 4px rgb(0 0 0/.3),0 0 0 1px hsla(0,0%,100%,.18);content:"";height:24px;left:4px;position:absolute;transition:transform .4s ease;width:24px}.switchControl{display:inline-flex}.switchInput:checked+.switchTrack{background-color:var(--cta-color,var(--tmc-color-accent,#2454d6))}.switchInput:focus-visible+.switchTrack{box-shadow:0 0 0 3px color-mix(in srgb,var(--cta-color,var(--tmc-color-accent,#2454d6)) 35%,transparent)}.switchInput:checked+.switchTrack:before{transform:translateX(28px)}.switchInput:disabled+.switchTrack{cursor:not-allowed;opacity:.55}.copy{display:grid;gap:.2rem;line-height:1.35}.label{color:inherit;font-size:.95rem;font-weight:600}.description{color:var(--tmc-field-description-text,var(--tmc-color-text-muted,var(--tmc-field-auto-text,#5f6b7a)));font-size:.82rem}

package/dist/components/checkbox/index.js

@@ -1,2 +1,2 @@
-export { Checkbox } from "./Checkbox";
-export { Switch } from "./Switch";
+export { Checkbox } from './Checkbox.js';
+export { Switch } from './Switch.js';

package/dist/components/code-block/CodeBlock.js

@@ -1,56 +1,122 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { useState } from "react";
-const CodeBlockRoot = styled.div `
-  background: #111722;
-  border: 1px solid #273244;
-  border-radius: 8px;
-  color: #eef4ff;
-  overflow: hidden;
-`;
-const CodeBlockHeader = styled.div `
-  align-items: center;
-  background: #182132;
-  border-bottom: 1px solid #273244;
-  display: flex;
-  gap: 0.75rem;
-  justify-content: space-between;
-  min-height: 2.35rem;
-  padding: 0.45rem 0.75rem;
-`;
-const CodeBlockTitle = styled.span `
-  color: #aebbd0;
-  font-family: var(--tmc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 0.78rem;
-`;
-const CopyButton = styled.button `
-  background: #24314a;
-  border: 1px solid #354561;
-  border-radius: 6px;
-  color: #eef4ff;
-  cursor: pointer;
-  font-size: 0.75rem;
-  padding: 0.25rem 0.55rem;
+import { c } from 'react/compiler-runtime';
+import { useState } from 'react';
+import styles from './CodeBlock.module.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-  &:hover {
-    background: #2d3b58;
-  }
-`;
-const CodePre = styled.pre `
-  font-family: var(--tmc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 0.82rem;
-  line-height: 1.65;
-  margin: 0;
-  overflow-x: auto;
-  padding: 1rem;
-`;
-export function CodeBlock({ code, filename, language, ...props }) {
-    const [copied, setCopied] = useState(false);
-    async function copyCode() {
-        await navigator.clipboard.writeText(code);
-        setCopied(true);
-        window.setTimeout(() => setCopied(false), 1200);
-    }
-    return (_jsxs(CodeBlockRoot, { ...props, children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { children: filename ?? language ?? "code" }), _jsx(CopyButton, { onClick: () => void copyCode(), type: "button", children: copied ? "Copied" : "Copy" })] }), _jsx(CodePre, { children: _jsx("code", { children: code }) })] }));
+function CodeBlock(t0) {
+  const $ = c(23);
+  let code;
+  let filename;
+  let language;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      code,
+      filename,
+      language,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = code;
+    $[2] = filename;
+    $[3] = language;
+    $[4] = props;
+  } else {
+    code = $[1];
+    filename = $[2];
+    language = $[3];
+    props = $[4];
+  }
+  const [copied, setCopied] = useState(false);
+  let t1;
+  if ($[5] !== code) {
+    t1 = async function copyCode() {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    };
+    $[5] = code;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const copyCode = t1;
+  const t2 = filename ?? language ?? "code";
+  let t3;
+  if ($[7] !== t2) {
+    t3 = /*#__PURE__*/jsx("span", {
+      className: styles.title,
+      children: t2
+    });
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== copyCode) {
+    t4 = () => void copyCode();
+    $[9] = copyCode;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const t5 = copied ? "Copied" : "Copy";
+  let t6;
+  if ($[11] !== t4 || $[12] !== t5) {
+    t6 = /*#__PURE__*/jsx("button", {
+      className: styles.copyButton,
+      onClick: t4,
+      type: "button",
+      children: t5
+    });
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t3 || $[15] !== t6) {
+    t7 = /*#__PURE__*/jsxs("div", {
+      className: styles.header,
+      children: [t3, t6]
+    });
+    $[14] = t3;
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== code) {
+    t8 = /*#__PURE__*/jsx("pre", {
+      className: styles.pre,
+      children: /*#__PURE__*/jsx("code", {
+        children: code
+      })
+    });
+    $[17] = code;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== props || $[20] !== t7 || $[21] !== t8) {
+    t9 = /*#__PURE__*/jsxs("div", {
+      className: styles.root,
+      ...props,
+      children: [t7, t8]
+    });
+    $[19] = props;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  return t9;
 }
+
+export { CodeBlock };

package/dist/components/code-block/CodeBlock.module.css

@@ -0,0 +1 @@
+.root{background:#111722;border:1px solid #273244;border-radius:8px;color:#eef4ff;overflow:hidden}.header{align-items:center;background:#182132;border-bottom:1px solid #273244;display:flex;gap:.75rem;justify-content:space-between;min-height:2.35rem;padding:.45rem .75rem}.title{color:#aebbd0;font-family:var(--tmc-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.78rem}.copyButton{background:#24314a;border:1px solid #354561;border-radius:6px;color:#eef4ff;cursor:pointer;font-size:.75rem;padding:.25rem .55rem}.copyButton:hover{background:#2d3b58}.pre{font-family:var(--tmc-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.82rem;line-height:1.65;margin:0;overflow-x:auto;padding:1rem}

package/dist/components/code-block/index.js

@@ -1 +1 @@
-export { CodeBlock } from "./CodeBlock";
+export { CodeBlock } from './CodeBlock.js';

package/dist/components/divider/Divider.d.ts

@@ -1,2 +1,2 @@
 import type { DividerProps } from "./Divider.types";
-export declare function Divider({ children, orientation, role, ...props }: DividerProps): import("react").JSX.Element;
+export declare function Divider({ children, className, orientation, role, ...props }: DividerProps): import("react").JSX.Element;

package/dist/components/divider/Divider.js

@@ -1,36 +1,22 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-const DividerRoot = styled.div `
-  align-items: center;
-  color: var(--tmc-color-text-muted, #5f6b7a);
-  display: flex;
-  font-size: 0.78rem;
-  font-weight: 700;
-  gap: 0.75rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  width: ${({ $orientation }) => $orientation === "horizontal" ? "100%" : "auto"};
+import styles from './Divider.module.css';
+import { jsx } from 'react/jsx-runtime';
 
-  &::before,
-  &::after {
-    background: var(--tmc-color-border, #d7dde5);
-    content: "";
-    display: block;
-    flex: 1 1 auto;
-    height: ${({ $orientation }) => $orientation === "horizontal" ? "1px" : "100%"};
-    min-height: ${({ $orientation }) => $orientation === "vertical" ? "1.5rem" : "0"};
-    width: ${({ $orientation }) => $orientation === "vertical" ? "1px" : "auto"};
-  }
-
-  &:empty {
-    gap: 0;
-  }
-
-  &:empty::before {
-    display: none;
-  }
-`;
-export function Divider({ children, orientation = "horizontal", role, ...props }) {
-    return (_jsx(DividerRoot, { "$orientation": orientation, role: role ?? "separator", ...props, children: children }));
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
 }
+function Divider({
+  children,
+  className,
+  orientation = "horizontal",
+  role,
+  ...props
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(styles.divider, styles[orientation], className),
+    role: role ?? "separator",
+    ...props,
+    children: children
+  });
+}
+
+export { Divider };

package/dist/components/divider/Divider.module.css

@@ -0,0 +1 @@
+.divider{align-items:center;color:var(--tmc-color-text-muted,#5f6b7a);display:flex;font-size:.78rem;font-weight:700;gap:.75rem;letter-spacing:.08em;text-transform:uppercase}.horizontal{width:100%}.vertical{width:auto}.divider:after,.divider:before{background:var(--tmc-color-border,#d7dde5);content:"";display:block;flex:1 1 auto}.horizontal:after,.horizontal:before{height:1px;width:auto}.vertical:after,.vertical:before{height:100%;min-height:1.5rem;width:1px}.divider:empty{gap:0}.divider:empty:before{display:none}