@chitrank2050/monoline-ui 0.2.0

package/components/media-frame/media-frame.css

@@ -0,0 +1,86 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-media-frame {
+		--ml-media-frame-caption-x: var(--ml-space-4);
+		--ml-media-frame-caption-bottom: var(--ml-space-4);
+		--ml-media-frame-caption-text: var(--text-2xs);
+
+		background: var(--surface);
+		box-shadow: var(--shadow-xs);
+		isolation: isolate;
+		transform: translate3d(0, 0, 0);
+		transition: none;
+	}
+
+	.ml-media-frame[data-size="sm"] {
+		--ml-media-frame-caption-x: var(--ml-space-3);
+		--ml-media-frame-caption-bottom: var(--ml-space-3);
+		--ml-media-frame-caption-text: var(--text-3xs);
+	}
+
+	.ml-media-frame[data-size="lg"] {
+		--ml-media-frame-caption-x: var(--ml-space-5);
+		--ml-media-frame-caption-bottom: var(--ml-space-5);
+		--ml-media-frame-caption-text: var(--text-xs);
+	}
+
+	.ml-media-frame > img,
+	.ml-media-frame > picture,
+	.ml-media-frame > video,
+	.ml-media-frame > canvas,
+	.ml-media-frame > svg {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	.ml-media-frame > img,
+	.ml-media-frame > picture > img,
+	.ml-media-frame > video {
+		object-fit: cover;
+		object-position: center;
+		transition: none;
+	}
+
+	.ml-media-frame::after {
+		content: "";
+		position: absolute;
+		inset-inline: 0;
+		inset-block-end: 0;
+		block-size: 32%;
+		background: linear-gradient(
+			180deg,
+			transparent 0%,
+			color-mix(in oklch, var(--surface) 34%, transparent) 48%,
+			color-mix(in oklch, var(--surface) 86%, transparent) 100%
+		);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--duration-medium) var(--ease-out);
+	}
+
+	.ml-media-frame:has(.ml-media-frame__caption)::after,
+	.ml-media-frame:has(.ml-media-frame__meta)::after {
+		opacity: 1;
+	}
+
+	.ml-media-frame__caption,
+	.ml-media-frame__meta {
+		position: absolute;
+		inset-inline: 0;
+		inset-block-end: 0;
+		z-index: var(--z-elevated);
+		display: flex;
+		align-items: flex-end;
+		padding-inline: var(--ml-media-frame-caption-x);
+		padding-block-end: var(--ml-media-frame-caption-bottom);
+		color: var(--text-body);
+		font-family: var(--font-mono);
+		font-size: var(--ml-media-frame-caption-text);
+		letter-spacing: var(--tracking-eyebrow);
+		line-height: 1;
+		text-transform: uppercase;
+		opacity: 0.84;
+	}
+}

package/components/meta-row/index.d.ts

@@ -0,0 +1,22 @@
+import * as React$1 from 'react';
+
+interface MetaRowProps extends React$1.ComponentProps<"div"> {
+    strong?: boolean;
+}
+type MetaRowSepProps = React$1.ComponentProps<"span">;
+
+declare function MetaRowRoot({ className, strong, ref, ...props }: MetaRowProps): React.ReactElement;
+
+declare function MetaRowSep({ className, ref, ...props }: MetaRowSepProps): React.ReactElement;
+
+/**
+ * @module MetaRow
+ * Description for MetaRow component.
+ */
+
+declare const MetaRow: typeof MetaRowRoot & {
+    displayName: string;
+    Sep: typeof MetaRowSep;
+};
+
+export { MetaRow, type MetaRowProps, type MetaRowSepProps };

package/components/meta-row/index.js

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

package/components/meta-row/index.js.map

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

package/components/metric/index.d.ts

@@ -0,0 +1,22 @@
+import * as React$1 from 'react';
+
+type MetricTrend = "up" | "down" | "flat";
+type MetricSize = "sm" | "md" | "lg";
+interface MetricProps extends React$1.ComponentProps<"div"> {
+    value: React$1.ReactNode;
+    label: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    trend?: MetricTrend;
+    size?: MetricSize;
+}
+
+declare function MetricRoot({ className, value, label, description, trend, size, ref, ...props }: MetricProps): React.ReactElement;
+
+/**
+ * @module metric
+ * Description for metric component.
+ */
+
+declare const Metric: typeof MetricRoot;
+
+export { Metric, type MetricProps, type MetricSize, type MetricTrend };

package/components/metric/index.js

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

package/components/metric/index.js.map

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

package/components/navbar/index.d.ts

@@ -0,0 +1,78 @@
+import * as React$1 from 'react';
+
+type NavbarSize = "sm" | "md" | "lg";
+type NavbarLayout = "contained" | "extended";
+type NavbarBrandTextStyle = "monoline" | "cursive";
+type NavbarLinkComponentProps = React$1.ComponentProps<"a"> & {
+    href: string;
+};
+interface NavbarLinkItem {
+    href: string;
+    label: React$1.ReactNode;
+    active?: boolean;
+    external?: boolean;
+    rel?: string;
+    target?: React$1.HTMLAttributeAnchorTarget;
+    as?: React$1.ComponentType<NavbarLinkComponentProps>;
+}
+interface NavbarBaseProps extends Omit<React$1.ComponentProps<"header">, "children"> {
+    size?: NavbarSize;
+    layout?: NavbarLayout;
+    brandTextStyle?: NavbarBrandTextStyle;
+    navLabel?: string;
+    linkComponent?: React$1.ComponentType<NavbarLinkComponentProps>;
+    sticky?: boolean;
+    glass?: boolean;
+    progress?: React$1.ReactNode;
+}
+type NavbarProps = (NavbarBaseProps & {
+    brand: React$1.ReactNode;
+    links?: NavbarLinkItem[];
+    actions?: React$1.ReactNode;
+    children?: undefined;
+}) | (NavbarBaseProps & {
+    brand?: React$1.ReactNode;
+    links?: NavbarLinkItem[];
+    actions?: React$1.ReactNode;
+    children: React$1.ReactNode;
+});
+interface NavbarBrandProps extends React$1.ComponentProps<"a"> {
+    asChild?: boolean;
+    mark?: React$1.ReactNode;
+    textStyle?: NavbarBrandTextStyle;
+    children: React$1.ReactNode;
+}
+interface NavbarLinkProps extends React$1.ComponentProps<"a"> {
+    asChild?: boolean;
+    active?: boolean;
+    external?: boolean;
+}
+interface NavbarNavProps extends React$1.ComponentProps<"nav"> {
+    label?: string;
+}
+type NavbarActionsProps = React$1.ComponentProps<"div">;
+
+declare function NavbarActions({ className, ref, ...props }: NavbarActionsProps): React.ReactElement;
+
+declare function NavbarBrand({ asChild, className, children, mark, ref, textStyle, ...props }: NavbarBrandProps): React.ReactElement;
+
+declare function NavbarLink({ asChild, active, external, className, children, ref, ...props }: NavbarLinkProps): React.ReactElement;
+
+declare function NavbarNav({ label, className, ref, ...props }: NavbarNavProps): React.ReactElement;
+
+declare function NavbarRoot({ size, layout, brand, links, actions, children, brandTextStyle, navLabel, linkComponent, sticky, glass, progress, className, ref, ...props }: NavbarProps): React.ReactElement;
+
+/**
+ * @module Navbar
+ * Description for Navbar component.
+ */
+
+declare const Navbar: typeof NavbarRoot & {
+    displayName: string;
+    Actions: typeof NavbarActions;
+    Brand: typeof NavbarBrand;
+    Link: typeof NavbarLink;
+    Nav: typeof NavbarNav;
+};
+
+export { Navbar, type NavbarActionsProps, type NavbarBrandProps, type NavbarBrandTextStyle, type NavbarLayout, type NavbarLinkItem, type NavbarLinkProps, type NavbarNavProps, type NavbarProps, type NavbarSize };

package/components/navbar/index.js

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

package/components/navbar/index.js.map

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

package/components/navbar/navbar.css

@@ -0,0 +1,245 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-navbar {
+		--ml-navbar-height: var(--ml-space-14);
+		--ml-navbar-container-max: 80rem;
+		--ml-navbar-x: var(--ml-footer-x-md);
+		--ml-navbar-x-tablet: var(--ml-footer-x-md-tablet);
+		--ml-navbar-x-desktop: var(--ml-footer-x-md-desktop);
+		--ml-navbar-gap: var(--ml-space-4);
+		--ml-navbar-brand-gap: var(--ml-space-1-5);
+		--ml-navbar-brand-mark-size: var(--ml-space-5);
+		--ml-navbar-brand-text: var(--text-base);
+		--ml-navbar-link-gap: var(--ml-space-8);
+		--ml-navbar-link-text: var(--text-sm);
+		--ml-navbar-action-gap: var(--ml-space-3);
+
+		width: 100%;
+		border-block-end: var(--border-thin) solid var(--border);
+		background: var(--background);
+		color: var(--text-body);
+	}
+
+	.ml-navbar--sticky {
+		position: sticky;
+		top: 0;
+		z-index: var(--z-sticky);
+	}
+
+	.ml-navbar--glass {
+		background: color-mix(in oklch, var(--background) 92%, transparent);
+		-webkit-backdrop-filter: blur(var(--blur-md));
+		backdrop-filter: blur(var(--blur-md));
+	}
+
+	.ml-navbar[data-size="sm"] {
+		--ml-navbar-container-max: 64rem;
+		--ml-navbar-height: var(--ml-space-12);
+		--ml-navbar-x: var(--ml-footer-x-sm);
+		--ml-navbar-x-tablet: var(--ml-footer-x-sm-tablet);
+		--ml-navbar-x-desktop: var(--ml-footer-x-sm-desktop);
+		--ml-navbar-brand-mark-size: var(--ml-space-4);
+		--ml-navbar-brand-text: var(--text-sm);
+		--ml-navbar-link-gap: var(--ml-space-6);
+		--ml-navbar-link-text: var(--text-xs);
+	}
+
+	.ml-navbar[data-size="lg"] {
+		--ml-navbar-container-max: 90rem;
+		--ml-navbar-height: var(--ml-space-16);
+		--ml-navbar-x: var(--ml-footer-x-lg);
+		--ml-navbar-x-tablet: var(--ml-footer-x-lg-tablet);
+		--ml-navbar-x-desktop: var(--ml-footer-x-lg-desktop);
+		--ml-navbar-brand-mark-size: var(--ml-space-6);
+		--ml-navbar-brand-text: var(--text-lg);
+		--ml-navbar-link-gap: var(--ml-space-10);
+		--ml-navbar-link-text: var(--text-base);
+	}
+
+	.ml-navbar__container {
+		display: grid;
+		min-height: var(--ml-navbar-height);
+		width: 100%;
+		max-width: var(--ml-navbar-container-max);
+		align-items: center;
+		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+		gap: var(--ml-navbar-gap);
+		margin-inline: auto;
+		padding-inline: var(--ml-navbar-x);
+	}
+
+	.ml-navbar[data-layout="extended"] .ml-navbar__container {
+		max-width: none;
+	}
+
+	@media (min-width: 40rem) {
+		.ml-navbar__container {
+			padding-inline: var(--ml-navbar-x-tablet);
+		}
+	}
+
+	@media (min-width: 64rem) {
+		.ml-navbar__container {
+			padding-inline: var(--ml-navbar-x-desktop);
+		}
+	}
+
+	.ml-navbar__brand {
+		display: inline-flex;
+		min-width: 0;
+		flex: 0 0 auto;
+		grid-column: 1;
+		align-items: center;
+		gap: var(--ml-navbar-brand-gap);
+		color: var(--text);
+		text-decoration: none;
+		transition:
+			color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-navbar__brand:hover {
+		color: var(--text-secondary);
+	}
+
+	.ml-navbar__brand:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+
+	.ml-navbar__brand-mark {
+		display: inline-grid;
+		inline-size: var(--ml-navbar-brand-mark-size);
+		block-size: var(--ml-navbar-brand-mark-size);
+		flex: 0 0 auto;
+		place-items: center;
+		overflow: hidden;
+		border-radius: var(--radius-pill);
+		color: var(--text-muted);
+	}
+
+	.ml-navbar__brand-mark > span:empty {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+		border-radius: inherit;
+		background: currentcolor;
+	}
+
+	.ml-navbar__brand-label {
+		min-width: 0;
+		overflow: hidden;
+		font-family: var(--font-script);
+		font-size: var(--ml-navbar-brand-text);
+		font-weight: 800;
+		letter-spacing: 0;
+		line-height: 1;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		transition: color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-navbar__brand[data-text-style="monoline"] .ml-navbar__brand-label {
+		font-family: var(--font-mono);
+		font-weight: 800;
+		letter-spacing: var(--tracking-display);
+	}
+
+	.ml-navbar__brand[data-text-style="cursive"] .ml-navbar__brand-label {
+		font-family: var(--font-script);
+		font-weight: 800;
+		letter-spacing: 0;
+	}
+
+	.ml-navbar__brand:hover .ml-navbar__brand-label {
+		color: var(--text-secondary);
+	}
+
+	.ml-navbar__nav {
+		display: inline-flex;
+		min-width: 0;
+		grid-column: 2;
+		block-size: var(--ml-navbar-height);
+		align-items: center;
+		justify-content: center;
+		gap: var(--ml-navbar-link-gap);
+	}
+
+	.ml-navbar__link {
+		position: relative;
+		display: inline-flex;
+		block-size: 100%;
+		align-items: center;
+		gap: var(--ml-space-1);
+		color: var(--text-secondary);
+		font-size: var(--ml-navbar-link-text);
+		font-weight: 650;
+		line-height: 1;
+		text-decoration: none;
+		transition:
+			color var(--duration-micro) var(--ease-out),
+			background-color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-navbar__link::after {
+		position: absolute;
+		right: 0;
+		bottom: var(--ml-space-2);
+		left: 0;
+		height: var(--border-medium);
+		background: var(--accent);
+		content: "";
+		transform: scaleX(0);
+		transform-origin: left;
+		opacity: 0;
+		transition:
+			transform var(--duration-micro) var(--ease-out),
+			opacity var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-navbar__link[data-active="true"]::after {
+		transform: scaleX(1);
+		opacity: 1;
+	}
+
+	.ml-navbar__link[data-active="true"]:hover::after {
+		transform: scaleX(1);
+		opacity: 1;
+	}
+
+	.ml-navbar__link:hover,
+	.ml-navbar__link[data-active="true"] {
+		color: var(--primary);
+	}
+
+	.ml-navbar__link:active {
+		color: color-mix(in oklch, var(--primary) 82%, var(--text-muted));
+	}
+
+	.ml-navbar__link:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+
+	.ml-navbar__link-arrow {
+		color: var(--text-muted);
+		transition:
+			color var(--duration-micro) var(--ease-out),
+			opacity var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-navbar__link:hover .ml-navbar__link-arrow {
+		color: var(--primary);
+	}
+
+	.ml-navbar__actions {
+		display: inline-flex;
+		flex: 0 0 auto;
+		grid-column: 3;
+		align-items: center;
+		justify-content: flex-end;
+		gap: var(--ml-navbar-action-gap);
+	}
+}

package/components/progress/index.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from 'react';
+
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends Omit<React$1.ComponentProps<"div">, "children"> {
+    value?: number | null;
+    max?: number;
+    size?: ProgressSize;
+    followScroll?: boolean;
+}
+
+declare function ProgressRoot({ className, value, max, size, followScroll, ref, ...props }: ProgressProps): React.ReactElement;
+
+/**
+ * @module progress
+ * Description for progress component.
+ */
+
+declare const Progress: typeof ProgressRoot;
+
+export { Progress, type ProgressProps, type ProgressSize };

package/components/progress/index.js

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

package/components/progress/index.js.map

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

package/components/progress/progress.css

@@ -0,0 +1,31 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-progress {
+		position: relative;
+		inline-size: 100%;
+		overflow: hidden;
+		background: color-mix(in oklch, var(--border) 78%, transparent);
+	}
+
+	.ml-progress[data-size="sm"],
+	.ml-progress[data-size="md"],
+	.ml-progress[data-size="lg"] {
+		border-radius: var(--radius-pill);
+	}
+
+	.ml-progress__indicator {
+		display: block;
+		block-size: 100%;
+		inline-size: 100%;
+		border-radius: inherit;
+		background: var(--accent);
+		transform: scaleX(0.33);
+		transform-origin: left center;
+		transition: transform var(--duration-short) var(--ease-out-expo);
+	}
+
+	.ml-progress[data-follow-scroll] .ml-progress__indicator {
+		transition: none;
+	}
+}

package/components/pull-quote/index.d.ts

@@ -0,0 +1,18 @@
+import * as React$1 from 'react';
+
+interface PullQuoteProps extends React$1.ComponentProps<"figure"> {
+    attribution?: React$1.ReactNode;
+}
+
+declare function PullQuoteRoot({ className, attribution, children, ref, ...props }: PullQuoteProps): React.ReactElement;
+
+/**
+ * @module PullQuote
+ * Description for PullQuote component.
+ */
+
+declare const PullQuote: typeof PullQuoteRoot & {
+    displayName: string;
+};
+
+export { PullQuote, type PullQuoteProps };

package/components/pull-quote/index.js

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

package/components/pull-quote/index.js.map

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

package/components/rail/index.d.ts

@@ -0,0 +1,28 @@
+import * as React$1 from 'react';
+
+interface RailProps extends Omit<React$1.ComponentProps<"div">, "title"> {
+    title?: React$1.ReactNode;
+}
+interface RailItemProps extends React$1.ComponentProps<"li"> {
+    active?: boolean;
+}
+type RailCountProps = React$1.ComponentProps<"span">;
+
+declare function RailCount({ className, ref, ...props }: RailCountProps): React.ReactElement;
+
+declare function RailItem({ className, active, children, ref, ...props }: RailItemProps): React.ReactElement;
+
+declare function RailRoot({ className, title, children, ref, ...props }: RailProps): React.ReactElement;
+
+/**
+ * @module Rail
+ * Description for Rail component.
+ */
+
+declare const Rail: typeof RailRoot & {
+    displayName: string;
+    Item: typeof RailItem;
+    Count: typeof RailCount;
+};
+
+export { Rail, type RailCountProps, type RailItemProps, type RailProps };

package/components/rail/index.js

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

package/components/rail/index.js.map

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