@pelatform/ui 2.0.0 → 2.1.0

package/dist/hooks.d.ts

@@ -1,93 +1 @@
-export * from '@pelatform/ui.hook';
-import { META_THEME_COLORS } from '@pelatform/ui.core';
-
-/**
- * Meta theme color management hook for React components
- * Automatically manages HTML meta theme-color tag based on current theme
- * Integrates with next-themes for seamless theme switching
- */
-
-/**
- * Hook for managing HTML meta theme-color tag based on current theme
- *
- * This hook automatically calculates the appropriate meta theme color
- * based on the current theme (light/dark) and provides utilities for
- * manual meta color manipulation.
- *
- * Features:
- * - Automatic theme color calculation based on resolved theme
- * - Support for custom color configurations
- * - Manual meta color setting capability
- * - Integration with next-themes
- *
- * @param defaultColors - Optional custom color configuration (defaults to META_THEME_COLORS)
- * @returns Object containing current meta color and setter function
- *
- * @example
- * ```tsx
- * // Basic usage with default colors (supports light, dark, and system)
- * function App() {
- *   const { metaColor, setMetaColor } = useMetaColor();
- *
- *   // metaColor automatically updates based on theme (light/dark/system)
- *   useEffect(() => {
- *     console.log('Current meta color:', metaColor);
- *   }, [metaColor]);
- *
- *   return <div>App content</div>;
- * }
- *
- * // Custom colors with system theme support
- * function CustomThemeApp() {
- *   const customColors = {
- *     light: '#f0f0f0',
- *     dark: '#1a1a1a',
- *     system: 'auto' // Will resolve to light or dark based on OS preference
- *   };
- *   const { metaColor } = useMetaColor(customColors);
- *
- *   return <div style={{ backgroundColor: metaColor }}>Custom themed app</div>;
- * }
- *
- * // Manual meta color override for special pages
- * function SpecialPage() {
- *   const { setMetaColor } = useMetaColor();
- *
- *   useEffect(() => {
- *     // Override meta color for this page
- *     setMetaColor('#ff0000');
- *
- *     // Cleanup: reset to theme color when leaving page
- *     return () => {
- *       setMetaColor(''); // This will revert to theme-based color
- *     };
- *   }, [setMetaColor]);
- *
- *   return <div>Special page with red theme color</div>;
- * }
- *
- * // Integration with theme switcher
- * function ThemeAwareComponent() {
- *   const { theme, setTheme } = useTheme();
- *   const { metaColor } = useMetaColor();
- *
- *   return (
- *     <div>
- *       <p>Current theme: {theme}</p>
- *       <p>Meta color: {metaColor}</p>
- *       <button onClick={() => setTheme('light')}>Light</button>
- *       <button onClick={() => setTheme('dark')}>Dark</button>
- *       <button onClick={() => setTheme('system')}>System</button>
- *     </div>
- *   );
- * }
- * ```
- */
-declare function useMetaColor(defaultColors?: typeof META_THEME_COLORS): {
-    /** Current meta theme color based on resolved theme */
-    metaColor: "#09090b" | "#ffffff";
-    /** Function to manually set meta theme color */
-    setMetaColor: (color: string) => void;
-};
-
-export { useMetaColor };
+export * from 'pelatform-ui/hooks';

package/dist/hooks.js

@@ -1,9 +1,4 @@
-import {
-  useMetaColor
-} from "./chunk-UEVIEY7W.js";
+"use client";
 
 // src/hooks.ts
-export * from "@pelatform/ui.hook";
-export {
-  useMetaColor
-};
+export * from "pelatform-ui/hooks";

package/dist/index.d.ts

@@ -1,68 +1 @@
-export * from '@pelatform/ui.core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-
-/**
- * Props interface for icon components
- * Extends standard HTML SVG element attributes for full customization
- */
-type IconProps = React__default.HTMLAttributes<SVGElement>;
-/**
- * Collection of brand and service icons
- *
- * This object contains SVG icons for popular brands, services, and technologies.
- * All icons are designed to be scalable and themeable using CSS currentColor.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Icons.google className="w-6 h-6" />
- *
- * // With custom styling
- * <Icons.github
- *   className="w-8 h-8 text-gray-600 hover:text-gray-900"
- *   onClick={handleGitHubClick}
- * />
- *
- * // Colorful variants
- * <Icons.googleColorful className="w-10 h-10" />
- * <Icons.facebookColorful className="w-10 h-10" />
- * ```
- */
-declare const Icons: {
-    anthropic: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    apple: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    aria: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    facebook: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    facebookColorful: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    github: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    google: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    googleColorful: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    instagram: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    linkedin: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    linkedinColorful: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    microsoft: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    nextjs: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    npm: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    openai: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    paypal: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    pelatform: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    pnpm: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    postgresql: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    prisma: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    radix: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    radixui: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    react: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    scira: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    scribble: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    supabaseColorful: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    tailwind: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    telegram: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    twitter: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    whatsApp: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    x: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    yarn: (props: IconProps) => react_jsx_runtime.JSX.Element;
-    youtube: (props: IconProps) => react_jsx_runtime.JSX.Element;
-};
-
-export { Icons };
+export * from 'pelatform-ui';

package/dist/index.js

@@ -1,9 +1,4 @@
-import {
-  Icons
-} from "./chunk-VZEE3GOC.js";
+"use client";
 
 // src/index.ts
-export * from "@pelatform/ui.core";
-export {
-  Icons
-};
+export * from "pelatform-ui";

package/dist/radix.d.ts

@@ -0,0 +1 @@
+export * from 'pelatform-ui/radix';

package/dist/radix.js

@@ -0,0 +1,4 @@
+"use client";
+
+// src/radix.ts
+export * from "pelatform-ui/radix";

package/dist/style.css

@@ -0,0 +1,2 @@
+@import "pelatform-ui/css";
+@source ".";

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@pelatform/ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A Modern and Minimal React UI Library built with TailwindCSS.",
-  "author": "Pelatform Dev",
+  "author": "Pelatform",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "exports": {
-    "./css": "./css/theme.css",
-    "./css/*": "./css/components/*.css",
+    "./css": "./dist/style.css",
+    "./color/*": "./dist/css/color/*.css",
+    "./styles/*": "./dist/css/styles/*.css",
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -18,75 +20,99 @@
       "types": "./dist/animation.d.ts",
       "default": "./dist/animation.js"
     },
-    "./aria": {
-      "types": "./dist/aria.d.ts",
-      "default": "./dist/aria.js"
-    },
     "./base": {
       "types": "./dist/base.d.ts",
       "default": "./dist/base.js"
     },
-    "./default": {
-      "types": "./dist/default.d.ts",
-      "default": "./dist/default.js"
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "default": "./dist/components.js"
     },
     "./hooks": {
       "types": "./dist/hooks.d.ts",
       "default": "./dist/hooks.js"
     },
-    "./components": {
-      "types": "./dist/components.d.ts",
-      "default": "./dist/components.js"
+    "./radix": {
+      "types": "./dist/radix.d.ts",
+      "default": "./dist/radix.js"
     }
   },
-  "homepage": "https://devpelatform.github.io/ui",
+  "scripts": {
+    "clean": "rimraf dist",
+    "clean:all": "rimraf .turbo dist node_modules",
+    "dev": "tsup --watch --onSuccess \"cp src/style.css dist/style.css\"",
+    "build": "tsup && cp src/style.css dist/style.css",
+    "types:check": "tsc --noEmit"
+  },
+  "repository": "github:pelatformlabs/ui",
+  "homepage": "https://github.com/pelatformlabs/ui",
+  "bugs": {
+    "url": "https://github.com/pelatformlabs/ui/issues"
+  },
   "files": [
-    "css/*",
-    "dist/*",
-    "README.md"
+    "css",
+    "dist"
   ],
   "keywords": [
     "pelatform",
     "ui",
+    "react",
+    "nextjs",
+    "vite",
     "tailwindcss",
-    "react"
+    "shadcn",
+    "radix ui",
+    "base ui",
+    "components",
+    "animation"
   ],
-  "dependencies": {
-    "@tanstack/react-query": "^5.90.10",
-    "tw-animate-css": "^1.4.0",
-    "@pelatform/ui.animation": "0.1.0",
-    "@pelatform/ui.core": "0.1.0",
-    "@pelatform/ui.base": "0.1.0",
-    "@pelatform/ui.default": "0.1.0",
-    "@pelatform/ui.hook": "0.1.0",
-    "@pelatform/ui.aria": "0.1.0"
-  },
   "devDependencies": {
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
-    "react": "^19.2.0",
-    "tailwindcss": "^4.1.17",
+    "@pelatform/tsconfig": "^0.1.4",
+    "@types/react": "^19.2.14",
+    "glob": "^13.0.6",
+    "pelatform-ui": "1.3.0",
+    "react": "^19.2.4",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "tailwindcss": ">=3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": true
-    }
+    "@base-ui/react": ">=1.2.0",
+    "@dnd-kit/core": ">=6.3.0",
+    "@dnd-kit/modifiers": ">=9.0.0",
+    "@dnd-kit/sortable": ">=10.0.0",
+    "@dnd-kit/utilities": ">=3.2.0",
+    "@headless-tree/core": ">=1.6.0",
+    "@pelatform/utils": ">=1.0.15",
+    "@tanstack/react-table": ">=8.20.0",
+    "cmdk": ">=1.1.0",
+    "date-fns": ">=4.1.0",
+    "embla-carousel-react": ">=8.6.0",
+    "input-otp": ">=1.4.0",
+    "lucide-react": ">=0.577.0",
+    "motion": ">=12.35.0",
+    "next-themes": ">=0.4.5",
+    "pelatform-ui": ">=1.2.0",
+    "radix-ui": ">=1.4.0",
+    "react": ">=18.0.0 || >=19.0.0-rc.0",
+    "react-day-picker": ">=9.14.0",
+    "react-dom": ">=18.0.0 || >=19.0.0-rc.0",
+    "react-phone-number-input": ">=3.4.0",
+    "react-resizable-panels": ">=4.7.0",
+    "sonner": ">=2.0.5",
+    "tsup": ">=8.5.0",
+    "typescript": ">=5.9.0",
+    "vaul": ">=1.1.0"
   },
   "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "scripts": {
-    "clean": "rimraf dist",
-    "clean:all": "rimraf .turbo dist node_modules",
-    "dev": "tsup --watch",
-    "build": "tsup --clean",
-    "types:check": "tsc --noEmit"
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": "biome check --write --no-errors-on-unmatched",
+    "*.{md,yml,yaml}": "prettier --write",
+    "*.{json,jsonc,html}": "biome format --write --no-errors-on-unmatched"
+  },
+  "dependencies": {
+    "tw-animate-css": "^1.4.0"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Pelatform
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/css/components/apexcharts.css

@@ -1,101 +0,0 @@
-@layer components {
-  .apexcharts-text,
-  .apexcharts-title-text,
-  .apexcharts-legend-text {
-    font-family: inherit !important;
-  }
-
-  .apexcharts-title-text {
-    font-weight: var(--font-weight-normal);
-  }
-
-  .apexcharts-pie-label {
-    @apply text-xs;
-  }
-
-  .apexcharts-toolbar {
-    text-align: start !important;
-  }
-
-  .apexcharts-menu {
-    border: 1px solid var(--color-border) !important;
-    box-shadow: var(--box-shadow-sm) !important;
-    background-color: var(--color-background) !important;
-    border-radius: 0.625rem !important;
-    padding: 0.5rem 0 !important;
-    overflow: hidden;
-    min-width: 10rem !important;
-  }
-
-  .apexcharts-menu .apexcharts-menu-item {
-    padding: 0.5rem 0.5rem !important;
-  }
-
-  .apexcharts-menu .apexcharts-menu-item:hover {
-    background-color: var(--gray-100) !important;
-  }
-
-  .apexcharts-tooltip {
-    border: 1px solid var(--color-border) !important;
-    box-shadow: var(--box-shadow-sm) !important;
-    background-color: var(--color-background) !important;
-    border-radius: 0.625rem !important;
-    color: var(--color-secondary-foreground) !important;
-  }
-
-  .apexcharts-tooltip .apexcharts-tooltip-title {
-    @apply text-foreground text-sm font-medium;
-    padding: 0.25rem 0.5rem !important;
-    background-color: transparent !important;
-    border-bottom: 1px solid var(--color-border) !important;
-  }
-
-  .apexcharts-xaxistooltip {
-    border: 1px solid var(--color-border) !important;
-    box-shadow: var(--box-shadow-sm) !important;
-    background-color: var(--color-background) !important;
-    border-radius: 0.625rem;
-    color: var(--color-foreground);
-  }
-
-  .apexcharts-xaxistooltip:before {
-    border-bottom: 0 !important;
-  }
-
-  .apexcharts-legend {
-    display: flex;
-    flex-direction: column;
-    @apply gap-2;
-  }
-
-  .apexcharts-legend .apexcharts-legend-series {
-    @apply gap-1;
-    display: flex;
-    align-items: center;
-  }
-
-  .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
-    @apply text-muted-foreground text-sm font-medium;
-  }
-
-  .apexcharts-card-rounded .apexcharts-canvas svg {
-    border-bottom-left-radius: var(--radius-xl);
-    border-bottom-right-radius: var(--radius-xl);
-  }
-
-  .apexcharts-rounded-sm .apexcharts-canvas svg {
-    border-radius: var(--radius-sm);
-  }
-
-  .apexcharts-rounded .apexcharts-canvas svg {
-    border-radius: var(--radius-md);
-  }
-
-  .apexcharts-rounded-lg .apexcharts-canvas svg {
-    border-radius: var(--radius-lg);
-  }
-
-  .apexcharts-rounded-xl .apexcharts-canvas svg {
-    border-radius: var(--radius-xl);
-  }
-}

package/css/components/book.css

@@ -1,19 +0,0 @@
-@layer components {
-  .bg-book-bind-bg {
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
-  }
-
-  .bg-book-pages {
-    background: linear-gradient(90deg, #f1f1f1 0%, #ffffff 100%);
-  }
-
-  .shadow-book {
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  }
-
-  .book-bg {
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
-  }
-}

package/css/components/extra.css

@@ -1,12 +0,0 @@
-@layer components {
-  .animate-move {
-    animation: move 0.6s ease-out forwards;
-    will-change: transform;
-  }
-
-  .grid-container {
-    @apply container max-w-7xl;
-    margin-inline: auto;
-    padding-inline: 0rem;
-  }
-}

package/css/components/image-input.css

@@ -1,51 +0,0 @@
-@layer components {
-  .pf-image-input {
-    @apply relative inline-flex size-20 cursor-pointer items-center justify-center;
-
-    input[type='file'] {
-      @apply absolute size-0 appearance-none opacity-0;
-    }
-  }
-
-  .pf-image-input-remove {
-    @apply bg-background border-border end-px top-px absolute z-1 flex size-5 cursor-pointer items-center justify-center rounded-full border shadow-sm;
-
-    i {
-      @apply text-muted-foreground text-[11px];
-    }
-
-    svg {
-      @apply text-muted-foreground size-3.25;
-    }
-
-    &:hover {
-      i {
-        @apply text-foreground;
-      }
-
-      svg {
-        @apply text-foreground;
-      }
-    }
-  }
-
-  .pf-image-input-placeholder {
-    @apply border-border pf-image-input-empty:border-border relative size-full overflow-hidden rounded-full border bg-cover bg-no-repeat;
-  }
-
-  .pf-image-input-preview {
-    @apply relative size-full overflow-hidden rounded-full bg-cover bg-no-repeat;
-  }
-}
-
-@custom-variant pf-image-input-empty {
-  [data-pf-image-input-initialized].empty & {
-    @slot;
-  }
-}
-
-@custom-variant image-input-changed {
-  [data-pf-image-input-initialized].changed & {
-    @slot;
-  }
-}

package/css/components/leaflet.css

@@ -1,25 +0,0 @@
-@layer components {
-  /* Base Leaflet container styles */
-  .leaflet-container {
-    /* Leaflet pane and control styles */
-    & .leaflet-pane,
-    & .leaflet-top,
-    & .leaflet-bottom,
-    & .leaflet-control {
-      z-index: 1 !important;
-    }
-
-    /* Leaflet popup content wrapper styles */
-    & .leaflet-popup-content-wrapper {
-      border-radius: var(--radius-md);
-      text-align: center;
-      background-color: var(--color-popover);
-
-      /* Leaflet popup content styles */
-      & .leaflet-popup-content {
-        font-family: inherit;
-        @apply text-xs;
-      }
-    }
-  }
-}