@7onic-ui/react 0.3.8 → 0.3.10

package/llms.txt

@@ -530,7 +530,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrig
 | defaultValue | `string` | — | Uncontrolled default |
 | onValueChange | `(value: string) => void` | — | Change handler |
 
-**Sub-components:** Select.Trigger, Select.Value, Select.Content, Select.Item, Select.Group, Select.Label, Select.Separator
+**Sub-components:** SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator
 
 ---
 
@@ -559,7 +559,7 @@ import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMe
 | flush | `boolean` | `false` | Full-width items (no padding) |
 | sideOffset | `number` | `4` | Gap from trigger |
 
-**Sub-components:** DropdownMenu.Trigger, DropdownMenu.Content, DropdownMenu.Item, DropdownMenu.CheckboxItem, DropdownMenu.RadioGroup, DropdownMenu.RadioItem, DropdownMenu.Label, DropdownMenu.Separator, DropdownMenu.Group, DropdownMenu.Sub, DropdownMenu.SubTrigger, DropdownMenu.SubContent, DropdownMenu.Shortcut
+**Sub-components:** DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuShortcut
 
 ---
 
@@ -609,7 +609,7 @@ import { RadioGroup, RadioGroupItem } from '@7onic-ui/react'
 | defaultValue | `string` | — | Uncontrolled default |
 | onValueChange | `(value: string) => void` | — | Change handler |
 
-**Sub-components:** RadioGroup.Item (with `label` prop)
+**Sub-components:** RadioGroupItem (with `label` prop)
 
 ---
 
@@ -689,7 +689,7 @@ import { ToggleGroup, ToggleGroupItem } from '@7onic-ui/react'
 | defaultValue | `string \| string[]` | — | Uncontrolled default |
 | onValueChange | `(value) => void` | — | Change handler |
 
-**Sub-components:** ToggleGroup.Item
+**Sub-components:** ToggleGroupItem
 
 ---
 
@@ -715,7 +715,7 @@ import { Segmented, SegmentedItem } from '@7onic-ui/react'
 | defaultValue | `string` | — | Uncontrolled default |
 | onValueChange | `(value: string) => void` | — | Change handler |
 
-**Sub-components:** Segmented.Item
+**Sub-components:** SegmentedItem
 **Note:** Only 4 sizes (no xs) — intentional design decision.
 
 ---
@@ -771,7 +771,7 @@ import { Field, FieldCharCount, FieldError, FieldLabel, Input, Textarea } from '
 | error | `string \| boolean` | — | Error message (passed to children via context) |
 | disabled | `boolean` | `false` | Disabled state (passed to children via context) |
 
-**Sub-components:** Field.Label (with `required` prop), Field.Error, Field.CharCount
+**Sub-components:** FieldLabel (with `required` prop), FieldError, FieldCharCount
 **Context:** Input, Textarea, Checkbox, RadioGroup, Select auto-detect Field context for error/disabled/id.
 
 ---
@@ -814,7 +814,7 @@ import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@7onic-ui/reac
 | size | Same as Root | — | Override all children |
 | shape | Same as Root | — | Override all children |
 
-**Sub-components:** Avatar.Image, Avatar.Fallback, Avatar.Group
+**Sub-components:** AvatarImage, AvatarFallback, AvatarGroup
 
 ---
 
@@ -873,7 +873,7 @@ import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 | overlay | `boolean` | `false` | Gradient overlay |
 | overlayOpacity | `10-90` | `60` | Overlay darkness |
 
-**Sub-components:** Card.Image, Card.Header, Card.Title (with `icon`), Card.Description, Card.Action, Card.Content, Card.Footer
+**Sub-components:** CardImage, CardHeader, CardTitle (with `icon`), CardDescription, CardAction, CardContent, CardFooter
 
 ---
 
@@ -920,7 +920,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@
 |---|---|---|---|
 | align | `'left' \| 'center' \| 'right'` | `'left'` | Text alignment |
 
-**Sub-components:** Table.Header, Table.Body, Table.Footer, Table.Row, Table.Head, Table.Cell, Table.Caption
+**Sub-components:** TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption
 
 ---
 
@@ -949,7 +949,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@7onic-ui/react'
 | color | `'default' \| 'primary'` | `'default'` | Active tab color |
 | radius | `'none' \| 'sm' \| 'base' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'md'` | Border radius (enclosed/pill) |
 
-**Sub-components:** Tabs.List, Tabs.Trigger, Tabs.Content
+**Sub-components:** TabsList, TabsTrigger, TabsContent
 
 ---
 
@@ -978,7 +978,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@7
 | iconPosition | `'left' \| 'right'` | `'right'` | Chevron placement |
 | collapsible | `boolean` | `true` | Allow all closed (single only) |
 
-**Sub-components:** Accordion.Item, Accordion.Trigger (with `icon` prop), Accordion.Content
+**Sub-components:** AccordionItem, AccordionTrigger (with `icon` prop), AccordionContent
 
 ---
 
@@ -1038,7 +1038,7 @@ import { Button, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, M
 | scrollBehavior | `'inside' \| 'outside'` | `'outside'` | Scroll target |
 | showCloseButton | `boolean` | `true` | Show X button |
 
-**Sub-components:** Modal.Trigger, Modal.Portal, Modal.Overlay, Modal.Content, Modal.Header, Modal.Title, Modal.Description, Modal.Body, Modal.Footer, Modal.Close
+**Sub-components:** ModalTrigger, ModalPortal, ModalOverlay, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter, ModalClose
 
 **Required structure:** Portal → Overlay + Content. Don't forget Portal and Overlay.
 
@@ -1074,7 +1074,7 @@ import { AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertMo
 |---|---|---|---|
 | size | `'xs' \| 'sm'` | `'sm'` | AlertModal width (smaller than Modal by design) |
 
-**Sub-components:** AlertModal.Trigger, AlertModal.Portal, AlertModal.Overlay, AlertModal.Content, AlertModal.Header, AlertModal.Title, AlertModal.Description, AlertModal.Body, AlertModal.Footer, AlertModal.Action, AlertModal.Cancel
+**Sub-components:** AlertModalTrigger, AlertModalPortal, AlertModalOverlay, AlertModalContent, AlertModalHeader, AlertModalTitle, AlertModalDescription, AlertModalBody, AlertModalFooter, AlertModalAction, AlertModalCancel
 
 **Required structure:** Portal → Overlay + Content (same as Modal). Use for destructive confirmations — renders as `role="alertdialog"` via Radix AlertDialog primitive. No close button by default (force user to Action or Cancel).
 
@@ -1110,7 +1110,7 @@ import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, D
 | size | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | Width/height |
 | showCloseButton | `boolean` | `true` | Show X button |
 
-**Sub-components:** Drawer.Trigger, Drawer.Portal, Drawer.Overlay, Drawer.Content, Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body, Drawer.Footer, Drawer.Close
+**Sub-components:** DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose
 
 ---
 
@@ -1146,8 +1146,8 @@ import { Button, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipPr
 | showArrow | `boolean` | `true` | Show arrow |
 | sideOffset | `number` | `6` | Gap from trigger |
 
-**⚠️ Tooltip.Provider is required** — wrap your app or section with it.
-**Sub-components:** Tooltip.Provider, Tooltip.Trigger, Tooltip.Content, Tooltip.Arrow, Tooltip.Portal
+**⚠️ TooltipProvider is required** — wrap your app or section with it.
+**Sub-components:** TooltipProvider, TooltipTrigger, TooltipContent, TooltipArrow, TooltipPortal
 
 ---
 
@@ -1177,7 +1177,9 @@ import { Button, Popover, PopoverArrow, PopoverContent, PopoverPortal, PopoverTr
 | showArrow | `boolean` | `true` | Show arrow |
 | showClose | `boolean` | `false` | Show X button |
 
-**Sub-components:** Popover.Trigger, Popover.Content, Popover.Arrow, Popover.Close, Popover.Anchor, Popover.Portal
+**Sub-components:** PopoverTrigger, PopoverContent, PopoverArrow, PopoverClose, PopoverAnchor, PopoverPortal
+
+**Height:** PopoverContent never grows past the space left in the viewport; taller content scrolls inside it. Put layout classes (`flex`, `grid`, `gap-*`) on your own child element, not on `PopoverContent`.
 
 ---
 
@@ -1209,7 +1211,7 @@ import { Alert, AlertDescription, AlertTitle } from '@7onic-ui/react'
 | icon | `ReactNode` | auto | Custom icon (auto-selects by color) |
 | hideIcon | `boolean` | `false` | Hide icon |
 
-**Sub-components:** Alert.Title, Alert.Description
+**Sub-components:** AlertTitle, AlertDescription
 
 ---
 
@@ -1369,7 +1371,7 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbP
 | itemsBeforeCollapse | `number` | `1` | Items before ellipsis |
 | itemsAfterCollapse | `number` | `1` | Items after ellipsis |
 
-**Sub-components:** Breadcrumb.List, Breadcrumb.Item, Breadcrumb.Link (with `asChild`), Breadcrumb.Page, Breadcrumb.Separator, Breadcrumb.Ellipsis
+**Sub-components:** BreadcrumbList, BreadcrumbItem, BreadcrumbLink (with `asChild`), BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis
 
 ---
 
@@ -1410,7 +1412,7 @@ import { Pagination, PaginationContent, PaginationItems, PaginationNext, Paginat
 | loop | `boolean` | `false` | Wrap around |
 | disabled | `boolean` | `false` | Disabled state |
 
-**Sub-components:** Pagination.Content, Pagination.Item, Pagination.Link, Pagination.Previous, Pagination.Next, Pagination.First, Pagination.Last, Pagination.Ellipsis, Pagination.Items
+**Sub-components:** PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationFirst, PaginationLast, PaginationEllipsis, PaginationItems
 
 ---
 
@@ -1453,6 +1455,8 @@ import { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationM
 | orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout mode |
 | size | `'sm' \| 'md' \| 'default' \| 'lg'` | `'default'` | Item size |
 | collapsed | `boolean` | `false` | Icon-only mode (vertical) |
+| width | `number \| string` | `256` | Vertical width (px or CSS string). Inside a sidebar container that sets its own width, pass `"100%"` so the menu fits the container instead of overflowing it |
+| collapsedWidth | `number \| string` | sm 56 / md 60 / default 64 / lg 72 | Vertical width while `collapsed` |
 | radius | Same as Button | `'lg'` | Border radius |
 | fontWeight | `'normal' \| 'semibold'` | `'normal'` | Font weight |
 | delayDuration | `number` | `200` | Hover delay before content opens (horizontal only, ms) |
@@ -1473,7 +1477,7 @@ import { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationM
 |---|---|---|---|
 | color | `'default' \| 'primary'` | `'default'` | Indicator color (horizontal variant only) |
 
-**Sub-components:** NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Trigger, NavigationMenu.Content, NavigationMenu.Link, NavigationMenu.Group (vertical only, with `label`), NavigationMenu.Indicator (horizontal only), NavigationMenu.Viewport
+**Sub-components:** NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuGroup (vertical only, with `label`), NavigationMenuIndicator (horizontal only), NavigationMenuViewport
 
 ---
 
@@ -1613,7 +1617,7 @@ import { MetricCard, MetricCardDescription, MetricCardHeader, MetricCardSymbol,
 |---|---|---|---|
 | direction | `'up' \| 'down' \| 'neutral'` | — | Trend arrow + color |
 
-**Sub-components:** MetricCard.Header, MetricCard.Title, MetricCard.Value, MetricCard.Trend, MetricCard.Description, MetricCard.Symbol
+**Sub-components:** MetricCardHeader, MetricCardTitle, MetricCardValue, MetricCardTrend, MetricCardDescription, MetricCardSymbol
 
 ---
 
@@ -2001,7 +2005,7 @@ toast.success('Done')
 ```
 
 **Use `asChild` when combining 7onic components with routing `<Link>`.**
-Components that support `asChild`: Button, IconButton, Badge, Card, Modal.Trigger, Modal.Close, Drawer.Trigger, Drawer.Close, DropdownMenu.Item, Breadcrumb.Link, NavigationMenu.Link, Tooltip.Trigger, Popover.Trigger
+Components that support `asChild`: Button, IconButton, Badge, Card, ModalTrigger, ModalClose, DrawerTrigger, DrawerClose, DropdownMenuItem, BreadcrumbLink, NavigationMenuLink, TooltipTrigger, PopoverTrigger
 
 ---
 
@@ -2103,10 +2107,10 @@ const chartConfig = {
 ```
 
 **Z-index hierarchy (automatic via tokens) — never set custom z-index:**
-1. `z-dropdown` (1000) — Dropdown, Select
+1. `z-dropdown` (1000) — NavigationMenu sub-menu
 2. `z-overlay` (1100) — Modal/Drawer overlay
 3. `z-modal` (2000) — Modal/Drawer content
-4. `z-popover` (2100) — Popover
+4. `z-popover` (2100) — Popover, Dropdown, Select (same layer: the one opened last stays on top, so a Select or Dropdown opened inside a Modal, Drawer or Popover is never hidden)
 5. `z-tooltip` (2200) — Tooltip
 6. `z-toast` (3000) — Toast
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7onic-ui/react",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "private": false,
   "sideEffects": [
     "*.css"
@@ -19,7 +19,8 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.mjs",
       "require": "./dist/chart.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
@@ -37,7 +38,7 @@
     "dev:clean": "rm -rf .next && next dev",
     "build": "next build",
     "build:clean": "rm -rf .next && next build",
-    "build:lib": "tsup",
+    "build:lib": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup",
     "start": "next start",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",

package/dist/chart.d.mts

@@ -1,147 +0,0 @@
-import * as React from 'react';
-import * as RechartsPrimitive from 'recharts';
-
-declare const THEMES: {
-    readonly light: "";
-    readonly dark: ".dark";
-};
-type ChartConfig = {
-    [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
-};
-type ChartContextProps = {
-    config: ChartConfig;
-    hoverFade: boolean;
-    activeIndex: number | null;
-    setActiveIndex: (index: number | null) => void;
-    activeDataKey: string | null;
-    setActiveDataKey: (key: string | null) => void;
-};
-declare function useChart(): ChartContextProps;
-declare function ChartContainer({ id, className, children, config, hoverFade, ...props }: React.ComponentProps<'div'> & {
-    config: ChartConfig;
-    /** Enable hover-to-highlight: hovered bar group stays full opacity, others fade. */
-    hoverFade?: boolean;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
-}): React.JSX.Element;
-declare const ChartStyle: ({ id, config }: {
-    id: string;
-    config: ChartConfig;
-}) => React.JSX.Element;
-type ChartBarRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';
-type ChartBarVariant = 'solid' | 'outline';
-type ChartBarProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Bar>, 'radius'> & {
-    /** Named radius token. Auto-adapts corners based on layout and stack position. */
-    radius?: ChartBarRadius;
-    /** 'horizontal' rounds the right side (away from Y-axis). Default: 'vertical' */
-    layout?: 'vertical' | 'horizontal';
-    /** 'bottom' rounds the bottom corners (base of a stack). Default: 'top' */
-    stackPosition?: 'top' | 'bottom';
-    /** 'outline' renders a thick border with a semi-transparent fill. Default: 'solid' */
-    variant?: ChartBarVariant;
-};
-declare function ChartBar({ radius, layout, stackPosition, variant, fill, stackId, ...props }: ChartBarProps): React.JSX.Element;
-declare function ChartTooltip(props: React.ComponentProps<typeof RechartsPrimitive.Tooltip>): React.JSX.Element;
-type TooltipPayloadItem = {
-    dataKey?: string | number;
-    name?: string;
-    value?: number | string;
-    type?: string;
-    color?: string;
-    payload?: Record<string, unknown>;
-    fill?: string;
-};
-type ChartTooltipContentProps = React.ComponentProps<'div'> & {
-    active?: boolean;
-    payload?: TooltipPayloadItem[];
-    label?: string;
-    labelFormatter?: (value: unknown, payload: TooltipPayloadItem[]) => React.ReactNode;
-    labelClassName?: string;
-    formatter?: (value: unknown, name: string, item: TooltipPayloadItem, index: number, payload: Record<string, unknown>) => React.ReactNode;
-    color?: string;
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: 'line' | 'dot' | 'dashed';
-    nameKey?: string;
-    labelKey?: string;
-};
-declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
-type LegendPayloadItem = {
-    value?: string;
-    type?: string;
-    color?: string;
-    dataKey?: string;
-};
-type ChartLegendContentProps = React.ComponentProps<'div'> & {
-    payload?: LegendPayloadItem[];
-    verticalAlign?: 'top' | 'middle' | 'bottom';
-    align?: 'left' | 'center' | 'right';
-    /** Recharts passes layout when Legend uses layout prop */
-    layout?: 'horizontal' | 'vertical';
-    hideIcon?: boolean;
-    nameKey?: string;
-};
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, align, layout, nameKey, }: ChartLegendContentProps): React.JSX.Element | null;
-type ChartXAxisProps = React.ComponentProps<typeof RechartsPrimitive.XAxis>;
-type ChartYAxisProps = React.ComponentProps<typeof RechartsPrimitive.YAxis>;
-declare function ChartXAxis({ tick, padding, ...props }: ChartXAxisProps): React.JSX.Element;
-declare function ChartYAxis({ tick, width, ...props }: ChartYAxisProps): React.JSX.Element;
-type ChartLineType = 'linear' | 'monotone' | 'step' | 'natural';
-type ChartLineVariant = 'solid' | 'dashed';
-type ChartLineProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Line>, 'type' | 'dot' | 'activeDot'> & {
-    /** Curve interpolation type. Default: 'monotone' */
-    type?: ChartLineType;
-    /** Line style. 'dashed' applies stroke-dasharray. Default: 'solid' */
-    variant?: ChartLineVariant;
-    /** Show data point dots. Default: true */
-    dot?: boolean;
-    /** Show highlighted dot on hover. Default: true */
-    activeDot?: boolean;
-};
-declare function ChartLine({ type, variant, dot: showDot, activeDot: showActiveDot, stroke, dataKey, ...props }: ChartLineProps): React.JSX.Element;
-type ChartAreaType = 'linear' | 'monotone' | 'step' | 'natural';
-type ChartAreaVariant = 'solid' | 'gradient';
-type ChartAreaProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Area>, 'type' | 'dot' | 'activeDot'> & {
-    /** Curve interpolation type. Default: 'monotone' */
-    type?: ChartAreaType;
-    /** Fill style. 'gradient' auto-generates an SVG linearGradient. Default: 'solid' */
-    variant?: ChartAreaVariant;
-    /** Show data point dots. Default: true */
-    dot?: boolean;
-    /** Show highlighted dot on hover. Default: true */
-    activeDot?: boolean;
-    /** Fill opacity for this area (0–1). Default: 0.4 */
-    fillOpacity?: number;
-};
-declare function ChartArea({ type, variant, dot: showDot, activeDot: showActiveDot, fillOpacity, stroke, fill, dataKey, ...props }: ChartAreaProps): React.JSX.Element;
-type ChartPieVariant = 'pie' | 'donut';
-type ChartPieLabel = 'none' | 'outside' | 'inside';
-type ChartPieLabelContent = 'value' | 'percent';
-type ChartPieProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Pie>, 'label' | 'labelLine' | 'activeShape'> & {
-    /** 'donut' applies innerRadius automatically. Default: 'pie' */
-    variant?: ChartPieVariant;
-    /** Label position. Default: 'none' */
-    label?: ChartPieLabel;
-    /** Label display content. Default: 'value' */
-    labelContent?: ChartPieLabelContent;
-    /** Hover expand effect. Default: true */
-    activeShape?: boolean;
-    /** Override inner radius (default: 0 for pie, 60 for donut) */
-    innerRadius?: number;
-    /** Padding angle between slices (degrees). Default: 0 */
-    paddingAngle?: number;
-    /** Corner radius for slices. Default: 0 */
-    cornerRadius?: number;
-};
-declare function ChartPie({ variant, label: labelMode, labelContent, activeShape: showActiveShape, innerRadius, paddingAngle, cornerRadius, startAngle, endAngle, ...props }: ChartPieProps): React.JSX.Element;
-
-export { ChartContainer as Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartLine, type ChartLineType, type ChartLineVariant, ChartPie, type ChartPieLabel, type ChartPieLabelContent, type ChartPieVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis, useChart };