@chitrank2050/monoline-ui 0.2.0

package/components/rail/rail.css

@@ -0,0 +1,118 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-rail {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-5);
+		width: 100%;
+	}
+
+	/* Title (Eyebrow-style label above the list) */
+	.ml-rail__header {
+		display: flex;
+		align-items: center;
+		min-height: var(--ml-space-9);
+	}
+
+	.ml-rail__title {
+		min-width: 0;
+		overflow: hidden;
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--text-2xs);
+		font-weight: 500;
+		letter-spacing: var(--tracking-meta);
+		line-height: 1;
+		text-overflow: ellipsis;
+		text-transform: uppercase;
+		white-space: nowrap;
+	}
+
+	/* List */
+	.ml-rail__list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-0-5);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	/* Item */
+	.ml-rail__item {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-3);
+		min-height: var(--ml-space-9);
+		width: 100%;
+		cursor: pointer;
+		color: var(--text-secondary);
+		transition: color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-rail__item:hover {
+		color: var(--primary);
+	}
+
+	.ml-rail__item:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+		border-radius: var(--radius-sm);
+	}
+
+	.ml-rail__item[data-active="true"] {
+		color: var(--primary);
+	}
+
+	/* Dot indicator */
+	.ml-rail__dot {
+		width: 0.3125rem;
+		height: 0.3125rem;
+		flex-shrink: 0;
+		border-radius: var(--radius-pill);
+		background: color-mix(in oklch, var(--text-muted) 50%, transparent);
+		transition: background-color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-rail__item[data-active="true"] .ml-rail__dot {
+		background: var(--accent);
+	}
+
+	/* Content wrapper */
+	.ml-rail__content {
+		display: flex;
+		flex: 1;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--ml-space-2);
+		min-width: 0;
+	}
+
+	/* Label */
+	.ml-rail__label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		font-size: var(--text-sm);
+		font-weight: 400;
+		line-height: var(--leading-tight);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		transition: font-weight var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-rail__item[data-active="true"] .ml-rail__label {
+		font-weight: 600;
+	}
+
+	/* Count */
+	.ml-rail__count {
+		flex-shrink: 0;
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--text-xs);
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+	}
+}

package/components/resources-panel/index.d.ts

@@ -0,0 +1,42 @@
+import * as React$1 from 'react';
+
+type ResourcesPanelSize = "sm" | "md" | "lg";
+type ResourcesPanelKind = "live" | "source" | "npm" | "docs" | "changelog" | "figma" | "video" | "paper" | "external";
+type ResourcesPanelLinkComponentProps = React$1.ComponentProps<"a"> & {
+    href: string;
+};
+interface ResourcesPanelItem {
+    kind?: ResourcesPanelKind;
+    label: React$1.ReactNode;
+    href?: string;
+    host?: React$1.ReactNode;
+    badge?: React$1.ReactNode;
+    meta?: React$1.ReactNode;
+    primary?: boolean;
+    icon?: React$1.ReactNode;
+    external?: boolean;
+    rel?: string;
+    target?: React$1.HTMLAttributeAnchorTarget;
+    as?: React$1.ComponentType<ResourcesPanelLinkComponentProps>;
+}
+interface ResourcesPanelProps extends Omit<React$1.ComponentProps<"aside">, "children" | "title"> {
+    size?: ResourcesPanelSize;
+    title?: string;
+    meta?: React$1.ReactNode;
+    items: ResourcesPanelItem[];
+    footer?: React$1.ReactNode;
+    footerLabel?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    linkComponent?: React$1.ComponentType<ResourcesPanelLinkComponentProps>;
+}
+
+declare function ResourcesPanelRoot({ className, size, title, meta, items, footer, footerLabel, children, linkComponent, ref, ...props }: ResourcesPanelProps): React.ReactElement;
+
+/**
+ * @module resources-panel
+ * Description for resources-panel component.
+ */
+
+declare const ResourcesPanel: typeof ResourcesPanelRoot;
+
+export { ResourcesPanel, type ResourcesPanelItem, type ResourcesPanelKind, type ResourcesPanelProps, ResourcesPanelRoot, type ResourcesPanelSize };

package/components/resources-panel/index.js

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

package/components/resources-panel/index.js.map

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

package/components/resources-panel/resources-panel.css

@@ -0,0 +1,396 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-resources-panel {
+		--ml-resources-panel-padding-x: var(--ml-space-4);
+		--ml-resources-panel-row-padding-y: var(--ml-space-3);
+		--ml-resources-panel-gap: var(--ml-space-3);
+		--ml-resources-panel-icon-size: var(--ml-space-7);
+		--ml-resources-panel-label-text: var(--text-sm);
+		--ml-resources-panel-host-text: var(--text-2xs);
+		--ml-resources-panel-radius: var(--radius-xl);
+
+		width: 100%;
+		overflow: hidden;
+		border: var(--border-thin) solid var(--border);
+		border-radius: var(--ml-resources-panel-radius);
+		background: var(--surface);
+		color: var(--text-body);
+		box-shadow: var(--shadow-xs);
+	}
+
+	.ml-resources-panel[data-size="sm"] {
+		--ml-resources-panel-padding-x: var(--ml-space-3);
+		--ml-resources-panel-row-padding-y: var(--ml-space-2);
+		--ml-resources-panel-gap: var(--ml-space-2);
+		--ml-resources-panel-icon-size: var(--ml-space-6);
+		--ml-resources-panel-label-text: var(--text-xs);
+		--ml-resources-panel-host-text: var(--text-3xs);
+		--ml-resources-panel-radius: var(--radius-lg);
+	}
+
+	.ml-resources-panel[data-size="lg"] {
+		--ml-resources-panel-padding-x: var(--ml-space-5);
+		--ml-resources-panel-row-padding-y: var(--ml-space-4);
+		--ml-resources-panel-gap: var(--ml-space-4);
+		--ml-resources-panel-icon-size: var(--ml-space-8);
+		--ml-resources-panel-label-text: var(--text-base);
+		--ml-resources-panel-host-text: var(--text-xs);
+		--ml-resources-panel-radius: var(--radius-2xl);
+	}
+
+	.ml-resources-panel__header,
+	.ml-resources-panel__footer {
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--ml-space-3);
+		padding: var(--ml-space-3) var(--ml-resources-panel-padding-x);
+	}
+
+	.ml-resources-panel__header {
+		border-block-end: var(--border-thin) solid var(--border);
+	}
+
+	.ml-resources-panel__footer {
+		border-block-start: var(--border-thin) solid var(--border);
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--text-3xs);
+		letter-spacing: var(--tracking-meta);
+		text-transform: uppercase;
+	}
+
+	.ml-resources-panel__title,
+	.ml-resources-panel__meta {
+		min-width: 0;
+		overflow: hidden;
+		font-family: var(--font-mono);
+		line-height: 1;
+		text-overflow: ellipsis;
+		text-transform: uppercase;
+		white-space: nowrap;
+	}
+
+	.ml-resources-panel__title {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--ml-space-2);
+		color: var(--text-muted);
+		font-size: var(--text-3xs);
+		font-weight: 600;
+		letter-spacing: var(--tracking-meta);
+	}
+
+	.ml-resources-panel__meta {
+		color: var(--text-muted);
+		font-size: var(--text-3xs);
+		letter-spacing: var(--tracking-normal);
+	}
+
+	.ml-resources-panel__list {
+		display: grid;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.ml-resources-panel__row + .ml-resources-panel__row {
+		border-block-start: var(--border-thin) solid var(--border);
+	}
+
+	.ml-resources-panel__item {
+		display: grid;
+		grid-template-columns:
+			var(--ml-resources-panel-icon-size) minmax(0, 1fr)
+			auto;
+		align-items: center;
+		gap: var(--ml-resources-panel-gap);
+		min-width: 0;
+		padding: var(--ml-resources-panel-row-padding-y)
+			var(--ml-resources-panel-padding-x);
+		color: inherit;
+		text-decoration: none;
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	a.ml-resources-panel__item {
+		cursor: pointer;
+	}
+
+	a.ml-resources-panel__item:hover {
+		background: var(--surface-2);
+	}
+
+	a.ml-resources-panel__item:focus-visible {
+		outline: none;
+		box-shadow: inset var(--focus-ring);
+	}
+
+	.ml-resources-panel__icon {
+		display: inline-grid;
+		inline-size: var(--ml-resources-panel-icon-size);
+		block-size: var(--ml-resources-panel-icon-size);
+		place-items: center;
+		border: var(--border-thin) solid var(--border);
+		border-radius: var(--radius-sm);
+		background: var(--button);
+		color: var(--text-secondary);
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			border-color var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	a.ml-resources-panel__item:hover .ml-resources-panel__icon {
+		border-color: color-mix(in oklch, var(--accent) 72%, var(--border));
+		background: color-mix(in oklch, var(--accent) 15%, transparent);
+		color: var(--accent);
+	}
+
+	.ml-resources-panel__icon-svg {
+		inline-size: 1rem;
+		block-size: 1rem;
+		overflow: visible;
+		fill: none;
+		stroke: currentcolor;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		stroke-width: 1.6;
+	}
+
+	.ml-resources-panel__content {
+		display: grid;
+		min-width: 0;
+		gap: var(--ml-space-1);
+	}
+
+	.ml-resources-panel__label {
+		display: inline-flex;
+		min-width: 0;
+		align-items: center;
+		gap: var(--ml-space-2);
+		color: var(--primary);
+		font-size: var(--ml-resources-panel-label-text);
+		font-weight: 650;
+		line-height: var(--leading-tight);
+	}
+
+	.ml-resources-panel__badge {
+		display: inline-flex;
+		align-items: center;
+		min-block-size: var(--ml-space-4);
+		padding-inline: var(--ml-space-1);
+		border-radius: var(--radius-xs);
+		background: color-mix(in oklch, var(--accent) 15%, transparent);
+		color: var(--accent);
+		font-family: var(--font-mono);
+		font-size: var(--text-3xs);
+		font-weight: 700;
+		letter-spacing: var(--tracking-meta);
+		line-height: 1;
+		text-transform: uppercase;
+	}
+
+	.ml-resources-panel__host {
+		min-width: 0;
+		overflow: hidden;
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--ml-resources-panel-host-text);
+		line-height: var(--leading-tight);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ml-resources-panel__arrow {
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--text-xs);
+		line-height: 1;
+		transition:
+			color var(--duration-micro) var(--ease-out),
+			transform var(--duration-micro) var(--ease-out);
+	}
+
+	a.ml-resources-panel__item:hover .ml-resources-panel__arrow {
+		color: var(--accent);
+		transform: translate3d(0.125rem, -0.125rem, 0);
+	}
+
+	.group\/btn:not(:disabled):not([aria-disabled="true"]):not(
+			[data-disabled="true"]
+		):not([data-loading="true"]):hover
+		.ml-button-icon[data-reveal="true"] {
+		opacity: 1;
+		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);
+	}
+
+	.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);
+	}
+
+	.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/section-head/index.d.ts

@@ -0,0 +1,24 @@
+import * as React$1 from 'react';
+
+type SectionHeadSize = "sm" | "md" | "lg" | "xl";
+type SectionHeadLevel = 1 | 2 | 3;
+interface SectionHeadProps extends Omit<React$1.ComponentProps<"div">, "title"> {
+    as?: "div" | "header";
+    eyebrow?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    subtitle?: React$1.ReactNode;
+    lede?: React$1.ReactNode;
+    level?: SectionHeadLevel;
+    size?: SectionHeadSize;
+}
+
+declare function SectionHeadRoot({ className, size, eyebrow, title, subtitle, lede, level, as, ref, ...props }: SectionHeadProps): React.ReactElement;
+
+/**
+ * @module section-head
+ * Description for section-head component.
+ */
+
+declare const SectionHead: typeof SectionHeadRoot;
+
+export { SectionHead, type SectionHeadLevel, type SectionHeadProps, type SectionHeadSize };

package/components/section-head/index.js

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

package/components/section-head/index.js.map

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

package/components/segmented-control/index.d.ts

@@ -0,0 +1,28 @@
+import * as React$1 from 'react';
+
+type SegmentedControlVariant = "default" | "pill";
+type SegmentedControlSize = "sm" | "md" | "lg";
+interface SegmentedControlOption<T extends string> {
+    value: T;
+    label: string;
+    badge?: number;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<T extends string> extends Omit<React.ComponentProps<"div">, "children" | "onChange"> {
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    variant?: SegmentedControlVariant;
+    size?: SegmentedControlSize;
+}
+
+declare function SegmentedControlRoot<T extends string>({ options, value, onChange, variant, size, className, onKeyDown, ref, role, ...props }: SegmentedControlProps<T>): React$1.ReactElement;
+
+/**
+ * @module segmented-control
+ * Description for segmented-control component.
+ */
+
+declare const SegmentedControl: typeof SegmentedControlRoot;
+
+export { SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, type SegmentedControlSize, type SegmentedControlVariant };

package/components/segmented-control/index.js

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

package/components/segmented-control/index.js.map

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