ui-arreya-components 0.0.1 → 0.0.2

package/src/index.css

@@ -557,20 +557,22 @@ video {
 }
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
+  --background: #f4f4f4;
+  --foreground: #333;
   --card: 0 0% 100%;
   --card-foreground: 0 0% 3.9%;
   --popover: 0 0% 100%;
   --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
+  --primary: #00a599;
   --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
+  --secondary: #ffaa00;
+  --secondary-foreground: #fff;
   --muted: 0 0% 96.1%;
   --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
+  --accent: #5c166a;
+  --accent-foreground: #fff;
+  --dark-accent: #0073cf;
+  --dark-accent-foreground: 0 0% 9%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 89.8%;
@@ -581,8 +583,9 @@ video {
   --chart-3: 197 37% 24%;
   --chart-4: 43 74% 66%;
   --chart-5: 27 87% 67%;
-  --radius: 0.5rem
-  ;
+  --radius: 1.5rem;
+  --font-primary: 'Montserrat', sans-serif;
+  --font-secondary: 'Aviano Sans', sans-serif;
   --sidebar-background: 0 0% 98%;
   --sidebar-foreground: 240 5.3% 26.1%;
   --sidebar-primary: 240 5.9% 10%;
@@ -594,14 +597,14 @@ video {
 }
 
 .dark {
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
+  --background: #121212;
+  --foreground: #e0e0e0;
   --card: 0 0% 3.9%;
   --card-foreground: 0 0% 98%;
   --popover: 0 0% 3.9%;
   --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
+  --primary: #00a599;
+  --primary-foreground: #00a599;
   --secondary: 0 0% 14.9%;
   --secondary-foreground: 0 0% 98%;
   --muted: 0 0% 14.9%;
@@ -617,8 +620,9 @@ video {
   --chart-2: 160 60% 45%;
   --chart-3: 30 80% 55%;
   --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%
-  ;
+  --chart-5: 340 75% 55%;
+  --font-primary: 'Montserrat', sans-serif;
+  --font-secondary: 'Aviano Sans', sans-serif;
   --sidebar-background: 240 5.9% 10%;
   --sidebar-foreground: 240 4.8% 95.9%;
   --sidebar-primary: 224.3 76.3% 48%;
@@ -634,8 +638,8 @@ video {
 }
 
 body{
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+  background-color: var(--background);
+  color: var(--foreground);
 }
 
 .sr-only{
@@ -846,10 +850,6 @@ body{
   margin-bottom: 0.25rem;
 }
 
-.mb-4{
-  margin-bottom: 1rem;
-}
-
 .ml-1{
   margin-left: 0.25rem;
 }
@@ -1103,6 +1103,10 @@ body{
   width: 1px;
 }
 
+.w-\[350px\]{
+  width: 350px;
+}
+
 .w-\[380px\]{
   width: 380px;
 }
@@ -1254,11 +1258,6 @@ body{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-1{
-  --tw-translate-y: 0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-y-\[-50\%\]{
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1320,10 +1319,6 @@ body{
   list-style-type: none;
 }
 
-.grid-cols-\[25px_1fr\]{
-  grid-template-columns: 25px 1fr;
-}
-
 .flex-row{
   flex-direction: row;
 }
@@ -1547,11 +1542,7 @@ body{
 }
 
 .border-primary{
-  border-color: hsl(var(--primary));
-}
-
-.border-primary\/50{
-  border-color: hsl(var(--primary) / 0.5);
+  border-color: var(--primary);
 }
 
 .border-sidebar-border{
@@ -1575,7 +1566,7 @@ body{
 }
 
 .bg-background{
-  background-color: hsl(var(--background));
+  background-color: var(--background);
 }
 
 .bg-black\/80{
@@ -1595,7 +1586,7 @@ body{
 }
 
 .bg-foreground{
-  background-color: hsl(var(--foreground));
+  background-color: var(--foreground);
 }
 
 .bg-muted{
@@ -1611,19 +1602,11 @@ body{
 }
 
 .bg-primary{
-  background-color: hsl(var(--primary));
-}
-
-.bg-primary\/10{
-  background-color: hsl(var(--primary) / 0.1);
-}
-
-.bg-primary\/20{
-  background-color: hsl(var(--primary) / 0.2);
+  background-color: var(--primary);
 }
 
 .bg-secondary{
-  background-color: hsl(var(--secondary));
+  background-color: var(--secondary);
 }
 
 .bg-sidebar{
@@ -1634,11 +1617,6 @@ body{
   background-color: hsl(var(--sidebar-border));
 }
 
-.bg-sky-500{
-  --tw-bg-opacity: 1;
-  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
-}
-
 .bg-transparent{
   background-color: transparent;
 }
@@ -1648,7 +1626,7 @@ body{
 }
 
 .fill-primary{
-  fill: hsl(var(--primary));
+  fill: var(--primary);
 }
 
 .p-0{
@@ -1808,6 +1786,11 @@ body{
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.text-4xl{
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-\[0\.8rem\]{
   font-size: 0.8rem;
 }
@@ -1837,11 +1820,6 @@ body{
   line-height: 1rem;
 }
 
-.text-4xl{
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .font-medium{
   font-weight: 500;
 }
@@ -1888,11 +1866,7 @@ body{
 }
 
 .text-foreground{
-  color: hsl(var(--foreground));
-}
-
-.text-foreground\/50{
-  color: hsl(var(--foreground) / 0.5);
+  color: var(--foreground);
 }
 
 .text-muted-foreground{
@@ -1904,7 +1878,7 @@ body{
 }
 
 .text-primary{
-  color: hsl(var(--primary));
+  color: var(--primary);
 }
 
 .text-primary-foreground{
@@ -1912,7 +1886,7 @@ body{
 }
 
 .text-secondary-foreground{
-  color: hsl(var(--secondary-foreground));
+  color: var(--secondary-foreground);
 }
 
 .text-sidebar-foreground{
@@ -2023,7 +1997,7 @@ body{
 }
 
 .ring-offset-background{
-  --tw-ring-offset-color: hsl(var(--background));
+  --tw-ring-offset-color: var(--background);
 }
 
 .filter{
@@ -2158,6 +2132,14 @@ body{
   animation-timing-function: linear;
 }
 
+body {
+  font-family: var(--font-primary);
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--font-secondary);
+}
+
 .file\:border-0::file-selector-button{
   border-width: 0px;
 }
@@ -2176,7 +2158,7 @@ body{
 }
 
 .file\:text-foreground::file-selector-button{
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 .placeholder\:text-muted-foreground::-moz-placeholder{
@@ -2268,21 +2250,13 @@ body{
   border-left-width: 1px;
 }
 
-.last\:mb-0:last-child{
-  margin-bottom: 0px;
-}
-
 .last\:rounded-r-md:last-child{
   border-top-right-radius: calc(var(--radius) - 2px);
   border-bottom-right-radius: calc(var(--radius) - 2px);
 }
 
-.last\:pb-0:last-child{
-  padding-bottom: 0px;
-}
-
 .hover\:bg-accent:hover{
-  background-color: hsl(var(--accent));
+  background-color: var(--accent);
 }
 
 .hover\:bg-destructive\/80:hover{
@@ -2301,20 +2275,8 @@ body{
   background-color: hsl(var(--muted) / 0.5);
 }
 
-.hover\:bg-primary\/80:hover{
-  background-color: hsl(var(--primary) / 0.8);
-}
-
-.hover\:bg-primary\/90:hover{
-  background-color: hsl(var(--primary) / 0.9);
-}
-
 .hover\:bg-secondary:hover{
-  background-color: hsl(var(--secondary));
-}
-
-.hover\:bg-secondary\/80:hover{
-  background-color: hsl(var(--secondary) / 0.8);
+  background-color: var(--secondary);
 }
 
 .hover\:bg-sidebar-accent:hover{
@@ -2322,11 +2284,11 @@ body{
 }
 
 .hover\:text-accent-foreground:hover{
-  color: hsl(var(--accent-foreground));
+  color: var(--accent-foreground);
 }
 
 .hover\:text-foreground:hover{
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 .hover\:text-muted-foreground:hover{
@@ -2357,11 +2319,11 @@ body{
 }
 
 .focus\:bg-accent:focus{
-  background-color: hsl(var(--accent));
+  background-color: var(--accent);
 }
 
 .focus\:text-accent-foreground:focus{
-  color: hsl(var(--accent-foreground));
+  color: var(--accent-foreground);
 }
 
 .focus\:opacity-100:focus{
@@ -2427,7 +2389,7 @@ body{
 }
 
 .focus-visible\:ring-offset-background:focus-visible{
-  --tw-ring-offset-color: hsl(var(--background));
+  --tw-ring-offset-color: var(--background);
 }
 
 .active\:bg-sidebar-accent:active{
@@ -2475,11 +2437,11 @@ body{
 }
 
 .group.toast .group-\[\.toast\]\:bg-primary{
-  background-color: hsl(var(--primary));
+  background-color: var(--primary);
 }
 
 .group.toaster .group-\[\.toaster\]\:bg-background{
-  background-color: hsl(var(--background));
+  background-color: var(--background);
 }
 
 .group.destructive .group-\[\.destructive\]\:text-red-300{
@@ -2496,7 +2458,7 @@ body{
 }
 
 .group.toaster .group-\[\.toaster\]\:text-foreground{
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 .group.toaster .group-\[\.toaster\]\:shadow-lg{
@@ -2661,27 +2623,23 @@ body{
 }
 
 .data-\[state\=active\]\:bg-background[data-state="active"]{
-  background-color: hsl(var(--background));
+  background-color: var(--background);
 }
 
 .data-\[state\=checked\]\:bg-primary[data-state="checked"]{
-  background-color: hsl(var(--primary));
+  background-color: var(--primary);
 }
 
 .data-\[state\=on\]\:bg-accent[data-state="on"]{
-  background-color: hsl(var(--accent));
+  background-color: var(--accent);
 }
 
 .data-\[state\=open\]\:bg-accent[data-state="open"]{
-  background-color: hsl(var(--accent));
-}
-
-.data-\[state\=open\]\:bg-accent\/50[data-state="open"]{
-  background-color: hsl(var(--accent) / 0.5);
+  background-color: var(--accent);
 }
 
 .data-\[state\=open\]\:bg-secondary[data-state="open"]{
-  background-color: hsl(var(--secondary));
+  background-color: var(--secondary);
 }
 
 .data-\[state\=selected\]\:bg-muted[data-state="selected"]{
@@ -2705,7 +2663,7 @@ body{
 }
 
 .data-\[state\=active\]\:text-foreground[data-state="active"]{
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"]{
@@ -2713,11 +2671,11 @@ body{
 }
 
 .data-\[state\=on\]\:text-accent-foreground[data-state="on"]{
-  color: hsl(var(--accent-foreground));
+  color: var(--accent-foreground);
 }
 
 .data-\[state\=open\]\:text-accent-foreground[data-state="open"]{
-  color: hsl(var(--accent-foreground));
+  color: var(--accent-foreground);
 }
 
 .data-\[state\=open\]\:text-muted-foreground[data-state="open"]{
@@ -2984,7 +2942,7 @@ body{
 }
 
 .data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"]{
-  background-color: hsl(var(--accent));
+  background-color: var(--accent);
 }
 
 .data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"]{
@@ -2996,7 +2954,7 @@ body{
 }
 
 .data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"]{
-  background-color: hsl(var(--accent));
+  background-color: var(--accent);
 }
 
 .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{
@@ -3342,7 +3300,7 @@ body{
 }
 
 .\[\&\>svg\]\:text-foreground>svg{
-  color: hsl(var(--foreground));
+  color: var(--foreground);
 }
 
 .\[\&\>svg\]\:text-muted-foreground>svg{
@@ -3431,7 +3389,7 @@ body{
 }
 
 .\[\&_a\]\:hover\:text-primary:hover a{
-  color: hsl(var(--primary));
+  color: var(--primary);
 }
 
 .\[\&_p\]\:leading-relaxed p{

package/src/index.ts

@@ -1 +1,14 @@
 export { Button } from './components/ui/button'
+export { SidebarProvider, SidebarTrigger } from './components/ui/sidebar'
+export { 
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './components/ui/dialog'

package/src/styles/tailwind.css

@@ -6,20 +6,22 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --background: #f4f4f4;
+    --foreground: #333;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --primary: #00a599;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
+    --secondary: #ffaa00;
+    --secondary-foreground: #fff;
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --accent: #5c166a;
+    --accent-foreground: #fff;
+    --dark-accent: #0073cf;
+    --dark-accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 89.8%;
@@ -30,7 +32,9 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+    --radius: 1.5rem;
+    --font-primary: 'Montserrat', sans-serif;
+    --font-secondary: 'Aviano Sans', sans-serif;
   ;
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
@@ -41,14 +45,14 @@
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%}
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
+    --background: #121212;
+    --foreground: #e0e0e0;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
+    --primary: #00a599;
+    --primary-foreground: #00a599;
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
@@ -64,8 +68,10 @@
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
-  ;
+    --chart-5: 340 75% 55%;
+    --font-primary: 'Montserrat', sans-serif;
+    --font-secondary: 'Aviano Sans', sans-serif;
+ ;
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
@@ -84,3 +90,11 @@
     @apply bg-background text-foreground;
   }
 }
+
+body { 
+  font-family: var(--font-primary);
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--font-secondary);
+}

package/tailwind.config.js

@@ -11,8 +11,8 @@ const config: Config = {
   			sm: 'calc(var(--radius) - 4px)'
   		},
   		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
+  			background: 'var(--background)',
+  			foreground: 'var(--foreground)',
   			card: {
   				DEFAULT: 'hsl(var(--card))',
   				foreground: 'hsl(var(--card-foreground))'
@@ -22,20 +22,20 @@ const config: Config = {
   				foreground: 'hsl(var(--popover-foreground))'
   			},
   			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
+  				DEFAULT: 'var(--primary)',
   				foreground: 'hsl(var(--primary-foreground))'
   			},
   			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
+  				DEFAULT: 'var(--secondary)',
+  				foreground: 'var(--secondary-foreground)'
   			},
   			muted: {
   				DEFAULT: 'hsl(var(--muted))',
   				foreground: 'hsl(var(--muted-foreground))'
   			},
   			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
+  				DEFAULT: 'var(--accent)',
+  				foreground: 'var(--accent-foreground)'
   			},
   			destructive: {
   				DEFAULT: 'hsl(var(--destructive))',