webcoreui 1.1.0 → 1.2.0

package/components/RangeSlider/rangeslider.module.scss

@@ -0,0 +1,143 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-range-slider-background: var(--w-color-primary-50);
+    --w-range-slider-color: var(--w-color-primary);
+    --w-range-slider-thumb: var(--w-color-primary-50);
+}
+
+.label {
+    @include layout(flex, column, xs);
+
+    cursor: pointer;
+}
+
+.container {
+    @include layout(flex, v-center, xs);
+
+    svg {
+        @include size(14px);
+    }
+
+    button {
+        @include layout(flex, v-center, xs);
+        @include background(transparent);
+        @include typography(primary, default);
+        @include border(0);
+
+        cursor: pointer;
+    }
+}
+
+.slider {
+    @include position(relative);
+    @include border-radius(xl);
+    @include size(h10px);
+    @include background(var(--w-range-slider-background));
+    @include visibility(hidden);
+
+    flex: 1;
+}
+
+.range {
+    @include position(absolute);
+    @include background(var(--w-range-slider-color));
+    @include size('h100%');
+    @include border-radius();
+
+    &[data-disabled] {
+        @include background(primary-30);
+        cursor: no-drop;
+    }
+}
+
+.input {
+    @include size('w100%', h10px);
+    @include background(none);
+    @include spacing(m0);
+    @include position(absolute, t0);
+
+    -webkit-appearance: none;
+    appearance: none;
+    pointer-events: none;
+
+    &:focus-visible {
+        outline: none;
+
+        &::-webkit-slider-thumb {
+            @include border(info);
+        }
+
+        &::-moz-range-thumb {
+            @include border(info);
+        }
+    }
+
+    &[disabled]::-webkit-slider-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        cursor: no-drop;
+    }
+
+    &[disabled]::-moz-range-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        cursor: no-drop;
+    }
+
+    &[data-min]::-webkit-slider-thumb  {
+        box-shadow: 3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    &[data-max]::-webkit-slider-thumb  {
+        box-shadow: -3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    &[data-min]::-moz-range-thumb   {
+        box-shadow: 3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    &[data-max]::-moz-range-thumb   {
+        box-shadow: -3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    
+    &[disabled][data-min]::-webkit-slider-thumb  {
+        box-shadow: 3px 0 0 3px var(--w-color-primary-30);
+    }
+
+    &[disabled][data-max]::-webkit-slider-thumb  {
+        box-shadow: -3px 0 0 3px var(--w-color-primary-30);
+    }
+
+    &[disabled][data-min]::-moz-range-thumb   {
+        box-shadow: 3px 0 0 3px var(--w-color-primary-30);
+    }
+
+    &[disabled][data-max]::-moz-range-thumb   {
+        box-shadow: -3px 0 0 3px var(--w-color-primary-30);
+    }
+}
+
+.input::-webkit-slider-thumb {
+    @include background(var(--w-range-slider-thumb));
+    @include size(10px);
+    @include border-radius(max);
+    @include border(var(--w-range-slider-color));
+
+    -webkit-appearance: none;
+    appearance: none;
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.input::-moz-range-thumb {
+    @include background(var(--w-range-slider-thumb));
+    @include size(9px);
+    @include border-radius(max);
+    @include border(var(--w-range-slider-color));
+
+    pointer-events: auto;
+    appearance: none;
+    cursor: pointer;
+}

package/components/RangeSlider/rangeslider.ts

@@ -0,0 +1,37 @@
+import type { IconProps } from '../Icon/icon'
+
+export type RangeSliderEventType = {
+    min: number
+    max: number
+}
+
+export type RangeSliderProps = {
+    min?: number
+    max?: number
+    selectedMin?: number
+    selectedMax?: number
+    step?: number
+    minGap?: number
+    disabled?: boolean
+    color?: string
+    background?: string
+    thumb?: string
+    label?: string
+    subText?: string
+    minLabel?: string
+    maxLabel?: string
+    minIcon?: IconProps['type'] | string
+    maxIcon?: IconProps['type'] | string
+    interactiveLabels?: boolean
+    updateLabels?: boolean
+    className?: string
+}
+
+export type SvelteRangeSliderProps = {
+    onChange?: (event: RangeSliderEventType) => void
+} & RangeSliderProps
+
+export type ReactRangeSliderProps = {
+    onChange?: (event: RangeSliderEventType) => void
+} & RangeSliderProps
+

package/components/Sidebar/Sidebar.astro

@@ -6,8 +6,6 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './sidebar.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends SidebarProps {}
 
 const {
@@ -40,7 +38,7 @@ const classes = [
                                 <Fragment>
                                     {item.icon.startsWith('<svg')
                                         ? <Fragment set:html={item.icon} />
-                                        : <Icon type={item.icon as IconProps['type']} />
+                                        : <Icon type={item.icon} />
                                     }
                                 </Fragment>
                             )}

package/components/Stepper/Stepper.astro

@@ -6,8 +6,6 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './stepper.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends StepperProps {}
 
 const {
@@ -46,7 +44,7 @@ const styleVariables = [
                     <Fragment>
                         {item.icon.startsWith('<svg')
                             ? <Fragment set:html={item.icon} />
-                            : <Icon type={item.icon as IconProps['type']} />
+                            : <Icon type={item.icon} />
                         }
                     </Fragment>
                 ) : index + 1}

package/index.d.ts

@@ -1,4 +1,9 @@
 
+export type Breakpoint = 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+
 export type Gap = 'none'
     | 'xxs'
     | 'xs'
@@ -68,6 +73,13 @@ export type getLayoutClassesConfig = {
     wrap?: Responsive<Wrap>
 }
 
+export type ModalInstance = {
+    open: (freeze?: boolean) => void
+    close: () => void
+    replaceWith: (modal: ModalInstance) => void
+    remove: () => void
+}
+
 export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
@@ -147,12 +159,20 @@ declare module 'webcoreui' {
         callback: any,
         all?: boolean
     ) => void
+    export const off: (
+        selector: string | HTMLElement | Document,
+        event: string,
+        fn: any,
+        all?: boolean
+    ) => void
 
     export const dispatch: (event: string, detail: unknown) => void
     export const listen: (event: string, callback: (e: any) => unknown) => {
         remove: () => void
     }
 
+    export const getBreakpoint: () => string
+
     export const getLayoutClasses: (config: getLayoutClassesConfig) => string
 
     export const clamp: (num: number, min: number, max: number) => number
@@ -164,10 +184,9 @@ declare module 'webcoreui' {
         output: [start: number, end: number]
     ) => number
 
-    export const modal: (config: Modal | string) => {
-        open: () => void
-        remove: () => void
-    } | void
+    export const isOneOf: <T extends string>(values: readonly T[]) => (value: string) => value is T
+
+    export const modal: (config: Modal | string) => ModalInstance | undefined 
     export const closeModal: (modal: string) => void
 
     export const popover: (config: Popover) => {

package/index.js

@@ -5,8 +5,10 @@ export * from './utils/cookies.ts'
 export * from './utils/debounce.ts'
 export * from './utils/DOMUtils.ts'
 export * from './utils/event.ts'
+export * from './utils/getBreakpoint.ts'
 export * from './utils/getLayoutClasses.ts'
 export * from './utils/interpolate.ts'
+export * from './utils/isOneOf.ts'
 export * from './utils/modal.ts'
 export * from './utils/popover.ts'
 export * from './utils/toast.ts'

package/package.json

@@ -1,103 +1,109 @@
-{
-    "name": "webcoreui",
-    "type": "module",
-    "version": "1.1.0",
-    "scripts": {
-        "prepare": "husky",
-        "pre-commit": "lint-staged",
-        "dev": "astro dev",
-        "build": "astro check && astro build",
-        "build:package": "node scripts/build.js",
-        "compile": "node scripts/sass.js",
-        "test": "cd .. && vitest run && npm run test:sass",
-        "test:dev": "vitest",
-        "test:run": "vitest run",
-        "test:sass": "vitest run src/tests/scss.test.js --config astro.config.mjs",
-        "create-component": "node scripts/createComponent.js",
-        "lint": "eslint src/**/* --fix"
-    },
-    "devDependencies": {
-        "@astrojs/check": "0.9.4",
-        "@astrojs/node": "9.4.1",
-        "@astrojs/react": "4.3.0",
-        "@astrojs/svelte": "7.1.0",
-        "@eslint/js": "9.23.0",
-        "@typescript-eslint/parser": "8.39.1",
-        "astro": "5.13.0",
-        "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": "3.3.3",
-        "husky": "9.1.7",
-        "jsdom": "26.0.0",
-        "lint-staged": "15.5.0",
-        "react": "19.0.0",
-        "react-dom": "19.0.0",
-        "sass": "1.90.0",
-        "sass-true": "8.1.0",
-        "svelte": "5.38.1",
-        "svelte-eslint-parser": "1.1.0",
-        "typescript": "5.9.2",
-        "typescript-eslint": "8.39.1",
-        "vite-tsconfig-paths": "5.1.4",
-        "vitest": "3.0.4"
-    },
-    "exports": {
-        ".": "./index.js",
-        "./astro": "./astro.js",
-        "./svelte": "./svelte.js",
-        "./react": "./react.js",
-        "./icons": "./icons.js",
-        "./integration": "./integration.js",
-        "./styles": "./scss/index.scss",
-        "./config": "./scss/config.scss"
-    },
-    "files": [
-        "components",
-        "icons",
-        "scss",
-        "utils",
-        "astro.d.ts",
-        "astro.js",
-        "icons.d.ts",
-        "icons.js",
-        "svelte.d.ts",
-        "svelte.js",
-        "react.d.ts",
-        "react.js",
-        "index.js",
-        "index.d.ts",
-        "integration.js",
-        "integration.d.ts",
-        "README.md",
-        "LICENSE"
-    ],
-    "license": "MIT",
-    "description": "UI component and template library for Astro, Svelte, and React apps styled with Sass.",
-    "keywords": [
-        "webcore",
-        "component",
-        "components",
-        "ui components",
-        "component library",
-        "astro components",
-        "svelte components",
-        "react components",
-        "frontend",
-        "library",
-        "sass"
-    ],
-    "homepage": "https://webcoreui.dev",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Frontendland/webcoreui.git"
-    },
-    "bugs": {
-        "url": "https://github.com/Frontendland/webcoreui/issues"
-    },
-    "lint-staged": {
-        "*.{js,ts,jsx,tsx,svelte,astro}": "eslint src/**/*"
-    }
-}
+{
+    "name": "webcoreui",
+    "type": "module",
+    "version": "1.2.0",
+    "scripts": {
+        "prepare": "husky",
+        "pre-commit": "lint-staged",
+        "dev": "astro dev",
+        "start": "astro preview",
+        "build": "astro check && astro build",
+        "build:package": "node scripts/build.js",
+        "compile": "node scripts/sass.js",
+        "test": "cd .. && vitest run && npm run test:sass",
+        "test:dev": "vitest",
+        "test:run": "vitest run",
+        "test:sass": "vitest run src/tests/unit/scss.test.js --config astro.config.mjs",
+        "test:e2e": "playwright test",
+        "test:e2e:update": "playwright test --update-snapshots",
+        "test:e2e:ui": "playwright test --ui",
+        "create-component": "node scripts/createComponent.js",
+        "lint": "eslint src/**/* --fix"
+    },
+    "devDependencies": {
+        "@astrojs/check": "0.9.4",
+        "@astrojs/node": "9.4.1",
+        "@astrojs/react": "4.3.0",
+        "@astrojs/svelte": "7.1.0",
+        "@eslint/js": "9.23.0",
+        "@playwright/test": "1.55.1",
+        "@types/node": "24.6.2",
+        "@typescript-eslint/parser": "8.39.1",
+        "astro": "5.13.0",
+        "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": "3.3.3",
+        "husky": "9.1.7",
+        "jsdom": "26.0.0",
+        "lint-staged": "15.5.0",
+        "react": "19.0.0",
+        "react-dom": "19.0.0",
+        "sass": "1.90.0",
+        "sass-true": "8.1.0",
+        "svelte": "5.38.1",
+        "svelte-eslint-parser": "1.1.0",
+        "typescript": "5.9.2",
+        "typescript-eslint": "8.39.1",
+        "vite-tsconfig-paths": "5.1.4",
+        "vitest": "3.0.4"
+    },
+    "exports": {
+        ".": "./index.js",
+        "./astro": "./astro.js",
+        "./svelte": "./svelte.js",
+        "./react": "./react.js",
+        "./icons": "./icons.js",
+        "./integration": "./integration.js",
+        "./styles": "./scss/index.scss",
+        "./config": "./scss/config.scss"
+    },
+    "files": [
+        "components",
+        "icons",
+        "scss",
+        "utils",
+        "astro.d.ts",
+        "astro.js",
+        "icons.d.ts",
+        "icons.js",
+        "svelte.d.ts",
+        "svelte.js",
+        "react.d.ts",
+        "react.js",
+        "index.js",
+        "index.d.ts",
+        "integration.js",
+        "integration.d.ts",
+        "README.md",
+        "LICENSE"
+    ],
+    "license": "MIT",
+    "description": "UI component and template library for Astro, Svelte, and React apps styled with Sass.",
+    "keywords": [
+        "webcore",
+        "component",
+        "components",
+        "ui components",
+        "component library",
+        "astro components",
+        "svelte components",
+        "react components",
+        "frontend",
+        "library",
+        "sass"
+    ],
+    "homepage": "https://webcoreui.dev",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Frontendland/webcoreui.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Frontendland/webcoreui/issues"
+    },
+    "lint-staged": {
+        "*.{js,ts,jsx,tsx,svelte,astro}": "eslint src/**/*"
+    }
+}

package/react.d.ts

@@ -32,6 +32,7 @@ import type { ReactPaginationProps as WReactPaginationProps } from './components
 import type { ReactPopoverProps as WReactPopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps as WReactRadioProps } from './components/Radio/radio'
+import type { ReactRangeSliderProps as WReactRangeSliderProps } from './components/RangeSlider/rangeslider'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
 import type { ReactRibbonProps as WReactRibbonProps } from './components/Ribbon/ribbon'
 import type { ReactSelectProps as WReactSelectProps } from './components/Select/select'
@@ -55,6 +56,7 @@ import type { ReactToastProps as WReactToastProps } from './components/Toast/toa
 import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
 import type { ListEventType as WListEventType } from './components/List/list.ts'
 import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { RangeSliderEventType as WRangeSliderEventType } from './components/RangeSlider/rangeslider.ts'
 import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
 
 declare module 'webcoreui/react' {
@@ -91,6 +93,7 @@ declare module 'webcoreui/react' {
 	export const Popover: FC<WReactPopoverProps>
 	export const Progress: FC<WProgressProps>
 	export const Radio: FC<WReactRadioProps>
+	export const RangeSlider: FC<WReactRangeSliderProps>
 	export const Rating: FC<WRatingProps>
 	export const Ribbon: FC<WReactRibbonProps>
 	export const Select: FC<WReactSelectProps>
@@ -144,6 +147,7 @@ declare module 'webcoreui/react' {
 	export type PopoverProps = WReactPopoverProps
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WReactRadioProps
+	export type RangeSliderProps = WReactRangeSliderProps
 	export type RatingProps = WRatingProps
 	export type RibbonProps = WReactRibbonProps
 	export type SelectProps = WReactSelectProps
@@ -168,5 +172,6 @@ declare module 'webcoreui/react' {
 	export type HeadingObject = WHeadingObject
 	export type ListEventType = WListEventType
 	export type PaginationEventType = WPaginationEventType
+	export type RangeSliderEventType = WRangeSliderEventType
 	export type SelectEventType = WSelectEventType
 }

package/react.js

@@ -31,6 +31,7 @@ import PaginationComponent from './components/Pagination/Pagination.tsx'
 import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
+import RangeSliderComponent from './components/RangeSlider/RangeSlider.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
 import RibbonComponent from './components/Ribbon/Ribbon.tsx'
 import SelectComponent from './components/Select/Select.tsx'
@@ -84,6 +85,7 @@ export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
+export const RangeSlider = RangeSliderComponent
 export const Rating = RatingComponent
 export const Ribbon = RibbonComponent
 export const Select = SelectComponent

package/scss/global/breakpoints.scss

@@ -0,0 +1,15 @@
+@use '../config' as *;
+
+@mixin breakpoints() {
+    :root {
+        --w-breakpoint: xs;
+    }
+
+    @each $key, $value in $breakpoints {
+        @include media($key) {
+            :root {
+                --w-breakpoint: #{$key};
+            }
+        }
+    }
+}

package/scss/setup.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 @use './resets.scss' as *;
+@use './global/breakpoints.scss' as *;
 @use './global/scrollbar.scss' as *;
 @use './global/theme.scss' as *;
 @use './global/tooltip.scss' as *;
@@ -10,7 +11,8 @@ $config: (
     includeResets: true,
     includeUtilities: true,
     includeTooltip: true,
-    includeScrollbarStyles: true
+    includeScrollbarStyles: true,
+    includeBreakpoints: true
 );
 
 body {
@@ -43,6 +45,10 @@ body {
         @include tooltip();
     }
 
+    @if (config('includeBreakpoints')) {
+        @include breakpoints();
+    }
+
     @if (config('theme')) {
         @include theme(config('theme'));
     }

package/svelte.d.ts

@@ -32,6 +32,7 @@ import type { SveltePaginationProps as WSveltePaginationProps } from './componen
 import type { SveltePopoverProps as WSveltePopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { SvelteRadioProps as WSvelteRadioProps } from './components/Radio/radio'
+import type { SvelteRangeSliderProps as WSvelteRangeSliderProps } from './components/RangeSlider/rangeslider'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
 import type { SvelteRibbonProps as WSvelteRibbonProps } from './components/Ribbon/ribbon'
 import type { SvelteSelectProps as WSvelteSelectProps } from './components/Select/select'
@@ -55,6 +56,7 @@ import type { SvelteToastProps as WSvelteToastProps } from './components/Toast/t
 import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
 import type { ListEventType as WListEventType } from './components/List/list.ts'
 import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { RangeSliderEventType as WRangeSliderEventType } from './components/RangeSlider/rangeslider.ts'
 import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
 
 declare module 'webcoreui/svelte' {
@@ -91,6 +93,7 @@ declare module 'webcoreui/svelte' {
 	export const Popover: Component<WSveltePopoverProps>
 	export const Progress: Component<WProgressProps>
 	export const Radio: Component<WSvelteRadioProps>
+	export const RangeSlider: Component<WSvelteRangeSliderProps>
 	export const Rating: Component<WRatingProps>
 	export const Ribbon: Component<WSvelteRibbonProps>
 	export const Select: Component<WSvelteSelectProps>
@@ -144,6 +147,7 @@ declare module 'webcoreui/svelte' {
 	export type PopoverProps = WSveltePopoverProps
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WSvelteRadioProps
+	export type RangeSliderProps = WSvelteRangeSliderProps
 	export type RatingProps = WRatingProps
 	export type RibbonProps = WSvelteRibbonProps
 	export type SelectProps = WSvelteSelectProps
@@ -168,5 +172,6 @@ declare module 'webcoreui/svelte' {
 	export type HeadingObject = WHeadingObject
 	export type ListEventType = WListEventType
 	export type PaginationEventType = WPaginationEventType
+	export type RangeSliderEventType = WRangeSliderEventType
 	export type SelectEventType = WSelectEventType
 }

package/svelte.js

@@ -31,6 +31,7 @@ import PaginationComponent from './components/Pagination/Pagination.svelte'
 import PopoverComponent from './components/Popover/Popover.svelte'
 import ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
+import RangeSliderComponent from './components/RangeSlider/RangeSlider.svelte'
 import RatingComponent from './components/Rating/Rating.svelte'
 import RibbonComponent from './components/Ribbon/Ribbon.svelte'
 import SelectComponent from './components/Select/Select.svelte'
@@ -84,6 +85,7 @@ export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
+export const RangeSlider = RangeSliderComponent
 export const Rating = RatingComponent
 export const Ribbon = RibbonComponent
 export const Select = SelectComponent