@chitrank2050/monoline-ui 0.2.0

package/components/segmented-control/segmented-control.css

@@ -0,0 +1,177 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-segmented {
+		--ml-segmented-padding: var(--ml-space-0-5);
+		--ml-segmented-radius: var(--radius-lg);
+		--ml-segmented-item-radius: var(--radius-md);
+		--ml-segmented-item-padding: var(--ml-space-1-5) var(--ml-space-3);
+		--ml-segmented-font-size: var(--text-xs);
+		--ml-segmented-gap: var(--ml-space-1-5);
+
+		position: relative;
+		display: inline-flex;
+		border: var(--border-thin) solid var(--border);
+		border-radius: var(--ml-segmented-radius);
+		padding: var(--ml-segmented-padding);
+		background: var(--surface-2);
+		z-index: 1;
+	}
+
+	.ml-segmented__indicator {
+		position: absolute;
+		top: var(--ml-segmented-padding);
+		bottom: var(--ml-segmented-padding);
+		border: var(--border-thin) solid var(--border);
+		border-radius: var(--ml-segmented-item-radius);
+		background: var(--surface-3);
+		box-shadow: var(--shadow-sm);
+		opacity: 0;
+		transform-origin: left center;
+		transition: opacity var(--duration-micro) var(--ease-out);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.ml-segmented__item {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--ml-segmented-gap);
+		border-radius: var(--ml-segmented-item-radius);
+		padding: var(--ml-segmented-item-padding);
+		border: var(--border-thin) solid transparent;
+		color: var(--text-muted);
+		font-size: var(--ml-segmented-font-size);
+		font-weight: 550;
+		cursor: pointer;
+		white-space: nowrap;
+		transition: color var(--duration-micro) var(--ease-out);
+		z-index: 2;
+	}
+
+	.ml-segmented__item:hover:not(:disabled) {
+		color: var(--primary);
+	}
+
+	.ml-segmented__item:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+
+	.ml-segmented__item:disabled {
+		cursor: not-allowed;
+		opacity: 0.45;
+	}
+
+	.ml-segmented__item[aria-checked="true"] {
+		color: var(--primary);
+	}
+
+	.ml-segmented__label {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.ml-segmented__badge {
+		font-size: var(--text-2xs);
+		color: inherit;
+		opacity: 0.55;
+	}
+
+	/* Default Sizing Variants */
+	.ml-segmented--sm {
+		--ml-segmented-padding: var(--ml-space-0-5);
+		--ml-segmented-radius: var(--radius-md);
+		--ml-segmented-item-radius: var(--radius-sm);
+		--ml-segmented-item-padding: var(--ml-space-1) var(--ml-space-2);
+		--ml-segmented-font-size: var(--text-2xs);
+		--ml-segmented-gap: var(--ml-space-1);
+	}
+
+	.ml-segmented--md {
+		--ml-segmented-padding: var(--ml-space-0-5);
+		--ml-segmented-radius: var(--radius-lg);
+		--ml-segmented-item-radius: var(--radius-md);
+		--ml-segmented-item-padding: var(--ml-space-1-5) var(--ml-space-3);
+		--ml-segmented-font-size: var(--text-xs);
+		--ml-segmented-gap: var(--ml-space-1-5);
+	}
+
+	.ml-segmented--lg {
+		--ml-segmented-padding: var(--ml-space-0-5);
+		--ml-segmented-radius: var(--radius-xl);
+		--ml-segmented-item-radius: var(--radius-lg);
+		--ml-segmented-item-padding: var(--ml-space-2) var(--ml-space-4);
+		--ml-segmented-font-size: var(--text-base);
+		--ml-segmented-gap: var(--ml-space-2);
+	}
+
+	/* Pill variant */
+	.ml-segmented--pill {
+		--ml-segmented-padding: var(--ml-space-1);
+		--ml-segmented-radius: var(--radius-pill);
+		--ml-segmented-item-radius: var(--radius-pill);
+		--ml-segmented-item-padding: var(--ml-space-2) var(--ml-space-5);
+		--ml-segmented-font-size: var(--text-2xs);
+		--ml-segmented-gap: var(--ml-space-1-5);
+
+		border-color: var(--border-strong);
+		background: var(--surface);
+	}
+
+	/* Pill Sizing Variants */
+	.ml-segmented--pill.ml-segmented--sm {
+		--ml-segmented-padding: var(--ml-space-1);
+		--ml-segmented-item-padding: var(--ml-space-1-5) var(--ml-space-3);
+		--ml-segmented-font-size: var(--text-3xs);
+		--ml-segmented-gap: var(--ml-space-1);
+	}
+
+	.ml-segmented--pill.ml-segmented--md {
+		--ml-segmented-padding: var(--ml-space-1);
+		--ml-segmented-item-padding: var(--ml-space-2) var(--ml-space-5);
+		--ml-segmented-font-size: var(--text-2xs);
+		--ml-segmented-gap: var(--ml-space-1-5);
+	}
+
+	.ml-segmented--pill.ml-segmented--lg {
+		--ml-segmented-padding: var(--ml-space-1-5);
+		--ml-segmented-item-padding: var(--ml-space-3) var(--ml-space-6);
+		--ml-segmented-font-size: var(--text-xs);
+		--ml-segmented-gap: var(--ml-space-2);
+	}
+
+	.ml-segmented--pill .ml-segmented__indicator {
+		border-color: transparent;
+		background: var(--primary);
+		box-shadow: none;
+	}
+
+	.ml-segmented--pill .ml-segmented__item {
+		font-weight: 650;
+		letter-spacing: var(--tracking-wide);
+		text-transform: uppercase;
+		color: var(--text-body);
+		opacity: 0.72;
+	}
+
+	.ml-segmented--pill .ml-segmented__item:hover:not(:disabled) {
+		color: var(--text-body);
+		opacity: 1;
+	}
+
+	.ml-segmented--pill .ml-segmented__item[aria-checked="true"] {
+		color: var(--primary-foreground);
+		opacity: 1;
+	}
+
+	.ml-segmented--pill
+		.ml-segmented__item[aria-checked="true"]:hover:not(:disabled) {
+		color: var(--primary-foreground);
+	}
+
+	.ml-segmented--pill .ml-segmented__badge {
+		opacity: 0.6;
+	}
+}

package/components/select/index.d.ts

@@ -0,0 +1,65 @@
+import * as React$1 from 'react';
+
+type SelectSize = "sm" | "md" | "lg";
+type SelectVariant = "default" | "ghost";
+interface SelectOption<T extends string = string> {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface SelectRootProps<T extends string = string> extends Omit<React$1.ComponentProps<"div">, "onChange"> {
+    value: T;
+    onChange: (value: T) => void;
+    options: SelectOption<T>[];
+    size?: SelectSize;
+    variant?: SelectVariant;
+    label?: string;
+    placeholder?: string;
+    sheetLabel?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React$1.ReactNode;
+}
+interface SelectTriggerProps extends Omit<React$1.ComponentProps<"button">, "children"> {
+    children?: React$1.ReactNode;
+}
+type SelectValueProps = React$1.ComponentProps<"span">;
+type SelectLabelProps = React$1.ComponentProps<"span">;
+interface SelectContentProps extends React$1.ComponentProps<"div"> {
+    children?: React$1.ReactNode;
+}
+interface SelectItemProps extends Omit<React$1.ComponentProps<"button">, "value" | "children"> {
+    value: string;
+    description?: string;
+    children: React$1.ReactNode;
+}
+
+declare function SelectContent({ children, className, onKeyDown, ref, ...props }: SelectContentProps): React.ReactElement | null;
+
+declare function SelectItem({ className, description, onClick, value, disabled, children, ref, ...props }: SelectItemProps): React.ReactElement;
+
+declare function SelectLabel({ className, ref, ...props }: SelectLabelProps): React.ReactElement;
+
+declare function SelectRoot<T extends string>({ children, className, defaultOpen, label, onChange, onOpenChange, open: openProp, options, placeholder, sheetLabel, size, variant, value, ref, ...props }: SelectRootProps<T>): React.ReactElement;
+
+declare function SelectTrigger({ className, children, onClick, onKeyDown, ref, type, ...props }: SelectTriggerProps): React.ReactElement;
+
+declare function SelectValue({ className, ref, ...props }: SelectValueProps): React.ReactElement;
+
+/**
+ * @module Select
+ * Description for Select component.
+ */
+
+declare const Select: typeof SelectRoot & {
+    displayName: string;
+    Trigger: typeof SelectTrigger;
+    Label: typeof SelectLabel;
+    Value: typeof SelectValue;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+};
+
+export { Select, type SelectContentProps, type SelectItemProps, type SelectLabelProps, type SelectOption, type SelectRootProps, type SelectSize, type SelectTriggerProps, type SelectValueProps, type SelectVariant };

package/components/select/index.js

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

package/components/select/index.js.map

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

package/components/select/select.css

@@ -0,0 +1,298 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-select {
+		--ml-select-trigger-height: var(--ml-space-9);
+		--ml-select-trigger-padding-x: var(--ml-space-4);
+		--ml-select-trigger-gap: var(--ml-space-2);
+		--ml-select-trigger-text: var(--text-sm);
+		--ml-select-caret-size: var(--ml-space-4);
+		--ml-select-check-size: var(--ml-space-4);
+		--ml-select-content-radius: var(--radius-lg);
+		--ml-select-sheet-radius: var(--radius-2xl);
+		--ml-select-content-shadow: var(--shadow-lg);
+		--ml-select-sheet-shadow: var(--shadow-xl);
+	}
+
+	.ml-select[data-size="sm"] {
+		--ml-select-trigger-height: var(--ml-space-8);
+		--ml-select-trigger-padding-x: var(--ml-space-3);
+		--ml-select-trigger-gap: var(--ml-space-1-5);
+		--ml-select-trigger-text: var(--text-xs);
+		--ml-select-caret-size: var(--ml-space-3);
+		--ml-select-check-size: var(--ml-space-3);
+	}
+
+	.ml-select[data-size="lg"] {
+		--ml-select-trigger-height: var(--ml-space-10);
+		--ml-select-trigger-padding-x: var(--ml-space-5);
+		--ml-select-trigger-text: var(--text-base);
+		--ml-select-caret-size: var(--ml-space-4);
+		--ml-select-check-size: var(--ml-space-5);
+	}
+
+	.ml-select__trigger {
+		display: inline-flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--ml-select-trigger-gap);
+		block-size: var(--ml-select-trigger-height);
+		max-inline-size: 100%;
+		padding-inline: var(--ml-select-trigger-padding-x);
+		font-size: var(--ml-select-trigger-text);
+		border-radius: var(--radius-md);
+		line-height: 1;
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			border-color var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-select[data-open="true"] .ml-select__trigger {
+		border-color: var(--border-strong);
+		box-shadow: var(--shadow-sm);
+	}
+
+	.ml-select__trigger-copy {
+		display: inline-flex;
+		min-inline-size: 0;
+		flex: 0 1 auto;
+		align-items: center;
+		gap: var(--ml-select-trigger-gap);
+		line-height: 1;
+	}
+
+	.ml-select__label {
+		color: var(--text-body);
+		opacity: 0.58;
+	}
+
+	.ml-select__caret {
+		display: inline-block;
+		inline-size: var(--ml-select-caret-size);
+		block-size: var(--ml-select-caret-size);
+		flex: 0 0 auto;
+		color: var(--text-muted);
+		transition:
+			transform var(--duration-short) var(--ease-out-expo),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-select__trigger:hover .ml-select__caret,
+	.ml-select__trigger[aria-expanded="true"] .ml-select__caret {
+		color: currentcolor;
+	}
+
+	.ml-select__content {
+		position: absolute;
+		top: calc(100% + var(--ml-space-1-5));
+		left: 0;
+		z-index: var(--z-dropdown);
+		width: max-content;
+		min-width: 100%;
+		max-width: min(22rem, calc(100vw - var(--ml-space-8)));
+		overflow: hidden;
+		border: var(--border-thin) solid var(--border-strong);
+		border-radius: var(--ml-select-content-radius);
+		background: var(--popover);
+		color: var(--popover-foreground);
+		box-shadow: var(--ml-select-content-shadow);
+		transform-origin: top left;
+		animation: ml-select-content-enter var(--duration-fast) var(--ease-out-expo);
+	}
+
+	.ml-select__list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-0-5);
+		padding: var(--ml-space-1);
+	}
+
+	.ml-select__mobile-layer {
+		isolation: isolate;
+	}
+
+	.ml-select__backdrop {
+		background: color-mix(in oklch, var(--background) 42%, transparent);
+		animation: ml-select-backdrop-enter var(--duration-fast) var(--ease-out);
+	}
+
+	.ml-select__sheet-stack {
+		display: grid;
+		grid-template-rows: minmax(0, 1fr) auto;
+		gap: var(--ml-space-2);
+		max-block-size: calc(100dvh - var(--ml-space-6));
+	}
+
+	.ml-select__sheet {
+		display: flex;
+		flex-direction: column;
+		min-block-size: 0;
+		max-block-size: min(78dvh, 36rem);
+		overflow: hidden;
+		border: var(--border-thin) solid var(--border-strong);
+		border-radius: var(--ml-select-sheet-radius);
+		background: var(--popover);
+		color: var(--popover-foreground);
+		box-shadow: var(--ml-select-sheet-shadow);
+		animation: ml-select-sheet-enter var(--duration-short) var(--ease-out-expo);
+	}
+
+	.ml-select__sheet-handle-wrap {
+		display: flex;
+		justify-content: center;
+		padding-block-start: var(--ml-space-3);
+	}
+
+	.ml-select__sheet-handle {
+		inline-size: var(--ml-space-10);
+		block-size: var(--ml-space-1);
+		border-radius: var(--radius-pill);
+		background: var(--border-strong);
+	}
+
+	.ml-select__sheet-label {
+		padding: var(--ml-space-4) var(--ml-space-5) var(--ml-space-2);
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--text-3xs);
+		font-weight: 600;
+		letter-spacing: var(--tracking-eyebrow);
+		text-transform: uppercase;
+	}
+
+	.ml-select__sheet .ml-select__list {
+		min-block-size: 0;
+		flex: 1 1 auto;
+		gap: 0;
+		padding: 0 var(--ml-space-3) var(--ml-space-3);
+		overflow-y: auto;
+	}
+
+	.ml-select__sheet-cancel {
+		display: flex;
+		min-height: var(--ml-space-12);
+		width: 100%;
+		align-items: center;
+		justify-content: center;
+		border: var(--border-thin) solid var(--border-strong);
+		border-radius: var(--radius-xl);
+		background: var(--button);
+		color: var(--primary);
+		font-size: var(--text-sm);
+		font-weight: 600;
+		box-shadow: var(--shadow-lg);
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			border-color var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out),
+			transform var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-select__sheet-cancel:hover {
+		border-color: var(--border-strong);
+		background: var(--button-hover);
+	}
+
+	.ml-select__sheet-cancel:active {
+		opacity: 0.86;
+	}
+
+	.ml-select__item {
+		gap: var(--ml-space-3);
+		border: 0;
+		background: transparent;
+		color: var(--text-body);
+		transform: translate3d(0, 0, 0);
+		transition:
+			background-color var(--duration-micro) var(--ease-out),
+			color var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-select__item:hover {
+		background: var(--button-hover);
+		color: var(--primary);
+	}
+
+	.ml-select__item:active {
+		background: var(--surface-3);
+	}
+
+	.ml-select__item[data-selected="true"] {
+		background: var(--surface-2);
+		color: var(--primary);
+		font-weight: 650;
+	}
+
+	.ml-select__item[data-mobile="true"] {
+		min-block-size: var(--ml-space-12);
+		border-radius: 0;
+		border-block-end: var(--border-thin) solid var(--border);
+		background: transparent;
+	}
+
+	.ml-select__item[data-mobile="true"]:hover {
+		background: var(--button-hover);
+	}
+
+	.ml-select__item[data-mobile="true"][data-selected="true"] {
+		background: var(--surface-2);
+	}
+
+	.ml-select__item[data-mobile="true"]:first-child {
+		border-start-start-radius: var(--radius-lg);
+		border-start-end-radius: var(--radius-lg);
+	}
+
+	.ml-select__item[data-mobile="true"]:last-child {
+		border-block-end: 0;
+		border-end-start-radius: var(--radius-lg);
+		border-end-end-radius: var(--radius-lg);
+	}
+
+	.ml-select__item:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+
+	.ml-select__check {
+		margin-block-start: 0;
+		inline-size: var(--ml-select-check-size);
+		block-size: var(--ml-select-check-size);
+	}
+
+	@keyframes ml-select-content-enter {
+		from {
+			opacity: 0;
+			transform: translate3d(0, -2px, 0);
+		}
+
+		to {
+			opacity: 1;
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+	@keyframes ml-select-sheet-enter {
+		from {
+			opacity: 0;
+			transform: translate3d(0, 8px, 0);
+		}
+
+		to {
+			opacity: 1;
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+	@keyframes ml-select-backdrop-enter {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+}

package/components/skeleton/index.d.ts

@@ -0,0 +1,19 @@
+import * as React$1 from 'react';
+
+type SkeletonVariant = "rect" | "pill" | "circle";
+interface SkeletonProps extends React$1.ComponentProps<"div"> {
+    variant?: SkeletonVariant;
+}
+
+declare function SkeletonRoot({ className, variant, ref, ...props }: SkeletonProps): React.ReactElement;
+
+/**
+ * @module Skeleton
+ * Description for Skeleton component.
+ */
+
+declare const Skeleton: typeof SkeletonRoot & {
+    displayName: string;
+};
+
+export { Skeleton, type SkeletonProps, type SkeletonVariant };

package/components/skeleton/index.js

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

package/components/skeleton/index.js.map

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

package/components/skeleton/skeleton.css

@@ -0,0 +1,13 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--surface-2) 0%,
+			var(--surface-3) 50%,
+			var(--surface-2) 100%
+		);
+		background-size: 12.5rem 100%;
+	}
+}

package/components/status/index.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from 'react';
+
+type StatusVariant = "accent" | "success" | "muted";
+type StatusSize = "sm" | "md" | "lg";
+interface StatusProps extends React$1.ComponentProps<"span"> {
+    variant?: StatusVariant;
+    size?: StatusSize;
+    animate?: boolean;
+}
+
+declare function StatusRoot({ className, variant, size, animate, children, ref, ...props }: StatusProps): React.ReactElement;
+
+/**
+ * @module status
+ * Description for status component.
+ */
+
+declare const Status: typeof StatusRoot;
+
+export { Status, type StatusProps, type StatusSize, type StatusVariant };

package/components/status/index.js

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

package/components/status/index.js.map

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

package/components/status/status.css

@@ -0,0 +1,86 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-status {
+		letter-spacing: var(--tracking-eyebrow);
+	}
+
+	.ml-status [data-slot="status-dot"] {
+		position: relative;
+	}
+
+	.ml-status [data-slot="status-dot"][data-animate="true"]::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		border: var(--border-thin) solid currentcolor;
+		opacity: 0;
+		animation: ml-status-sonar 2.4s var(--ease-out) infinite;
+	}
+
+	.ml-status--accent {
+		border-color: var(--accent);
+		background: var(--accent-soft);
+		color: var(--accent);
+	}
+
+	.ml-status--accent [data-slot="status-dot"] {
+		background: var(--accent);
+		box-shadow: 0 0 0 var(--space-1) var(--accent-soft);
+	}
+
+	.ml-status--success {
+		border-color: var(--callout-tip-accent);
+		background: color-mix(in oklch, var(--callout-tip-accent) 12%, transparent);
+		color: var(--callout-tip-text);
+	}
+
+	.ml-status--success [data-slot="status-dot"] {
+		background: var(--callout-tip-accent);
+	}
+
+	.ml-status--muted {
+		border-color: var(--border-strong);
+		background: transparent;
+		color: var(--muted-foreground);
+	}
+
+	.ml-status--muted [data-slot="status-dot"] {
+		background: var(--muted-foreground);
+	}
+
+	@keyframes ml-status-sonar {
+		0% {
+			transform: scale(1);
+			opacity: 0.5;
+		}
+
+		65% {
+			opacity: 0.08;
+		}
+
+		100% {
+			transform: scale(1.85);
+			opacity: 0;
+		}
+	}
+
+	.ml-status--sm {
+		gap: var(--ml-space-1-5);
+		padding: var(--ml-space-1) var(--ml-space-2);
+		font-size: var(--text-3xs);
+	}
+
+	.ml-status--md {
+		gap: var(--ml-space-2);
+		padding: var(--ml-space-1) var(--ml-space-3);
+		font-size: var(--text-3xs);
+	}
+
+	.ml-status--lg {
+		gap: var(--ml-space-2);
+		padding: var(--ml-space-2) var(--ml-space-4);
+		font-size: var(--text-xs);
+	}
+}