margo-ui 1.4.0 → 1.5.0

package/README.md

@@ -1,6 +1,6 @@
 # margo-ui
 
-A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.
+React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.
 
 Package: [npmjs.com/package/margo-ui](https://www.npmjs.com/package/margo-ui)
 

package/package.json

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

package/src/components/button/button.tsx

@@ -77,7 +77,7 @@ Button.IconLabel = ({
   className,
 }: ButtonIconLabelProps) => (
   <span
-    style={{ "--button-gap": gap } as CSSProperties}
+    style={{ "--margo-button-gap": gap } as CSSProperties}
     className={cn(
       buttonGridClassName,
       side === "start" && "[direction:rtl]",

package/src/components/button/style.ts

@@ -20,13 +20,13 @@ export const buttonLabelClassName =
 export const buttonGridClassName =
   "grid items-center gap-0 transition-[grid-template-columns,gap] duration-[180ms] ease-in-out";
 
-export const buttonGridForwardClassName = `grid-cols-[1rem_0fr] group-hover/button:grid-cols-[1rem_1fr] group-hover/button:gap-(--button-gap)
-group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--button-gap)
-group-data-[margo-open=true]/button:grid-cols-[1rem_1fr] group-data-[margo-open=true]/button:gap-(--button-gap)`;
+export const buttonGridForwardClassName = `grid-cols-[1rem_0fr] group-hover/button:grid-cols-[1rem_1fr] group-hover/button:gap-(--margo-button-gap)
+group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--margo-button-gap)
+group-data-[margo-open=true]/button:grid-cols-[1rem_1fr] group-data-[margo-open=true]/button:gap-(--margo-button-gap)`;
 
-export const buttonGridReverseClassName = `grid-cols-[auto_0rem] group-hover/button:grid-cols-[auto_1rem] group-hover/button:gap-(--button-gap)
-group-focus-visible/button:grid-cols-[auto_1rem] group-focus-visible/button:gap-(--button-gap)
-group-data-[margo-open=true]/button:grid-cols-[auto_1rem] group-data-[margo-open=true]/button:gap-(--button-gap)`;
+export const buttonGridReverseClassName = `grid-cols-[auto_0rem] group-hover/button:grid-cols-[auto_1rem] group-hover/button:gap-(--margo-button-gap)
+group-focus-visible/button:grid-cols-[auto_1rem] group-focus-visible/button:gap-(--margo-button-gap)
+group-data-[margo-open=true]/button:grid-cols-[auto_1rem] group-data-[margo-open=true]/button:gap-(--margo-button-gap)`;
 
 export const buttonSlotClassName = `min-w-0 overflow-hidden opacity-0 transition-opacity duration-[180ms] ease-in
 group-hover/button:opacity-100 group-focus-visible/button:opacity-100 group-data-[margo-open=true]/button:opacity-100`;

package/src/components/code/code.tsx

@@ -0,0 +1,16 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { codeBaseClassName, codeFilledClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { CodeProps } from "./type.js";
+
+export const Code = <T extends ElementType = "code">({ filled = false, className, children, ...rest }: CodeProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "code")}
+    className={cn(codeBaseClassName, filled && codeFilledClassName, className)}
+  >
+    {children}
+  </Tag>
+);

package/src/components/code/style.ts

@@ -0,0 +1,3 @@
+export const codeBaseClassName = "font-mono text-xs text-medium";
+
+export const codeFilledClassName = "rounded-sm bg-neutral/60 px-1 py-0.5 text-on-main/90";

package/src/components/code/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type CodeOwnProps = {
+  filled?: boolean;
+};
+
+export type CodeProps<T extends ElementType = "code"> = TagProps<T, CodeOwnProps>;

package/src/components/spinner/spinner.tsx

@@ -8,9 +8,9 @@ import type { SpinnerProps } from "./type.js";
 
 export const Spinner = <T extends ElementType = "span">({ className, label = "Loading", ...rest }: SpinnerProps<T>) => (
   <Tag
+    aria-label={label}
     {...Tag.forward<T>(rest, "span")}
     role="status"
-    aria-label={label}
     className={cn(spinnerBaseClassName, className)}
   >
     <svg viewBox="0 0 24 24" aria-hidden className={spinnerIconClassName}>

package/src/components/spinner/type.ts

@@ -5,4 +5,4 @@ export type SpinnerOwnProps = {
   label?: string;
 };
 
-export type SpinnerProps<T extends ElementType = "span"> = Omit<TagProps<T, SpinnerOwnProps>, "aria-label">;
+export type SpinnerProps<T extends ElementType = "span"> = TagProps<T, SpinnerOwnProps>;

package/src/components/table/style.ts

@@ -1,4 +1,4 @@
-export const tableWrapperClassName = "w-full overflow-x-auto rounded-lg border-2 border-border";
+export const tableWrapperClassName = "w-full overflow-x-auto overscroll-x-none rounded-lg border-2 border-border";
 
 export const tableBaseClassName = "w-full border-collapse text-xs text-on-main";
 

package/src/components/tooltip/type.ts

@@ -11,7 +11,4 @@ export type TooltipOwnProps = {
   children?: ReactNode;
 };
 
-export type TooltipProps<T extends ElementType = "div"> = Omit<
-  TagProps<T, TooltipOwnProps>,
-  "aria-label"
->;
+export type TooltipProps<T extends ElementType = "div"> = TagProps<T, TooltipOwnProps>;

package/src/index.ts

@@ -3,6 +3,7 @@ export { Button } from "./components/button/button.js";
 export { ButtonMicro } from "./components/button_micro/button_micro.js";
 export { Card } from "./components/card/card.js";
 export { Chip } from "./components/chip/chip.js";
+export { Code } from "./components/code/code.js";
 export { Dialog } from "./components/dialog/dialog.js";
 export { Header } from "./components/header/header.js";
 export { Layer } from "./components/layer/layer.js";
@@ -42,6 +43,7 @@ export type {
 export type { ButtonMicroProps } from "./components/button_micro/type.js";
 export type { CardProps } from "./components/card/type.js";
 export type { ChipProps } from "./components/chip/type.js";
+export type { CodeOwnProps, CodeProps } from "./components/code/type.js";
 export type { DialogBodyProps, DialogFooterProps, DialogProps } from "./components/dialog/type.js";
 export type {
   HeaderLeadingProps,