solid-tom-ui 0.2.0 → 0.2.1

package/README.md

@@ -17,12 +17,16 @@ Built on **Tailwind CSS 4** and **DaisyUI 5**, leveraging SolidJS fine-grained r
 
 ```bash
 npm install solid-tom-ui
+
+pnpm i solid-tom-ui
+
+bun i solid-tom-ui
 ```
 
 ### Peer dependencies
 
 ```bash
-npm install solid-js clsx tailwind-merge class-variance-authority lucide-solid
+npm install solid-js
 ```
 
 Optional (only needed for specific components):
@@ -42,7 +46,17 @@ Optional (only needed for specific components):
 @import 'solid-tom-ui/styles';
 ```
 
-That's it. No Tailwind or DaisyUI configuration needed — the bundle includes everything.
+Make sure this CSS file is imported in your app entry point:
+
+```tsx
+// src/index.tsx
+import './app.css';
+import { render } from 'solid-js/web';
+import App from './App';
+
+render(() => <App />, document.getElementById('root')!);
+```
+---
 
 ### 2. Use components
 
@@ -60,38 +74,47 @@ function App() {
 
 ---
 
-### Advanced: custom theme setup
+## Advanced Setup (Custom Theme)
 
-If you want to override DaisyUI themes or use your own Tailwind configuration, use the source CSS export instead:
-
-```bash
-npm install tailwindcss daisyui
-```
+Overwrite css variable 
 
 ```css
-/* app.css */
-@import 'tailwindcss';
-@plugin 'daisyui';
+:root {
+	--color-base-100: white;
+	--color-base-content: black;
 
-/* Source CSS — component styles only, no Tailwind/DaisyUI included */
-@import 'solid-tom-ui/styles-source';
-```
+	--color-primary: red;
+	--color-primary-content: white;
 
----
+	--color-secondary: red;
+	--color-secondary-content: white;
+
+	--color-accent: red;
+	--color-accent-content: white;
 
-## Themes
+	--color-neutral: red;
+	--color-neutral-content: white;
 
-The pre-compiled bundle ships with two themes:
+	--color-info: red;
+	--color-info-content: white;
 
-| Theme | Mode | Data attribute |
-|-------|------|----------------|
-| `solidUi` | Light (default) | `data-theme="solidUi"` |
-| `dim` | Dark (prefers-dark) | `data-theme="dim"` |
+	--color-success: red;
+	--color-success-content: white;
 
-To switch themes at runtime:
+	--color-warning: red;
+	--color-warning-content: white;
 
-```ts
-document.documentElement.setAttribute('data-theme', 'dim');
+	--color-error: red;
+	--color-error-content: white;
+	--radius-selector: 8px;
+	--radius-field: 4px;
+	--radius-box: 6px;
+	--size-selector: 4px;
+	--size-field: 4px;
+	--border: 1px;
+	--depth: 0;
+	--noise: 0;
+}
 ```
 
 ---
@@ -162,7 +185,7 @@ document.documentElement.setAttribute('data-theme', 'dim');
 ### Utilities
 | Component | Description |
 |-----------|-------------|
-| `Blank` | Empty state placeholder |
+| `CodePreview` | Code preview |
 
 ---
 
@@ -201,78 +224,6 @@ Every component exposes a `class` prop to override individual slots:
 />
 ```
 
-### Utilities
-
-```tsx
-import { cn, getColor, renderCSSAnimation, createThrottle } from 'solid-tom-ui';
-
-// Tailwind class merging
-cn('btn btn-primary', isActive && 'btn-active', props.class);
-
-// Get DaisyUI color class
-getColor('primary'); // → 'color-primary'
-```
-
-## Toast
-
-```tsx
-import { toast, Toaster } from 'solid-tom-ui';
-
-// Add <Toaster /> once at the app root
-function App() {
-  return (
-    <>
-      <Toaster />
-      <MyPage />
-    </>
-  );
-}
-
-// Use anywhere
-toast.success('Saved!');
-toast.error('Something went wrong', { duration: 5000 });
-toast.info('New update available');
-toast.warning('Disk space low');
-toast('Custom message', { color: 'accent' });
-```
-
-## Table
-
-The `Table` component supports virtual scrolling, column pinning, sort, filter, expandable rows, and pagination via `@tanstack/solid-table`.
-
-```tsx
-import { Table } from 'solid-tom-ui';
-import { createSolidTable, getCoreRowModel } from '@tanstack/solid-table';
-
-const table = createSolidTable({
-  get data() { return rows(); },
-  columns,
-  getCoreRowModel: getCoreRowModel(),
-});
-
-<Table table={table} height={400} />
-```
-
-## Input variants
-
-```tsx
-import {
-  InputText,
-  InputPassword,
-  InputNumber,
-  InputTextarea,
-  InputOTP,
-  InputRange,
-  InputColor,
-  InputDate,
-} from 'solid-tom-ui';
-
-<InputText placeholder="Name" />
-<InputPassword placeholder="Password" />
-<InputNumber min={0} max={100} />
-<InputOTP length={6} onComplete={code => verify(code)} />
-```
-
 ## TypeScript
 
 All prop types are exported:
@@ -283,4 +234,4 @@ import type { ButtonProps, ModalProps, BaseColorProps, SolidComponent } from 'so
 
 ## License
 
-MIT © [MSI_TruongDN](https://github.com/MSI-TruongDN)
+MIT © [Truong Tom](https://github.com/truongtom1993)

package/dist/lib.d.ts

@@ -2,7 +2,6 @@ export type { AnimationConfig } from './utils/helper';
 export type { BaseColorProps, SolidComponent } from './type';
 export * from './components/avatar';
 export * from './components/badge';
-export * from './components/blank';
 export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/carousel';

package/dist/lib.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG7D,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG7D,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

package/dist/lib.js

@@ -1 +1 @@
-import{Avatar as e}from"./components/avatar/avatar.js";import{Badge as t}from"./components/badge/badge.js";import{Blank as n}from"./components/blank/blank.js";import{Breadcrumb as r}from"./components/breadcrumb/breadcrumb.js";import{Button as i}from"./components/button/button.js";import{Carousel as a}from"./components/carousel/carousel.js";import{ChatBubble as o}from"./components/chat-bubble/chatBubble.js";import{Checkbox as s}from"./components/checkbox/checkbox.js";import{Collapse as c}from"./components/collapse/collapse.js";import{createContextMenuHandle as l}from"./components/context-menu/context-menu.store.js";import{ContextMenu as u}from"./components/context-menu/context-menu.js";import{CODE_PREVIEW_THEMES as d,CodePreview as f}from"./components/code-preview/code-preview.js";import{Diff as p}from"./components/diff/diff.js";import{Divider as m}from"./components/divider/divider.js";import{ComponentDrawer as h,Drawer as g}from"./components/drawer/drawer.js";import{Dropdown as _}from"./components/dropdown/dropdown.js";import{FloatButton as v}from"./components/float-button/float-button.js";import{ImagePreview as y}from"./components/image-preview/image-preview.js";import{Hover3DImage as b}from"./components/hover-3d-image/hover-3d-image.js";import{Indicator as x}from"./components/indicator/indicator.js";import{Input as S}from"./components/input/input.js";import{Loading as C,Spinner as w}from"./components/loading/loading.js";import{Mansory as T}from"./components/mansory/mansory.js";import{Menu as E}from"./components/menu/menu.js";import{Modal as D}from"./components/modal/modal.js";import{closeAllModals as O,createModal as k}from"./components/modal/modalContext.js";import{Select as A}from"./components/select/select.js";import{Pagination as j}from"./components/pagination/pagination.js";import{progressBar as M}from"./components/progress-bar/progress-bar.js";import{QrCode as N}from"./components/qr-code/qr-code.js";import{Rating as P}from"./components/rating/rating.js";import{SelectZone as F,SelectZoneItem as I}from"./components/select-zone/select-zone.js";import{Skeleton as L}from"./components/skeleton/skeleton.js";import{Slider as R}from"./components/slider/slider.js";import{Splitter as z,SplitterPanel as B}from"./components/splitter/splitter.js";import{Steps as V}from"./components/steps/steps.js";import{Swap as H}from"./components/swap/swap.js";import{Switch as U}from"./components/switch/switch.js";import{Tooltip as W}from"./components/tooltip/tooltip.js";import{Tab as G}from"./components/tab/tab.js";import{Table as K}from"./components/table/table.js";import{createColumnHelper as q}from"./components/table/index.js";import{TextRotate as J}from"./components/text-rotate/text-rotate.js";import{Timeline as Y}from"./components/timeline/timeline.js";import{Toaster as X,toast as Z}from"./components/toast/toast.js";import{createTour as Q}from"./components/tour/tour.js";import{Upload as $}from"./components/upload/upload.js";export{e as Avatar,t as Badge,n as Blank,r as Breadcrumb,i as Button,d as CODE_PREVIEW_THEMES,a as Carousel,o as ChatBubble,s as Checkbox,f as CodePreview,c as Collapse,h as ComponentDrawer,u as ContextMenu,p as Diff,m as Divider,g as Drawer,_ as Dropdown,v as FloatButton,b as Hover3DImage,y as ImagePreview,x as Indicator,S as Input,C as Loading,T as Mansory,E as Menu,D as Modal,j as Pagination,N as QrCode,P as Rating,A as Select,F as SelectZone,I as SelectZoneItem,L as Skeleton,R as Slider,w as Spinner,z as Splitter,B as SplitterPanel,V as Steps,H as Swap,U as Switch,G as Tab,K as Table,J as TextRotate,Y as Timeline,X as Toaster,W as Tooltip,$ as Upload,O as closeAllModals,q as createColumnHelper,l as createContextMenuHandle,k as createModal,Q as createTour,M as progressBar,Z as toast};
+import{Avatar as e}from"./components/avatar/avatar.js";import{Badge as t}from"./components/badge/badge.js";import{Breadcrumb as n}from"./components/breadcrumb/breadcrumb.js";import{Button as r}from"./components/button/button.js";import{Carousel as i}from"./components/carousel/carousel.js";import{ChatBubble as a}from"./components/chat-bubble/chatBubble.js";import{Checkbox as o}from"./components/checkbox/checkbox.js";import{Collapse as s}from"./components/collapse/collapse.js";import{createContextMenuHandle as c}from"./components/context-menu/context-menu.store.js";import{ContextMenu as l}from"./components/context-menu/context-menu.js";import{CODE_PREVIEW_THEMES as u,CodePreview as d}from"./components/code-preview/code-preview.js";import{Diff as f}from"./components/diff/diff.js";import{Divider as p}from"./components/divider/divider.js";import{ComponentDrawer as m,Drawer as h}from"./components/drawer/drawer.js";import{Dropdown as g}from"./components/dropdown/dropdown.js";import{FloatButton as _}from"./components/float-button/float-button.js";import{ImagePreview as v}from"./components/image-preview/image-preview.js";import{Hover3DImage as y}from"./components/hover-3d-image/hover-3d-image.js";import{Indicator as b}from"./components/indicator/indicator.js";import{Input as x}from"./components/input/input.js";import{Loading as S,Spinner as C}from"./components/loading/loading.js";import{Mansory as w}from"./components/mansory/mansory.js";import{Menu as T}from"./components/menu/menu.js";import{Modal as E}from"./components/modal/modal.js";import{closeAllModals as D,createModal as O}from"./components/modal/modalContext.js";import{Select as k}from"./components/select/select.js";import{Pagination as A}from"./components/pagination/pagination.js";import{progressBar as j}from"./components/progress-bar/progress-bar.js";import{QrCode as M}from"./components/qr-code/qr-code.js";import{Rating as N}from"./components/rating/rating.js";import{SelectZone as P,SelectZoneItem as F}from"./components/select-zone/select-zone.js";import{Skeleton as I}from"./components/skeleton/skeleton.js";import{Slider as L}from"./components/slider/slider.js";import{Splitter as R,SplitterPanel as z}from"./components/splitter/splitter.js";import{Steps as B}from"./components/steps/steps.js";import{Swap as V}from"./components/swap/swap.js";import{Switch as H}from"./components/switch/switch.js";import{Tooltip as U}from"./components/tooltip/tooltip.js";import{Tab as W}from"./components/tab/tab.js";import{Table as G}from"./components/table/table.js";import{createColumnHelper as K}from"./components/table/index.js";import{TextRotate as q}from"./components/text-rotate/text-rotate.js";import{Timeline as J}from"./components/timeline/timeline.js";import{Toaster as Y,toast as X}from"./components/toast/toast.js";import{createTour as Z}from"./components/tour/tour.js";import{Upload as Q}from"./components/upload/upload.js";export{e as Avatar,t as Badge,n as Breadcrumb,r as Button,u as CODE_PREVIEW_THEMES,i as Carousel,a as ChatBubble,o as Checkbox,d as CodePreview,s as Collapse,m as ComponentDrawer,l as ContextMenu,f as Diff,p as Divider,h as Drawer,g as Dropdown,_ as FloatButton,y as Hover3DImage,v as ImagePreview,b as Indicator,x as Input,S as Loading,w as Mansory,T as Menu,E as Modal,A as Pagination,M as QrCode,N as Rating,k as Select,P as SelectZone,F as SelectZoneItem,I as Skeleton,L as Slider,C as Spinner,R as Splitter,z as SplitterPanel,B as Steps,V as Swap,H as Switch,W as Tab,G as Table,q as TextRotate,J as Timeline,Y as Toaster,U as Tooltip,Q as Upload,D as closeAllModals,K as createColumnHelper,c as createContextMenuHandle,O as createModal,Z as createTour,j as progressBar,X as toast};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-tom-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "SolidJS UI component library (Ant Design–inspired, Tailwind CSS + DaisyUI)",
   "type": "module",
   "license": "MIT",

package/dist/components/blank/blank.js

@@ -1,2 +0,0 @@
-var e=e=>[];export{e as Blank};
-//# sourceMappingURL=blank.js.map

package/dist/components/blank/blank.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"blank.js","names":["Component","BlankProps","Blank","p"],"sources":["../../../src/components/blank/blank.tsx"],"sourcesContent":["import { Component } from 'solid-js';\n\ntype BlankProps = {};\nexport const Blank: Component<BlankProps> = p => {\n  return <></>;\n};\n"],"mappings":"AAGA,IAAaE,EAA+BC,GAC1C,EAAA"}