lumen-plus 0.0.1 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leah
+
+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/README.md

@@ -0,0 +1,53 @@
+# Lumen Plus
+
+A comprehensive Svelte 5 UI Component Library with 60+ components.
+
+## Installation
+
+```bash
+npm install lumen-plus
+# or
+pnpm add lumen-plus
+# or
+bun add lumen-plus
+```
+
+## Requirements
+
+- Svelte 5.0+
+- Node.js 18+
+
+## Usage
+
+```svelte
+<script>
+  import { Button, Input, Select, Dialog } from 'lumen-plus';
+</script>
+
+<Button type="primary">Click me</Button>
+<Input placeholder="Enter text..." />
+```
+
+## Available Components
+
+### Basic
+- Button, Icon, Link, Space, Divider
+
+### Form
+- Input, InputNumber, InputTag, Textarea, Select, Checkbox, Radio, Switch, Slider, Rating, ColorPicker, DatePicker, TimePicker, DateTimePicker, Cascader, Transfer, Upload, Form, FormItem, Autocomplete, PinInput
+
+### Data Display
+- Table, Tag, Badge, Avatar, Card, Carousel, Collapse, Descriptions, Empty, Image, Pagination, Progress, Result, Skeleton, Statistic, Timeline, Tree, TreeSelect
+
+### Navigation
+- Menu, Tabs, Breadcrumb, Dropdown, Steps, Affix, Backtop
+
+### Feedback
+- Alert, Dialog, Drawer, Loading, Message, MessageBox, Notification, Popconfirm, Popover, Tooltip
+
+### Layout
+- Container, Header, Main, Footer, Aside, Calendar, Segmented, Watermark
+
+## License
+
+MIT

package/dist/components/Alert/Alert.svelte

@@ -2,7 +2,7 @@
     import type { Snippet } from 'svelte'
     import type { IconNode } from 'lucide'
     import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from 'lucide'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
 
     interface AlertProps {
         type?: 'info' | 'success' | 'warning' | 'danger'

package/dist/components/Autocomplete/Autocomplete.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { X, Loader2, ChevronDown } from 'lucide'
 
     interface SuggestionItem {

package/dist/components/Backtop/Backtop.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
     import { onMount, onDestroy } from 'svelte'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ArrowUp } from 'lucide'
 
     interface BacktopProps {

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import type { BreadcrumbProps } from './types'
 
     interface Props extends BreadcrumbProps {}

package/dist/components/Button/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import Icon from '../../Icon/src/Icon.svelte'
     import { LoaderCircle } from 'lucide'
     import type { ButtonProps } from './types'
 

package/dist/components/Calendar/Calendar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide'
 
     interface Props {

package/dist/components/Carousel/Carousel.svelte

@@ -3,7 +3,7 @@
     import type { CarouselDirection, CarouselIndicatorTrigger, CarouselIndicatorPosition } from './types'
     import { setContext, onMount, onDestroy } from 'svelte'
     import { CAROUSEL_CONTEXT_KEY, type CarouselContext } from './CarouselContext'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from 'lucide'
 
     interface CarouselProps {

package/dist/components/Cascader/Cascader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
     import { createDropdownTransition } from '../../utils'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronRight, ChevronDown, X, Check } from 'lucide'
     import type { CascaderOption, CascaderProps as Props } from './types'
 

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Check, Minus } from 'lucide'
     import type { Snippet } from 'svelte'
 

package/dist/components/Collapse/CollapseItem.svelte

@@ -2,7 +2,7 @@
     import type { Snippet } from 'svelte'
     import { getContext, onMount } from 'svelte'
     import { COLLAPSE_CONTEXT_KEY, type CollapseContext } from './CollapseContext'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronRight } from 'lucide'
 
     interface CollapseItemProps {

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { ColorPickerSize } from './types'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronDown } from 'lucide'
     import { onMount, onDestroy } from 'svelte'
     import { createDropdownTransition } from '../../utils'

package/dist/components/DatePicker/DatePicker.svelte

@@ -2,7 +2,7 @@
     import type { DatePickerType, DatePickerSize } from './types'
     import { onMount, onDestroy } from 'svelte'
     import { createCenteredDropdownTransition } from '../../utils'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Calendar, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, X } from 'lucide'
 
     interface DatePickerProps {

package/dist/components/DateTimePicker/DateTimePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { createDropdownTransition } from '../../utils'
     import { onDestroy, onMount } from 'svelte'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Calendar, ChevronLeft, ChevronRight, X, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide'
 
     import type { DateTimePickerProps } from './types'

package/dist/components/Dialog/Dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { X } from 'lucide'
 
     interface DialogProps {

package/dist/components/Drawer/Drawer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
     import type { DrawerDirection } from './types'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { X } from 'lucide'
 
     interface DrawerProps {

package/dist/components/Dropdown/Dropdown.svelte

@@ -308,7 +308,9 @@
                 onmouseenter={handleTriggerEnter}
                 onmouseleave={handleTriggerLeave}
             >
-                <Icon icon={ChevronDown} size={caretIconSize} aria-hidden="true" />
+                <span aria-hidden="true">
+                    <Icon icon={ChevronDown} size={caretIconSize} />
+                </span>
             </button>
         </div>
     {:else}

package/dist/components/Image/Image.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
     import type { ImageFit } from './types'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { X, ChevronLeft, ChevronRight } from 'lucide'
 
     interface ImageProps {

package/dist/components/Input/Input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import Icon from '../../Icon/src/Icon.svelte'
     import { Eye, EyeOff, XCircle } from 'lucide'
     import type { InputProps } from './types'
 

package/dist/components/InputNumber/InputNumber.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { InputNumberSize } from './types'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Minus, Plus, ChevronUp, ChevronDown } from 'lucide'
 
     interface InputNumberProps {

package/dist/components/Loading/Loading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Loader2 } from 'lucide'
 
     interface LoadingProps {

package/dist/components/Menu/Menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import Icon from '../../Icon/src/Icon.svelte'
     import { ChevronRight, ChevronDown } from 'lucide'
     import { onMount, onDestroy } from 'svelte'
     import { slide, fade, scale } from 'svelte/transition'

package/dist/components/Message/MessageBox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { CheckCircle, AlertTriangle, XCircle, Info, X } from 'lucide'
     import type { IconNode } from 'lucide'
     import type { MessageItem, MessageType, CloseMessageFn } from './types'

package/dist/components/MessageBox/MessageBox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Dialog from '../../Dialog/src'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { CheckCircle, AlertTriangle, XCircle, Info, X } from 'lucide'
     import type { IconNode } from 'lucide'
     import type { MessageBoxOptions, MessageBoxType } from './types'

package/dist/components/Notification/Notification.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { CheckCircle, AlertTriangle, XCircle, Info, X } from 'lucide'
     import type { IconNode } from 'lucide'
     import type { NotificationItem, NotificationOptions, NotificationType, NotificationPlacement } from './types'

package/dist/components/Pagination/Pagination.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import type { PaginationLayout } from './types'
-    import Icon from '../Icon'
-    import Button from '../Button'
-    import Select from '../Select'
-    import Input from '../Input'
+    import Icon from '../../Icon/src/Icon.svelte'
+    import Button from '../../Button/src/Button.svelte'
+    import Select from '../../Select/src/Select.svelte'
+    import Input from '../../Input/src/Input.svelte'
     import { ChevronLeft, ChevronRight } from 'lucide'
 
     interface PaginationProps {

package/dist/components/Popconfirm/Popconfirm.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import Button from '../../Button/src'
     import { CircleHelp, CircleAlert, Info, CircleCheck } from 'lucide'
 

package/dist/components/Result/Result.svelte

@@ -2,7 +2,7 @@
     import type { Snippet } from 'svelte'
     import type { ResultStatus } from './types'
     import type { IconNode } from 'lucide'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { CheckCircle, AlertTriangle, XCircle, Info } from 'lucide'
 
     interface ResultProps {

package/dist/components/Select/Select.svelte

@@ -2,7 +2,7 @@
     import type { SelectOption, SelectProps } from './types'
     import { onMount, onDestroy, tick } from 'svelte'
     import { createDropdownTransition } from '../../utils'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronDown, X } from 'lucide'
 
     let {

package/dist/components/Steps/Step.svelte

@@ -3,7 +3,7 @@
     import type { StepStatus } from './types'
     import { getContext } from 'svelte'
     import { STEPS_CONTEXT_KEY, type StepsContext } from './StepsContext'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Check, X } from 'lucide'
 
     interface StepProps {

package/dist/components/Switch/Switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Loader } from 'lucide'
     import type { IconNode } from 'lucide'
     import type { Snippet } from 'svelte'

package/dist/components/Tabs/Tabs.svelte

@@ -2,7 +2,7 @@
     import type { Snippet } from 'svelte'
     import { setContext } from 'svelte'
     import { TABS_CONTEXT_KEY } from './TabsContext'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronLeft, ChevronRight, X, Plus } from 'lucide'
 
     interface TabsProps {

package/dist/components/Tag/Tag.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { X } from 'lucide'
 
     interface TagProps {

package/dist/components/Textarea/Textarea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { X } from 'lucide'
 
     interface TextareaProps {

package/dist/components/TimePicker/TimePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { createDropdownTransition } from '../../utils'
     import { onMount, tick } from 'svelte'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Clock, X, ChevronDown } from 'lucide'
 
     interface Props {

package/dist/components/Transfer/Transfer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { TransferItem, TransferDirection } from './types'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronLeft, ChevronRight } from 'lucide'
     import Checkbox from '../../Checkbox/src'
 

package/dist/components/Tree/TreeNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { TreeNode as TreeNodeType } from './types'
     import { slide } from 'svelte/transition'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { ChevronRight } from 'lucide'
     import Checkbox from '../../Checkbox/src'
     import TreeNode from './TreeNode.svelte'

package/dist/components/TreeSelect/TreeSelect.svelte

@@ -2,7 +2,7 @@
     import { onMount, onDestroy, tick } from 'svelte'
     import { slide } from 'svelte/transition'
     import { createDropdownTransition } from '../../utils'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import Checkbox from '../../Checkbox/src'
     import Tag from '../../Tag/src'
     import { ChevronDown, ChevronRight, X, Check, Loader2 } from 'lucide'

package/dist/components/Upload/Upload.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
     import type { UploadFile } from './types'
-    import Icon from '../Icon'
+    import { Icon } from 'lumen-plus'
     import { Upload as UploadIcon, X, File, Check, AlertCircle, Plus, Eye, Image as ImageIcon } from 'lucide'
 
     interface UploadProps {