webcoreui 0.10.1 → 1.1.0-beta.0

package/package.json

@@ -1,14 +1,13 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.10.1",
+    "version": "1.1.0-beta.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
-        "build:local": "node scripts/build.js --local",
         "compile": "node scripts/sass.js",
         "test": "cd .. && vitest run && npm run test:sass",
         "test:dev": "vitest",
@@ -19,29 +18,30 @@
     },
     "devDependencies": {
         "@astrojs/check": "0.9.4",
-        "@astrojs/node": "9.0.2",
-        "@astrojs/react": "4.1.6",
-        "@astrojs/svelte": "7.0.4",
-        "@eslint/js": "9.18.0",
-        "@typescript-eslint/parser": "8.21.0",
-        "astro": "5.1.10",
-        "astro-eslint-parser": "1.1.0",
-        "eslint": "9.18.0",
+        "@astrojs/node": "9.1.3",
+        "@astrojs/react": "4.2.1",
+        "@astrojs/svelte": "7.0.7",
+        "@eslint/js": "9.23.0",
+        "@types/node": "24.2.1",
+        "@typescript-eslint/parser": "8.27.0",
+        "astro": "5.5.4",
+        "astro-eslint-parser": "1.2.2",
+        "eslint": "9.23.0",
         "eslint-plugin-astro": "1.3.1",
         "eslint-plugin-react": "7.37.4",
         "eslint-plugin-simple-import-sort": "12.1.1",
-        "eslint-plugin-svelte": "2.46.1",
+        "eslint-plugin-svelte": "3.3.3",
         "husky": "9.1.7",
         "jsdom": "26.0.0",
-        "lint-staged": "15.4.2",
+        "lint-staged": "15.5.0",
         "react": "19.0.0",
         "react-dom": "19.0.0",
-        "sass": "1.83.4",
+        "sass": "1.86.0",
         "sass-true": "8.1.0",
-        "svelte": "5.19.2",
-        "svelte-eslint-parser": "0.43.0",
-        "typescript": "5.7.3",
-        "typescript-eslint": "8.21.0",
+        "svelte": "5.25.3",
+        "svelte-eslint-parser": "1.1.0",
+        "typescript": "5.8.2",
+        "typescript-eslint": "8.27.0",
         "vite-tsconfig-paths": "5.1.4",
         "vitest": "3.0.4"
     },

package/react.d.ts

@@ -26,6 +26,7 @@ import type { ReactListProps as WReactListProps } from './components/List/list'
 import type { ReactMasonryProps as WReactMasonryProps } from './components/Masonry/masonry'
 import type { ReactMenuProps as WReactMenuProps } from './components/Menu/menu'
 import type { ReactModalProps as WReactModalProps } from './components/Modal/modal'
+import type { OTPInputProps as WOTPInputProps } from './components/OTPInput/otpinput'
 import type { ReactPaginationProps as WReactPaginationProps } from './components/Pagination/pagination'
 import type { ReactPopoverProps as WReactPopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
@@ -37,6 +38,7 @@ import type { ReactSheetProps as WReactSheetProps } from './components/Sheet/she
 import type { ReactSidebarProps as WReactSidebarProps } from './components/Sidebar/sidebar'
 import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { ReactSliderProps as WReactSliderProps } from './components/Slider/slider'
+import type { SpeedDialProps as WSpeedDialProps } from './components/SpeedDial/speeddial'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
 import type { ReactSpoilerProps as WReactSpoilerProps } from './components/Spoiler/spoiler'
 import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
@@ -82,6 +84,7 @@ declare module 'webcoreui/react' {
 	export const Masonry: FC<WReactMasonryProps>
 	export const Menu: FC<WReactMenuProps>
 	export const Modal: FC<WReactModalProps>
+	export const OTPInput: FC<WOTPInputProps>
 	export const Pagination: FC<WReactPaginationProps>
 	export const Popover: FC<WReactPopoverProps>
 	export const Progress: FC<WProgressProps>
@@ -93,6 +96,7 @@ declare module 'webcoreui/react' {
 	export const Sidebar: FC<WReactSidebarProps>
 	export const Skeleton: FC<WSkeletonProps>
 	export const Slider: FC<WReactSliderProps>
+	export const SpeedDial: FC<WSpeedDialProps>
 	export const Spinner: FC<WSpinnerProps>
 	export const Spoiler: FC<WReactSpoilerProps>
 	export const Stepper: FC<WStepperProps>
@@ -132,6 +136,7 @@ declare module 'webcoreui/react' {
 	export type MasonryProps = WReactMasonryProps
 	export type MenuProps = WReactMenuProps
 	export type ModalProps = WReactModalProps
+	export type OTPInputProps = WOTPInputProps
 	export type PaginationProps = WReactPaginationProps
 	export type PopoverProps = WReactPopoverProps
 	export type ProgressProps = WProgressProps
@@ -143,6 +148,7 @@ declare module 'webcoreui/react' {
 	export type SidebarProps = WReactSidebarProps
 	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WReactSliderProps
+	export type SpeedDialProps = WSpeedDialProps
 	export type SpinnerProps = WSpinnerProps
 	export type SpoilerProps = WReactSpoilerProps
 	export type StepperProps = WStepperProps

package/react.js

@@ -25,6 +25,7 @@ import ListComponent from './components/List/List.tsx'
 import MasonryComponent from './components/Masonry/Masonry.tsx'
 import MenuComponent from './components/Menu/Menu.tsx'
 import ModalComponent from './components/Modal/Modal.tsx'
+import OTPInputComponent from './components/OTPInput/OTPInput.tsx'
 import PaginationComponent from './components/Pagination/Pagination.tsx'
 import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
@@ -36,6 +37,7 @@ import SheetComponent from './components/Sheet/Sheet.tsx'
 import SidebarComponent from './components/Sidebar/Sidebar.tsx'
 import SkeletonComponent from './components/Skeleton/Skeleton.tsx'
 import SliderComponent from './components/Slider/Slider.tsx'
+import SpeedDialComponent from './components/SpeedDial/SpeedDial.tsx'
 import SpinnerComponent from './components/Spinner/Spinner.tsx'
 import SpoilerComponent from './components/Spoiler/Spoiler.tsx'
 import StepperComponent from './components/Stepper/Stepper.tsx'
@@ -75,6 +77,7 @@ export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const OTPInput = OTPInputComponent
 export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
@@ -86,6 +89,7 @@ export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
 export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
+export const SpeedDial = SpeedDialComponent
 export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent
 export const Stepper = StepperComponent

package/scss/config/color-palette.scss

@@ -1,4 +1,4 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $colorPalette: (
     'primary': var(--w-color-primary),

package/scss/config/css-values.scss

@@ -1,4 +1,4 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $overflowValues: auto,
     hidden,

package/scss/config/layout.scss

@@ -1,4 +1,4 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $breakpoints: (
     'xs': 600px,

package/scss/config/mixins.scss

@@ -3,7 +3,7 @@
 @use 'sass:list';
 @use 'sass:string';
 
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 @use './color-palette.scss' as *;
 @use './css-values.scss' as *;
 @use './layout.scss' as *;

package/scss/config/typography.scss

@@ -1,4 +1,4 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $fontTypes: (
     'regular':  (Regular, sans-serif),

package/scss/config/variables.scss

@@ -1,3 +1,3 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $disableAnimations: false !default;

package/scss/config.scss

@@ -1,4 +1,4 @@
-@forward '../../../webcore.config.scss';
+@forward 'webcore.config.scss';
 @forward './config/color-palette';
 @forward './config/css-values';
 @forward './config/typography';

package/scss/global/theme.scss

@@ -34,24 +34,24 @@
             --w-color-scheme: light;
             --w-color-primary: #000;
             --w-color-primary-10: #111;
-            --w-color-primary-20: #333;
-            --w-color-primary-30: #555;
-            --w-color-primary-40: #EEE;
+            --w-color-primary-20: #252525;
+            --w-color-primary-30: #757575;
+            --w-color-primary-40: #BBB;
             --w-color-primary-50: #DDD;
-            --w-color-primary-60: #FAFAFA;
+            --w-color-primary-60: #EEE;
             --w-color-primary-70: #FFF;
-        
-            --w-color-info: #0ABDE3;
-            --w-color-info-accent: #48DBFB;
-            --w-color-info-fg: #000;
-            --w-color-success: #10AC84;
-            --w-color-success-accent: #1DD1A1;
-            --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
-            --w-color-warning-accent: #f7AA61;
-            --w-color-warning-fg: #000;
-            --w-color-alert: #de3233;
-            --w-color-alert-accent: #EE5253;
+
+            --w-color-info: #0073A8;
+            --w-color-info-accent: #009FCC;
+            --w-color-info-fg: #FFF;
+            --w-color-success: #0A754D;
+            --w-color-success-accent: #16A062;
+            --w-color-success-fg: #FFF;
+            --w-color-warning: #C76D00;
+            --w-color-warning-accent: #E3861D;
+            --w-color-warning-fg: #FFF;
+            --w-color-alert: #A51415;
+            --w-color-alert-accent: #C62828;
             --w-color-alert-fg: #FFF;
             --w-color-overlay: #0000009e;
         }
@@ -87,29 +87,29 @@
 
     @if $theme == 'vintage' {
         #{$selector} {
-            --w-color-scheme: dark;
-            --w-color-primary: #000;
-            --w-color-primary-10: #111;
-            --w-color-primary-20: #6b4430;
-            --w-color-primary-30: #d6ccc2;
-            --w-color-primary-40: #cbb39a;
-            --w-color-primary-50: #e8d0b7;
-            --w-color-primary-60: #f5e6d5;
-            --w-color-primary-70: #f5ebe0;
-
-            --w-color-info: #6d95d1;
-            --w-color-info-accent: #48DBFB;
-            --w-color-info-fg: #000;
-            --w-color-success: #85c8ba;
-            --w-color-success-accent: #1DD1A1;
-            --w-color-success-fg: #000;
-            --w-color-warning: #e79d6b;
-            --w-color-warning-accent: #f7AA61;
+            --w-color-scheme: light;
+            --w-color-primary: #1A110D;
+            --w-color-primary-10: #2C1F18; 
+            --w-color-primary-20: #8B5A3C; 
+            --w-color-primary-30: #c09d82;
+            --w-color-primary-40: #B89678;
+            --w-color-primary-50: #D8BFA5;
+            --w-color-primary-60: #F0DCC4;
+            --w-color-primary-70: #F6E8DA;
+
+            --w-color-info: #3F73B7;
+            --w-color-info-accent: #4992f0; 
+            --w-color-info-fg: #FFF;
+            --w-color-success: #33907f;
+            --w-color-success-accent: #1BB890;
+            --w-color-success-fg: #FFF;
+            --w-color-warning: #e08447;
+            --w-color-warning-accent: #f1985c;
             --w-color-warning-fg: #000;
-            --w-color-alert: #bf6170;
-            --w-color-alert-accent: #EE5253;
+            --w-color-alert: #923B46;
+            --w-color-alert-accent: #C33F50;
             --w-color-alert-fg: #FFF;
-            --w-color-overlay: #0000009e;
+            --w-color-overlay: #33211B9E;
         }
     }
 
@@ -145,29 +145,57 @@
         #{$selector} {
             --w-color-scheme: dark;
             --w-color-primary: #FFF;
-            --w-color-primary-10: #EEE;
-            --w-color-primary-20: #fad5c0;
-            --w-color-primary-30: #eabfff;
-            --w-color-primary-40: #8212ba;
-            --w-color-primary-50: #9D2BD6;
+            --w-color-primary-10: #F0F0F0;
+            --w-color-primary-20: #F6C8A9;
+            --w-color-primary-30: #E5B1FF;
+            --w-color-primary-40: #761EAA;
+            --w-color-primary-50: #912BCE;
             --w-color-primary-60: #0f1b33;
-            --w-color-primary-70: #030d1e;
+            --w-color-primary-70: #060E21;
 
             --w-color-info: #1c98ff;
             --w-color-info-accent: #6be4ff;
             --w-color-info-fg: #000;
-            --w-color-success: #83e300;
-            --w-color-success-accent: #b7ff51;
+            --w-color-success: #7ADA00;
+            --w-color-success-accent: #A8FF4D;
             --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
-            --w-color-warning-accent: #ffb672;
+            --w-color-warning: #FF912F;
+            --w-color-warning-accent: #FFA95A;
             --w-color-warning-fg: #000;
-            --w-color-alert: #ff3333;
-            --w-color-alert-accent: #EE5253;
+            --w-color-alert: #F63131;
+            --w-color-alert-accent: #E84647;
             --w-color-alert-fg: #FFF;
             --w-color-overlay: #13002cc2;
         }
     }
+
+    @if $theme == 'velvet' {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #EDE0E0;
+            --w-color-primary-10: #D6C1C1;
+            --w-color-primary-20: #fab6b6;
+            --w-color-primary-30: #c47272;
+            --w-color-primary-40: #661B1B;
+            --w-color-primary-50: #520F0F;
+            --w-color-primary-60: #2E0B0B;
+            --w-color-primary-70: #180505;
+
+            --w-color-info: #36587A;
+            --w-color-info-accent: #4F7BAF;
+            --w-color-info-fg: #FFF;
+            --w-color-success: #f2b900;
+            --w-color-success-accent: #ffd341;
+            --w-color-success-fg: #000;
+            --w-color-warning: #e5601e;
+            --w-color-warning-accent: #E4783D;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #B8001F;
+            --w-color-alert-accent: #E00028;
+            --w-color-alert-fg: #FFF;
+            --w-color-overlay: #13050599;
+        }
+    }
 }
 
 

package/scss/resets.scss

@@ -38,6 +38,10 @@
     strong,
     b {
         font-family: Bold, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+        @if ($fontBold) {
+            font-weight: normal;
+        }
     }
 
     a {
@@ -117,8 +121,13 @@
     }
 
     thead,
-    tfoot {
+    tfoot,
+    th {
         @include typography(bold);
+
+        @if ($fontBold) {
+            font-weight: normal;
+        }
     }
 
     th,

package/svelte.d.ts

@@ -26,6 +26,7 @@ import type { SvelteListProps as WSvelteListProps } from './components/List/list
 import type { SvelteMasonryProps as WSvelteMasonryProps } from './components/Masonry/masonry'
 import type { SvelteMenuProps as WSvelteMenuProps } from './components/Menu/menu'
 import type { SvelteModalProps as WSvelteModalProps } from './components/Modal/modal'
+import type { OTPInputProps as WOTPInputProps } from './components/OTPInput/otpinput'
 import type { SveltePaginationProps as WSveltePaginationProps } from './components/Pagination/pagination'
 import type { SveltePopoverProps as WSveltePopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
@@ -37,6 +38,7 @@ import type { SvelteSheetProps as WSvelteSheetProps } from './components/Sheet/s
 import type { SvelteSidebarProps as WSvelteSidebarProps } from './components/Sidebar/sidebar'
 import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { SvelteSliderProps as WSvelteSliderProps } from './components/Slider/slider'
+import type { SpeedDialProps as WSpeedDialProps } from './components/SpeedDial/speeddial'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
 import type { SvelteSpoilerProps as WSvelteSpoilerProps } from './components/Spoiler/spoiler'
 import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
@@ -82,6 +84,7 @@ declare module 'webcoreui/svelte' {
 	export const Masonry: Component<WSvelteMasonryProps>
 	export const Menu: Component<WSvelteMenuProps>
 	export const Modal: Component<WSvelteModalProps>
+	export const OTPInput: Component<WOTPInputProps>
 	export const Pagination: Component<WSveltePaginationProps>
 	export const Popover: Component<WSveltePopoverProps>
 	export const Progress: Component<WProgressProps>
@@ -93,6 +96,7 @@ declare module 'webcoreui/svelte' {
 	export const Sidebar: Component<WSvelteSidebarProps>
 	export const Skeleton: Component<WSkeletonProps>
 	export const Slider: Component<WSvelteSliderProps>
+	export const SpeedDial: Component<WSpeedDialProps>
 	export const Spinner: Component<WSpinnerProps>
 	export const Spoiler: Component<WSvelteSpoilerProps>
 	export const Stepper: Component<WStepperProps>
@@ -132,6 +136,7 @@ declare module 'webcoreui/svelte' {
 	export type MasonryProps = WSvelteMasonryProps
 	export type MenuProps = WSvelteMenuProps
 	export type ModalProps = WSvelteModalProps
+	export type OTPInputProps = WOTPInputProps
 	export type PaginationProps = WSveltePaginationProps
 	export type PopoverProps = WSveltePopoverProps
 	export type ProgressProps = WProgressProps
@@ -143,6 +148,7 @@ declare module 'webcoreui/svelte' {
 	export type SidebarProps = WSvelteSidebarProps
 	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WSvelteSliderProps
+	export type SpeedDialProps = WSpeedDialProps
 	export type SpinnerProps = WSpinnerProps
 	export type SpoilerProps = WSvelteSpoilerProps
 	export type StepperProps = WStepperProps

package/svelte.js

@@ -25,6 +25,7 @@ import ListComponent from './components/List/List.svelte'
 import MasonryComponent from './components/Masonry/Masonry.svelte'
 import MenuComponent from './components/Menu/Menu.svelte'
 import ModalComponent from './components/Modal/Modal.svelte'
+import OTPInputComponent from './components/OTPInput/OTPInput.svelte'
 import PaginationComponent from './components/Pagination/Pagination.svelte'
 import PopoverComponent from './components/Popover/Popover.svelte'
 import ProgressComponent from './components/Progress/Progress.svelte'
@@ -36,6 +37,7 @@ import SheetComponent from './components/Sheet/Sheet.svelte'
 import SidebarComponent from './components/Sidebar/Sidebar.svelte'
 import SkeletonComponent from './components/Skeleton/Skeleton.svelte'
 import SliderComponent from './components/Slider/Slider.svelte'
+import SpeedDialComponent from './components/SpeedDial/SpeedDial.svelte'
 import SpinnerComponent from './components/Spinner/Spinner.svelte'
 import SpoilerComponent from './components/Spoiler/Spoiler.svelte'
 import StepperComponent from './components/Stepper/Stepper.svelte'
@@ -75,6 +77,7 @@ export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const OTPInput = OTPInputComponent
 export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
@@ -86,6 +89,7 @@ export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
 export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
+export const SpeedDial = SpeedDialComponent
 export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent
 export const Stepper = StepperComponent

package/utils/getLayoutClasses.ts

@@ -1,4 +1,4 @@
-import { classNames } from './classNames'
+import { classNames } from './classNames.ts'
 
 export type Gap = 'none'
     | 'xxs'

package/utils/modal.ts

@@ -1,4 +1,4 @@
-import { bodyFreeze } from './bodyFreeze'
+import { bodyFreeze } from './bodyFreeze.ts'
 
 export type ModalCallback = {
     trigger: Element | null

package/utils/popover.ts

@@ -1,5 +1,5 @@
-import { debounce } from './debounce'
-import { closeModal } from './modal'
+import { debounce } from './debounce.ts'
+import { closeModal } from './modal.ts'
 
 export type PopoverPosition = 'top'
     | 'top-start'

package/utils/webcore.ts

@@ -0,0 +1,28 @@
+import type { AstroIntegration } from 'astro'
+import path from 'path'
+
+export const webcore = (): AstroIntegration => {
+    return {
+        name: 'webcoreui',
+        hooks: {
+            'astro:config:setup': ({ updateConfig }) => {
+                updateConfig({
+                    vite: {
+                        ssr: {
+                            noExternal: ['webcoreui']
+                        },
+                        css: {
+                            preprocessorOptions: {
+                                scss: {
+                                    loadPaths: [
+                                        path.resolve(process.cwd())
+                                    ]
+                                }
+                            }
+                        }
+                    }
+                })
+            }
+        }
+    }
+}