@chitrank2050/monoline-ui 0.2.0

package/components/command-search/command-search.css

@@ -0,0 +1,217 @@
+@layer components {
+	/* ── Backdrop ── */
+	.ml-command-search__backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: var(--z-modal, 50);
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		padding-top: 7rem;
+		background: color-mix(in oklch, var(--background) 40%, transparent);
+		-webkit-backdrop-filter: blur(6px);
+		backdrop-filter: blur(6px);
+		animation: ml-command-search-fade-in var(--duration-fast, 140ms)
+			var(--ease-out, ease-out) both;
+	}
+
+	@keyframes ml-command-search-fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	/* ── Panel ── */
+	.ml-command-search__panel {
+		display: flex;
+		width: min(37.5rem, calc(100vw - 2rem));
+		flex-direction: column;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-xl, 1rem);
+		background: color-mix(in oklch, var(--surface) 98%, transparent);
+		-webkit-backdrop-filter: blur(24px);
+		backdrop-filter: blur(24px);
+		box-shadow:
+			0 0 0 1px color-mix(in oklch, var(--text) 5%, transparent),
+			0 8px 32px color-mix(in oklch, var(--background) 30%, transparent),
+			0 24px 64px color-mix(in oklch, var(--background) 50%, transparent);
+		overflow: hidden;
+		animation: ml-command-search-slide-in var(--duration-fast, 140ms)
+			var(--ease-out, ease-out) both;
+	}
+
+	@keyframes ml-command-search-slide-in {
+		from {
+			opacity: 0;
+			transform: translateY(-0.5rem) scale(0.97);
+		}
+	}
+
+	/* ── Input row ── */
+	.ml-command-search__input-row {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		border-bottom: 1px solid var(--border);
+		padding: 0.875rem 1rem;
+		transition:
+			border-color var(--duration-fast, 140ms) var(--ease-out, ease-out),
+			box-shadow var(--duration-fast, 140ms) var(--ease-out, ease-out);
+	}
+
+	.ml-command-search__input-row:focus-within {
+		border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
+		box-shadow: inset 0 -1px 0
+			color-mix(in oklch, var(--accent) 40%, var(--border));
+	}
+
+	.ml-command-search__search-icon {
+		color: var(--text-muted);
+		flex-shrink: 0;
+		line-height: 1;
+	}
+
+	.ml-command-search__input {
+		flex: 1;
+		min-width: 0;
+		border: 0;
+		background: transparent;
+		color: var(--text);
+		font-size: 0.9375rem;
+		font-family: var(--font-sans);
+		outline: none;
+		box-shadow: none;
+	}
+
+	.ml-command-search__input:focus,
+	.ml-command-search__input:focus-visible {
+		outline: none !important;
+		box-shadow: none !important;
+	}
+
+	.ml-command-search__input--lg {
+		font-size: 1.0625rem;
+	}
+
+	.ml-command-search__input::placeholder {
+		color: var(--text-muted);
+	}
+
+	.ml-command-search__esc {
+		border: 1px solid var(--border);
+		border-radius: var(--radius-xs, 0.25rem);
+		background: var(--surface);
+		padding: 0.1875rem 0.4375rem;
+		font-family: var(--font-mono);
+		font-size: 0.625rem;
+		font-weight: 700;
+		line-height: 1;
+		color: var(--text-muted);
+		cursor: pointer;
+		flex-shrink: 0;
+		transition: border-color var(--duration-fast, 140ms)
+			var(--ease-out, ease-out);
+	}
+
+	.ml-command-search__esc:hover {
+		border-color: var(--text-muted);
+	}
+
+	/* ── Results list ── */
+	.ml-command-search__list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		max-height: 22rem;
+		overflow-y: auto;
+		padding: var(--ml-space-2, 0.5rem);
+	}
+
+	.ml-command-search__list::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	.ml-command-search__list::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.ml-command-search__list::-webkit-scrollbar-thumb {
+		background: var(--border);
+		border-radius: 999px;
+	}
+
+	/* ── Group ── */
+	.ml-command-search__group {
+		padding-bottom: var(--ml-space-1, 0.25rem);
+	}
+
+	.ml-command-search__group [cmdk-group-heading],
+	.ml-command-search__group-heading {
+		padding: 0.5rem 0.75rem 0.25rem;
+		font-size: 0.625rem;
+		font-weight: 700;
+		font-family: var(--font-mono);
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+		user-select: none;
+	}
+
+	/* ── Item ── */
+	.ml-command-search__item {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		gap: 0.5rem;
+		border: none;
+		border-radius: var(--radius-md, 0.5rem);
+		padding: 0.5625rem 0.75rem;
+		background: transparent;
+		cursor: pointer;
+		transition: background var(--duration-fast, 140ms) var(--ease-out, ease-out);
+		outline: none;
+		text-align: left;
+		font-size: 0.875rem;
+		font-weight: 550;
+		color: var(--text);
+	}
+
+	.ml-command-search__item[aria-selected="true"],
+	.ml-command-search__item[data-active] {
+		background: color-mix(in oklch, var(--text) 6%, transparent);
+	}
+
+	.ml-command-search__item:focus-visible {
+		background: color-mix(in oklch, var(--text) 6%, transparent);
+	}
+
+	/* ── Empty / threshold ── */
+	.ml-command-search__empty,
+	.ml-command-search__threshold {
+		padding: 2.5rem 1rem;
+		text-align: center;
+		color: var(--text-muted);
+		font-size: 0.875rem;
+	}
+
+	/* ── Footer (keyboard hints) ── */
+	.ml-command-search__footer {
+		display: flex;
+		align-items: center;
+		gap: 1.25rem;
+		border-top: 1px solid var(--border);
+		padding: 0.625rem 1rem;
+		color: var(--text-muted);
+		font-size: 0.6875rem;
+	}
+
+	.ml-command-search__footer kbd {
+		border: 1px solid var(--border);
+		border-radius: var(--radius-xs, 0.25rem);
+		padding: 0.125rem 0.3125rem;
+		font-family: var(--font-mono);
+		font-size: 0.5625rem;
+		font-weight: 700;
+		margin-right: 0.25rem;
+	}
+}

package/components/command-search/index.d.ts

@@ -0,0 +1,73 @@
+import * as React$1 from 'react';
+import { Command } from 'cmdk';
+
+interface CommandSearchProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    shortcut?: string | false;
+    debounce?: number | false;
+    minChars?: number;
+    placeholder?: string;
+    onQueryChange?: (query: string) => void;
+    filter?: (query: string, itemValue: string) => boolean;
+    shouldFilter?: boolean;
+    className?: string;
+    ref?: React$1.Ref<HTMLDivElement>;
+    children?: React$1.ReactNode;
+    showFooter?: boolean;
+}
+interface CommandSearchInputProps extends Omit<React$1.ComponentProps<typeof Command.Input>, "children" | "className" | "onValueChange" | "placeholder" | "size" | "value"> {
+    className?: string;
+    inputClassName?: string;
+    size?: "sm" | "md" | "lg";
+}
+type CommandSearchListProps = React$1.ComponentProps<typeof Command.List>;
+interface CommandSearchItemProps extends Omit<React$1.ComponentProps<typeof Command.Item>, "disabled" | "onSelect" | "value"> {
+    value: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+}
+type CommandSearchEmptyProps = React$1.ComponentProps<typeof Command.Empty>;
+type CommandSearchGroupProps = React$1.ComponentProps<typeof Command.Group>;
+interface CommandSearchFooterProps extends React$1.ComponentProps<"div"> {
+    children?: React$1.ReactNode;
+}
+interface CommandSearchContextValue {
+    search: string;
+    rawSearch: string;
+    setRawSearch: (q: string) => void;
+    minChars: number;
+    placeholder: string;
+    close: () => void;
+}
+
+declare function CommandSearchEmpty({ className, children, ref, ...props }: CommandSearchEmptyProps): React.ReactElement | null;
+
+declare function CommandSearchFooter({ className, children, ref, ...props }: CommandSearchFooterProps): React$1.ReactElement;
+
+declare function CommandSearchGroup({ heading, className, children, ref, ...props }: CommandSearchGroupProps): React.ReactElement;
+
+declare function CommandSearchInput({ className, inputClassName, ref, size, autoComplete, autoCorrect, autoFocus, spellCheck, ...props }: CommandSearchInputProps): React.ReactElement;
+
+declare function CommandSearchItem({ value, onSelect, disabled, className, children, ref, ...props }: CommandSearchItemProps): React.ReactElement;
+
+declare function CommandSearchList({ className, children, ref, ...props }: CommandSearchListProps): React.ReactElement;
+
+declare function CommandSearchRoot({ open, onOpenChange, shortcut, debounce: debounceProp, minChars, placeholder, onQueryChange, filter, shouldFilter, className, ref, children, showFooter, }: CommandSearchProps): React.ReactElement | null;
+
+/**
+ * @module CommandSearch
+ * Description for CommandSearch component.
+ */
+
+declare const CommandSearch: typeof CommandSearchRoot & {
+    displayName: string;
+    Input: typeof CommandSearchInput;
+    List: typeof CommandSearchList;
+    Item: typeof CommandSearchItem;
+    Empty: typeof CommandSearchEmpty;
+    Group: typeof CommandSearchGroup;
+    Footer: typeof CommandSearchFooter;
+};
+
+export { CommandSearch, type CommandSearchContextValue, type CommandSearchEmptyProps, type CommandSearchFooterProps, type CommandSearchGroupProps, type CommandSearchInputProps, type CommandSearchItemProps, type CommandSearchListProps, type CommandSearchProps };

package/components/command-search/index.js

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

package/components/command-search/index.js.map

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

package/components/container/container.css

@@ -0,0 +1,41 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-container {
+		--ml-container-max: 80rem;
+		--ml-container-x: var(--space-6);
+		--ml-container-x-tablet: var(--space-10);
+		--ml-container-x-desktop: var(--space-12);
+
+		width: 100%;
+		max-width: var(--ml-container-max);
+		margin-inline: auto;
+		padding-inline: var(--ml-container-x);
+	}
+
+	@media (min-width: 48rem) {
+		.ml-container {
+			padding-inline: var(--ml-container-x-tablet);
+		}
+	}
+
+	@media (min-width: 80rem) {
+		.ml-container {
+			padding-inline: var(--ml-container-x-desktop);
+		}
+	}
+
+	.ml-container[data-size="sm"] {
+		--ml-container-max: 64rem;
+		--ml-container-x: var(--space-5);
+		--ml-container-x-tablet: var(--space-8);
+		--ml-container-x-desktop: var(--space-8);
+	}
+
+	.ml-container[data-size="lg"] {
+		--ml-container-max: 90rem;
+		--ml-container-x: var(--space-8);
+		--ml-container-x-tablet: var(--space-12);
+		--ml-container-x-desktop: var(--space-16);
+	}
+}

package/components/container/index.d.ts

@@ -0,0 +1,11 @@
+type ContainerSize = "sm" | "md" | "lg";
+interface ContainerProps extends React.ComponentProps<"div"> {
+    size?: ContainerSize;
+    as?: React.ElementType;
+}
+declare function Container({ size, as: Tag, className, children, ref, ...props }: ContainerProps): React.ReactElement;
+declare namespace Container {
+    var displayName: string;
+}
+
+export { Container, type ContainerProps, type ContainerSize };

package/components/container/index.js

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

package/components/container/index.js.map

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

package/components/data-list/data-list.css

@@ -0,0 +1,139 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-data-list {
+		--ml-data-list-item-padding-y: var(--ml-space-4);
+		--ml-data-list-item-gap: var(--ml-space-4);
+		--ml-data-list-label-width: var(--ml-space-8);
+		--ml-data-list-title-text: var(--text-xl);
+		--ml-data-list-description-text: var(--text-sm);
+		--ml-data-list-trailing-text: var(--text-2xs);
+
+		display: grid;
+		width: 100%;
+		border-block-start: var(--border-thin) solid var(--border);
+	}
+
+	.ml-data-list[data-size="sm"] {
+		--ml-data-list-item-padding-y: var(--ml-space-3);
+		--ml-data-list-item-gap: var(--ml-space-3);
+		--ml-data-list-label-width: var(--ml-space-6);
+		--ml-data-list-title-text: var(--text-base);
+		--ml-data-list-description-text: var(--text-xs);
+		--ml-data-list-trailing-text: var(--text-3xs);
+	}
+
+	.ml-data-list[data-size="lg"] {
+		--ml-data-list-item-padding-y: var(--ml-space-5);
+		--ml-data-list-item-gap: var(--ml-space-5);
+		--ml-data-list-label-width: var(--ml-space-10);
+		--ml-data-list-title-text: var(--text-2xl);
+		--ml-data-list-description-text: var(--text-base);
+		--ml-data-list-trailing-text: var(--text-xs);
+	}
+
+	.ml-data-list__item {
+		display: grid;
+		width: 100%;
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--ml-data-list-item-gap);
+		align-items: start;
+		padding-block: var(--ml-data-list-item-padding-y);
+		border-block-end: var(--border-thin) solid var(--border);
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			border-color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out);
+	}
+
+	button.ml-data-list__item {
+		appearance: none;
+		padding-inline: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: inherit;
+	}
+
+	.ml-data-list__item[data-interactive="true"] {
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+	}
+
+	.ml-data-list__item[data-interactive="true"]:hover {
+		background: var(--surface-2);
+		border-color: color-mix(in oklch, var(--border-strong) 80%, var(--border));
+	}
+
+	.ml-data-list__item[data-interactive="true"]:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+
+	.ml-data-list__label {
+		min-width: 0;
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--text-2xs);
+		font-weight: 500;
+		line-height: 1;
+		letter-spacing: var(--tracking-meta);
+		text-transform: uppercase;
+	}
+
+	.ml-data-list[data-size="sm"] .ml-data-list__label {
+		font-size: var(--text-3xs);
+	}
+
+	.ml-data-list[data-size="lg"] .ml-data-list__label {
+		font-size: var(--text-xs);
+	}
+
+	.ml-data-list__content {
+		display: grid;
+		gap: var(--ml-space-1);
+		min-width: 0;
+	}
+
+	.ml-data-list__title {
+		display: block;
+		color: var(--primary);
+		font-size: var(--ml-data-list-title-text);
+		font-weight: var(--ml-data-list-title-weight, 700);
+		line-height: var(--ml-data-list-title-lh, var(--leading-tight));
+		letter-spacing: var(--tracking-heading);
+	}
+
+	.ml-data-list__description {
+		margin: 0;
+		color: var(--text-secondary);
+		font-size: var(--ml-data-list-description-text);
+		line-height: var(--leading-normal);
+	}
+
+	.ml-data-list__trailing {
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--ml-data-list-trailing-text);
+		line-height: 1;
+		letter-spacing: var(--tracking-meta);
+		text-transform: uppercase;
+	}
+
+	.ml-data-list[data-prose="true"] {
+		--ml-data-list-title-weight: 400;
+		--ml-data-list-title-lh: var(--leading-relaxed);
+	}
+
+	.ml-data-list[data-prose="true"] .ml-data-list__title {
+		color: var(--text-secondary);
+	}
+
+	.ml-data-list[data-variant="numbered"] .ml-data-list__item {
+		grid-template-columns: var(--ml-data-list-label-width) minmax(0, 1fr);
+	}
+
+	.ml-data-list[data-variant="numbered"] .ml-data-list__trailing {
+		grid-column: 2;
+	}
+}

package/components/data-list/index.d.ts

@@ -0,0 +1,45 @@
+import * as React$1 from 'react';
+
+type DataListSize = "sm" | "md" | "lg";
+type DataListVariant = "default" | "numbered";
+interface DataListItemData {
+    label?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    trailing?: React$1.ReactNode;
+}
+interface DataListProps extends React$1.ComponentProps<"div"> {
+    size?: DataListSize;
+    variant?: DataListVariant;
+    prose?: boolean;
+    items?: DataListItemData[];
+}
+interface DataListItemBaseProps {
+    label?: React$1.ReactNode;
+    title?: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    trailing?: React$1.ReactNode;
+}
+type DataListItemProps = (DataListItemBaseProps & {
+    onClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    ref?: React$1.Ref<HTMLButtonElement>;
+} & Omit<React$1.ComponentPropsWithRef<"button">, "title" | "onClick" | "ref">) | (DataListItemBaseProps & {
+    onClick?: never;
+    ref?: React$1.Ref<HTMLDivElement>;
+} & Omit<React$1.ComponentPropsWithRef<"div">, "title" | "onClick" | "ref">);
+
+declare function DataListItem(props: DataListItemProps): React.ReactElement;
+
+declare function DataListRoot({ className, size, variant, prose, items, children, ref, ...props }: DataListProps): React.ReactElement;
+
+/**
+ * @module DataList
+ * Description for DataList component.
+ */
+
+declare const DataList: typeof DataListRoot & {
+    displayName: string;
+    Item: typeof DataListItem;
+};
+
+export { DataList, type DataListItemData, type DataListItemProps, type DataListProps, type DataListSize, type DataListVariant };

package/components/data-list/index.js

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

package/components/data-list/index.js.map

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

package/components/editorial-line/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface EditorialLineProps extends Omit<React.ComponentProps<"article">, "title"> {
+    n: number;
+    date: React.ReactNode;
+    title: React.ReactNode;
+    readTime?: number;
+    tag?: React.ReactNode;
+    href?: string;
+    hover?: boolean;
+}
+
+declare function EditorialLineRoot({ className, n, date, title, readTime, tag, href, hover, ref, ...props }: EditorialLineProps): React.ReactElement;
+
+/**
+ * @module EditorialLine
+ * Description for EditorialLine component.
+ */
+
+declare const EditorialLine: typeof EditorialLineRoot & {
+    displayName: string;
+};
+
+export { EditorialLine, type EditorialLineProps };

package/components/editorial-line/index.js

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

package/components/editorial-line/index.js.map

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

package/components/eyebrow/eyebrow.css

@@ -0,0 +1,13 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.eyebrow,
+	.ml-eyebrow {
+		font-family: var(--font-mono);
+		font-size: var(--text-2xs);
+		letter-spacing: var(--tracking-eyebrow);
+		text-transform: uppercase;
+		color: var(--text-muted);
+		display: inline-block;
+	}
+}

package/components/eyebrow/index.d.ts

@@ -0,0 +1,17 @@
+import * as React$1 from 'react';
+
+type EyebrowSize = "xs" | "sm" | "md";
+interface EyebrowProps extends React$1.ComponentProps<"span"> {
+    size?: EyebrowSize;
+}
+
+declare function EyebrowRoot({ className, size, ref, ...props }: EyebrowProps): React.ReactElement;
+
+/**
+ * @module eyebrow
+ * Description for eyebrow component.
+ */
+
+declare const Eyebrow: typeof EyebrowRoot;
+
+export { Eyebrow, type EyebrowProps, type EyebrowSize };

package/components/eyebrow/index.js

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

package/components/eyebrow/index.js.map

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