ui8kit 0.0.8 → 1.0.2

package/README.md

@@ -0,0 +1,213 @@
+## Semantic Components Integration Guide
+
+### CLI Installation (Recommended)
+
+The semantic registry extends utility components with enhanced styling and behavior. Follow these steps:
+
+#### 1. Initialize Base Registry (Required)
+```bash
+# Initialize utility registry first (foundation requirement)
+npx buildy-ui@latest init
+```
+
+#### 2. Initialize Semantic Registry
+```bash
+# Initialize semantic registry
+npx buildy-ui@latest init --registry semantic
+
+# Skip prompts and use defaults
+npx buildy-ui@latest init --yes --registry semantic
+```
+
+#### 3. Add Semantic Components
+```bash
+# Add specific semantic components
+npx buildy-ui@latest add button card --registry semantic
+npx buildy-ui@latest add input --registry semantic
+
+# Install ALL semantic components at once
+npx buildy-ui@latest add --all --registry semantic
+
+# Preview what would be installed
+npx buildy-ui@latest add --all --dry-run --registry semantic
+
+# Force overwrite existing files
+npx buildy-ui@latest add button --force --registry semantic
+```
+
+#### Project Structure After Installation
+```
+semantic/
+├── ui/              # Semantic UI components
+├── blocks/          # Semantic blocks
+├── components/      # Semantic components
+├── templates/       # Semantic templates
+└── buildy.config.json
+
+utility/             # Base registry (required)
+├── ui/
+├── blocks/
+└── buildy.config.json
+
+lib/                 # Shared utilities
+└── utils.ts
+```
+
+## CSS Integration with Tailwind (PROD Mode)
+
+### Package Installation (Recommended for Tailwind projects)
+
+Since semantic CSS files contain Tailwind directives (`@apply`), they must be processed during build time:
+
+```bash
+# Install the CSS package
+npm install ui8kit
+# or
+yarn add ui8kit
+# or
+pnpm add ui8kit
+```
+
+### Import in your CSS/SCSS files
+
+```css
+/* Import all semantic styles */
+@import "ui8kit/css/dist/semantic/index.css";
+
+/* Or import individual components */
+@import "ui8kit/css/dist/semantic/button.css";
+@import "ui8kit/css/dist/semantic/card.css";
+@import "ui8kit/css/dist/semantic/input.css";
+```
+
+### Why Package Installation is Required
+
+Semantic CSS files contain Tailwind directives that need compilation:
+
+```css
+/* Example from button.css */
+.button-default {
+  @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90;
+}
+
+.button-destructive {
+  @apply bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90;
+}
+```
+
+### CDN vs Package Comparison
+
+| Method | Use Case | Tailwind Directives | Build Required |
+|--------|----------|-------------------|----------------|
+| **Package** | Production projects | ✅ Supported | ✅ Required |
+| **CDN** | Quick prototyping | ❌ Pre-compiled only | ❌ Not required |
+
+### Integration with Tailwind Config
+
+Add the package path to your `tailwind.config.js` for proper purging:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/ui8kit/**/*.{js,ts,jsx,tsx}", // Add this line
+  ],
+  // ... rest of your config
+}
+```
+
+**Note**: CDN links with `@import` URLs will remain as external references and won't be processed by Tailwind's build system.
+
+### CDN Integration (only DEV Mode)
+
+For projects that prefer CDN over CLI installation:
+
+#### Full Semantic Stylesheet
+```html
+<!-- Load complete semantic components -->
+<link rel="stylesheet" href="https://unpkg.com/ui8kit@1.0.1/css/dist/semantic/index.css">
+<!-- OR -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/index.css">
+```
+
+#### Individual Component Stylesheets
+```html
+<!-- Load only specific components you need -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/button.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/card.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/input.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/alert.css">
+```
+
+#### Available Individual Components
+- `button.css` - Enhanced button styles
+- `card.css` - Card component layouts
+- `input.css` - Form input styling
+- `alert.css` - Alert and notification styles
+- `badge.css` - Badge and label components
+- `avatar.css` - User avatar components
+- `table.css` - Data table styling
+- `pagination.css` - Navigation pagination
+- `breadcrumb.css` - Navigation breadcrumbs
+- `skeleton.css` - Loading skeleton states
+
+### Usage Examples
+
+#### With CLI Installation
+```jsx
+// After CLI installation, components are available via aliases
+import { Button } from '@/semantic/ui/button'
+import { Card } from '@/semantic/ui/card'
+
+function App() {
+  return (
+    <Card>
+      <Button variant="semantic">Semantic Button</Button>
+    </Card>
+  )
+}
+```
+
+#### With CDN Integration
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Load semantic styles -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui8kit@latest/css/dist/semantic/index.css">
+</head>
+<body>
+  <!-- Use semantic classes directly -->
+  <div class="semantic-card">
+    <button class="semantic-btn semantic-btn-primary">
+      Semantic Button
+    </button>
+  </div>
+</body>
+</html>
+```
+
+### Registry Dependencies
+
+**Important**: Semantic registry requires utility registry as foundation:
+- ✅ Utility registry must be initialized first
+- ✅ Components must exist in utility before installing in semantic
+- ❌ Cannot use semantic registry without utility base
+
+### Performance Considerations
+
+**CLI Method**:
+- ✅ Tree-shaking friendly
+- ✅ Only includes used components
+- ✅ TypeScript support
+- ✅ Local development workflow
+
+**CDN Method**:
+- ✅ No build step required
+- ✅ Instant integration
+- ✅ Cacheable across projects
+- ⚠️ Individual files = multiple HTTP requests
+- ⚠️ Full bundle may include unused styles
+
+Choose CLI for development projects, CDN for quick prototyping or static sites.

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.2",
   "description": "UI8Kit components registry for buildy-ui cli",
   "main": "index.js",
   "files": [
+    "*.css",
+    "**/*.css",
+    "semantic/",
+    "dist/",
     "r/",
     "index.json"
   ],