webcoreui 0.6.1 → 0.7.0

package/components/Stepper/stepper.module.scss

@@ -0,0 +1,102 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-stepper-color-border: var(--w-color-primary-50);
+    --w-stepper-color-active: var(--w-color-info);
+    --w-stepper-color-complete: var(--w-color-success);
+}
+
+$size: 20px;
+
+.stepper {
+    @include layout(flex, default, column);
+    @include spacing(0);
+    @include size('w100%');
+
+    list-style-type: none;
+
+    &:not(.borderless) .number {
+        border: 2px solid var(--w-stepper-color-border);
+    }
+
+    li {
+        @include layout(flex, sm, v-center);
+        @include typography(normal);
+        @include spacing(m0);
+
+        flex: 1;
+
+        &.connect {
+            @include position(relative);
+
+            &::before {
+                @include position(absolute, l16px);
+                @include background(var(--w-stepper-color-border));
+                @include size(w2px);
+
+                top: -50%;
+                bottom: calc(50% + $size);
+
+                content: '';
+            }
+
+            &.completed::before,
+            &.active::before {
+                @include background(var(--w-stepper-color-complete));
+            }
+        }
+
+        &.active .number {
+            border-color: var(--w-stepper-color-active);
+            color: var(--w-stepper-color-active);
+        }
+
+        &.completed .number {
+            border-color: var(--w-stepper-color-complete);
+            color: var(--w-stepper-color-complete);
+        }
+
+        .number {
+            @include size($size);
+            @include border-radius(max);
+            @include layout(flex, center);
+            @include spacing(p-md);
+            @include typography(bold, md);
+
+            svg {
+                @include position(absolute);
+            }
+        }
+
+        .container {
+            @include layout(flex, column);
+        }
+
+        .muted {
+            @include typography(primary-20, md);
+        }
+    }
+}
+
+@include media(xs) {
+    .stepper:not(.vertical) {
+        @include layout(row);
+
+        li {
+            @include layout(column, xs, v-center);
+
+            &.connect::before {
+                @include size(h2px);
+
+                width: auto;
+                top: 16px;
+                left: calc(-50%);
+                right: calc(50% + $size);
+            }
+
+            .container {
+                @include layout(v-center);
+            }
+        }
+    }
+}

package/components/Stepper/stepper.ts

@@ -0,0 +1,17 @@
+import type { IconProps } from '../Icon/icon'
+
+export type StepperProps = {
+    items: {
+        icon?: IconProps['type'] | string
+        title?: string
+        subTitle?: string
+        completed?: boolean
+        active?: boolean
+    }[]
+    color?: string
+    completedColor?: string
+    activeColor?: string
+    borderless?: boolean
+    vertical?: boolean
+    className?: string
+}

package/icons/close.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.390524 0.390524C0.911223 -0.130175 1.75544 -0.130175 2.27614 0.390524L12 10.1144L21.7239 0.390524C22.2446 -0.130175 23.0888 -0.130175 23.6095 0.390524C24.1302 0.911223 24.1302 1.75544 23.6095 2.27614L13.8856 12L23.6095 21.7239C24.1302 22.2446 24.1302 23.0888 23.6095 23.6095C23.0888 24.1302 22.2446 24.1302 21.7239 23.6095L12 13.8856L2.27614 23.6095C1.75544 24.1302 0.911223 24.1302 0.390524 23.6095C-0.130175 23.0888 -0.130175 22.2446 0.390524 21.7239L10.1144 12L0.390524 2.27614C-0.130175 1.75544 -0.130175 0.911223 0.390524 0.390524Z" fill="currentColor"/>
+<path d="M23 1L1 23M1 1L23 23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12H12M12 12H1M12 12V1M12 12V23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons.d.ts

@@ -14,6 +14,7 @@ declare module 'webcoreui/icons' {
 	export const info: string
 	export const moon: string
 	export const order: string
+	export const plus: string
 	export const search: string
 	export const sun: string
 	export const warning: string

package/icons.js

@@ -13,6 +13,7 @@ export { default as home } from './icons/home.svg?raw'
 export { default as info } from './icons/info.svg?raw'
 export { default as moon } from './icons/moon.svg?raw'
 export { default as order } from './icons/order.svg?raw'
+export { default as plus } from './icons/plus.svg?raw'
 export { default as search } from './icons/search.svg?raw'
 export { default as sun } from './icons/sun.svg?raw'
 export { default as warning } from './icons/warning.svg?raw'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.6.1",
+    "version": "0.7.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -13,13 +13,13 @@
         "lint": "eslint src/**/* --fix"
     },
     "devDependencies": {
-        "@astrojs/check": "0.7.0",
+        "@astrojs/check": "0.9.4",
         "@astrojs/node": "8.3.4",
-        "@astrojs/react": "3.5.0",
+        "@astrojs/react": "3.6.2",
         "@astrojs/svelte": "5.5.0",
         "@eslint/js": "9.9.1",
         "@typescript-eslint/parser": "8.3.0",
-        "astro": "4.15.11",
+        "astro": "4.16.7",
         "astro-eslint-parser": "1.0.2",
         "eslint": "9.9.1",
         "eslint-plugin-astro": "1.2.3",

package/react.d.ts

@@ -1,8 +1,10 @@
 import { FC } from 'react'
 import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
 import type { ReactAlertProps as WReactAlertProps } from './components/Alert/alert'
+import type { ReactAspectRatioProps as WReactAspectRatioProps } from './components/AspectRatio/aspectratio'
 import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
 import type { ReactBadgeProps as WReactBadgeProps } from './components/Badge/badge'
+import type { ReactBannerProps as WReactBannerProps } from './components/Banner/banner'
 import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
 import type { ReactButtonProps as WReactButtonProps } from './components/Button/button'
 import type { ReactCardProps as WReactCardProps } from './components/Card/card'
@@ -15,6 +17,7 @@ import type { ReactFooterProps as WReactFooterProps } from './components/Footer/
 import type { ReactGroupProps as WReactGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 import type { ReactInputProps as WReactInputProps } from './components/Input/input'
+import type { ReactKbdProps as WReactKbdProps } from './components/Kbd/kbd'
 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'
@@ -29,6 +32,8 @@ import type { ReactSheetProps as WReactSheetProps } from './components/Sheet/she
 import type { ReactSidebarProps as WReactSidebarProps } from './components/Sidebar/sidebar'
 import type { ReactSliderProps as WReactSliderProps } from './components/Slider/slider'
 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'
 import type { ReactSwitchProps as WReactSwitchProps } from './components/Switch/switch'
 import type { TableProps as WTableProps } from './components/Table/table'
 import type { ReactTabsProps as WReactTabsProps } from './components/Tabs/tabs'
@@ -41,8 +46,10 @@ import type { ReactToastProps as WReactToastProps } from './components/Toast/toa
 declare module 'webcoreui/react' {
     export const Accordion: FC<WAccordionProps>
 	export const Alert: FC<WReactAlertProps>
+	export const AspectRatio: FC<WReactAspectRatioProps>
 	export const Avatar: FC<WAvatarProps>
 	export const Badge: FC<WReactBadgeProps>
+	export const Banner: FC<WReactBannerProps>
 	export const Breadcrumb: FC<WBreadcrumbProps>
 	export const Button: FC<WReactButtonProps>
 	export const Card: FC<WReactCardProps>
@@ -55,6 +62,7 @@ declare module 'webcoreui/react' {
 	export const Group: FC<WReactGroupProps>
 	export const Icon: FC<WIconProps>
 	export const Input: FC<WReactInputProps>
+	export const Kbd: FC<WReactKbdProps>
 	export const List: FC<WReactListProps>
 	export const Masonry: FC<WReactMasonryProps>
 	export const Menu: FC<WReactMenuProps>
@@ -69,6 +77,8 @@ declare module 'webcoreui/react' {
 	export const Sidebar: FC<WReactSidebarProps>
 	export const Slider: FC<WReactSliderProps>
 	export const Spinner: FC<WSpinnerProps>
+	export const Spoiler: FC<WReactSpoilerProps>
+	export const Stepper: FC<WStepperProps>
 	export const Switch: FC<WReactSwitchProps>
 	export const Table: FC<WTableProps>
 	export const Tabs: FC<WReactTabsProps>
@@ -80,8 +90,10 @@ declare module 'webcoreui/react' {
 
     export type AccordionProps = WAccordionProps
 	export type AlertProps = WReactAlertProps
+	export type AspectRatioProps = WReactAspectRatioProps
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WReactBadgeProps
+	export type BannerProps = WReactBannerProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WReactButtonProps
 	export type CardProps = WReactCardProps
@@ -94,6 +106,7 @@ declare module 'webcoreui/react' {
 	export type GroupProps = WReactGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WReactInputProps
+	export type KbdProps = WReactKbdProps
 	export type ListProps = WReactListProps
 	export type MasonryProps = WReactMasonryProps
 	export type MenuProps = WReactMenuProps
@@ -108,6 +121,8 @@ declare module 'webcoreui/react' {
 	export type SidebarProps = WReactSidebarProps
 	export type SliderProps = WReactSliderProps
 	export type SpinnerProps = WSpinnerProps
+	export type SpoilerProps = WReactSpoilerProps
+	export type StepperProps = WStepperProps
 	export type SwitchProps = WReactSwitchProps
 	export type TableProps = WTableProps
 	export type TabsProps = WReactTabsProps

package/react.js

@@ -1,7 +1,9 @@
 import AccordionComponent from './components/Accordion/Accordion.tsx'
 import AlertComponent from './components/Alert/Alert.tsx'
+import AspectRatioComponent from './components/AspectRatio/AspectRatio.tsx'
 import AvatarComponent from './components/Avatar/Avatar.tsx'
 import BadgeComponent from './components/Badge/Badge.tsx'
+import BannerComponent from './components/Banner/Banner.tsx'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
@@ -14,6 +16,7 @@ import FooterComponent from './components/Footer/Footer.tsx'
 import GroupComponent from './components/Group/Group.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.tsx'
+import KbdComponent from './components/Kbd/Kbd.tsx'
 import ListComponent from './components/List/List.tsx'
 import MasonryComponent from './components/Masonry/Masonry.tsx'
 import MenuComponent from './components/Menu/Menu.tsx'
@@ -28,6 +31,8 @@ import SheetComponent from './components/Sheet/Sheet.tsx'
 import SidebarComponent from './components/Sidebar/Sidebar.tsx'
 import SliderComponent from './components/Slider/Slider.tsx'
 import SpinnerComponent from './components/Spinner/Spinner.tsx'
+import SpoilerComponent from './components/Spoiler/Spoiler.tsx'
+import StepperComponent from './components/Stepper/Stepper.tsx'
 import SwitchComponent from './components/Switch/Switch.tsx'
 import TableComponent from './components/Table/Table.tsx'
 import TabsComponent from './components/Tabs/Tabs.tsx'
@@ -39,8 +44,10 @@ import ToastComponent from './components/Toast/Toast.tsx'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
+export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
+export const Banner = BannerComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -53,6 +60,7 @@ export const Footer = FooterComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const Kbd = KbdComponent
 export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
@@ -67,6 +75,8 @@ export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
+export const Spoiler = SpoilerComponent
+export const Stepper = StepperComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent

package/scss/global/utility.scss

@@ -33,6 +33,10 @@ $alignments: (
         max-width: 1200px;
     }
 
+    .muted {
+        @include typography(primary-20, md);
+    }
+
     // Gaps
     .flex, .grid {
         @each $key, $value in $spacing {

package/scss/resets.scss

@@ -67,6 +67,11 @@
 
     }
 
+    img {
+        @include border-radius();
+        object-fit: cover;
+    }
+
     figure {
         @include spacing(my-default);
         @include layout(inline-flex, column, v-center, xs);

package/svelte.d.ts

@@ -1,8 +1,10 @@
 import type { SvelteComponent } from 'svelte'
 import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
 import type { AlertProps as WAlertProps } from './components/Alert/alert'
+import type { AspectRatioProps as WAspectRatioProps } from './components/AspectRatio/aspectratio'
 import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
 import type { SvelteBadgeProps as WSvelteBadgeProps } from './components/Badge/badge'
+import type { BannerProps as WBannerProps } from './components/Banner/banner'
 import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
 import type { SvelteButtonProps as WSvelteButtonProps } from './components/Button/button'
 import type { CardProps as WCardProps } from './components/Card/card'
@@ -15,6 +17,7 @@ import type { FooterProps as WFooterProps } from './components/Footer/footer'
 import type { GroupProps as WGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 import type { SvelteInputProps as WSvelteInputProps } from './components/Input/input'
+import type { KbdProps as WKbdProps } from './components/Kbd/kbd'
 import type { SvelteListProps as WSvelteListProps } from './components/List/list'
 import type { SvelteMasonryProps as WSvelteMasonryProps } from './components/Masonry/masonry'
 import type { MenuProps as WMenuProps } from './components/Menu/menu'
@@ -29,6 +32,8 @@ import type { SheetProps as WSheetProps } from './components/Sheet/sheet'
 import type { SidebarProps as WSidebarProps } from './components/Sidebar/sidebar'
 import type { SvelteSliderProps as WSvelteSliderProps } from './components/Slider/slider'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
+import type { SpoilerProps as WSpoilerProps } from './components/Spoiler/spoiler'
+import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
 import type { SvelteSwitchProps as WSvelteSwitchProps } from './components/Switch/switch'
 import type { TableProps as WTableProps } from './components/Table/table'
 import type { TabsProps as WTabsProps } from './components/Tabs/tabs'
@@ -41,8 +46,10 @@ import type { ToastProps as WToastProps } from './components/Toast/toast'
 declare module 'webcoreui/svelte' {
     export class Accordion extends SvelteComponent<WAccordionProps> {}
 	export class Alert extends SvelteComponent<WAlertProps> {}
+	export class AspectRatio extends SvelteComponent<WAspectRatioProps> {}
 	export class Avatar extends SvelteComponent<WAvatarProps> {}
 	export class Badge extends SvelteComponent<WSvelteBadgeProps> {}
+	export class Banner extends SvelteComponent<WBannerProps> {}
 	export class Breadcrumb extends SvelteComponent<WBreadcrumbProps> {}
 	export class Button extends SvelteComponent<WSvelteButtonProps> {}
 	export class Card extends SvelteComponent<WCardProps> {}
@@ -55,6 +62,7 @@ declare module 'webcoreui/svelte' {
 	export class Group extends SvelteComponent<WGroupProps> {}
 	export class Icon extends SvelteComponent<WIconProps> {}
 	export class Input extends SvelteComponent<WSvelteInputProps> {}
+	export class Kbd extends SvelteComponent<WKbdProps> {}
 	export class List extends SvelteComponent<WSvelteListProps> {}
 	export class Masonry extends SvelteComponent<WSvelteMasonryProps> {}
 	export class Menu extends SvelteComponent<WMenuProps> {}
@@ -69,6 +77,8 @@ declare module 'webcoreui/svelte' {
 	export class Sidebar extends SvelteComponent<WSidebarProps> {}
 	export class Slider extends SvelteComponent<WSvelteSliderProps> {}
 	export class Spinner extends SvelteComponent<WSpinnerProps> {}
+	export class Spoiler extends SvelteComponent<WSpoilerProps> {}
+	export class Stepper extends SvelteComponent<WStepperProps> {}
 	export class Switch extends SvelteComponent<WSvelteSwitchProps> {}
 	export class Table extends SvelteComponent<WTableProps> {}
 	export class Tabs extends SvelteComponent<WTabsProps> {}
@@ -80,8 +90,10 @@ declare module 'webcoreui/svelte' {
 
     export type AccordionProps = WAccordionProps
 	export type AlertProps = WAlertProps
+	export type AspectRatioProps = WAspectRatioProps
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WSvelteBadgeProps
+	export type BannerProps = WBannerProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WSvelteButtonProps
 	export type CardProps = WCardProps
@@ -94,6 +106,7 @@ declare module 'webcoreui/svelte' {
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WSvelteInputProps
+	export type KbdProps = WKbdProps
 	export type ListProps = WSvelteListProps
 	export type MasonryProps = WSvelteMasonryProps
 	export type MenuProps = WMenuProps
@@ -108,6 +121,8 @@ declare module 'webcoreui/svelte' {
 	export type SidebarProps = WSidebarProps
 	export type SliderProps = WSvelteSliderProps
 	export type SpinnerProps = WSpinnerProps
+	export type SpoilerProps = WSpoilerProps
+	export type StepperProps = WStepperProps
 	export type SwitchProps = WSvelteSwitchProps
 	export type TableProps = WTableProps
 	export type TabsProps = WTabsProps

package/svelte.js

@@ -1,7 +1,9 @@
 import AccordionComponent from './components/Accordion/Accordion.svelte'
 import AlertComponent from './components/Alert/Alert.svelte'
+import AspectRatioComponent from './components/AspectRatio/AspectRatio.svelte'
 import AvatarComponent from './components/Avatar/Avatar.svelte'
 import BadgeComponent from './components/Badge/Badge.svelte'
+import BannerComponent from './components/Banner/Banner.svelte'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.svelte'
 import ButtonComponent from './components/Button/Button.svelte'
 import CardComponent from './components/Card/Card.svelte'
@@ -14,6 +16,7 @@ import FooterComponent from './components/Footer/Footer.svelte'
 import GroupComponent from './components/Group/Group.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
 import InputComponent from './components/Input/Input.svelte'
+import KbdComponent from './components/Kbd/Kbd.svelte'
 import ListComponent from './components/List/List.svelte'
 import MasonryComponent from './components/Masonry/Masonry.svelte'
 import MenuComponent from './components/Menu/Menu.svelte'
@@ -28,6 +31,8 @@ import SheetComponent from './components/Sheet/Sheet.svelte'
 import SidebarComponent from './components/Sidebar/Sidebar.svelte'
 import SliderComponent from './components/Slider/Slider.svelte'
 import SpinnerComponent from './components/Spinner/Spinner.svelte'
+import SpoilerComponent from './components/Spoiler/Spoiler.svelte'
+import StepperComponent from './components/Stepper/Stepper.svelte'
 import SwitchComponent from './components/Switch/Switch.svelte'
 import TableComponent from './components/Table/Table.svelte'
 import TabsComponent from './components/Tabs/Tabs.svelte'
@@ -39,8 +44,10 @@ import ToastComponent from './components/Toast/Toast.svelte'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
+export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
+export const Banner = BannerComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -53,6 +60,7 @@ export const Footer = FooterComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const Kbd = KbdComponent
 export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
@@ -67,6 +75,8 @@ export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
+export const Spoiler = SpoilerComponent
+export const Stepper = StepperComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent