@spartan-ng/cli 1.2.0-beta.1 → 1.2.0-beta.3

package/src/generators/ui/style-nova.css

@@ -594,6 +594,158 @@
 		@apply gap-2.5 text-sm;
 	}
 
+	/* MARK: Marker */
+	.spartan-marker {
+		@apply text-muted-foreground gap-2 text-sm;
+	}
+
+	.spartan-marker-variant-separator {
+		@apply before:bg-border after:bg-border before:me-1 before:h-px before:min-w-0 before:flex-1 after:ms-1 after:h-px after:min-w-0 after:flex-1;
+	}
+
+	.spartan-marker-variant-border {
+		@apply border-border border-b pb-2;
+	}
+
+	.spartan-marker-icon {
+		@apply size-4 shrink-0;
+	}
+
+	.spartan-marker-content {
+		@apply min-w-0;
+	}
+
+	/* MARK: Message */
+	.spartan-message {
+		@apply gap-2 text-sm;
+	}
+
+	.spartan-message-group {
+		@apply gap-2;
+	}
+
+	.spartan-message-avatar {
+		@apply bg-muted min-w-8 rounded-full;
+	}
+
+	.spartan-message-content {
+		@apply gap-2.5;
+	}
+
+	.spartan-message-header {
+		@apply text-muted-foreground px-3 text-xs font-medium;
+	}
+
+	.spartan-message-footer {
+		@apply text-muted-foreground px-3 text-xs font-medium;
+	}
+
+	/* MARK: Bubble */
+	.spartan-bubble {
+		@apply max-w-[80%] gap-1;
+	}
+
+	.spartan-bubble-group {
+		@apply gap-2;
+	}
+
+	.spartan-bubble-content {
+		@apply rounded-xl px-3 py-2 text-sm leading-relaxed;
+	}
+
+	.spartan-bubble-reactions {
+		@apply bg-muted ring-card gap-1 rounded-full px-1.5 py-0.5 text-xs ring-3;
+	}
+
+	.spartan-bubble-variant-default {
+		@apply *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80;
+	}
+
+	.spartan-bubble-variant-secondary {
+		@apply *:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-secondary/80;
+	}
+
+	.spartan-bubble-variant-muted {
+		@apply *:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)];
+	}
+
+	.spartan-bubble-variant-tinted {
+		@apply *:data-[slot=bubble-content]:text-foreground *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)];
+	}
+
+	.spartan-bubble-variant-outline {
+		@apply *:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30 *:data-[slot=bubble-content]:border;
+	}
+
+	.spartan-bubble-variant-ghost {
+		@apply [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0;
+	}
+
+	.spartan-bubble-variant-destructive {
+		@apply *:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30;
+	}
+
+	/* MARK: Attachment */
+	.spartan-attachment {
+		@apply bg-card text-card-foreground rounded-xl border;
+	}
+
+	.spartan-attachment-size-default {
+		@apply gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2;
+	}
+
+	.spartan-attachment-size-sm {
+		@apply gap-2 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5;
+	}
+
+	.spartan-attachment-size-xs {
+		@apply gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1;
+	}
+
+	.spartan-attachment-orientation-horizontal {
+		@apply min-w-40 items-center;
+	}
+
+	.spartan-attachment-orientation-vertical {
+		@apply w-24 flex-col has-data-[slot=attachment-content]:w-30;
+	}
+
+	.spartan-attachment-media {
+		@apply bg-muted text-foreground w-10 rounded-lg;
+	}
+
+	.spartan-attachment-media-variant-icon {
+		@apply bg-muted;
+	}
+
+	.spartan-attachment-media-variant-image {
+		@apply opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100;
+	}
+
+	.spartan-attachment-content {
+		@apply min-w-0 flex-1 leading-tight;
+	}
+
+	.spartan-attachment-title {
+		@apply truncate text-sm font-medium;
+	}
+
+	.spartan-attachment-description {
+		@apply text-muted-foreground mt-0.5 truncate text-xs;
+	}
+
+	.spartan-attachment-actions {
+		@apply shrink-0 items-center;
+	}
+
+	.spartan-attachment-trigger {
+		@apply absolute inset-0 z-10 outline-none;
+	}
+
+	.spartan-attachment-group {
+		@apply gap-2.5 py-1;
+	}
+
 	/* MARK: Field */
 	.spartan-field-set {
 		@apply gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;

package/src/generators/ui/style-vega.css

@@ -618,6 +618,158 @@
 		@apply gap-4 text-sm;
 	}
 
+	/* MARK: Marker */
+	.spartan-marker {
+		@apply text-muted-foreground gap-2.5 text-sm;
+	}
+
+	.spartan-marker-variant-separator {
+		@apply before:bg-border after:bg-border before:me-1.5 before:h-px before:min-w-0 before:flex-1 after:ms-1.5 after:h-px after:min-w-0 after:flex-1;
+	}
+
+	.spartan-marker-variant-border {
+		@apply border-border border-b pb-2.5;
+	}
+
+	.spartan-marker-icon {
+		@apply size-4 shrink-0;
+	}
+
+	.spartan-marker-content {
+		@apply min-w-0;
+	}
+
+	/* MARK: Message */
+	.spartan-message {
+		@apply gap-2.5 text-sm;
+	}
+
+	.spartan-message-group {
+		@apply gap-2.5;
+	}
+
+	.spartan-message-avatar {
+		@apply bg-muted min-w-9 rounded-full;
+	}
+
+	.spartan-message-content {
+		@apply gap-3;
+	}
+
+	.spartan-message-header {
+		@apply text-muted-foreground px-3.5 text-xs font-medium;
+	}
+
+	.spartan-message-footer {
+		@apply text-muted-foreground px-3.5 text-xs font-medium;
+	}
+
+	/* MARK: Bubble */
+	.spartan-bubble {
+		@apply max-w-[80%] gap-1.5;
+	}
+
+	.spartan-bubble-group {
+		@apply gap-2.5;
+	}
+
+	.spartan-bubble-content {
+		@apply rounded-xl px-3.5 py-2.5 text-sm leading-relaxed;
+	}
+
+	.spartan-bubble-reactions {
+		@apply bg-muted ring-card gap-1 rounded-full px-2 py-0.5 text-xs shadow-xs ring-3;
+	}
+
+	.spartan-bubble-variant-default {
+		@apply *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80;
+	}
+
+	.spartan-bubble-variant-secondary {
+		@apply *:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)];
+	}
+
+	.spartan-bubble-variant-muted {
+		@apply *:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)];
+	}
+
+	.spartan-bubble-variant-tinted {
+		@apply *:data-[slot=bubble-content]:text-foreground *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)];
+	}
+
+	.spartan-bubble-variant-outline {
+		@apply *:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30 *:data-[slot=bubble-content]:border *:data-[slot=bubble-content]:shadow-xs;
+	}
+
+	.spartan-bubble-variant-ghost {
+		@apply [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0;
+	}
+
+	.spartan-bubble-variant-destructive {
+		@apply *:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30;
+	}
+
+	/* MARK: Attachment */
+	.spartan-attachment {
+		@apply bg-card text-card-foreground rounded-xl border shadow-xs;
+	}
+
+	.spartan-attachment-size-default {
+		@apply gap-2.5 text-sm has-data-[slot=attachment-content]:px-3 has-data-[slot=attachment-content]:py-2.5 has-data-[slot=attachment-media]:p-2.5;
+	}
+
+	.spartan-attachment-size-sm {
+		@apply gap-2.5 text-xs has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2;
+	}
+
+	.spartan-attachment-size-xs {
+		@apply gap-2 rounded-md text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5;
+	}
+
+	.spartan-attachment-orientation-horizontal {
+		@apply min-w-44 items-center;
+	}
+
+	.spartan-attachment-orientation-vertical {
+		@apply w-28 flex-col has-data-[slot=attachment-content]:w-32;
+	}
+
+	.spartan-attachment-media {
+		@apply bg-muted text-foreground w-10 rounded-md;
+	}
+
+	.spartan-attachment-media-variant-icon {
+		@apply bg-muted;
+	}
+
+	.spartan-attachment-media-variant-image {
+		@apply opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100;
+	}
+
+	.spartan-attachment-content {
+		@apply min-w-0 flex-1 leading-normal;
+	}
+
+	.spartan-attachment-title {
+		@apply truncate text-sm font-medium;
+	}
+
+	.spartan-attachment-description {
+		@apply text-muted-foreground mt-0.5 truncate text-xs;
+	}
+
+	.spartan-attachment-actions {
+		@apply shrink-0 items-center;
+	}
+
+	.spartan-attachment-trigger {
+		@apply absolute inset-0 z-10 outline-none;
+	}
+
+	.spartan-attachment-group {
+		@apply gap-3 py-1.5;
+	}
+
 	/* MARK: Field */
 	.spartan-field-set {
 		@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;