pelatform-ui 1.1.21 → 1.2.0

package/css/theme.css

@@ -1,215 +1,158 @@
 @import "tw-animate-css";
 
-@import "@pelatform/ui.animation/css";
-@import "@pelatform/ui.aria/css";
-@import "@pelatform/ui.base/css";
-@import "@pelatform/ui.default/css";
-
-@import "./components/apexcharts.css";
-@import "./components/book.css";
-@import "./components/image-input.css";
-@import "./components/leaflet.css";
-@import "./components/patterns.css";
-@import "./components/rating.css";
-@import "./components/scrollable.css";
-@import "./components/theme-transition.css";
-@import "./components/extra.css";
+@import "@pelatform/ui.components/css";
+
+@import "./shadcn/neutral.css";
+@import "./animations.css";
+
+/* start: shadcn/create styles */
+@import "./styles/style-vega.css" layer(base);
+@import "./styles/style-nova.css" layer(base);
+@import "./styles/style-lyra.css" layer(base);
+@import "./styles/style-maia.css" layer(base);
+@import "./styles/style-mira.css" layer(base);
+
+@custom-variant style-vega (&:where(.style-vega *));
+@custom-variant style-nova (&:where(.style-nova *));
+@custom-variant style-lyra (&:where(.style-lyra *));
+@custom-variant style-maia (&:where(.style-maia *));
+@custom-variant style-mira (&:where(.style-mira *));
+/* end: shadcn/create styles */
 
 @source "../src/.";
 @source "../dist/.";
 
 @custom-variant dark (&:is(.dark *));
 
-/** Colors **/
 :root {
-  /** Base Colors **/
-  --background: var(--color-white);
-  --foreground: var(--color-zinc-950);
-
-  --card: var(--color-white);
-  --card-foreground: var(--color-zinc-950);
-
-  --popover: var(--color-white);
-  --popover-foreground: var(--color-zinc-950);
-
-  --primary: var(--color-blue-500);
-  --primary-foreground: var(--color-white);
-
-  --secondary: var(--color-zinc-100);
-  --secondary-foreground: var(--color-zinc-900);
-
-  --muted: var(--color-zinc-100);
-  --muted-foreground: var(--color-zinc-500);
-
-  --accent: var(--color-zinc-100);
-  --accent-foreground: var(--color-zinc-900);
-
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-white);
-
-  --chart-1: var(--color-blue-500);
-  --chart-2: var(--color-green-500);
-  --chart-3: var(--color-yellow-500);
-  --chart-4: var(--color-red-500);
-  --chart-5: var(--color-purple-500);
-
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-
-  /** Base Styles **/
-  --border: oklch(94% 0.004 286.32); /* between zinc-100 and zinc-200 */
-  --input: var(--color-zinc-200);
-  --ring: var(--color-zinc-400);
-  --radius: 0.5rem;
-
   /** Dashboard **/
   --sidebar-width: 280px;
   --header-height: 60px;
 
-  /** Grid color **/
+  /* Extended colors */
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-900);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-900);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-900);
+  --invert: var(--color-zinc-900);
+  --invert-foreground: var(--color-zinc-50);
+
+  /** Grid colors **/
   --grid-base-color: rgba(66, 71, 112, 0.09);
   --grid-dots-color: rgba(66, 71, 112, 0.09);
 }
 
 .dark {
-  /** Base Colors **/
-  --background: var(--color-zinc-950);
-  --foreground: var(--color-zinc-50);
-
-  --card: var(--color-zinc-950);
-  --card-foreground: var(--color-zinc-50);
-
-  --popover: var(--color-zinc-950);
-  --popover-foreground: var(--color-zinc-50);
-
-  --primary: var(--color-blue-600);
-  --primary-foreground: var(--color-white);
-
-  --secondary: var(--color-zinc-800);
-  --secondary-foreground: var(--color-zinc-50);
-
-  --muted: var(--color-zinc-900);
-  --muted-foreground: var(--color-zinc-500);
-
-  --accent: var(--color-zinc-900);
-  --accent-foreground: var(--color-zinc-50);
-
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-white);
-
-  --chart-1: var(--color-blue-500);
-  --chart-2: var(--color-green-500);
-  --chart-3: var(--color-yellow-500);
-  --chart-4: var(--color-red-500);
-  --chart-5: var(--color-purple-500);
-
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-
-  /** Base Styles **/
-  --border: var(--color-zinc-800);
-  --input: var(--color-zinc-800);
-  --ring: var(--color-zinc-600);
+  /* Extended colors */
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-600);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-600);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-600);
+  --invert: var(--color-zinc-700);
+  --invert-foreground: var(--color-zinc-50);
 
   /** Grid color **/
   --grid-base-color: rgba(255, 255, 255, 0.09);
   --grid-dots-color: rgba(255, 255, 255, 0.09);
 }
 
-/** Theme Setup **/
 @theme inline {
-  /** Base Colors **/
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+  /** Base Styles **/
+  --breakpoint-3xl: 1600px;
+  --breakpoint-4xl: 2000px;
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-inter: var(--font-inter);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
+  /* Extended colors */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-invert: var(--invert);
+  --color-invert-foreground: var(--invert-foreground);
+}
 
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
+/** Custom Scrollbar **/
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
 
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
+  ::selection {
+    @apply bg-primary text-primary-foreground;
+  }
 
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
+  html {
+    @apply scroll-smooth;
+  }
 
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
+  body {
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
 
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
 
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
+  a:active,
+  button:active {
+    @apply opacity-60 md:opacity-100;
+  }
+}
 
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
+@utility border-grid {
+  @apply border-border/50 dark:border-border;
+}
 
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
+@utility border-ghost {
+  @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
+}
 
-  /** Base Styles **/
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
+@utility section-soft {
+  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
+}
 
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+@utility theme-container {
+  @apply font-sans;
+}
 
-  --animate-marquee: marquee var(--duration) infinite linear;
-  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+@utility container-wrapper {
+  @apply 3xl:fixed:max-w-[calc(var(--breakpoint-2xl)+2rem)] mx-auto w-full px-4 lg:px-6;
+}
 
-  @keyframes marquee {
-    from {
-      transform: translateX(0);
-    }
-    to {
-      transform: translateX(calc(-100% - var(--gap)));
-    }
-  }
+@utility container {
+  @apply 3xl:max-w-screen-xl mx-auto max-w-[1400px] px-4 lg:px-6;
+}
 
-  @keyframes marquee-vertical {
-    from {
-      transform: translateY(0);
-    }
-    to {
-      transform: translateY(calc(-100% - var(--gap)));
-    }
-  }
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 
-  @keyframes move {
-    to {
-      transform: translateX(0);
-    }
+  &::-webkit-scrollbar {
+    display: none;
   }
 }
 
-/** Custom Scrollbar **/
-@layer base {
+@utility scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--input) transparent;
+
   ::-webkit-scrollbar {
     width: 5px;
   }
@@ -222,22 +165,19 @@
     background: var(--input);
     border-radius: 5px;
   }
+}
 
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--input) transparent;
-  }
-
-  ::selection {
-    color: var(--primary-foreground);
-    background: var(--primary);
-  }
+@utility step {
+  counter-increment: step;
 
-  * {
-    @apply border-border outline-ring/50;
+  &:before {
+    @apply border-background bg-muted mr-2 inline-flex size-6 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-medium md:absolute md:mt-[-4px] md:ml-[-50px] md:size-9 md:border-4;
+    content: counter(step);
   }
+}
 
-  body {
-    @apply bg-background text-foreground;
+@utility extend-touch-target {
+  @media (pointer: coarse) {
+    @apply relative touch-manipulation after:absolute after:-inset-2;
   }
 }

package/dist/animation.d.ts

@@ -1,7 +1,3 @@
-export * from '@pelatform/ui.animation';
-import '@pelatform/ui.aria';
-import '@pelatform/ui.base';
-import '@pelatform/ui.default';
-import '@pelatform/ui.general';
-import '@pelatform/utils';
-import '@pelatform/utils/server';
+export * from '@pelatform/ui.components/animation';
+import '@pelatform/ui.components/base';
+import '@pelatform/ui.components/radix';

package/dist/animation.js

@@ -1,2 +1,40 @@
-// src/animation.ts
-export * from "@pelatform/ui.animation";
+import {
+  AvatarGroup,
+  AvatarGroupItem,
+  AvatarGroupTooltip,
+  CountingNumber,
+  GithubButton,
+  GradientBackground,
+  GridBackground,
+  HoverBackground,
+  Marquee,
+  ShimmeringText,
+  SlidingNumber,
+  SvgText,
+  TextReveal,
+  TypingText,
+  VideoText,
+  WordRotate,
+  githubButtonVariants
+} from "./chunk-B3I74Y4P.js";
+import "./chunk-FC24ZVEO.js";
+import "./chunk-4VNS5WPM.js";
+export {
+  AvatarGroup,
+  AvatarGroupItem,
+  AvatarGroupTooltip,
+  CountingNumber,
+  GithubButton,
+  GradientBackground,
+  GridBackground,
+  HoverBackground,
+  Marquee,
+  ShimmeringText,
+  SlidingNumber,
+  SvgText,
+  TextReveal,
+  TypingText,
+  VideoText,
+  WordRotate,
+  githubButtonVariants
+};

package/dist/base.d.ts

@@ -1 +1 @@
-export * from '@pelatform/ui.base';
+export * from '@pelatform/ui.components/base';