ui8kit 0.0.8 → 1.0.1

package/css/dist/semantic/alert.css

@@ -0,0 +1,11 @@
+.alert {
+  @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
+}
+
+.alert-default {
+  @apply bg-card text-card-foreground;
+}
+
+.alert-destructive {
+  @apply text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90;
+}

package/css/dist/semantic/article.css

@@ -0,0 +1,59 @@
+.article {
+  @apply bg-card text-card-foreground flex flex-col gap-6 rounded-md border shadow-sm;
+}
+
+.article-header {
+  @apply flex flex-col gap-2 px-6 mt-4;
+}
+
+.article-title {
+  @apply text-2xl font-bold mb-4;
+}
+
+.article-meta {
+  @apply flex flex-wrap items-center gap-3 text-sm text-muted-foreground;
+}
+
+.article-time {
+  @apply text-sm text-muted-foreground;
+}
+
+.article-author {
+  @apply text-sm not-italic;
+}
+
+.article-figure {
+  @apply overflow-hidden;
+}
+
+.article-image {
+  @apply aspect-video w-full object-cover rounded-t-md;
+}
+
+.article-figcaption {
+  @apply mt-2 text-center text-sm text-muted-foreground;
+}
+
+.article-content {
+  @apply max-w-none px-6 py-4;
+}
+
+.article-blockquote {
+  @apply border-l-4 border-muted pl-4 italic;
+}
+
+.article-footer {
+  @apply flex items-center justify-between px-6 py-4;
+}
+
+.article-tags {
+  @apply flex flex-wrap gap-2;
+}
+
+.article-tag {
+  @apply inline-flex items-center rounded-full border bg-muted px-2.5 py-0.5 text-xs font-semibold;
+}
+
+.article-actions {
+  @apply flex items-center gap-2;
+}

package/css/dist/semantic/avatar.css

@@ -0,0 +1,11 @@
+.avatar {
+  @apply relative flex size-8 shrink-0 overflow-hidden rounded-full;
+}
+
+.avatar-image {
+  @apply aspect-square size-full;
+}
+
+.avatar-fallback {
+  @apply bg-muted flex size-full items-center justify-center rounded-full;
+}

package/css/dist/semantic/badge.css

@@ -0,0 +1,19 @@
+.badge {
+  @apply inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden;
+}
+
+.badge-default {
+  @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90;
+}
+
+.badge-secondary {
+  @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90;
+}
+
+.badge-destructive {
+  @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
+}
+
+.badge-outline {
+  @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground;
+}

package/css/dist/semantic/breadcrumb.css

@@ -0,0 +1,23 @@
+.breadcrumb-list {
+  @apply text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5;
+}
+
+.breadcrumb-item {
+  @apply inline-flex items-center gap-1.5;
+}
+
+.breadcrumb-link {
+  @apply hover:text-foreground transition-colors;
+}
+
+.breadcrumb-page {
+  @apply text-foreground font-normal;
+}
+
+.breadcrumb-separator {
+  @apply [&>svg]:size-3.5;
+}
+
+.breadcrumb-ellipsis {
+  @apply flex size-9 items-center justify-center;
+}

package/css/dist/semantic/button.css

@@ -0,0 +1,39 @@
+.button {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive; @apply h-9 px-4 py-2 has-[>svg]:px-3;
+}
+
+.button-default {
+  @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90;
+}
+
+.button-destructive {
+  @apply bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
+}
+
+.button-outline {
+  @apply border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50;
+}
+
+.button-secondary {
+  @apply bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80;
+}
+
+.button-ghost {
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50;
+}
+
+.button-link {
+  @apply text-primary underline-offset-4 hover:underline;
+}
+
+.button-sm {
+  @apply h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5;
+}
+
+.button-lg {
+  @apply h-10 rounded-md px-6 has-[>svg]:px-4;
+}
+
+.button-icon {
+  @apply size-9;
+}

package/css/dist/semantic/card.css

@@ -0,0 +1,43 @@
+.card {
+  @apply bg-card text-card-foreground flex flex-col gap-6 rounded-md border shadow-sm;
+}
+
+.card-header {
+  @apply @container/card-header grid-rows-[auto_auto] grid auto-rows-min items-start gap-1.5 mt-4 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6;
+}
+
+.card-title {
+  @apply leading-none font-bold text-xl mb-2;
+}
+
+.card-description {
+  @apply text-muted-foreground text-sm mb-4;
+}
+
+.card-action {
+  @apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
+}
+
+.article-meta {
+  @apply flex flex-wrap items-center gap-3 text-sm text-muted-foreground;
+}
+
+.article-figure {
+  @apply overflow-hidden;
+}
+
+.article-image {
+  @apply aspect-video w-full object-cover rounded-t-md;
+}
+
+.article-figcaption {
+  @apply mt-2 text-center text-sm text-muted-foreground;
+}
+
+.card-content {
+  @apply px-6 py-4;
+}
+
+.card-footer {
+  @apply flex items-center px-6 [.border-t]:pt-6;
+}

package/css/dist/semantic/index.css

@@ -0,0 +1,19 @@
+@import "./label.css";
+@import "./card.css";
+@import "./sheet.css";
+@import "./section.css";
+@import "./nav.css";
+@import "./markup.css";
+@import "./main.css";
+@import "./article.css";
+@import "./alert.css";
+@import "./badge.css";
+@import "./button.css";
+@import "./link.css";
+@import "./avatar.css";
+@import "./breadcrumb.css";
+@import "./input.css";
+@import "./pagination.css";
+@import "./skeleton.css";
+@import "./table.css";
+@import "./textarea.css";

package/css/dist/semantic/input.css

@@ -0,0 +1,3 @@
+.input {
+  @apply file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
+}

package/css/dist/semantic/label.css

@@ -0,0 +1,3 @@
+.label {
+  @apply flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50;
+}

package/css/dist/semantic/link.css

@@ -0,0 +1,39 @@
+.link {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive; @apply h-9 px-4 py-2 has-[>svg]:px-3;
+}
+
+.link-default {
+  @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90;
+}
+
+.link-destructive {
+  @apply bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
+}
+
+.link-outline {
+  @apply border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50;
+}
+
+.link-secondary {
+  @apply bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80;
+}
+
+.link-ghost {
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50;
+}
+
+.link-link {
+  @apply text-primary underline-offset-4 hover:underline;
+}
+
+.link-sm {
+  @apply h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5;
+}
+
+.link-lg {
+  @apply h-10 rounded-md px-6 has-[>svg]:px-4;
+}
+
+.link-icon {
+  @apply size-9;
+}

package/css/dist/semantic/main.css

@@ -0,0 +1,3 @@
+.main {
+  @apply flex-1;
+}

package/css/dist/semantic/markup.css

@@ -0,0 +1,23 @@
+.h1 {
+  @apply text-3xl font-bold mb-4;
+}
+
+.h2 {
+  @apply text-2xl font-bold mb-4;
+}
+
+.h3 {
+  @apply text-xl font-bold;
+}
+
+.h4 {
+  @apply text-xl font-bold;
+}
+
+.h5 {
+  @apply text-lg font-bold;
+}
+
+.h6 {
+  @apply text-base font-bold;
+}

package/css/dist/semantic/nav.css

@@ -0,0 +1,63 @@
+.nav {
+  @apply hidden lg:flex items-center space-x-1;
+}
+
+.nav-layout {
+  @apply relative;
+}
+
+.nav-bar {
+  @apply sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60;
+}
+
+.nav-list {
+  @apply flex items-center space-x-1;
+}
+
+.nav-item {
+  @apply relative;
+}
+
+.nav-link {
+  @apply inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground;
+}
+
+.nav-dropdown {
+  @apply relative;
+}
+
+.nav-dropdown-content {
+  @apply absolute top-full left-0 mt-1 w-48 rounded-md bg-popover border border-border shadow-lg z-50 origin-top-left;
+}
+
+.nav-dropdown-item {
+  @apply block px-4 py-2 text-sm text-popover-foreground transition-colors hover:bg-accent hover:text-accent-foreground;
+}
+
+.nav-trigger {
+  @apply lg:hidden inline-flex items-center justify-center p-2 rounded-md text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring cursor-pointer;
+}
+
+.nav-mobile {
+  @apply fixed inset-0 z-50 lg:hidden opacity-0 invisible -translate-y-full transition-all duration-300 ease-out peer-checked:opacity-100 peer-checked:visible peer-checked:translate-y-0;
+}
+
+.nav-mobile-list {
+  @apply space-y-1;
+}
+
+.nav-mobile-link {
+  @apply flex items-center w-full px-3 py-3 text-base font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground;
+}
+
+.nav-mobile-dropdown-item {
+  @apply block px-3 py-2 text-sm rounded-md transition-colors hover:bg-accent hover:text-accent-foreground;
+}
+
+.nav-group {
+  @apply py-2;
+}
+
+.nav-group-buttons {
+  @apply flex items-center space-x-2;
+}

package/css/dist/semantic/pagination.css

@@ -0,0 +1,11 @@
+.pagination {
+  @apply mx-auto flex w-full justify-center;
+}
+
+.pagination-content {
+  @apply flex flex-row items-center gap-1;
+}
+
+.pagination-ellipsis {
+  @apply flex size-9 items-center justify-center;
+}

package/css/dist/semantic/section.css

@@ -0,0 +1,43 @@
+.section {
+  @apply w-full py-6 md:py-12 lg:py-18;
+}
+
+.container {
+  @apply container mx-auto px-4 md:px-6 lg:px-8;
+}
+
+.full-width {
+  @apply w-full;
+}
+
+.section-header {
+  @apply w-full py-6 md:py-12 lg:py-18;
+}
+
+.section-title {
+  @apply text-3xl font-bold mb-4;
+}
+
+.section-description {
+  @apply text-secondary-foreground mb-4;
+}
+
+.section-footer {
+  @apply py-8;
+}
+
+.section-content {
+  @apply w-full;
+}
+
+.row {
+  @apply flex flex-wrap -mx-4;
+}
+
+.col {
+  @apply w-full px-4;
+}
+
+.grid {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+}

package/css/dist/semantic/sheet.css

@@ -0,0 +1,35 @@
+.sheet-trigger {
+  @apply inline-flex md:hidden items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 p-2 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground cursor-pointer;
+}
+
+.sheet-content {
+  @apply fixed inset-y-0 left-0 z-50 w-full max-w-sm bg-background shadow-lg border-r transform -translate-x-full transition-transform duration-300 ease-out peer-checked:translate-x-0 flex flex-col overflow-hidden;
+}
+
+.sheet-overlay {
+  @apply fixed inset-0 z-40 bg-black/50 backdrop-blur-sm opacity-0 invisible transition-all duration-300 ease-out peer-checked:opacity-100 peer-checked:visible peer-checked:pointer-events-auto transform-gpu cursor-pointer;
+}
+
+.sheet-header {
+  @apply flex flex-col space-y-2 p-6;
+}
+
+.sheet-body {
+  @apply flex-1 overflow-y-auto p-6;
+}
+
+.sheet-footer {
+  @apply mt-auto flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6;
+}
+
+.sheet-title {
+  @apply text-lg font-semibold text-foreground;
+}
+
+.sheet-description {
+  @apply text-sm text-muted-foreground;
+}
+
+.sheet-close {
+  @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer;
+}

package/css/dist/semantic/skeleton.css

@@ -0,0 +1,3 @@
+.skeleton {
+  @apply bg-accent animate-pulse rounded-md;
+}

package/css/dist/semantic/table.css

@@ -0,0 +1,31 @@
+.table {
+  @apply w-full caption-bottom text-sm;
+}
+
+.table-header {
+  @apply [&_tr]:border-b;
+}
+
+.table-body {
+  @apply [&_tr:last-child]:border-0;
+}
+
+.table-footer {
+  @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
+}
+
+.table-row {
+  @apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors;
+}
+
+.table-head {
+  @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
+}
+
+.table-cell {
+  @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
+}
+
+.table-caption {
+  @apply text-muted-foreground mt-4 text-sm;
+}

package/css/dist/semantic/textarea.css

@@ -0,0 +1,3 @@
+.textarea {
+  @apply border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
+}

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "ui8kit",
-  "version": "0.0.8",
+  "version": "1.0.1",
   "description": "UI8Kit components registry for buildy-ui cli",
   "main": "index.js",
   "files": [
+    "*.css",
+    "**/*.css",
+    "semantic/",
+    "dist/",
     "r/",
     "index.json"
   ],