react-seasonal-themes 1.0.0
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/Readme.md +168 -0
- package/dist/components/SeasonAccentBar.d.ts +2 -0
- package/dist/components/SeasonBackground.d.ts +5 -0
- package/dist/components/SeasonBadge.d.ts +6 -0
- package/dist/components/SeasonButton.d.ts +6 -0
- package/dist/components/SeasonCard.d.ts +6 -0
- package/dist/components/SeasonDivider.d.ts +5 -0
- package/dist/components/SeasonHeading.d.ts +6 -0
- package/dist/components/SeasonInput.d.ts +6 -0
- package/dist/components/SeasonText.d.ts +6 -0
- package/dist/hooks/useSeason.d.ts +10 -0
- package/dist/index.cjs +6 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.es.js +501 -0
- package/dist/provider/SeasonProvider.d.ts +5 -0
- package/dist/react-seasonal-themes.css +2 -0
- package/dist/store/useSeasonStore.d.ts +16 -0
- package/dist/utils/seasonDetection.d.ts +2 -0
- package/package.json +47 -0
package/Readme.md
ADDED
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1>đâī¸ React Seasonal Themes đˇâī¸</h1>
|
|
3
|
+
<p><strong>A fully dynamic, elegant seasonal design system and component library for React.</strong></p>
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/react-seasonal-themes)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://www.typescriptlang.org/)
|
|
8
|
+
|
|
9
|
+
<p>
|
|
10
|
+
Experience a UI that breathes with the year. `react-seasonal-themes` auto-detects the current season from the date, and lets you override hemisphere/region via `useSeason()`.
|
|
11
|
+
</p>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## ⨠Features
|
|
17
|
+
|
|
18
|
+
- **đ Auto-Season Detection:** Calculates the current season from the date (hemisphere/region default to `northern` / `temperate`, and can be changed via `useSeason()`).
|
|
19
|
+
- **đ¨ CSS Variable Powered:** A robust design system built on CSS variables (`--season-primary`, `--season-gradient`, etc.) making overrides a breeze.
|
|
20
|
+
- **đ§Š Premium UI Components:** Ships with a suite of beautifully designed, dark-mode ready components (`SeasonCard`, `SeasonButton`, `SeasonHeading`, etc.).
|
|
21
|
+
- **âī¸ React First:** Built from the ground up for React 18+ with zero boilerplate.
|
|
22
|
+
- **đĄī¸ 100% TypeScript:** First-class types for excellent developer experience and autocomplete.
|
|
23
|
+
- **đšī¸ Manual Overrides:** Let users choose their favorite season with our built-in global store (powered by Zustand).
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## đĻ Installation
|
|
28
|
+
|
|
29
|
+
Install via your favorite package manager:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install react-seasonal-themes
|
|
33
|
+
# or
|
|
34
|
+
yarn add react-seasonal-themes
|
|
35
|
+
# or
|
|
36
|
+
pnpm add react-seasonal-themes
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## đ Quick Start
|
|
42
|
+
|
|
43
|
+
Wrap your application in the `SeasonProvider` and import the global CSS styles at the root of your application (e.g., in `main.tsx` or `App.tsx`):
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import React from 'react';
|
|
47
|
+
import ReactDOM from 'react-dom/client';
|
|
48
|
+
import App from './App';
|
|
49
|
+
|
|
50
|
+
// 1. Import the provider and the CSS
|
|
51
|
+
import { SeasonProvider } from 'react-seasonal-themes';
|
|
52
|
+
import 'react-seasonal-themes/style.css';
|
|
53
|
+
|
|
54
|
+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
|
55
|
+
<React.StrictMode>
|
|
56
|
+
{/* 2. Wrap your app! */}
|
|
57
|
+
<SeasonProvider>
|
|
58
|
+
<App />
|
|
59
|
+
</SeasonProvider>
|
|
60
|
+
</React.StrictMode>
|
|
61
|
+
);
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Using Components
|
|
65
|
+
|
|
66
|
+
Once the provider is wrapped, you can drop any of our premium components anywhere in your app:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { SeasonCard, SeasonHeading, SeasonButton, SeasonBadge, SeasonInput, SeasonText } from 'react-seasonal-themes';
|
|
70
|
+
|
|
71
|
+
function MyDashboard() {
|
|
72
|
+
return (
|
|
73
|
+
<div style={{ padding: '2rem' }}>
|
|
74
|
+
<SeasonCard>
|
|
75
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
|
76
|
+
<SeasonHeading level={2} gradient>
|
|
77
|
+
Welcome to the current season!
|
|
78
|
+
</SeasonHeading>
|
|
79
|
+
<SeasonBadge variant="glass" animate="pulse">Active</SeasonBadge>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<SeasonText variant="muted">
|
|
83
|
+
This card automatically updates its styling based on the time of year.
|
|
84
|
+
</SeasonText>
|
|
85
|
+
|
|
86
|
+
<div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
|
|
87
|
+
<SeasonInput placeholder="Search themes..." glass />
|
|
88
|
+
<SeasonButton variant="primary" animate="float">
|
|
89
|
+
Explore Themes
|
|
90
|
+
</SeasonButton>
|
|
91
|
+
</div>
|
|
92
|
+
</SeasonCard>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## đĒ Hooks (Manual Control)
|
|
101
|
+
|
|
102
|
+
Want to let users change the season manually? Use the `useSeason` hook!
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
import { useSeason } from 'react-seasonal-themes';
|
|
106
|
+
|
|
107
|
+
function SeasonSwitcher() {
|
|
108
|
+
const { season, isOverridden, setSeason, resetSeason, setHemisphere, setRegion } = useSeason();
|
|
109
|
+
|
|
110
|
+
return (
|
|
111
|
+
<div>
|
|
112
|
+
<p>Current Theme: {season}</p>
|
|
113
|
+
<p>Overridden: {String(isOverridden)}</p>
|
|
114
|
+
<button onClick={() => setSeason('winter')}>Force Winter</button>
|
|
115
|
+
<button onClick={() => setSeason('summer')}>Force Summer</button>
|
|
116
|
+
<button onClick={resetSeason}>Auto-Detect</button>
|
|
117
|
+
|
|
118
|
+
<div style={{ marginTop: 12 }}>
|
|
119
|
+
<button onClick={() => setHemisphere('southern')}>Southern Hemisphere</button>
|
|
120
|
+
<button onClick={() => setRegion('tropical')}>Tropical Region</button>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## đ¨ Theming & CSS Variables
|
|
130
|
+
|
|
131
|
+
The magic happens via native CSS variables defined in `style.css`. The active theme is selected by `data-season` on `document.documentElement`.
|
|
132
|
+
|
|
133
|
+
```css
|
|
134
|
+
.my-custom-box {
|
|
135
|
+
background: var(--season-bg);
|
|
136
|
+
border: 1px solid var(--season-primary-light);
|
|
137
|
+
border-radius: var(--season-border-radius);
|
|
138
|
+
color: var(--season-text);
|
|
139
|
+
box-shadow: var(--season-shadow);
|
|
140
|
+
transition: all 0.3s ease;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.my-text {
|
|
144
|
+
background: var(--season-gradient);
|
|
145
|
+
-webkit-background-clip: text;
|
|
146
|
+
color: transparent;
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Available Components
|
|
151
|
+
- `SeasonProvider`
|
|
152
|
+
- `SeasonButton`
|
|
153
|
+
- `SeasonCard`
|
|
154
|
+
- `SeasonInput`
|
|
155
|
+
- `SeasonBadge`
|
|
156
|
+
- `SeasonText`
|
|
157
|
+
- `SeasonHeading`
|
|
158
|
+
- `SeasonBackground`
|
|
159
|
+
- `SeasonDivider`
|
|
160
|
+
- `SeasonAccentBar`
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## đ¤ Contributing
|
|
165
|
+
Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/your-repo/issues).
|
|
166
|
+
|
|
167
|
+
## đ License
|
|
168
|
+
This project is [MIT](https://opensource.org/licenses/MIT) licensed.
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React, HTMLAttributes } from 'react';
|
|
2
|
+
export interface SeasonBadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
variant?: 'solid' | 'outline' | 'glass';
|
|
4
|
+
animate?: 'pulse' | 'fade-in' | 'none';
|
|
5
|
+
}
|
|
6
|
+
export declare const SeasonBadge: React.FC<SeasonBadgeProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
export interface SeasonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
variant?: 'primary' | 'secondary' | 'glass';
|
|
4
|
+
animate?: 'float' | 'pulse' | 'none';
|
|
5
|
+
}
|
|
6
|
+
export declare const SeasonButton: React.FC<SeasonButtonProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as React, HTMLAttributes } from 'react';
|
|
2
|
+
export interface SeasonTextProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
3
|
+
variant?: 'body' | 'muted' | 'gradient';
|
|
4
|
+
as?: 'p' | 'span' | 'div';
|
|
5
|
+
}
|
|
6
|
+
export declare const SeasonText: React.FC<SeasonTextProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare function useSeason(): {
|
|
2
|
+
season: import('..').Season;
|
|
3
|
+
isOverridden: boolean;
|
|
4
|
+
hemisphere: import('..').Hemisphere;
|
|
5
|
+
region: import('..').Region;
|
|
6
|
+
setSeason: (season: import('..').Season | null) => void;
|
|
7
|
+
resetSeason: () => void;
|
|
8
|
+
setHemisphere: (hemisphere: import('..').Hemisphere) => void;
|
|
9
|
+
setRegion: (region: import('..').Region) => void;
|
|
10
|
+
};
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require(`zustand`),u=require(`react`);u=c(u);function d(e,t,n){let r=e.getMonth();return n===`tropical`?t===`northern`?r>=5&&r<=8?`rainy`:r>=9&&r<=10?`autumn`:r===11||r<=1?`winter`:`summer`:r===11||r<=2?`rainy`:r>=3&&r<=4?`autumn`:r>=5&&r<=7?`winter`:`spring`:t===`northern`?r>=2&&r<=4?`spring`:r>=5&&r<=7?`summer`:r>=8&&r<=10?`autumn`:`winter`:r>=2&&r<=4?`autumn`:r>=5&&r<=7?`winter`:r>=8&&r<=10?`spring`:`summer`}var f=(0,l.create)((e,t)=>({season:d(new Date,`northern`,`temperate`),hemisphere:`northern`,region:`temperate`,override:null,setSeason:t=>e({season:t}),setOverride:t=>e({override:t}),setHemisphere:n=>{e({hemisphere:n}),t().updateSeason()},setRegion:n=>{e({region:n}),t().updateSeason()},updateSeason:()=>{let{override:n,hemisphere:r,region:i}=t();e(n?{season:n}:{season:d(new Date,r,i)})}}));function p(){let e=f(e=>e.override||e.season),t=f(e=>e.override),n=f(e=>e.hemisphere),r=f(e=>e.region),i=f(e=>e.setOverride),a=f(e=>e.setHemisphere),o=f(e=>e.setRegion);return{season:e,isOverridden:t!==null,hemisphere:n,region:r,setSeason:i,resetSeason:()=>{f.getState().setOverride(null),f.getState().updateSeason()},setHemisphere:a,setRegion:o}}var m=o((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),h=o((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,`key`,{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,`ref`,{enumerable:!1,value:null}):Object.defineProperty(e,`ref`,{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,`validated`,{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,`_debugInfo`,{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,`_debugStack`,{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,`_debugTask`,{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
|
+
let props = %s;
|
|
3
|
+
<%s {...props} />
|
|
4
|
+
React keys must be passed directly to JSX without using spread:
|
|
5
|
+
let props = %s;
|
|
6
|
+
<%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),g=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=m():t.exports=h()}))(),_={spring:`https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap`,summer:`https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap`,autumn:`https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600&display=swap`,winter:`https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap`,rainy:`https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap`},v=({children:e})=>{let{season:t,updateSeason:n}=f();return(0,u.useEffect)(()=>{n();let e=setInterval(()=>{n()},1e3*60*60);return()=>clearInterval(e)},[n]),(0,u.useEffect)(()=>{document.documentElement.setAttribute(`data-season`,t);let e=`season-font-${t}`;if(!document.getElementById(e)){let n=document.createElement(`link`);n.id=e,n.rel=`stylesheet`,n.href=_[t],document.head.appendChild(n)}},[t]),(0,g.jsx)(g.Fragment,{children:e})},y=({variant:e=`primary`,animate:t=`none`,className:n=``,style:r,children:i,...a})=>{let o={padding:`0.75rem 1.5rem`,borderRadius:`var(--season-border-radius)`,border:`none`,fontFamily:`var(--season-font)`,fontSize:`1rem`,fontWeight:600,cursor:`pointer`,transition:`all 0.3s ease`,display:`inline-flex`,alignItems:`center`,justifyContent:`center`},s={primary:{background:`var(--season-gradient)`,color:`#fff`,boxShadow:`0 4px 6px var(--season-shadow)`},secondary:{background:`transparent`,color:`var(--season-primary)`,border:`2px solid var(--season-primary-light)`},glass:{background:`var(--season-bg-card)`,backdropFilter:`blur(12px)`,color:`var(--season-primary)`,border:`1px solid rgba(255,255,255,0.4)`,boxShadow:`0 8px 32px var(--season-shadow)`}};return(0,g.jsx)(`button`,{className:`season-btn ${t===`none`?``:`season-${t}`} ${n}`,style:{...o,...s[e],...r},...a,children:i})},b=({animate:e=`fade-in`,glass:t=!0,className:n=``,style:r,children:i,...a})=>{let o={background:`var(--season-bg-card)`,borderRadius:`var(--season-border-radius)`,padding:`1.5rem`,color:`var(--season-text)`,fontFamily:`var(--season-font)`,boxShadow:`0 10px 30px var(--season-shadow)`,transition:`all 0.3s ease`,border:t?`1px solid rgba(255,255,255,0.2)`:`none`,backdropFilter:t?`blur(12px)`:`none`,WebkitBackdropFilter:t?`blur(12px)`:`none`};return(0,g.jsx)(`div`,{className:`season-card ${e===`none`?``:`season-${e}`} ${n}`,style:{...o,...r},...a,children:i})},x=({animate:e=`none`,glass:t=!1,className:n=``,style:r,...i})=>{let a={padding:`0.75rem 1rem`,borderRadius:`calc(var(--season-border-radius) / 1.5)`,border:`1px solid var(--season-primary-light)`,background:t?`rgba(255,255,255,0.4)`:`var(--season-bg)`,color:`var(--season-text)`,fontFamily:`var(--season-font)`,fontSize:`1rem`,outline:`none`,transition:`all 0.3s ease`,backdropFilter:t?`blur(8px)`:`none`,WebkitBackdropFilter:t?`blur(8px)`:`none`,boxShadow:`inset 0 2px 4px var(--season-shadow)`};return(0,g.jsx)(`input`,{className:`season-input ${e===`none`?``:`season-${e}`} ${n}`,style:{...a,...r},onFocus:e=>{e.target.style.borderColor=`var(--season-primary)`,e.target.style.boxShadow=`0 0 0 3px var(--season-shadow)`},onBlur:e=>{e.target.style.borderColor=`var(--season-primary-light)`,e.target.style.boxShadow=`inset 0 2px 4px var(--season-shadow)`},...i})},S=({variant:e=`solid`,animate:t=`none`,className:n=``,style:r,children:i,...a})=>{let o={display:`inline-flex`,alignItems:`center`,padding:`0.25rem 0.75rem`,borderRadius:`9999px`,fontFamily:`var(--season-font)`,fontSize:`0.75rem`,fontWeight:700,textTransform:`uppercase`,letterSpacing:`0.05em`,transition:`all 0.3s ease`},s={solid:{background:`var(--season-gradient)`,color:`#fff`,boxShadow:`0 2px 4px var(--season-shadow)`},outline:{background:`transparent`,color:`var(--season-primary)`,border:`1px solid var(--season-primary)`},glass:{background:`var(--season-bg-card)`,backdropFilter:`blur(8px)`,color:`var(--season-primary)`,border:`1px solid rgba(255,255,255,0.4)`,boxShadow:`0 4px 12px var(--season-shadow)`}};return(0,g.jsx)(`span`,{className:`season-badge ${t===`none`?``:`season-${t}`} ${n}`,style:{...o,...s[e],...r},...a,children:i})},C=({variant:e=`body`,as:t=`p`,className:n=``,style:r,children:i,...a})=>{let o={fontFamily:`var(--season-font)`,transition:`color 0.3s ease`,margin:t===`p`?`0 0 1rem 0`:0,lineHeight:1.6},s={body:{color:`var(--season-text)`},muted:{color:`var(--season-text-muted)`},gradient:{background:`var(--season-gradient)`,WebkitBackgroundClip:`text`,WebkitTextFillColor:`transparent`,backgroundClip:`text`,color:`transparent`,display:`inline-block`}};return(0,g.jsx)(t,{className:`season-text ${n}`,style:{...o,...s[e],...r},...a,children:i})},w=({level:e=2,gradient:t=!1,className:n=``,style:r,children:i,...a})=>{let o=`h${e}`,s={fontFamily:`var(--season-font)`,color:`var(--season-text)`,transition:`color 0.3s ease`,margin:`0 0 1rem 0`,fontWeight:700,lineHeight:1.2},c=t?{background:`var(--season-gradient)`,WebkitBackgroundClip:`text`,WebkitTextFillColor:`transparent`,backgroundClip:`text`,color:`transparent`,display:`inline-block`}:{};return(0,g.jsx)(o,{className:`season-heading season-fade-in ${n}`,style:{...s,...c,...r},...a,children:i})},T=({fullscreen:e=!1,className:t=``,style:n,children:r,...i})=>{let a={background:`var(--season-bg)`,color:`var(--season-text)`,fontFamily:`var(--season-font)`,transition:`all 0.5s ease`,minHeight:e?`100vh`:`auto`,width:`100%`};return(0,g.jsx)(`div`,{className:`season-bg ${t}`,style:{...a,...n},...i,children:r})},E=({variant:e=`solid`,className:t=``,style:n,...r})=>{let i={width:`100%`,height:`1px`,border:`none`,margin:`1.5rem 0`,transition:`all 0.3s ease`},a={solid:{background:`rgba(0,0,0,0.1)`,backgroundColor:`var(--season-primary-light)`,opacity:.3},dashed:{background:`transparent`,borderTop:`1px dashed var(--season-primary)`,opacity:.5},gradient:{height:`2px`,background:`var(--season-gradient)`,opacity:.8}};return(0,g.jsx)(`hr`,{className:`season-divider ${t}`,style:{...i,...a[e],...n},...r})},D=({className:e=``,style:t,...n})=>(0,g.jsx)(`div`,{className:`season-accent-bar ${e}`,style:{width:`100%`,height:`6px`,background:`var(--season-gradient)`,transition:`all 0.5s ease`,...t},...n});exports.SeasonAccentBar=D,exports.SeasonBackground=T,exports.SeasonBadge=S,exports.SeasonButton=y,exports.SeasonCard=b,exports.SeasonDivider=E,exports.SeasonHeading=w,exports.SeasonInput=x,exports.SeasonProvider=v,exports.SeasonText=C,exports.detectSeason=d,exports.useSeason=p,exports.useSeasonStore=f;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export { useSeasonStore } from './store/useSeasonStore';
|
|
2
|
+
export type { Season, Hemisphere, Region } from './store/useSeasonStore';
|
|
3
|
+
export { detectSeason } from './utils/seasonDetection';
|
|
4
|
+
export { useSeason } from './hooks/useSeason';
|
|
5
|
+
export { SeasonProvider } from './provider/SeasonProvider';
|
|
6
|
+
export type { SeasonProviderProps } from './provider/SeasonProvider';
|
|
7
|
+
export { SeasonButton } from './components/SeasonButton';
|
|
8
|
+
export type { SeasonButtonProps } from './components/SeasonButton';
|
|
9
|
+
export { SeasonCard } from './components/SeasonCard';
|
|
10
|
+
export type { SeasonCardProps } from './components/SeasonCard';
|
|
11
|
+
export { SeasonInput } from './components/SeasonInput';
|
|
12
|
+
export type { SeasonInputProps } from './components/SeasonInput';
|
|
13
|
+
export { SeasonBadge } from './components/SeasonBadge';
|
|
14
|
+
export type { SeasonBadgeProps } from './components/SeasonBadge';
|
|
15
|
+
export { SeasonText } from './components/SeasonText';
|
|
16
|
+
export type { SeasonTextProps } from './components/SeasonText';
|
|
17
|
+
export { SeasonHeading } from './components/SeasonHeading';
|
|
18
|
+
export type { SeasonHeadingProps } from './components/SeasonHeading';
|
|
19
|
+
export { SeasonBackground } from './components/SeasonBackground';
|
|
20
|
+
export type { SeasonBackgroundProps } from './components/SeasonBackground';
|
|
21
|
+
export { SeasonDivider } from './components/SeasonDivider';
|
|
22
|
+
export type { SeasonDividerProps } from './components/SeasonDivider';
|
|
23
|
+
export { SeasonAccentBar } from './components/SeasonAccentBar';
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,501 @@
|
|
|
1
|
+
import { create as e } from "zustand";
|
|
2
|
+
import { useEffect as t } from "react";
|
|
3
|
+
//#region \0rolldown/runtime.js
|
|
4
|
+
var n = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), r = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
|
|
5
|
+
if (typeof require < "u") return require.apply(this, arguments);
|
|
6
|
+
throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
|
|
7
|
+
});
|
|
8
|
+
//#endregion
|
|
9
|
+
//#region src/utils/seasonDetection.ts
|
|
10
|
+
function i(e, t, n) {
|
|
11
|
+
let r = e.getMonth();
|
|
12
|
+
return n === "tropical" ? t === "northern" ? r >= 5 && r <= 8 ? "rainy" : r >= 9 && r <= 10 ? "autumn" : r === 11 || r <= 1 ? "winter" : "summer" : r === 11 || r <= 2 ? "rainy" : r >= 3 && r <= 4 ? "autumn" : r >= 5 && r <= 7 ? "winter" : "spring" : t === "northern" ? r >= 2 && r <= 4 ? "spring" : r >= 5 && r <= 7 ? "summer" : r >= 8 && r <= 10 ? "autumn" : "winter" : r >= 2 && r <= 4 ? "autumn" : r >= 5 && r <= 7 ? "winter" : r >= 8 && r <= 10 ? "spring" : "summer";
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/store/useSeasonStore.ts
|
|
16
|
+
var a = e((e, t) => ({
|
|
17
|
+
season: i(/* @__PURE__ */ new Date(), "northern", "temperate"),
|
|
18
|
+
hemisphere: "northern",
|
|
19
|
+
region: "temperate",
|
|
20
|
+
override: null,
|
|
21
|
+
setSeason: (t) => e({ season: t }),
|
|
22
|
+
setOverride: (t) => e({ override: t }),
|
|
23
|
+
setHemisphere: (n) => {
|
|
24
|
+
e({ hemisphere: n }), t().updateSeason();
|
|
25
|
+
},
|
|
26
|
+
setRegion: (n) => {
|
|
27
|
+
e({ region: n }), t().updateSeason();
|
|
28
|
+
},
|
|
29
|
+
updateSeason: () => {
|
|
30
|
+
let { override: n, hemisphere: r, region: a } = t();
|
|
31
|
+
e(n ? { season: n } : { season: i(/* @__PURE__ */ new Date(), r, a) });
|
|
32
|
+
}
|
|
33
|
+
}));
|
|
34
|
+
//#endregion
|
|
35
|
+
//#region src/hooks/useSeason.ts
|
|
36
|
+
function o() {
|
|
37
|
+
let e = a((e) => e.override || e.season), t = a((e) => e.override), n = a((e) => e.hemisphere), r = a((e) => e.region), i = a((e) => e.setOverride), o = a((e) => e.setHemisphere), s = a((e) => e.setRegion);
|
|
38
|
+
return {
|
|
39
|
+
season: e,
|
|
40
|
+
isOverridden: t !== null,
|
|
41
|
+
hemisphere: n,
|
|
42
|
+
region: r,
|
|
43
|
+
setSeason: i,
|
|
44
|
+
resetSeason: () => {
|
|
45
|
+
a.getState().setOverride(null), a.getState().updateSeason();
|
|
46
|
+
},
|
|
47
|
+
setHemisphere: o,
|
|
48
|
+
setRegion: s
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
//#endregion
|
|
52
|
+
//#region node_modules/react/cjs/react-jsx-runtime.production.js
|
|
53
|
+
var s = /* @__PURE__ */ n(((e) => {
|
|
54
|
+
var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
|
|
55
|
+
function r(e, n, r) {
|
|
56
|
+
var i = null;
|
|
57
|
+
if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
|
|
58
|
+
else r = n;
|
|
59
|
+
return n = r.ref, {
|
|
60
|
+
$$typeof: t,
|
|
61
|
+
type: e,
|
|
62
|
+
key: i,
|
|
63
|
+
ref: n === void 0 ? null : n,
|
|
64
|
+
props: r
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
e.Fragment = n, e.jsx = r, e.jsxs = r;
|
|
68
|
+
})), c = /* @__PURE__ */ n(((e) => {
|
|
69
|
+
process.env.NODE_ENV !== "production" && (function() {
|
|
70
|
+
function t(e) {
|
|
71
|
+
if (e == null) return null;
|
|
72
|
+
if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
|
|
73
|
+
if (typeof e == "string") return e;
|
|
74
|
+
switch (e) {
|
|
75
|
+
case v: return "Fragment";
|
|
76
|
+
case b: return "Profiler";
|
|
77
|
+
case y: return "StrictMode";
|
|
78
|
+
case w: return "Suspense";
|
|
79
|
+
case T: return "SuspenseList";
|
|
80
|
+
case O: return "Activity";
|
|
81
|
+
}
|
|
82
|
+
if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
|
|
83
|
+
case _: return "Portal";
|
|
84
|
+
case S: return e.displayName || "Context";
|
|
85
|
+
case x: return (e._context.displayName || "Context") + ".Consumer";
|
|
86
|
+
case C:
|
|
87
|
+
var n = e.render;
|
|
88
|
+
return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
|
|
89
|
+
case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
|
|
90
|
+
case D:
|
|
91
|
+
n = e._payload, e = e._init;
|
|
92
|
+
try {
|
|
93
|
+
return t(e(n));
|
|
94
|
+
} catch {}
|
|
95
|
+
}
|
|
96
|
+
return null;
|
|
97
|
+
}
|
|
98
|
+
function n(e) {
|
|
99
|
+
return "" + e;
|
|
100
|
+
}
|
|
101
|
+
function i(e) {
|
|
102
|
+
try {
|
|
103
|
+
n(e);
|
|
104
|
+
var t = !1;
|
|
105
|
+
} catch {
|
|
106
|
+
t = !0;
|
|
107
|
+
}
|
|
108
|
+
if (t) {
|
|
109
|
+
t = console;
|
|
110
|
+
var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
111
|
+
return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
function a(e) {
|
|
115
|
+
if (e === v) return "<>";
|
|
116
|
+
if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
|
|
117
|
+
try {
|
|
118
|
+
var n = t(e);
|
|
119
|
+
return n ? "<" + n + ">" : "<...>";
|
|
120
|
+
} catch {
|
|
121
|
+
return "<...>";
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
function o() {
|
|
125
|
+
var e = A.A;
|
|
126
|
+
return e === null ? null : e.getOwner();
|
|
127
|
+
}
|
|
128
|
+
function s() {
|
|
129
|
+
return Error("react-stack-top-frame");
|
|
130
|
+
}
|
|
131
|
+
function c(e) {
|
|
132
|
+
if (j.call(e, "key")) {
|
|
133
|
+
var t = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
134
|
+
if (t && t.isReactWarning) return !1;
|
|
135
|
+
}
|
|
136
|
+
return e.key !== void 0;
|
|
137
|
+
}
|
|
138
|
+
function l(e, t) {
|
|
139
|
+
function n() {
|
|
140
|
+
P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
|
|
141
|
+
}
|
|
142
|
+
n.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
143
|
+
get: n,
|
|
144
|
+
configurable: !0
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
function u() {
|
|
148
|
+
var e = t(this.type);
|
|
149
|
+
return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
|
|
150
|
+
}
|
|
151
|
+
function d(e, t, n, r, i, a) {
|
|
152
|
+
var o = n.ref;
|
|
153
|
+
return e = {
|
|
154
|
+
$$typeof: g,
|
|
155
|
+
type: e,
|
|
156
|
+
key: t,
|
|
157
|
+
props: n,
|
|
158
|
+
_owner: r
|
|
159
|
+
}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
|
|
160
|
+
enumerable: !1,
|
|
161
|
+
value: null
|
|
162
|
+
}) : Object.defineProperty(e, "ref", {
|
|
163
|
+
enumerable: !1,
|
|
164
|
+
get: u
|
|
165
|
+
}), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
166
|
+
configurable: !1,
|
|
167
|
+
enumerable: !1,
|
|
168
|
+
writable: !0,
|
|
169
|
+
value: 0
|
|
170
|
+
}), Object.defineProperty(e, "_debugInfo", {
|
|
171
|
+
configurable: !1,
|
|
172
|
+
enumerable: !1,
|
|
173
|
+
writable: !0,
|
|
174
|
+
value: null
|
|
175
|
+
}), Object.defineProperty(e, "_debugStack", {
|
|
176
|
+
configurable: !1,
|
|
177
|
+
enumerable: !1,
|
|
178
|
+
writable: !0,
|
|
179
|
+
value: i
|
|
180
|
+
}), Object.defineProperty(e, "_debugTask", {
|
|
181
|
+
configurable: !1,
|
|
182
|
+
enumerable: !1,
|
|
183
|
+
writable: !0,
|
|
184
|
+
value: a
|
|
185
|
+
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
186
|
+
}
|
|
187
|
+
function f(e, n, r, a, s, u) {
|
|
188
|
+
var f = n.children;
|
|
189
|
+
if (f !== void 0) if (a) if (M(f)) {
|
|
190
|
+
for (a = 0; a < f.length; a++) p(f[a]);
|
|
191
|
+
Object.freeze && Object.freeze(f);
|
|
192
|
+
} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
|
|
193
|
+
else p(f);
|
|
194
|
+
if (j.call(n, "key")) {
|
|
195
|
+
f = t(e);
|
|
196
|
+
var m = Object.keys(n).filter(function(e) {
|
|
197
|
+
return e !== "key";
|
|
198
|
+
});
|
|
199
|
+
a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />", a, f, m, f), R[f + a] = !0);
|
|
200
|
+
}
|
|
201
|
+
if (f = null, r !== void 0 && (i(r), f = "" + r), c(n) && (i(n.key), f = "" + n.key), "key" in n) for (var h in r = {}, n) h !== "key" && (r[h] = n[h]);
|
|
202
|
+
else r = n;
|
|
203
|
+
return f && l(r, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, r, o(), s, u);
|
|
204
|
+
}
|
|
205
|
+
function p(e) {
|
|
206
|
+
m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
207
|
+
}
|
|
208
|
+
function m(e) {
|
|
209
|
+
return typeof e == "object" && !!e && e.$$typeof === g;
|
|
210
|
+
}
|
|
211
|
+
var h = r("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
|
|
212
|
+
return null;
|
|
213
|
+
};
|
|
214
|
+
h = { react_stack_bottom_frame: function(e) {
|
|
215
|
+
return e();
|
|
216
|
+
} };
|
|
217
|
+
var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(a(s)), R = {};
|
|
218
|
+
e.Fragment = v, e.jsx = function(e, t, n) {
|
|
219
|
+
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
220
|
+
return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
|
|
221
|
+
}, e.jsxs = function(e, t, n) {
|
|
222
|
+
var r = 1e4 > A.recentlyCreatedOwnerStacks++;
|
|
223
|
+
return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
|
|
224
|
+
};
|
|
225
|
+
})();
|
|
226
|
+
})), l = (/* @__PURE__ */ n(((e, t) => {
|
|
227
|
+
process.env.NODE_ENV === "production" ? t.exports = s() : t.exports = c();
|
|
228
|
+
})))(), u = {
|
|
229
|
+
spring: "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap",
|
|
230
|
+
summer: "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
|
|
231
|
+
autumn: "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600&display=swap",
|
|
232
|
+
winter: "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap",
|
|
233
|
+
rainy: "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap"
|
|
234
|
+
}, d = ({ children: e }) => {
|
|
235
|
+
let { season: n, updateSeason: r } = a();
|
|
236
|
+
return t(() => {
|
|
237
|
+
r();
|
|
238
|
+
let e = setInterval(() => {
|
|
239
|
+
r();
|
|
240
|
+
}, 1e3 * 60 * 60);
|
|
241
|
+
return () => clearInterval(e);
|
|
242
|
+
}, [r]), t(() => {
|
|
243
|
+
document.documentElement.setAttribute("data-season", n);
|
|
244
|
+
let e = `season-font-${n}`;
|
|
245
|
+
if (!document.getElementById(e)) {
|
|
246
|
+
let t = document.createElement("link");
|
|
247
|
+
t.id = e, t.rel = "stylesheet", t.href = u[n], document.head.appendChild(t);
|
|
248
|
+
}
|
|
249
|
+
}, [n]), /* @__PURE__ */ (0, l.jsx)(l.Fragment, { children: e });
|
|
250
|
+
}, f = ({ variant: e = "primary", animate: t = "none", className: n = "", style: r, children: i, ...a }) => {
|
|
251
|
+
let o = {
|
|
252
|
+
padding: "0.75rem 1.5rem",
|
|
253
|
+
borderRadius: "var(--season-border-radius)",
|
|
254
|
+
border: "none",
|
|
255
|
+
fontFamily: "var(--season-font)",
|
|
256
|
+
fontSize: "1rem",
|
|
257
|
+
fontWeight: 600,
|
|
258
|
+
cursor: "pointer",
|
|
259
|
+
transition: "all 0.3s ease",
|
|
260
|
+
display: "inline-flex",
|
|
261
|
+
alignItems: "center",
|
|
262
|
+
justifyContent: "center"
|
|
263
|
+
}, s = {
|
|
264
|
+
primary: {
|
|
265
|
+
background: "var(--season-gradient)",
|
|
266
|
+
color: "#fff",
|
|
267
|
+
boxShadow: "0 4px 6px var(--season-shadow)"
|
|
268
|
+
},
|
|
269
|
+
secondary: {
|
|
270
|
+
background: "transparent",
|
|
271
|
+
color: "var(--season-primary)",
|
|
272
|
+
border: "2px solid var(--season-primary-light)"
|
|
273
|
+
},
|
|
274
|
+
glass: {
|
|
275
|
+
background: "var(--season-bg-card)",
|
|
276
|
+
backdropFilter: "blur(12px)",
|
|
277
|
+
color: "var(--season-primary)",
|
|
278
|
+
border: "1px solid rgba(255,255,255,0.4)",
|
|
279
|
+
boxShadow: "0 8px 32px var(--season-shadow)"
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
return /* @__PURE__ */ (0, l.jsx)("button", {
|
|
283
|
+
className: `season-btn ${t === "none" ? "" : `season-${t}`} ${n}`,
|
|
284
|
+
style: {
|
|
285
|
+
...o,
|
|
286
|
+
...s[e],
|
|
287
|
+
...r
|
|
288
|
+
},
|
|
289
|
+
...a,
|
|
290
|
+
children: i
|
|
291
|
+
});
|
|
292
|
+
}, p = ({ animate: e = "fade-in", glass: t = !0, className: n = "", style: r, children: i, ...a }) => {
|
|
293
|
+
let o = {
|
|
294
|
+
background: "var(--season-bg-card)",
|
|
295
|
+
borderRadius: "var(--season-border-radius)",
|
|
296
|
+
padding: "1.5rem",
|
|
297
|
+
color: "var(--season-text)",
|
|
298
|
+
fontFamily: "var(--season-font)",
|
|
299
|
+
boxShadow: "0 10px 30px var(--season-shadow)",
|
|
300
|
+
transition: "all 0.3s ease",
|
|
301
|
+
border: t ? "1px solid rgba(255,255,255,0.2)" : "none",
|
|
302
|
+
backdropFilter: t ? "blur(12px)" : "none",
|
|
303
|
+
WebkitBackdropFilter: t ? "blur(12px)" : "none"
|
|
304
|
+
};
|
|
305
|
+
return /* @__PURE__ */ (0, l.jsx)("div", {
|
|
306
|
+
className: `season-card ${e === "none" ? "" : `season-${e}`} ${n}`,
|
|
307
|
+
style: {
|
|
308
|
+
...o,
|
|
309
|
+
...r
|
|
310
|
+
},
|
|
311
|
+
...a,
|
|
312
|
+
children: i
|
|
313
|
+
});
|
|
314
|
+
}, m = ({ animate: e = "none", glass: t = !1, className: n = "", style: r, ...i }) => {
|
|
315
|
+
let a = {
|
|
316
|
+
padding: "0.75rem 1rem",
|
|
317
|
+
borderRadius: "calc(var(--season-border-radius) / 1.5)",
|
|
318
|
+
border: "1px solid var(--season-primary-light)",
|
|
319
|
+
background: t ? "rgba(255,255,255,0.4)" : "var(--season-bg)",
|
|
320
|
+
color: "var(--season-text)",
|
|
321
|
+
fontFamily: "var(--season-font)",
|
|
322
|
+
fontSize: "1rem",
|
|
323
|
+
outline: "none",
|
|
324
|
+
transition: "all 0.3s ease",
|
|
325
|
+
backdropFilter: t ? "blur(8px)" : "none",
|
|
326
|
+
WebkitBackdropFilter: t ? "blur(8px)" : "none",
|
|
327
|
+
boxShadow: "inset 0 2px 4px var(--season-shadow)"
|
|
328
|
+
};
|
|
329
|
+
return /* @__PURE__ */ (0, l.jsx)("input", {
|
|
330
|
+
className: `season-input ${e === "none" ? "" : `season-${e}`} ${n}`,
|
|
331
|
+
style: {
|
|
332
|
+
...a,
|
|
333
|
+
...r
|
|
334
|
+
},
|
|
335
|
+
onFocus: (e) => {
|
|
336
|
+
e.target.style.borderColor = "var(--season-primary)", e.target.style.boxShadow = "0 0 0 3px var(--season-shadow)";
|
|
337
|
+
},
|
|
338
|
+
onBlur: (e) => {
|
|
339
|
+
e.target.style.borderColor = "var(--season-primary-light)", e.target.style.boxShadow = "inset 0 2px 4px var(--season-shadow)";
|
|
340
|
+
},
|
|
341
|
+
...i
|
|
342
|
+
});
|
|
343
|
+
}, h = ({ variant: e = "solid", animate: t = "none", className: n = "", style: r, children: i, ...a }) => {
|
|
344
|
+
let o = {
|
|
345
|
+
display: "inline-flex",
|
|
346
|
+
alignItems: "center",
|
|
347
|
+
padding: "0.25rem 0.75rem",
|
|
348
|
+
borderRadius: "9999px",
|
|
349
|
+
fontFamily: "var(--season-font)",
|
|
350
|
+
fontSize: "0.75rem",
|
|
351
|
+
fontWeight: 700,
|
|
352
|
+
textTransform: "uppercase",
|
|
353
|
+
letterSpacing: "0.05em",
|
|
354
|
+
transition: "all 0.3s ease"
|
|
355
|
+
}, s = {
|
|
356
|
+
solid: {
|
|
357
|
+
background: "var(--season-gradient)",
|
|
358
|
+
color: "#fff",
|
|
359
|
+
boxShadow: "0 2px 4px var(--season-shadow)"
|
|
360
|
+
},
|
|
361
|
+
outline: {
|
|
362
|
+
background: "transparent",
|
|
363
|
+
color: "var(--season-primary)",
|
|
364
|
+
border: "1px solid var(--season-primary)"
|
|
365
|
+
},
|
|
366
|
+
glass: {
|
|
367
|
+
background: "var(--season-bg-card)",
|
|
368
|
+
backdropFilter: "blur(8px)",
|
|
369
|
+
color: "var(--season-primary)",
|
|
370
|
+
border: "1px solid rgba(255,255,255,0.4)",
|
|
371
|
+
boxShadow: "0 4px 12px var(--season-shadow)"
|
|
372
|
+
}
|
|
373
|
+
};
|
|
374
|
+
return /* @__PURE__ */ (0, l.jsx)("span", {
|
|
375
|
+
className: `season-badge ${t === "none" ? "" : `season-${t}`} ${n}`,
|
|
376
|
+
style: {
|
|
377
|
+
...o,
|
|
378
|
+
...s[e],
|
|
379
|
+
...r
|
|
380
|
+
},
|
|
381
|
+
...a,
|
|
382
|
+
children: i
|
|
383
|
+
});
|
|
384
|
+
}, g = ({ variant: e = "body", as: t = "p", className: n = "", style: r, children: i, ...a }) => {
|
|
385
|
+
let o = {
|
|
386
|
+
fontFamily: "var(--season-font)",
|
|
387
|
+
transition: "color 0.3s ease",
|
|
388
|
+
margin: t === "p" ? "0 0 1rem 0" : 0,
|
|
389
|
+
lineHeight: 1.6
|
|
390
|
+
}, s = {
|
|
391
|
+
body: { color: "var(--season-text)" },
|
|
392
|
+
muted: { color: "var(--season-text-muted)" },
|
|
393
|
+
gradient: {
|
|
394
|
+
background: "var(--season-gradient)",
|
|
395
|
+
WebkitBackgroundClip: "text",
|
|
396
|
+
WebkitTextFillColor: "transparent",
|
|
397
|
+
backgroundClip: "text",
|
|
398
|
+
color: "transparent",
|
|
399
|
+
display: "inline-block"
|
|
400
|
+
}
|
|
401
|
+
};
|
|
402
|
+
return /* @__PURE__ */ (0, l.jsx)(t, {
|
|
403
|
+
className: `season-text ${n}`,
|
|
404
|
+
style: {
|
|
405
|
+
...o,
|
|
406
|
+
...s[e],
|
|
407
|
+
...r
|
|
408
|
+
},
|
|
409
|
+
...a,
|
|
410
|
+
children: i
|
|
411
|
+
});
|
|
412
|
+
}, _ = ({ level: e = 2, gradient: t = !1, className: n = "", style: r, children: i, ...a }) => {
|
|
413
|
+
let o = `h${e}`, s = {
|
|
414
|
+
fontFamily: "var(--season-font)",
|
|
415
|
+
color: "var(--season-text)",
|
|
416
|
+
transition: "color 0.3s ease",
|
|
417
|
+
margin: "0 0 1rem 0",
|
|
418
|
+
fontWeight: 700,
|
|
419
|
+
lineHeight: 1.2
|
|
420
|
+
}, c = t ? {
|
|
421
|
+
background: "var(--season-gradient)",
|
|
422
|
+
WebkitBackgroundClip: "text",
|
|
423
|
+
WebkitTextFillColor: "transparent",
|
|
424
|
+
backgroundClip: "text",
|
|
425
|
+
color: "transparent",
|
|
426
|
+
display: "inline-block"
|
|
427
|
+
} : {};
|
|
428
|
+
return /* @__PURE__ */ (0, l.jsx)(o, {
|
|
429
|
+
className: `season-heading season-fade-in ${n}`,
|
|
430
|
+
style: {
|
|
431
|
+
...s,
|
|
432
|
+
...c,
|
|
433
|
+
...r
|
|
434
|
+
},
|
|
435
|
+
...a,
|
|
436
|
+
children: i
|
|
437
|
+
});
|
|
438
|
+
}, v = ({ fullscreen: e = !1, className: t = "", style: n, children: r, ...i }) => {
|
|
439
|
+
let a = {
|
|
440
|
+
background: "var(--season-bg)",
|
|
441
|
+
color: "var(--season-text)",
|
|
442
|
+
fontFamily: "var(--season-font)",
|
|
443
|
+
transition: "all 0.5s ease",
|
|
444
|
+
minHeight: e ? "100vh" : "auto",
|
|
445
|
+
width: "100%"
|
|
446
|
+
};
|
|
447
|
+
return /* @__PURE__ */ (0, l.jsx)("div", {
|
|
448
|
+
className: `season-bg ${t}`,
|
|
449
|
+
style: {
|
|
450
|
+
...a,
|
|
451
|
+
...n
|
|
452
|
+
},
|
|
453
|
+
...i,
|
|
454
|
+
children: r
|
|
455
|
+
});
|
|
456
|
+
}, y = ({ variant: e = "solid", className: t = "", style: n, ...r }) => {
|
|
457
|
+
let i = {
|
|
458
|
+
width: "100%",
|
|
459
|
+
height: "1px",
|
|
460
|
+
border: "none",
|
|
461
|
+
margin: "1.5rem 0",
|
|
462
|
+
transition: "all 0.3s ease"
|
|
463
|
+
}, a = {
|
|
464
|
+
solid: {
|
|
465
|
+
background: "rgba(0,0,0,0.1)",
|
|
466
|
+
backgroundColor: "var(--season-primary-light)",
|
|
467
|
+
opacity: .3
|
|
468
|
+
},
|
|
469
|
+
dashed: {
|
|
470
|
+
background: "transparent",
|
|
471
|
+
borderTop: "1px dashed var(--season-primary)",
|
|
472
|
+
opacity: .5
|
|
473
|
+
},
|
|
474
|
+
gradient: {
|
|
475
|
+
height: "2px",
|
|
476
|
+
background: "var(--season-gradient)",
|
|
477
|
+
opacity: .8
|
|
478
|
+
}
|
|
479
|
+
};
|
|
480
|
+
return /* @__PURE__ */ (0, l.jsx)("hr", {
|
|
481
|
+
className: `season-divider ${t}`,
|
|
482
|
+
style: {
|
|
483
|
+
...i,
|
|
484
|
+
...a[e],
|
|
485
|
+
...n
|
|
486
|
+
},
|
|
487
|
+
...r
|
|
488
|
+
});
|
|
489
|
+
}, b = ({ className: e = "", style: t, ...n }) => /* @__PURE__ */ (0, l.jsx)("div", {
|
|
490
|
+
className: `season-accent-bar ${e}`,
|
|
491
|
+
style: {
|
|
492
|
+
width: "100%",
|
|
493
|
+
height: "6px",
|
|
494
|
+
background: "var(--season-gradient)",
|
|
495
|
+
transition: "all 0.5s ease",
|
|
496
|
+
...t
|
|
497
|
+
},
|
|
498
|
+
...n
|
|
499
|
+
});
|
|
500
|
+
//#endregion
|
|
501
|
+
export { b as SeasonAccentBar, v as SeasonBackground, h as SeasonBadge, f as SeasonButton, p as SeasonCard, y as SeasonDivider, _ as SeasonHeading, m as SeasonInput, d as SeasonProvider, g as SeasonText, i as detectSeason, o as useSeason, a as useSeasonStore };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
:root{--season-primary:#3498db;--season-primary-light:#5dade2;--season-bg:#f5f7fa;--season-bg-card:#fff;--season-text:#2c3e50;--season-text-muted:#7f8c8d;--season-shadow:#0000001a;--season-gradient:linear-gradient(135deg, #3498db, #5dade2);--season-border-radius:8px;--season-font:"sans-serif";--season-opacity:1}[data-season=spring]{--season-primary:#ff6b81;--season-primary-light:#ff7f93;--season-bg:#fff0f3;--season-bg-card:#ffffffd9;--season-text:#2f3542;--season-text-muted:#747d8c;--season-shadow:#ff6b8126;--season-gradient:linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);--season-border-radius:20px;--season-font:"Outfit", sans-serif}[data-season=summer]{--season-primary:#ff9f43;--season-primary-light:#ffb16b;--season-bg:#fffdf5;--season-bg-card:#fff;--season-text:#eb2f06;--season-text-muted:#a4b0be;--season-shadow:#ff9f4333;--season-gradient:linear-gradient(120deg, #f6d365 0%, #fda085 100%);--season-border-radius:12px;--season-font:"Inter", sans-serif}[data-season=autumn]{--season-primary:#d35400;--season-primary-light:#e67e22;--season-bg:#faeedd;--season-bg-card:#fffdf5;--season-text:#2c3e50;--season-text-muted:#7f8c8d;--season-shadow:#d3540026;--season-gradient:linear-gradient(to right, #ed4264, #ffedbc);--season-border-radius:4px;--season-font:"Lora", serif}[data-season=winter]{--season-primary:#0abde3;--season-primary-light:#48dbfb;--season-bg:#f1f2f6;--season-bg-card:#ffffffb3;--season-text:#2f3640;--season-text-muted:#718093;--season-shadow:#0abde31a;--season-gradient:linear-gradient(to top, #accbee 0%, #e7f0fd 100%);--season-border-radius:0px;--season-font:"Roboto Mono", monospace}[data-season=rainy]{--season-primary:#34495e;--season-primary-light:#4b6584;--season-bg:#d1d8e0;--season-bg-card:#fff9;--season-text:#2c3e50;--season-text-muted:#7f8c8d;--season-shadow:#34495e33;--season-gradient:linear-gradient(to right, #373b44, #4286f4);--season-border-radius:16px;--season-font:"Quicksand", sans-serif}@keyframes seasonFloat{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes seasonFloatSpring{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-12px)rotate(1deg)}to{transform:translateY(0)rotate(0)}}@keyframes seasonFloatWinter{0%{transform:translateY(0)}50%{transform:translateY(-15px)scale(1.02)}to{transform:translateY(0)}}@keyframes seasonPulse{0%{box-shadow:0 0 0 0 var(--season-shadow)}70%{box-shadow:0 0 0 12px #0000}to{box-shadow:0 0 #0000}}@keyframes fadeDrift{0%{opacity:0;transform:translateY(15px)translate(-5px)}to{opacity:1;transform:translateY(0)translate(0)}}.season-float{transition:all .3s;animation:4s ease-in-out infinite seasonFloat}[data-season=spring] .season-float{animation:3.5s ease-in-out infinite seasonFloatSpring}[data-season=winter] .season-float{animation:5s ease-in-out infinite seasonFloatWinter}.season-pulse{transition:box-shadow .3s;animation:2.5s infinite seasonPulse}.season-fade-in{animation:.8s ease-out forwards fadeDrift}.season-glass{background:var(--season-bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid #ffffff4d}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type Season = 'spring' | 'summer' | 'autumn' | 'winter' | 'rainy';
|
|
2
|
+
export type Hemisphere = 'northern' | 'southern';
|
|
3
|
+
export type Region = 'temperate' | 'tropical';
|
|
4
|
+
interface SeasonState {
|
|
5
|
+
season: Season;
|
|
6
|
+
hemisphere: Hemisphere;
|
|
7
|
+
region: Region;
|
|
8
|
+
override: Season | null;
|
|
9
|
+
setSeason: (season: Season) => void;
|
|
10
|
+
setOverride: (season: Season | null) => void;
|
|
11
|
+
setHemisphere: (hemisphere: Hemisphere) => void;
|
|
12
|
+
setRegion: (region: Region) => void;
|
|
13
|
+
updateSeason: () => void;
|
|
14
|
+
}
|
|
15
|
+
export declare const useSeasonStore: import('zustand').UseBoundStore<import('zustand').StoreApi<SeasonState>>;
|
|
16
|
+
export {};
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-seasonal-themes",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Fully dynamic seasonal design system mapping to unique UI themes.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.es.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"license": "MIT",
|
|
10
|
+
"files": [
|
|
11
|
+
"dist"
|
|
12
|
+
],
|
|
13
|
+
"readmeFilename": "Readme.md",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"import": "./dist/index.es.js",
|
|
18
|
+
"require": "./dist/index.cjs"
|
|
19
|
+
},
|
|
20
|
+
"./style.css": "./dist/react-seasonal-themes.css"
|
|
21
|
+
},
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "tsc && vite build",
|
|
24
|
+
"postbuild": "node ./scripts/cleanup-dist.mjs",
|
|
25
|
+
"test": "vitest run",
|
|
26
|
+
"test:watch": "vitest"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
30
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
31
|
+
},
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"zustand": "^5.0.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@types/react": "^19.0.0",
|
|
37
|
+
"@types/react-dom": "^19.0.0",
|
|
38
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
39
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
40
|
+
"@testing-library/react": "^16.1.0",
|
|
41
|
+
"jsdom": "^26.0.0",
|
|
42
|
+
"typescript": "^5.9.3",
|
|
43
|
+
"vite": "^8.0.1",
|
|
44
|
+
"vite-plugin-dts": "^4.0.0",
|
|
45
|
+
"vitest": "^2.1.3"
|
|
46
|
+
}
|
|
47
|
+
}
|