@shohojdhara/atomix 0.2.6 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/README.md +3 -3
- package/dist/atomix.css +41 -1
- package/dist/atomix.min.css +1 -1
- package/dist/index.d.ts +172 -9
- package/dist/index.esm.js +518 -131
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +527 -131
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/applemix.css +41 -1
- package/dist/themes/applemix.min.css +1 -1
- package/dist/themes/boomdevs.css +41 -1
- package/dist/themes/boomdevs.min.css +1 -1
- package/dist/themes/esrar.css +41 -1
- package/dist/themes/esrar.min.css +1 -1
- package/dist/themes/flashtrade.css +41 -1
- package/dist/themes/flashtrade.min.css +1 -1
- package/dist/themes/mashroom.css +41 -1
- package/dist/themes/mashroom.min.css +1 -1
- package/dist/themes/shaj-default.css +41 -1
- package/dist/themes/shaj-default.min.css +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.stories.tsx +25 -0
- package/src/components/Hero/Hero.stories.tsx +297 -0
- package/src/components/Hero/Hero.tsx +79 -0
- package/src/components/{Tab/Tab.stories.tsx → Tabs/Tabs.stories.tsx} +9 -9
- package/src/components/{Tab/Tab.tsx → Tabs/Tabs.tsx} +7 -7
- package/src/components/Tabs/index.ts +2 -0
- package/src/components/index.ts +12 -2
- package/src/lib/composables/useHero.ts +33 -4
- package/src/lib/composables/useHeroBackgroundSlider.ts +228 -0
- package/src/lib/constants/components.ts +6 -0
- package/src/lib/types/components.ts +98 -0
- package/src/styles/06-components/_components.hero.scss +51 -1
- package/src/components/Tab/index.ts +0 -2
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -136,12 +136,12 @@ Notes:
|
|
|
136
136
|
Atomix provides 40+ production-ready components organized into categories:
|
|
137
137
|
|
|
138
138
|
- **Actions**: [Button](src/components/Button), [Dropdown](src/components/Dropdown), [Pagination](src/components/Pagination)
|
|
139
|
-
- **Data Display**: [Badge](src/components/Badge), [Card](src/components/Card), [
|
|
140
|
-
- **Feedback**: [
|
|
139
|
+
- **Data Display**: [Badge](src/components/Badge), [Card](src/components/Card), [DataTable](src/components/DataTable)
|
|
140
|
+
- **Feedback**: [Callout](src/components/Callout), [Spinner](src/components/Spinner), [Progress](src/components/Progress)
|
|
141
141
|
- **Forms**: [Checkbox](src/components/Checkbox), [Input](src/components/Input), [Select](src/components/Select)
|
|
142
142
|
- **Navigation**: [Breadcrumb](src/components/Breadcrumb), [Navbar](src/components/Navbar), [Tabs](src/components/Tabs)
|
|
143
143
|
- **Surfaces**: [Accordion](src/components/Accordion), [Callout](src/components/Callout), [Modal](src/components/Modal)
|
|
144
|
-
- **Utilities**: [ColorModeToggle](src/components/ColorModeToggle), [
|
|
144
|
+
- **Utilities**: [ColorModeToggle](src/components/ColorModeToggle), [Icon](src/components/Icon), [AtomixGlass](src/components/AtomixGlass), [AtomixLogo](src/components/AtomixLogo)
|
|
145
145
|
|
|
146
146
|
## Design Tokens
|
|
147
147
|
|
package/dist/atomix.css
CHANGED
|
@@ -6297,7 +6297,7 @@ a, a:hover {
|
|
|
6297
6297
|
inset: 0;
|
|
6298
6298
|
background-color: var(--atomix-hero-overlay);
|
|
6299
6299
|
opacity: var(--atomix-hero-overlay-opacity);
|
|
6300
|
-
z-index:
|
|
6300
|
+
z-index: 1;
|
|
6301
6301
|
}
|
|
6302
6302
|
.c-hero__container {
|
|
6303
6303
|
position: relative;
|
|
@@ -6367,6 +6367,46 @@ a, a:hover {
|
|
|
6367
6367
|
.c-hero--full-vh {
|
|
6368
6368
|
min-height: 100vh;
|
|
6369
6369
|
}
|
|
6370
|
+
.c-hero__slider {
|
|
6371
|
+
position: absolute;
|
|
6372
|
+
inset: 0;
|
|
6373
|
+
overflow: hidden;
|
|
6374
|
+
z-index: 0;
|
|
6375
|
+
}
|
|
6376
|
+
.c-hero__slider-item {
|
|
6377
|
+
position: absolute;
|
|
6378
|
+
inset: 0;
|
|
6379
|
+
opacity: 0;
|
|
6380
|
+
transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
6381
|
+
pointer-events: none;
|
|
6382
|
+
}
|
|
6383
|
+
.c-hero__slider-item img,
|
|
6384
|
+
.c-hero__slider-item video {
|
|
6385
|
+
width: 100%;
|
|
6386
|
+
height: 100%;
|
|
6387
|
+
-o-object-fit: cover;
|
|
6388
|
+
object-fit: cover;
|
|
6389
|
+
-o-object-position: center;
|
|
6390
|
+
object-position: center;
|
|
6391
|
+
}
|
|
6392
|
+
.c-hero__slider-item--active {
|
|
6393
|
+
opacity: 1;
|
|
6394
|
+
pointer-events: auto;
|
|
6395
|
+
z-index: 1;
|
|
6396
|
+
}
|
|
6397
|
+
.c-hero__slider--fade .c-hero__slider-item {
|
|
6398
|
+
transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
6399
|
+
}
|
|
6400
|
+
.c-hero__slider--slide .c-hero__slider-item {
|
|
6401
|
+
transform: translateX(100%);
|
|
6402
|
+
transition: transform var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
6403
|
+
}
|
|
6404
|
+
.c-hero__slider--slide .c-hero__slider-item--active {
|
|
6405
|
+
transform: translateX(0);
|
|
6406
|
+
}
|
|
6407
|
+
.c-hero__slider--custom .c-hero__slider-item {
|
|
6408
|
+
transition: all var(--slider-transition-duration, 1000ms) ease-in-out;
|
|
6409
|
+
}
|
|
6370
6410
|
.c-form-group {
|
|
6371
6411
|
--atomix-input-group-width: 100%;
|
|
6372
6412
|
--atomix-input-group-label-color: var(--atomix-secondary-text-emphasis);
|