@sentio/ui-core 0.1.0 → 0.1.2

package/README.md

@@ -18,15 +18,31 @@ pnpm add @sentio/ui-core
 ## Usage
 
 ```tsx
-import { Button, BaseDialog, BarLoading, CopyButton } from '@sentio/ui-core'
+import { 
+  Button, 
+  BaseDialog, 
+  BarLoading, 
+  CopyButton,
+  Input,
+  Select,
+  Switch,
+  PopoverTooltip,
+  ResizeTable,
+  FlatTree,
+  useMobile
+} from '@sentio/ui-core'
 import '@sentio/ui-core/dist/style.css'
 
 function App() {
+  const isMobile = useMobile()
+  
   return (
     <>
       <Button>Click me</Button>
       <BarLoading />
       <CopyButton text="Copy this" />
+      <Input placeholder="Enter text" />
+      {!isMobile && <p>Desktop view</p>}
     </>
   )
 }
@@ -37,18 +53,20 @@ function App() {
 ### Common Components
 - `BarLoading` - Bar loading indicator
 - `SpinLoading` - Spinner loading indicator
-- `CopyButton`, `CopyIcon`, `CopySuccessIcon` - Copy button with icons
-- `Button` - Button component with variants
-- `BaseDialog` - Dialog component
+- `CopyButton`, `CopyIcon`, `CopySuccessIcon` - Copy button and icons
+- `Button` - Button component with loading state support
+- `BaseDialog`, `BaseZIndexContext` - Dialog component with z-index context
 - `PopoverTooltip` - Tooltip component
-- `DisclosurePanel` - Collapsible disclosure panel
-- `Collapse` - Collapse/expand animation wrapper
-- `Input` - Text input component
-- `RadioSelect` - Radio button group
-- `Switch` - Toggle switch component
-- `Select` - Dropdown select component
+- `DisclosurePanel` - Disclosure panel component
+- `Collapse` - Collapse/expand component
+- `Input` - Input component
+- `RadioSelect` - Radio select component
+- `Switch` - Switch toggle component
+- `Select` - Select dropdown component
+- `FlatTree` - Tree component with flat data structure
+- `LinkifyText` - Text component that converts URLs to links
 - `Empty` - Empty state component
-- `StatusBadge` - Badge component with status colors
+- `StatusBadge`, `StatusRole` - Status badge components
 - `HeaderToolsToggleButton`, `HeaderToolsContent` - Header tools dropdown
 
 ### Table Components
@@ -56,27 +74,20 @@ function App() {
 - `MoveLeftIcon`, `MoveRightIcon`, `RenameIcon`, `DeleteIcon` - Table action icons
 
 ### Menu Components
-- `PopupMenuButton` - Popup menu trigger button
-- `MenuItem` - Menu item component
-- `SubMenuButton` - Submenu button component
-- `MenuContext` - Menu context provider
-- `COLOR_MAP` - Color mapping for menu items
+- `PopupMenuButton` - Popup menu button
+- `MenuItem`, `SubMenuButton`, `MenuContext`, `COLOR_MAP` - Menu system components
 
 ### Tree Components
-- `FlatTree` - Flat tree component
 - `ROOT_KEY`, `SUFFIX_NODE_KEY` - Tree node key constants
 - `PlusSquareO`, `MinusSquareO`, `CloseSquareO`, `EyeO` - Tree icons
 
-### Text Components
-- `LinkifyText` - Text component that converts URLs to clickable links
-
-### Utilities / Hooks
+### Utilities & Hooks
 - `useMobile()` - Detect mobile device
 - `useBoolean()` - Boolean state hook
-- `classNames()` - Conditional class name utility
-- `getNumberWithDecimal()` - Number formatting utilities
+- Number formatting utilities (e.g., `getNumberWithDecimal()`)
+- `classNames()` - Classname utility
+- Contexts: `NavSizeContext`, `BaseZIndexContext`, `MenuContext`
 - Extension context utilities
-- `NavSizeContext` - Navigation size context
 
 ## Theming
 
@@ -89,78 +100,3 @@ Components are themed using CSS variables. You can customize the theme by overri
   /* ... */
 }
 ```
-
-## Development
-
-### Component Development with Ladle
-
-This package uses [Ladle](https://ladle.dev/) for component development and testing. Ladle provides a fast, lightweight alternative to Storybook for developing React components in isolation.
-
-#### Prerequisites
-
-Make sure you have dependencies installed:
-
-```bash
-pnpm install
-```
-
-#### Starting the Development Server
-
-To start the Ladle development server:
-
-```bash
-pnpm ladle serve
-```
-
-This will:
-- Start a local development server (typically at `http://localhost:61000`)
-- Watch for changes in your component stories
-- Provide hot module replacement for fast development
-- Display all your component stories in an interactive UI
-
-#### Writing Stories
-
-Stories are located alongside components with the `.stories.tsx` extension. For example:
-
-```tsx
-// src/common/Button.stories.tsx
-import type { Story } from '@ladle/react'
-import { Button } from './Button'
-
-export const Default: Story = () => <Button>Click me</Button>
-
-export const Primary: Story = () => <Button variant="primary">Primary</Button>
-
-export const Disabled: Story = () => <Button disabled>Disabled</Button>
-```
-
-#### Available Story Examples
-
-Check out existing stories in the `src/` directory:
-- `src/common/NewButton.stories.tsx` - Button component examples
-- `src/common/dialog/BaseDialog.stories.tsx` - Dialog examples
-- `src/common/table/ResizeTable.stories.tsx` - Table examples
-- `src/common/tree/FlatTree.stories.tsx` - Tree component examples
-- And many more...
-
-#### Building for Production
-
-To build the package:
-
-```bash
-pnpm build
-```
-
-This will:
-1. Build CSS with Tailwind (`pnpm build:css`)
-2. Build JavaScript/TypeScript with tsup (`pnpm build:js`)
-
-#### Watch Mode for Development
-
-If you're developing this package alongside another package:
-
-```bash
-pnpm dev
-```
-
-This runs both CSS and JS builds in watch mode concurrently.

package/dist/index.css

@@ -1852,27 +1852,18 @@ video {
 .h-\[18px\] {
   height: 18px;
 }
-.h-\[1em\] {
-  height: 1em;
-}
 .h-\[200px\] {
   height: 200px;
 }
 .h-full {
   height: 100%;
 }
-.max-h-0 {
-  max-height: 0px;
-}
 .max-h-60 {
   max-height: 15rem;
 }
 .max-h-96 {
   max-height: 24rem;
 }
-.max-h-\[2000px\] {
-  max-height: 2000px;
-}
 .min-h-\[24px\] {
   min-height: 24px;
 }
@@ -1927,9 +1918,6 @@ video {
 .w-\[18px\] {
   width: 18px;
 }
-.w-\[1em\] {
-  width: 1em;
-}
 .w-\[30px\] {
   width: 30px;
 }
@@ -2369,9 +2357,6 @@ video {
 .bg-yellow-500 {
   background-color: rgba(var(--yellow-500));
 }
-.fill-gray {
-  fill: rgba(var(--gray-600));
-}
 .p-1 {
   padding: 0.25rem;
 }
@@ -2949,9 +2934,6 @@ video {
 .hover\:bg-yellow-600:hover {
   background-color: rgba(var(--yellow-600));
 }
-.hover\:fill-primary-500:hover {
-  fill: rgba(var(--primary-500));
-}
 .hover\:text-gray-500:hover {
   color: rgba(var(--gray-500));
 }
@@ -3185,12 +3167,12 @@ video {
 .dark\:hover\:bg-sentio-gray-400:hover:where(.dark, .dark *) {
   background-color: rgba(var(--sentio-gray-400));
 }
-.dark\:hover\:fill-primary-700:hover:where(.dark, .dark *) {
-  fill: rgba(var(--primary-700));
-}
 .dark\:hover\:text-gray-700:hover:where(.dark, .dark *) {
   color: rgba(var(--gray-700));
 }
+.dark\:hover\:text-primary-700:hover:where(.dark, .dark *) {
+  color: rgba(var(--primary-700));
+}
 .dark\:focus\:ring-gray-800:focus:where(.dark, .dark *) {
   --tw-ring-color: rgba(var(--gray-800));
 }