@prizmui/components 0.0.8 → 0.1.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/dist/components/PrizmProvider/PrizmProvider.d.ts.map +1 -1
- package/dist/components/PrizmProvider/PrizmProvider.js +7 -27
- package/dist/components/PrizmProvider/PrizmProvider.types.d.ts +9 -3
- package/dist/components/PrizmProvider/PrizmProvider.types.d.ts.map +1 -1
- package/dist/components/PrizmProvider/index.d.ts +3 -2
- package/dist/components/PrizmProvider/index.d.ts.map +1 -1
- package/dist/components/PrizmProvider/index.js +2 -1
- package/dist/components/PrizmProvider/renderProvider.d.ts +4 -0
- package/dist/components/PrizmProvider/renderProvider.d.ts.map +1 -0
- package/dist/components/PrizmProvider/renderProvider.js +6 -0
- package/dist/components/PrizmProvider/useProvider.d.ts +3 -0
- package/dist/components/PrizmProvider/useProvider.d.ts.map +1 -0
- package/dist/components/PrizmProvider/useProvider.js +33 -0
- package/dist/components/PrizmProvider/useProviderStyles.styles.d.ts +5 -0
- package/dist/components/PrizmProvider/useProviderStyles.styles.d.ts.map +1 -0
- package/dist/components/PrizmProvider/useProviderStyles.styles.js +14 -0
- package/dist/components/Text/useTextStyles.styles.d.ts.map +1 -1
- package/dist/components/Text/useTextStyles.styles.js +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrizmProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/PrizmProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"PrizmProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/PrizmProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAKhE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAMhD,CAAC"}
|
|
@@ -1,28 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
return (h >>> 0).toString(36);
|
|
10
|
-
}
|
|
11
|
-
function getThemeClassName(theme) {
|
|
12
|
-
const hash = hashTheme(theme);
|
|
13
|
-
const className = `prizm-${hash}`;
|
|
14
|
-
if (!injectedThemes.has(className)) {
|
|
15
|
-
const vars = Object.entries(theme)
|
|
16
|
-
.map(([key, value]) => `--${key}: ${value}`)
|
|
17
|
-
.join('; ');
|
|
18
|
-
const style = document.createElement('style');
|
|
19
|
-
style.textContent = `.${className} { ${vars} }`;
|
|
20
|
-
document.head.appendChild(style);
|
|
21
|
-
injectedThemes.set(className, hash);
|
|
22
|
-
}
|
|
23
|
-
return className;
|
|
24
|
-
}
|
|
25
|
-
export const PrizmProvider = ({ theme, children }) => {
|
|
26
|
-
const className = getThemeClassName(theme);
|
|
27
|
-
return _jsx("div", { className: className, children: children });
|
|
1
|
+
import { useProvider } from './useProvider';
|
|
2
|
+
import { useProviderStyles } from './useProviderStyles.styles';
|
|
3
|
+
import { renderProvider } from './renderProvider';
|
|
4
|
+
export const PrizmProvider = (props) => {
|
|
5
|
+
const state = useProvider(props);
|
|
6
|
+
useProviderStyles(state);
|
|
7
|
+
return renderProvider(state);
|
|
28
8
|
};
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '../../utilities';
|
|
2
2
|
import type { Theme } from '@prizmui/tokens';
|
|
3
|
-
export type
|
|
3
|
+
export type PrizmProviderSlots = {
|
|
4
|
+
root: NonNullable<Slot<'div'>>;
|
|
5
|
+
};
|
|
6
|
+
export type PrizmProviderProps = ComponentProps<PrizmProviderSlots> & {
|
|
7
|
+
theme: Theme;
|
|
8
|
+
};
|
|
9
|
+
export type PrizmProviderState = ComponentState<PrizmProviderSlots> & {
|
|
4
10
|
theme: Theme;
|
|
5
|
-
|
|
11
|
+
themeClassName: string;
|
|
6
12
|
};
|
|
7
13
|
//# sourceMappingURL=PrizmProvider.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrizmProvider.types.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/PrizmProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"PrizmProvider.types.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/PrizmProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAClE,KAAK,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAClE,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CAC1B,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export { PrizmProvider } from './PrizmProvider';
|
|
2
|
-
export
|
|
1
|
+
export { PrizmProvider, } from './PrizmProvider';
|
|
2
|
+
export { prizmProviderClassNames } from './useProviderStyles.styles';
|
|
3
|
+
export type { PrizmProviderProps, PrizmProviderSlots, PrizmProviderState } from './PrizmProvider.types';
|
|
3
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,GAAG,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { PrizmProvider } from './PrizmProvider';
|
|
1
|
+
export { PrizmProvider, } from './PrizmProvider';
|
|
2
|
+
export { prizmProviderClassNames } from './useProviderStyles.styles';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/renderProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAsB,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEpF,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB,KAAG,UAQ1D,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/useProvider.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAgCpF,eAAO,MAAM,WAAW,GAAI,OAAO,kBAAkB,KAAG,kBAYvD,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { getIntrinsicElementProps, slot } from '../../utilities';
|
|
2
|
+
const injectedThemes = new Map();
|
|
3
|
+
function hashTheme(theme) {
|
|
4
|
+
const str = Object.entries(theme).join('');
|
|
5
|
+
let h = 5381;
|
|
6
|
+
for (let i = 0; i < str.length; i++) {
|
|
7
|
+
h = ((h << 5) + h) ^ str.charCodeAt(i);
|
|
8
|
+
}
|
|
9
|
+
return (h >>> 0).toString(36);
|
|
10
|
+
}
|
|
11
|
+
function getThemeClassName(theme) {
|
|
12
|
+
const hash = hashTheme(theme);
|
|
13
|
+
const className = `prizm-${hash}`;
|
|
14
|
+
if (!injectedThemes.has(className)) {
|
|
15
|
+
const vars = Object.entries(theme)
|
|
16
|
+
.map(([key, value]) => `--${key}: ${value}`)
|
|
17
|
+
.join('; ');
|
|
18
|
+
const style = document.createElement('style');
|
|
19
|
+
style.textContent = `.${className} { ${vars} }`;
|
|
20
|
+
document.head.appendChild(style);
|
|
21
|
+
injectedThemes.set(className, hash);
|
|
22
|
+
}
|
|
23
|
+
return className;
|
|
24
|
+
}
|
|
25
|
+
export const useProvider = (props) => {
|
|
26
|
+
const { theme } = props;
|
|
27
|
+
return {
|
|
28
|
+
theme,
|
|
29
|
+
themeClassName: getThemeClassName(theme),
|
|
30
|
+
components: { root: 'div' },
|
|
31
|
+
root: slot.always(getIntrinsicElementProps('div', { ...props }, ['theme']), { elementType: 'div' }),
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { SlotClassNames } from '../../utilities';
|
|
2
|
+
import type { PrizmProviderSlots, PrizmProviderState } from './PrizmProvider.types';
|
|
3
|
+
export declare const prizmProviderClassNames: SlotClassNames<PrizmProviderSlots>;
|
|
4
|
+
export declare const useProviderStyles: (state: PrizmProviderState) => PrizmProviderState;
|
|
5
|
+
//# sourceMappingURL=useProviderStyles.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useProviderStyles.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PrizmProvider/useProviderStyles.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGpF,eAAO,MAAM,uBAAuB,EAAE,cAAc,CAAC,kBAAkB,CAEtE,CAAC;AAOF,eAAO,MAAM,iBAAiB,GAAI,OAAO,kBAAkB,KAAG,kBAW7D,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { makeResetStyles, mergeClasses } from 'calame';
|
|
2
|
+
import { tokens } from '@prizmui/tokens';
|
|
3
|
+
export const prizmProviderClassNames = {
|
|
4
|
+
root: 'c-prizmprovider',
|
|
5
|
+
};
|
|
6
|
+
const useRootBaseClassName = makeResetStyles({
|
|
7
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
8
|
+
color: tokens.colorNeutralForeground1,
|
|
9
|
+
});
|
|
10
|
+
export const useProviderStyles = (state) => {
|
|
11
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
12
|
+
state.root.className = mergeClasses(prizmProviderClassNames.root, state.themeClassName, rootBaseClassName, state.root.className);
|
|
13
|
+
return state;
|
|
14
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextStyles.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Text/useTextStyles.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,SAAS,CAEpD,CAAC;
|
|
1
|
+
{"version":3,"file":"useTextStyles.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Text/useTextStyles.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,SAAS,CAEpD,CAAC;AA6CF,eAAO,MAAM,aAAa,GAAI,OAAO,SAAS,KAAG,SA0ChD,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { PrizmProvider } from './components/PrizmProvider';
|
|
2
|
-
export type { PrizmProviderProps } from './components/PrizmProvider';
|
|
1
|
+
export { PrizmProvider, prizmProviderClassNames } from './components/PrizmProvider';
|
|
2
|
+
export type { PrizmProviderProps, PrizmProviderSlots, PrizmProviderState } from './components/PrizmProvider';
|
|
3
3
|
export { Button, buttonClassNames } from './components/Button';
|
|
4
4
|
export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button';
|
|
5
5
|
export { Text, textClassNames } from './components/Text';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACpF,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAE7G,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC"}
|
package/dist/index.js
CHANGED