@chitrank2050/monoline-ui 0.2.0

package/components/button/button.css

@@ -0,0 +1,238 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	/* --- Package component interaction primitives --- */
+	.ml-button-icon {
+		display: inline-grid;
+		flex: 0 0 auto;
+		inline-size: 1em;
+		block-size: 1em;
+		place-items: center;
+		overflow: visible;
+		line-height: 1;
+		transition:
+			inline-size var(--duration-fast) var(--ease-out),
+			margin var(--duration-fast) var(--ease-out),
+			opacity var(--duration-micro) var(--ease-out),
+			transform var(--duration-fast) var(--ease-out);
+	}
+
+	.ml-button-icon__glyph {
+		display: inline-block;
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+		transition:
+			opacity var(--duration-micro) var(--ease-out),
+			transform var(--duration-fast) var(--ease-out);
+	}
+
+	.ml-button-icon__glyph > svg,
+	.ml-button-icon__glyph > img {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	.ml-button-icon[data-reveal="true"] {
+		inline-size: 0;
+		overflow: hidden;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.ml-button-icon[data-reveal="true"][data-side="right"],
+	.ml-button-icon[data-reveal="true"]:not([data-side="left"]) {
+		margin-inline-start: calc(-1 * var(--ml-btn-gap, var(--ml-space-2)));
+	}
+
+	.ml-button-icon[data-reveal="true"][data-side="left"] {
+		margin-inline-end: calc(-1 * var(--ml-btn-gap, var(--ml-space-2)));
+	}
+
+	.ml-button-icon[data-reveal="true"] .ml-button-icon__glyph {
+		opacity: 0;
+		transform: translate3d(-0.25em, 0, 0);
+	}
+
+	.ml-button-icon[data-reveal="true"][data-side="left"] .ml-button-icon__glyph {
+		transform: translate3d(0.25em, 0, 0);
+	}
+
+	.group\/btn {
+		--ml-btn-gap: var(--ml-space-2);
+		cursor: pointer;
+		text-decoration: none;
+	}
+
+	.group\/btn[data-size="sm"] {
+		--ml-btn-gap: var(--ml-space-1-5);
+	}
+
+	.ml-button-spinner {
+		display: inline-block;
+		flex: 0 0 auto;
+		border: var(--border-thin) solid currentcolor;
+		border-block-start-color: transparent;
+		border-radius: var(--radius-pill);
+		animation: spin 650ms linear infinite;
+	}
+
+	/* Button variant colours - kept in plain CSS (not Tailwind @layer utilities)
+	   so they always win and always reference live CSS custom properties */
+	.ml-btn--primary {
+		border-color: var(--primary, currentColor);
+		background: var(--primary, currentColor);
+		color: var(--primary-foreground, canvas);
+	}
+	.ml-btn--primary:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):hover {
+		background: var(--btn-primary-hover, currentColor);
+	}
+	.ml-btn--primary:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):active {
+		border-color: color-mix(
+			in oklch,
+			var(--btn-primary-hover, currentColor) 88%,
+			var(--primary-foreground, canvas)
+		);
+		background: color-mix(
+			in oklch,
+			var(--btn-primary-hover, currentColor) 88%,
+			var(--primary-foreground, canvas)
+		);
+	}
+	.ml-btn--primary[data-loading="true"] {
+		border-color: color-mix(
+			in oklch,
+			var(--primary, currentColor) 92%,
+			var(--background, canvas)
+		);
+		background: color-mix(
+			in oklch,
+			var(--primary, currentColor) 92%,
+			var(--background, canvas)
+		);
+		color: color-mix(
+			in oklch,
+			var(--primary-foreground, canvas) 88%,
+			var(--primary, currentColor)
+		);
+	}
+
+	.ml-btn--secondary {
+		border-color: var(--border-strong, currentColor);
+		background: var(--button, rgba(0, 0, 0, 0.05));
+		color: var(--primary, currentColor);
+	}
+	.ml-btn--secondary:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):hover {
+		border-color: color-mix(
+			in oklch,
+			var(--primary, currentColor) 35%,
+			transparent
+		);
+		background: var(--button-hover, rgba(0, 0, 0, 0.08));
+	}
+	.ml-btn--secondary:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):active {
+		border-color: color-mix(
+			in oklch,
+			var(--primary, currentColor) 48%,
+			transparent
+		);
+		background: color-mix(
+			in oklch,
+			var(--button-hover, rgba(0, 0, 0, 0.08)) 82%,
+			var(--primary, currentColor)
+		);
+	}
+	.ml-btn--secondary[data-loading="true"] {
+		border-color: color-mix(
+			in oklch,
+			var(--border-strong, currentColor) 85%,
+			var(--primary, currentColor)
+		);
+		background: color-mix(
+			in oklch,
+			var(--button, rgba(0, 0, 0, 0.05)) 86%,
+			var(--button-hover, rgba(0, 0, 0, 0.08))
+		);
+		color: color-mix(
+			in oklch,
+			var(--primary, currentColor) 76%,
+			var(--text-muted, currentColor)
+		);
+	}
+
+	.ml-btn--ghost {
+		border-color: transparent;
+		background: transparent;
+		color: var(--text-body, currentColor);
+	}
+	.ml-btn--ghost:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):hover {
+		background: var(--button-hover, rgba(0, 0, 0, 0.08));
+		color: var(--primary, currentColor);
+	}
+	.ml-btn--ghost:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):active {
+		background: color-mix(
+			in oklch,
+			var(--button-hover, rgba(0, 0, 0, 0.08)) 82%,
+			var(--primary, currentColor)
+		);
+		color: var(--primary, currentColor);
+	}
+	.ml-btn--ghost[data-loading="true"] {
+		border-color: transparent;
+		background: color-mix(
+			in oklch,
+			var(--button-hover, rgba(0, 0, 0, 0.08)) 42%,
+			transparent
+		);
+		color: color-mix(
+			in oklch,
+			var(--text-body, currentColor) 72%,
+			var(--text-muted, currentColor)
+		);
+	}
+
+	.ml-btn--primary[data-disabled="true"],
+	.ml-btn--secondary[data-disabled="true"],
+	.ml-btn--ghost[data-disabled="true"] {
+		border-color: var(--border);
+		background: color-mix(in oklch, var(--button) 55%, transparent);
+		color: var(--text-muted);
+		opacity: 0.58;
+	}
+
+	.ml-btn--ghost[data-disabled="true"] {
+		background: transparent;
+	}
+
+	.group\/btn:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):hover
+		.ml-button-icon[data-reveal="true"] {
+		inline-size: 1em;
+		overflow: visible;
+		opacity: 1;
+		margin: 0;
+		transform: translate3d(0, 0, 0);
+	}
+
+	.group\/btn:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):hover
+		.ml-button-icon[data-reveal="true"]
+		.ml-button-icon__glyph {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}

package/components/button/index.d.ts

@@ -0,0 +1,36 @@
+import * as React$1 from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+type ButtonIconSide = "left" | "right";
+interface ButtonProps extends React$1.ComponentProps<"button"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: boolean;
+    pill?: boolean;
+    loading?: boolean;
+    asChild?: boolean;
+}
+interface ButtonIconProps extends React$1.ComponentProps<"span"> {
+    side?: ButtonIconSide;
+    reveal?: boolean;
+}
+type ButtonArrowProps = Omit<ButtonIconProps, "children">;
+
+declare function ButtonIcon({ children, className, side, reveal, ref, ...props }: ButtonIconProps): React.ReactElement;
+declare function ButtonArrow({ reveal, ...props }: ButtonArrowProps): React.ReactElement;
+
+declare function ButtonRoot({ className, children, variant, size, icon, pill, loading, asChild, disabled, type, ref, ...props }: ButtonProps): React.ReactElement;
+
+/**
+ * @module Button
+ * Description for Button component.
+ */
+
+declare const Button: typeof ButtonRoot & {
+    displayName: string;
+    Arrow: typeof ButtonArrow;
+    Icon: typeof ButtonIcon;
+};
+
+export { Button, type ButtonArrowProps, type ButtonIconProps, type ButtonIconSide, type ButtonProps, type ButtonSize, type ButtonVariant };

package/components/button/index.js

@@ -0,0 +1,2 @@
+export{a as Button}from'../../chunk-JBOP2AJB.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/button/index.js.map

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

package/components/callout/callout.css

@@ -0,0 +1,20 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-callout {
+		background: var(--surface);
+		border-color: var(--border);
+	}
+
+	.ml-callout--note {
+		border-left-color: var(--text-muted);
+	}
+
+	.ml-callout--tip {
+		border-left-color: var(--callout-tip-accent, var(--accent));
+	}
+
+	.ml-callout--warn {
+		border-left-color: oklch(0.7 0.16 80);
+	}
+}

package/components/callout/index.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from 'react';
+
+type CalloutVariant = "note" | "tip" | "warn";
+interface CalloutProps extends React$1.ComponentProps<"aside"> {
+    variant?: CalloutVariant;
+    label?: React$1.ReactNode;
+}
+
+declare function CalloutRoot({ className, variant, label, children, ref, ...props }: CalloutProps): React.ReactElement;
+
+/**
+ * @module Callout
+ * Description for Callout component.
+ */
+
+declare const Callout: typeof CalloutRoot & {
+    displayName: string;
+};
+
+export { Callout, type CalloutProps, type CalloutVariant };

package/components/callout/index.js

@@ -0,0 +1,2 @@
+export{a as Callout}from'../../chunk-TSOHITZ7.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/callout/index.js.map

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

package/components/card/card.css

@@ -0,0 +1,166 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-card {
+		--ml-card-lift: calc(var(--ml-space-1) * -0.5);
+		--ml-card-arrow-offset: calc(var(--ml-space-1) * -0.5);
+		--ml-card-content-rest-opacity: 0.82;
+		--ml-card-content-hover-opacity: 1;
+
+		border-color: var(--border);
+		background: var(--surface);
+		color: var(--text-body);
+		box-shadow: var(--shadow-xs);
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			border-color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-short) var(--ease-out),
+			transform var(--duration-medium) var(--ease-out);
+		backface-visibility: hidden;
+		isolation: isolate;
+		transform: translate3d(0, 0, 0);
+	}
+
+	button.ml-card {
+		inline-size: 100%;
+		padding: 0;
+		text-align: inherit;
+		font: inherit;
+	}
+
+	.ml-card--hover:hover {
+		border-color: var(--border-strong);
+		background: var(--surface);
+		box-shadow: var(--shadow-md);
+		transform: translate3d(0, var(--ml-card-lift), 0);
+	}
+
+	.ml-card--interactive:hover {
+		border-color: var(--border-strong);
+		background: var(--surface);
+		box-shadow: var(--shadow-md);
+		transform: translate3d(0, var(--ml-card-lift), 0);
+	}
+
+	:root:not([data-theme="light"]) .ml-card--hover:hover,
+	[data-theme="dark"] .ml-card--hover:hover {
+		border-color: var(--border-strong);
+		background: var(--surface);
+		box-shadow: var(--shadow-md);
+	}
+
+	:root:not([data-theme="light"]) .ml-card--interactive:hover,
+	[data-theme="dark"] .ml-card--interactive:hover {
+		border-color: var(--border-strong);
+		background: var(--surface);
+		box-shadow: var(--shadow-md);
+	}
+
+	.ml-card__image > * {
+		transition: opacity var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-card__image > img,
+	.ml-card__image > picture,
+	.ml-card__image > video,
+	.ml-card__image > canvas,
+	.ml-card__image > svg {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	.ml-card__image > img,
+	.ml-card__image > picture > img,
+	.ml-card__image > video {
+		object-fit: cover;
+		object-position: center;
+		filter: grayscale(1) brightness(0.92);
+		transition: filter var(--duration-medium) var(--ease-out);
+	}
+
+	.ml-card__image::after {
+		content: "";
+		position: absolute;
+		inset-inline: 0;
+		inset-block-end: 0;
+		block-size: 28%;
+		background: linear-gradient(
+			180deg,
+			transparent 0%,
+			color-mix(in oklch, var(--surface) 36%, transparent) 48%,
+			color-mix(in oklch, var(--surface) 86%, transparent) 100%
+		);
+		opacity: 0.72;
+		pointer-events: none;
+		transition: opacity var(--duration-medium) var(--ease-out);
+	}
+
+	.ml-card__image-caption {
+		min-block-size: 16%;
+		opacity: var(--ml-card-content-rest-opacity);
+		transition: opacity var(--duration-medium) var(--ease-out);
+	}
+
+	.ml-card__image:has(.ml-card__image-caption)::after,
+	.ml-card__image[data-placeholder="true"]::after {
+		opacity: 1;
+	}
+
+	.ml-card__image:has(.ml-card__image-caption) .ml-card__image-caption {
+		opacity: var(--ml-card-content-rest-opacity);
+	}
+
+	.ml-card--hover:hover .ml-card__image > * {
+		opacity: 1;
+	}
+
+	.ml-card--hover:hover .ml-card__image > img,
+	.ml-card--hover:hover .ml-card__image > picture > img,
+	.ml-card--hover:hover .ml-card__image > video {
+		filter: grayscale(0) brightness(1);
+	}
+
+	.ml-card--hover:hover .ml-card__image::after {
+		opacity: 0.82;
+	}
+
+	.ml-card--hover:hover .ml-card__image-caption {
+		opacity: var(--ml-card-content-hover-opacity);
+	}
+
+	.ml-card__footer {
+		background: var(--surface);
+		transition:
+			border-color var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-card__body {
+		background: var(--surface);
+		transition: color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-card__tag-list {
+		flex: 1 1 auto;
+	}
+
+	.ml-card__tag-overflow {
+		white-space: nowrap;
+	}
+
+	.ml-card__arrow {
+		display: inline-block;
+		opacity: 0.72;
+		transform: translate3d(var(--ml-card-arrow-offset), 0, 0);
+		transition:
+			opacity var(--duration-micro) var(--ease-out),
+			transform var(--duration-medium) var(--ease-out);
+	}
+
+	.ml-card--hover:hover .ml-card__arrow,
+	.ml-card--interactive:hover .ml-card__arrow {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}

package/components/card/index.d.ts

@@ -0,0 +1,112 @@
+import * as React$1 from 'react';
+
+type CardSize = "sm" | "md" | "lg";
+type CardImageRatio = "square" | "portrait" | "landscape" | "wide";
+type CardDescriptionLines = 2 | 3 | 4;
+interface CardBaseProps {
+    size?: CardSize;
+}
+type CardProps = (CardBaseProps & {
+    asChild?: false;
+    href: string;
+    target?: React$1.HTMLAttributeAnchorTarget;
+    rel?: string;
+    download?: React$1.AnchorHTMLAttributes<HTMLAnchorElement>["download"];
+    referrerPolicy?: React$1.HTMLAttributeReferrerPolicy;
+    onClick?: React$1.MouseEventHandler<HTMLAnchorElement>;
+    ref?: React$1.Ref<HTMLAnchorElement>;
+} & Omit<React$1.ComponentPropsWithRef<"a">, "size" | "onClick" | "ref">) | (CardBaseProps & {
+    asChild: true;
+    href?: never;
+    target?: never;
+    rel?: never;
+    download?: never;
+    referrerPolicy?: never;
+    onClick?: never;
+    ref?: React$1.Ref<HTMLElement>;
+} & Omit<React$1.ComponentPropsWithRef<"div">, "size" | "onClick" | "ref">) | (CardBaseProps & {
+    asChild?: false;
+    href?: never;
+    target?: never;
+    rel?: never;
+    download?: never;
+    referrerPolicy?: never;
+    onClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    ref?: React$1.Ref<HTMLButtonElement>;
+} & Omit<React$1.ComponentPropsWithRef<"button">, "size" | "onClick" | "ref">) | (CardBaseProps & {
+    asChild?: false;
+    href?: never;
+    target?: never;
+    rel?: never;
+    download?: never;
+    referrerPolicy?: never;
+    onClick?: never;
+    ref?: React$1.Ref<HTMLDivElement>;
+} & Omit<React$1.ComponentPropsWithRef<"div">, "size" | "onClick" | "ref">);
+type CardSlotProps = React$1.ComponentProps<"div">;
+interface CardImageProps extends React$1.ComponentProps<"div"> {
+    ratio?: CardImageRatio;
+    placeholder?: boolean;
+}
+type CardHeadingProps = React$1.ComponentProps<"h3">;
+interface CardDescriptionProps extends React$1.ComponentProps<"p"> {
+    lines?: CardDescriptionLines;
+}
+type CardTextProps = React$1.ComponentProps<"p">;
+type CardActionProps = React$1.ComponentProps<"span">;
+interface CardTagListProps extends React$1.ComponentProps<"div"> {
+    totalCount?: number;
+    overflowFormatter?: (count: number) => React$1.ReactNode;
+}
+interface CardArrowProps extends React$1.ComponentProps<"span"> {
+    children?: React$1.ReactNode;
+}
+
+declare function CardAction({ className, ref, ...props }: CardActionProps): React.ReactElement;
+
+declare function CardArrow({ children, className, ref, ...props }: CardArrowProps): React.ReactElement;
+
+declare function CardBody({ className, ref, ...props }: CardSlotProps): React.ReactElement;
+
+declare function CardDescription({ className, lines, ref, ...props }: CardDescriptionProps): React.ReactElement;
+
+declare function CardEyebrow({ className, ref, ...props }: CardTextProps): React.ReactElement;
+
+declare function CardFooter({ className, ref, ...props }: CardSlotProps): React.ReactElement;
+
+declare function CardHeader({ className, ref, ...props }: CardSlotProps): React.ReactElement;
+
+declare function CardImage({ className, placeholder, ratio, ref, ...props }: CardImageProps): React.ReactElement;
+
+declare function CardImageCaption({ className, ref, ...props }: CardSlotProps): React.ReactElement;
+
+declare function CardMeta({ className, ref, ...props }: CardSlotProps): React.ReactElement;
+
+declare function CardRoot(props: CardProps): React.ReactElement;
+
+declare function CardTagList({ children, className, totalCount, overflowFormatter, ref, ...props }: CardTagListProps): React$1.ReactElement;
+
+declare function CardTitle({ className, ref, ...props }: CardHeadingProps): React.ReactElement;
+
+/**
+ * @module Card
+ * Description for Card component.
+ */
+
+declare const Card: typeof CardRoot & {
+    displayName: string;
+    Action: typeof CardAction;
+    Image: typeof CardImage;
+    ImageCaption: typeof CardImageCaption;
+    Body: typeof CardBody;
+    Header: typeof CardHeader;
+    Meta: typeof CardMeta;
+    Title: typeof CardTitle;
+    Eyebrow: typeof CardEyebrow;
+    Description: typeof CardDescription;
+    Footer: typeof CardFooter;
+    TagList: typeof CardTagList;
+    Arrow: typeof CardArrow;
+};
+
+export { Card, CardAction, type CardActionProps, type CardArrowProps, CardBody, CardDescription, type CardDescriptionLines, type CardDescriptionProps, CardEyebrow, CardFooter, CardHeader, type CardHeadingProps, CardImage, CardImageCaption, type CardImageProps, type CardImageRatio, CardMeta, type CardProps, type CardSize, type CardSlotProps, CardTagList, type CardTagListProps, type CardTextProps, CardTitle };

package/components/card/index.js

@@ -0,0 +1,2 @@
+export{l as Card,a as CardAction,b as CardBody,c as CardDescription,d as CardEyebrow,e as CardFooter,f as CardHeader,g as CardImage,h as CardImageCaption,i as CardMeta,j as CardTagList,k as CardTitle}from'../../chunk-JCKPCV2H.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/card/index.js.map

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

package/components/code-block/code-block.css

@@ -0,0 +1,23 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-code-block {
+		border-color: var(--border);
+	}
+
+	.ml-code-block__header {
+		border-color: var(--border);
+		background: var(--surface-3);
+	}
+
+	.ml-code-block__pre {
+		background: var(--surface-code, var(--surface-2));
+		color: var(--code-text, var(--text-primary));
+	}
+
+	.ml-code-block pre {
+		border: 0 !important;
+		border-radius: 0 !important;
+		margin: 0 !important;
+	}
+}

package/components/code-block/index.d.ts

@@ -0,0 +1,21 @@
+import * as React$1 from 'react';
+
+interface CodeBlockProps extends Omit<React$1.ComponentProps<"figure">, "children"> {
+    filename?: string;
+    code?: string;
+    language?: string;
+    children?: React$1.ReactNode;
+}
+
+declare function CodeBlockRoot({ filename, code, language, children, className, ref, ...props }: CodeBlockProps): React.ReactElement;
+
+/**
+ * @module CodeBlock
+ * Description for CodeBlock component.
+ */
+
+declare const CodeBlock: typeof CodeBlockRoot & {
+    displayName: string;
+};
+
+export { CodeBlock, type CodeBlockProps };

package/components/code-block/index.js

@@ -0,0 +1,2 @@
+export{a as CodeBlock}from'../../chunk-A2LXX23X.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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