margo-ui 2.1.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "description": "React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",

package/src/components/input/style.ts

@@ -1,6 +1,6 @@
 export const inputBaseClassName = `group/input flex w-full cursor-text items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
 text-sm select-none min-h-[2.5rem] bg-low
-border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-input
+border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-item
 focus-within:border-primary focus-within:text-on-main
 has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-auto has-[input:disabled]:opacity-40`;
 

package/src/components/select/style.ts

@@ -1,6 +1,6 @@
 export const selectBaseClassName = `group/select relative flex min-h-[2.5rem] w-full items-center gap-1 rounded-lg
 border-2 border-transparent bg-low text-sm text-medium select-none
-hover:border-on-main hover:text-on-main hover:shadow-input
+hover:border-on-main hover:text-on-main hover:shadow-item
 focus-within:border-primary focus-within:text-on-main
 has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-40`;
 

package/src/components/table/style.ts

@@ -2,7 +2,7 @@ export const tableWrapperClassName = "w-full overflow-x-auto overscroll-x-none r
 
 export const tableBaseClassName = "w-full border-collapse text-xs text-on-main";
 
-export const tableHeadClassName = "border-b-2 border-border bg-neutral/40 text-left";
+export const tableHeadClassName = "border-b-2 border-border bg-low text-left";
 
 export const tableBodyClassName = "align-top";
 

package/src/css/theme.css

@@ -29,7 +29,6 @@
   --shadow-card: var(--margo-shadow-card);
   --shadow-button: var(--margo-shadow-button);
   --shadow-item: var(--margo-shadow-item);
-  --shadow-input: var(--margo-shadow-input);
   --shadow-chip: var(--margo-shadow-chip);
 
   /* Durations */

package/src/css/variables.css

@@ -52,33 +52,19 @@
 
   --margo-color-neutral: #ffffff;
   --margo-color-on-neutral: #000000;
-  --margo-color-main: #edecec;
+  --margo-color-main: #f3f3f3;
   --margo-color-on-main: #151515;
   --margo-color-primary: #57e550;
   --margo-color-primary-darken: #45b93f;
-  --margo-color-low: color-mix(in srgb, var(--margo-color-on-main) 4%, var(--margo-color-main));
-  --margo-color-low-alpha: color-mix(in srgb, var(--margo-color-on-main) 4%, transparent);
+  --margo-color-low: color-mix(in srgb, var(--margo-color-on-main) 3.5%, var(--margo-color-main));
+  --margo-color-low-alpha: color-mix(in srgb, var(--margo-color-on-main) 3.5%, transparent);
   --margo-color-medium: #808080;
   --margo-color-border: #cecece;
 
   --margo-shadow-card: 0 8px 6px -4px rgb(220, 220, 220, 0.5);
   --margo-shadow-button: 0 2px 3px -1px rgb(220, 220, 220, 0.6);
   --margo-shadow-item: 0 3px 3px -3px rgba(139, 139, 139, 0.6);
-  --margo-shadow-input: 0 3px 3px -3px rgba(139, 139, 139, 0.6);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.6);
-
-  --margo-code-surface: #fbfbfb;
-  --margo-code-bar: #f1f1f1;
-  --margo-code-plain: #24292f;
-  --margo-code-comment: #8b949e;
-  --margo-code-string: #0a7d3f;
-  --margo-code-keyword: #a5309a;
-  --margo-code-number: #b3510f;
-  --margo-code-tag: #1f6fd6;
-  --margo-code-attr: #7a5cd6;
-  --margo-code-fn: #0f7c93;
-  --margo-code-type: #1f6fd6;
-  --margo-code-punct: #6e7781;
 }
 
 .dark {
@@ -87,7 +73,7 @@
   --margo-color-neutral: #000000;
   --margo-color-on-neutral: #ffffff;
   --margo-color-main: #151515;
-  --margo-color-on-main: #eeeeee;
+  --margo-color-on-main: #f3f3f3;
   --margo-color-primary: #57e550;
   --margo-color-primary-darken: #45b93f;
   --margo-color-low: color-mix(in srgb, var(--margo-color-on-main) 2.5%, var(--margo-color-main));
@@ -98,21 +84,7 @@
   --margo-shadow-card: 0 4px 12px -4px rgb(0, 0, 0, 0.5);
   --margo-shadow-button: 0 2px 6px -2px rgb(0, 0, 0, 0.5);
   --margo-shadow-item: 0 2px 3px -2px rgb(0, 0, 0, 0.5);
-  --margo-shadow-input: 0 2px 3px -2px rgb(0, 0, 0, 0.5);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.5);
-
-  --margo-code-surface: #0d0d0d;
-  --margo-code-bar: #161616;
-  --margo-code-plain: #e6e6e6;
-  --margo-code-comment: #6b6b6b;
-  --margo-code-string: #7ee787;
-  --margo-code-keyword: #ff7bd5;
-  --margo-code-number: #ffab70;
-  --margo-code-tag: #79c0ff;
-  --margo-code-attr: #c3a6ff;
-  --margo-code-fn: #56d4dd;
-  --margo-code-type: #79c0ff;
-  --margo-code-punct: #8b949e;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/index.ts

@@ -19,7 +19,6 @@ export { Toggle } from "./components/toggle/toggle.js";
 export { Splash } from "./components/splash/splash.js";
 export { Select } from "./components/select/select.js";
 export { Sheet } from "./components/sheet/sheet.js";
-export { Snippet } from "./components/snippet/snippet.js";
 export { Spinner } from "./components/spinner/spinner.js";
 export { Tooltip } from "./components/tooltip/tooltip.js";
 
@@ -77,7 +76,6 @@ export type {
 export type { SplashProps, SplashServeProps } from "./components/splash/type.js";
 export type { SelectOwnProps, SelectProps } from "./components/select/type.js";
 export type { SheetBodyProps, SheetFooterProps, SheetProps, SheetSide } from "./components/sheet/type.js";
-export type { SnippetPreviewProps, SnippetProps, SnippetToken, SnippetTokenType } from "./components/snippet/type.js";
 export type { SpinnerProps } from "./components/spinner/type.js";
 export type { ToggleProps } from "./components/toggle/type.js";
 export type { TooltipPosition, TooltipProps } from "./components/tooltip/type.js";

package/src/components/snippet/highlight.ts

@@ -1,83 +0,0 @@
-import type { SnippetToken, SnippetTokenType } from "./type.js";
-
-const KEYWORDS = [
-  "as",
-  "async",
-  "await",
-  "break",
-  "case",
-  "catch",
-  "class",
-  "const",
-  "continue",
-  "default",
-  "delete",
-  "do",
-  "else",
-  "export",
-  "extends",
-  "false",
-  "for",
-  "from",
-  "function",
-  "if",
-  "implements",
-  "import",
-  "in",
-  "instanceof",
-  "interface",
-  "let",
-  "new",
-  "null",
-  "of",
-  "readonly",
-  "return",
-  "satisfies",
-  "switch",
-  "this",
-  "throw",
-  "true",
-  "try",
-  "type",
-  "typeof",
-  "undefined",
-  "var",
-  "void",
-  "while",
-  "yield",
-];
-
-const PATTERNS: readonly { type: SnippetTokenType; source: string }[] = [
-  { type: "comment", source: "\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/" },
-  { type: "string", source: "\"(?:[^\"\\\\]|\\\\.)*\"|'(?:[^'\\\\]|\\\\.)*'|`(?:[^`\\\\]|\\\\.)*`" },
-  { type: "tag", source: "<\\/?[A-Za-z][\\w.$]*" },
-  { type: "keyword", source: `\\b(?:${KEYWORDS.join("|")})\\b` },
-  { type: "number", source: "\\b\\d+(?:\\.\\d+)?\\b" },
-  { type: "attr", source: "\\b[A-Za-z_$][\\w$]*(?=\\s*[=:](?!=))" },
-  { type: "fn", source: "\\b[A-Za-z_$][\\w$]*(?=\\s*\\()" },
-  { type: "type", source: "\\b[A-Z][\\w$]*\\b" },
-  { type: "punct", source: "[{}()\\[\\]<>=;,.:!?|&+\\-*/]" },
-];
-
-const TOKENIZER = new RegExp(PATTERNS.map((pattern) => `(${pattern.source})`).join("|"), "g");
-
-export const snippetHighlight = (code: string): SnippetToken[] => {
-  const tokens: SnippetToken[] = [];
-  let cursor = 0;
-  let match: RegExpExecArray | null;
-
-  TOKENIZER.lastIndex = 0;
-
-  while ((match = TOKENIZER.exec(code)) !== null) {
-    if (match.index > cursor) tokens.push({ type: "plain", value: code.slice(cursor, match.index) });
-
-    const groupIndex = PATTERNS.findIndex((_, index) => match![index + 1] !== undefined);
-
-    tokens.push({ type: PATTERNS[groupIndex].type, value: match[0] });
-    cursor = match.index + match[0].length;
-  }
-
-  if (cursor < code.length) tokens.push({ type: "plain", value: code.slice(cursor) });
-
-  return tokens;
-};

package/src/components/snippet/snippet.tsx

@@ -1,80 +0,0 @@
-import { useState } from "react";
-
-import { MdCheck, MdContentCopy } from "react-icons/md";
-
-import { Guard, List, Swap, Tag } from "react-renderable";
-
-import { cn } from "../../utils/cn/cn.js";
-import { Button } from "../button/button.js";
-import { snippetHighlight } from "./highlight.js";
-import {
-  snippetBarClassName,
-  snippetBaseClassName,
-  snippetCodeClassName,
-  snippetCopyClassName,
-  snippetPreviewClassName,
-  snippetTitleClassName,
-  snippetTokenClassName,
-} from "./style.js";
-
-import type { ElementType } from "react";
-import { MaskGradientX } from "../../hoc/mask_gradient_x/mask_gradient_x.js";
-import type { SnippetPreviewProps, SnippetProps } from "./type.js";
-
-export const Snippet = <T extends ElementType = "div">({
-  snippet,
-  title,
-  className,
-  children,
-  ...rest
-}: SnippetProps<T>) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const source = snippet.trim();
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(source);
-    setIsCopied(true);
-    window.setTimeout(() => setIsCopied(false), 1500);
-  };
-
-  return (
-    <Tag {...Tag.forward<T>(rest)} className={cn(snippetBaseClassName, className)}>
-      <div className={snippetBarClassName}>
-        <Guard guardIf={!title} shouldHide>
-          <span className={snippetTitleClassName}>{title}</span>
-        </Guard>
-        <Button onClickBlur={handleCopy} aria-label="copy" aria-pressed={isCopied} className={snippetCopyClassName}>
-          <Button.Icon
-            icon={
-              <Swap.Boolean
-                swapOn={isCopied}
-                components={[<MdContentCopy className="text-sm" />, <MdCheck className="text-sm" />]}
-              />
-            }
-          />
-        </Button>
-      </div>
-      <MaskGradientX fade="1rem">
-        <pre className={snippetCodeClassName}>
-          <code>
-            <List
-              array={snippetHighlight(source)}
-              itemExtractor={({ row, index }) => (
-                <span key={index} className={snippetTokenClassName[row.type]}>
-                  {row.value}
-                </span>
-              )}
-            />
-          </code>
-        </pre>
-      </MaskGradientX>
-      {children}
-    </Tag>
-  );
-};
-
-Snippet.Preview = <T extends ElementType = "div">({ className, children, ...rest }: SnippetPreviewProps<T>) => (
-  <Tag {...Tag.forward<T>(rest)} className={cn(snippetPreviewClassName, className)}>
-    {children}
-  </Tag>
-);

package/src/components/snippet/style.ts

@@ -1,28 +0,0 @@
-import type { SnippetTokenType } from "./type.js";
-
-export const snippetBaseClassName = "rounded-lg border-2 border-border bg-(--margo-code-surface)";
-
-export const snippetBarClassName = `flex items-center justify-between gap-4 border-b-2 border-border
-rounded-t-[calc(var(--radius-lg)-var(--margo-border-width-2))] bg-(--margo-code-bar) px-3 py-2`;
-
-export const snippetTitleClassName = "text-mc uppercase tracking-widest text-medium";
-
-export const snippetCopyClassName = "ml-auto bg-neutral/60";
-
-export const snippetPreviewClassName =
-  "flex flex-wrap items-center justify-center gap-6 rounded-b-lg border-t-2 border-border p-8";
-
-export const snippetCodeClassName = "overflow-x-auto p-4 text-xs leading-relaxed";
-
-export const snippetTokenClassName: Record<SnippetTokenType, string> = {
-  plain: "text-(--margo-code-plain)",
-  comment: "text-(--margo-code-comment) italic",
-  string: "text-(--margo-code-string)",
-  keyword: "text-(--margo-code-keyword)",
-  number: "text-(--margo-code-number)",
-  tag: "text-(--margo-code-tag)",
-  attr: "text-(--margo-code-attr)",
-  fn: "text-(--margo-code-fn)",
-  type: "text-(--margo-code-type)",
-  punct: "text-(--margo-code-punct)",
-};

package/src/components/snippet/type.ts

@@ -1,29 +0,0 @@
-import type { TagProps } from "react-renderable";
-import type { ElementType, ReactNode } from "react";
-
-export type SnippetTokenType =
-  | "plain"
-  | "comment"
-  | "string"
-  | "keyword"
-  | "number"
-  | "tag"
-  | "attr"
-  | "fn"
-  | "type"
-  | "punct";
-
-export type SnippetToken = {
-  type: SnippetTokenType;
-  value: string;
-};
-
-export type SnippetOwnProps = {
-  snippet: string;
-  title?: string;
-  children?: ReactNode;
-};
-
-export type SnippetProps<T extends ElementType = "div"> = TagProps<T, SnippetOwnProps>;
-
-export type SnippetPreviewProps<T extends ElementType = "div"> = TagProps<T>;