New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@kuma-ui/system

Package Overview
Dependencies
Maintainers
3
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kuma-ui/system - npm Package Compare versions

Comparing version 0.0.0-dev-20231030083442 to 0.0.0-dev-20231105161834

dist/chunk-2SOPWCXX.mjs
dist/chunk-3VYAMDSB.mjs
dist/chunk-4MVAWPDO.mjs
dist/chunk-4YGIR3AE.mjs
dist/chunk-AO5KUUY7.mjs
dist/chunk-DOMJYUPT.mjs
dist/chunk-HU52AVVT.mjs
dist/chunk-ICUWHNYX.mjs
dist/chunk-JB7NG7KD.mjs
dist/chunk-KWAYQKFH.mjs
dist/chunk-L7PADUOS.mjs
dist/chunk-LEALQ2VC.mjs
dist/chunk-MBVGVDIP.mjs
dist/chunk-QZTVWA74.mjs
dist/chunk-S6P6A5HX.mjs
dist/chunk-SIUEC2GX.mjs
dist/chunk-SSZKRPKI.mjs
dist/chunk-THPK6HBE.mjs
dist/chunk-TPIHJFKG.mjs
dist/chunk-TUHXRY3H.mjs
dist/chunk-ZMCIEB3D.mjs
dist/consumeStyleProps.d.ts
dist/consumeStyleProps.js
dist/consumeStyleProps.mjs
dist/props/animation.d.ts
dist/props/animation.js
dist/props/animation.mjs
dist/props/background.d.ts
dist/props/background.js
dist/props/background.mjs
dist/props/border.d.ts
dist/props/border.js
dist/props/border.mjs
dist/props/color.d.ts
dist/props/color.js
dist/props/color.mjs
dist/props/column.d.ts
dist/props/column.js
dist/props/column.mjs
dist/props/effect.d.ts
dist/props/effect.js
dist/props/effect.mjs
dist/props/filter.d.ts
dist/props/filter.js
dist/props/filter.mjs
dist/props/flex.d.ts
dist/props/flex.js
dist/props/flex.mjs
dist/props/font.d.ts
dist/props/font.js
dist/props/font.mjs
dist/props/grid.d.ts
dist/props/grid.js
dist/props/grid.mjs
dist/props/layout.d.ts
dist/props/layout.js
dist/props/layout.mjs
dist/props/list.d.ts
dist/props/list.js
dist/props/list.mjs
dist/props/mask.d.ts
dist/props/mask.js
dist/props/mask.mjs
dist/props/outline.d.ts
dist/props/outline.js
dist/props/outline.mjs
dist/props/position.d.ts
dist/props/position.js
dist/props/position.mjs
dist/props/shadow.d.ts
dist/props/shadow.js
dist/props/shadow.mjs
dist/props/space.d.ts
dist/props/space.js
dist/props/space.mjs
dist/props/text.d.ts
dist/props/text.js
dist/props/text.mjs
dist/props/typography.d.ts
dist/props/typography.js
dist/props/typography.mjs

40

dist/generator.d.ts

@@ -1,4 +0,4 @@

import { StyledProps } from './compose.js';
import { StyledProps } from './consumeStyleProps.js';
import { PseudoProps } from './pseudo.js';
import './animation.js';
import './props/animation.js';
import './keys.js';

@@ -8,20 +8,20 @@ import './types.js';

import '@kuma-ui/sheet';
import './space.js';
import './typography.js';
import './layout.js';
import './color.js';
import './flex.js';
import './border.js';
import './outline.js';
import './position.js';
import './shadow.js';
import './grid.js';
import './list.js';
import './effect.js';
import './text.js';
import './font.js';
import './mask.js';
import './column.js';
import './background.js';
import './filter.js';
import './props/space.js';
import './props/typography.js';
import './props/layout.js';
import './props/color.js';
import './props/flex.js';
import './props/border.js';
import './props/outline.js';
import './props/position.js';
import './props/shadow.js';
import './props/grid.js';
import './props/list.js';
import './props/effect.js';
import './props/text.js';
import './props/font.js';
import './props/mask.js';
import './props/column.js';
import './props/background.js';
import './props/filter.js';

@@ -28,0 +28,0 @@ declare class StyleGenerator {

675

dist/generator.js

@@ -352,22 +352,3 @@ "use strict";

// src/responsive.ts
var import_sheet = require("@kuma-ui/sheet");
var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
const { breakpoints } = import_sheet.theme.getUserTheme();
const media = {};
if (Array.isArray(cssValues)) {
const baseValue = convertFn(cssValues[0]);
cssValues.slice(1).map((value, index) => {
if (breakpoints) {
const breakpoint = Object.keys(breakpoints)[index];
const breakpointValue = breakpoints[breakpoint];
media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
}
});
return { base: `${cssProperty}: ${baseValue};`, media };
}
return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
};
// src/animation.ts
// src/props/animation.ts
var animationMappings = {

@@ -386,25 +367,3 @@ animation: "animation",

};
var animation = (props) => {
let base = "";
const media = {};
for (const key in animationMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = animationMappings[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
void 0
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var animationConverters = {};

@@ -419,3 +378,3 @@ // src/toCSS.ts

// src/space.ts
// src/props/space.ts
var spaceMappings = {

@@ -451,35 +410,5 @@ margin: "margin",

};
var space = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in spaceMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const properties = spaceMappings[key].split(",");
for (const property of properties) {
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
toCssUnit
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(
responsiveStyles.media
)) {
if (mediaStyles[breakpoint]) {
mediaStyles[breakpoint] += css;
} else {
mediaStyles[breakpoint] = css;
}
}
}
}
}
return {
base: baseStyles,
media: mediaStyles
};
};
var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
// src/typography.ts
// src/props/typography.ts
var typographyMappings = {

@@ -503,33 +432,8 @@ hyphenateCharacter: "hyphenate-character",

};
var typography = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in typographyMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = typographyMappings[key];
const converter = (value) => {
if (property === "word-spacing" || property === "letter-spacing") {
return toCssUnit(value);
}
return value;
};
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (mediaStyles[breakpoint])
mediaStyles[breakpoint] += css;
else
mediaStyles[breakpoint] = css;
}
}
}
return { base: baseStyles, media: mediaStyles };
var typographyConverters = {
wordSpacing: toCssUnit,
letterSpacing: toCssUnit
};
// src/layout.ts
// src/props/layout.ts
var layoutMappings = {

@@ -559,3 +463,3 @@ width: "width",

};
var converters = {
var layoutConverters = {
width: toCssUnit,

@@ -569,28 +473,4 @@ minWidth: toCssUnit,

};
var layout = (props) => {
let base = "";
const media = {};
for (const key in layoutMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = layoutMappings[key];
const converter = converters[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
// src/color.ts
// src/props/color.ts
var colorMappings = {

@@ -609,23 +489,5 @@ background: "background",

};
var color = (props) => {
let base = "";
const media = {};
for (const key in colorMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = colorMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var colorConverters = {};
// src/flex.ts
// src/props/flex.ts
var flexMappings = {

@@ -651,32 +513,8 @@ flexDirection: "flex-direction",

};
var converters2 = {
var flexConverters = {
gap: toCssUnit,
flexBasis: toCssUnit
};
var flex = (props) => {
let base = "";
const media = {};
for (const key in flexMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = flexMappings[key];
const converter = converters2[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
// src/border.ts
// src/props/border.ts
var borderMappings = {

@@ -714,3 +552,3 @@ border: "border",

};
var converters3 = {
var borderConverters = {
border: toCssUnit,

@@ -740,36 +578,4 @@ borderTop: toCssUnit,

};
var border = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in borderMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const properties = borderMappings[key].split(",");
for (const property of properties) {
const converter = converters3[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(
responsiveStyles.media
)) {
if (mediaStyles[breakpoint]) {
mediaStyles[breakpoint] += css;
} else {
mediaStyles[breakpoint] = css;
}
}
}
}
}
return {
base: baseStyles,
media: mediaStyles
};
};
// src/outline.ts
// src/props/outline.ts
var outlineMappings = {

@@ -781,31 +587,8 @@ outline: "outline",

};
var outline = (props) => {
let base = "";
const media = {};
for (const key in outlineMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = outlineMappings[key];
const converter = [
outlineMappings.outlineWidth,
outlineMappings.outlineOffset
].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var outlineConverters = {
outlineWidth: toCssUnit,
outlineOffset: toCssUnit
};
// src/position.ts
// src/props/position.ts
var positionMappings = {

@@ -818,27 +601,7 @@ top: "top",

};
var position = (props) => {
let base = "";
const media = {};
for (const key in positionMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = positionMappings[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
toCssUnit
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var positionConverters = Object.fromEntries(
Object.keys(positionMappings).map((key) => [key, toCssUnit])
);
// src/shadow.ts
// src/props/shadow.ts
var shadowMappings = {

@@ -848,27 +611,8 @@ boxShadow: "box-shadow",

};
var shadow = (props) => {
let base = "";
const media = {};
for (const key in shadowMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = shadowMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var shadowConverters = {};
// src/compose.ts
// src/consumeStyleProps.ts
var import_sheet2 = require("@kuma-ui/sheet");
// src/grid.ts
var gapKeys = ["gridGap", "gridColumnGap", "gridRowGap"];
// src/props/grid.ts
var gridMappings = {

@@ -894,28 +638,9 @@ grid: "grid",

};
var grid = (props) => {
let base = "";
const media = {};
for (const key in gridMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = gridMappings[key];
const converter = gapKeys.includes(key) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var gridConverters = {
gridGap: toCssUnit,
gridColumnGap: toCssUnit,
gridRowGap: toCssUnit
};
// src/list.ts
// src/props/list.ts
var listMappings = {

@@ -927,23 +652,5 @@ listStyle: "list-style",

};
var list = (props) => {
let base = "";
const media = {};
for (const key in listMappings) {
const cssValue = props[key];
if (cssValue) {
const property = listMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var listConverters = {};
// src/effect.ts
// src/props/effect.ts
var effectMappings = {

@@ -961,23 +668,5 @@ transition: "transition",

};
var effect = (props) => {
let base = "";
const media = {};
for (const key in effectMappings) {
const cssValue = props[key];
if (cssValue) {
const property = effectMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var effectConverters = {};
// src/text.ts
// src/props/text.ts
var textMappings = {

@@ -1007,28 +696,7 @@ textAlign: "text-align",

};
var text = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in textMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = textMappings[key];
const converter = [textMappings.textIndent].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (mediaStyles[breakpoint])
mediaStyles[breakpoint] += css;
else
mediaStyles[breakpoint] = css;
}
}
}
return { base: baseStyles, media: mediaStyles };
var textConverters = {
textIndent: toCssUnit
};
// src/font.ts
// src/props/font.ts
var fontMappings = {

@@ -1058,33 +726,7 @@ font: "font",

};
var font = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in fontMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = fontMappings[key];
const converter = (value) => {
if (property === "font-size") {
return toCssUnit(value);
}
return value;
};
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (mediaStyles[breakpoint])
mediaStyles[breakpoint] += css;
else
mediaStyles[breakpoint] = css;
}
}
}
return { base: baseStyles, media: mediaStyles };
var fontConverters = {
fontSize: toCssUnit
};
// src/mask.ts
// src/props/mask.ts
var maskMappings = {

@@ -1109,28 +751,7 @@ mask: "mask",

};
var mask = (props) => {
let base = "";
const media = {};
for (const key in maskMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = maskMappings[key];
const converter = [maskMappings.maskSize].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var maskConverters = {
maskSize: toCssUnit
};
// src/column.ts
// src/props/column.ts
var columnMappings = {

@@ -1148,3 +769,3 @@ columnCount: "column-count",

};
var converters4 = {
var columnConverters = {
columnGap: toCssUnit,

@@ -1154,28 +775,4 @@ columnRuleWidth: toCssUnit,

};
var column = (props) => {
let base = "";
const media = {};
for (const key in columnMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = columnMappings[key];
const converter = converters4[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
// src/background.ts
// src/props/background.ts
var backgroundMappings = {

@@ -1203,32 +800,9 @@ backgroundImage: "background-image",

};
var background = (props) => {
let base = "";
const media = {};
for (const key in backgroundMappings) {
const cssValue = props[key];
if (cssValue) {
const property = backgroundMappings[key];
const converter = [
backgroundMappings.bgPositionX,
backgroundMappings.bgPositionY,
backgroundMappings.bgSize
].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var backgroundConverters = {
bgPositionX: toCssUnit,
bgPositionY: toCssUnit,
bgSize: toCssUnit
};
// src/filter.ts
// src/props/filter.ts
var filterMappings = {

@@ -1238,23 +812,24 @@ filter: "filter",

};
var filter = (props) => {
let base = "";
var filterConverters = {};
// src/responsive.ts
var import_sheet = require("@kuma-ui/sheet");
var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
const { breakpoints } = import_sheet.theme.getUserTheme();
const media = {};
for (const key in filterMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = filterMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
if (Array.isArray(cssValues)) {
const baseValue = convertFn(cssValues[0]);
cssValues.slice(1).map((value, index) => {
if (breakpoints) {
const breakpoint = Object.keys(breakpoints)[index];
const breakpointValue = breakpoints[breakpoint];
media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
}
}
});
return { base: `${cssProperty}: ${baseValue};`, media };
}
return { base, media };
return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
};
// src/compose.ts
// src/consumeStyleProps.ts
var styleMappings = Object.assign(

@@ -1282,61 +857,61 @@ {},

);
var compose = (...styleFunctions) => {
return (props) => {
const cacheKey = JSON.stringify(props);
let outputProps = { ...props };
const cachedStyles = import_sheet2.styleCache.get(cacheKey);
if (cachedStyles) {
return cachedStyles;
var styleConverters = Object.assign(
{},
animationConverters,
spaceConverters,
typographyConverters,
layoutConverters,
colorConverters,
flexConverters,
borderConverters,
outlineConverters,
positionConverters,
shadowConverters,
gridConverters,
listConverters,
effectConverters,
textConverters,
fontConverters,
maskConverters,
columnConverters,
backgroundConverters,
filterConverters
);
var consumeStyleProps = (props) => {
const cacheKey = JSON.stringify(props);
const cachedStyles = import_sheet2.styleCache.get(cacheKey);
if (cachedStyles) {
return cachedStyles;
}
let base = "";
const media = {};
for (const key in props) {
const cssValue = props[key];
if (cssValue == null)
continue;
const converter = styleConverters[key];
const properties = styleMappings[key]?.split(",") ?? [];
for (const property of properties) {
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint]) {
media[breakpoint] += css;
} else {
media[breakpoint] = css;
}
}
}
const combinedStyles = styleFunctions.reduce(
(styles, styleFunction) => {
const newStyles = styleFunction(outputProps);
styles.base += newStyles.base;
for (const [breakpoint, css] of Object.entries(newStyles.media)) {
if (styles.media[breakpoint]) {
styles.media[breakpoint] += css;
} else {
styles.media[breakpoint] = css;
}
}
const processedProps = Object.keys(outputProps).filter(
(key) => newStyles.base.includes(`${styleMappings[key]}:`)
);
outputProps = Object.keys(outputProps).reduce((remainingProps, key) => {
if (!processedProps.includes(key)) {
remainingProps[key] = outputProps[key];
}
return remainingProps;
}, {});
return styles;
},
{ base: "", media: {} }
);
import_sheet2.styleCache.set(cacheKey, combinedStyles);
return combinedStyles;
};
}
const combinedStyles = { base, media };
import_sheet2.styleCache.set(cacheKey, combinedStyles);
return combinedStyles;
};
// src/index.ts
var all = compose(
animation,
space,
typography,
layout,
color,
flex,
border,
outline,
position,
shadow,
grid,
list,
column,
effect,
text,
font,
mask,
background,
filter
);
var all = consumeStyleProps;

@@ -1343,0 +918,0 @@ // src/generator.ts

48

dist/index.d.ts

@@ -1,24 +0,24 @@

import { StyleFunction } from './compose.js';
export { StyledProps } from './compose.js';
export { AnimationProps } from './animation.js';
export { SpaceProps } from './space.js';
export { TypographyProps } from './typography.js';
export { LayoutProps } from './layout.js';
export { ColorProps } from './color.js';
export { FlexProps } from './flex.js';
export { BorderProps } from './border.js';
export { OutlineProps } from './outline.js';
export { PositionProps } from './position.js';
export { ShadowProps } from './shadow.js';
export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping, ValueConverter } from './types.js';
import { ThemeSystemType, ResponsiveStyle } from './types.js';
export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, SystemStyle, UtilityCSSMapping, ValueConverter } from './types.js';
export { AnimationProps } from './props/animation.js';
export { SpaceProps } from './props/space.js';
export { TypographyProps } from './props/typography.js';
export { LayoutProps } from './props/layout.js';
export { ColorProps } from './props/color.js';
export { FlexProps } from './props/flex.js';
export { BorderProps } from './props/border.js';
export { OutlineProps } from './props/outline.js';
export { PositionProps } from './props/position.js';
export { ShadowProps } from './props/shadow.js';
import { StyledProps } from './consumeStyleProps.js';
export { PseudoProps, isPseudoProps, normalizePseudo } from './pseudo.js';
export { GridProps } from './grid.js';
export { ListProps } from './list.js';
export { EffectProps } from './effect.js';
export { TextProps } from './text.js';
export { FontProps } from './font.js';
export { MaskProps } from './mask.js';
export { ColumnProps } from './column.js';
export { BackgroundProps } from './background.js';
export { FilterProps } from './filter.js';
export { GridProps } from './props/grid.js';
export { ListProps } from './props/list.js';
export { EffectProps } from './props/effect.js';
export { TextProps } from './props/text.js';
export { FontProps } from './props/font.js';
export { MaskProps } from './props/mask.js';
export { ColumnProps } from './props/column.js';
export { BackgroundProps } from './props/background.js';
export { FilterProps } from './props/filter.js';
export { StyledKeyType, isStyledProp } from './keys.js';

@@ -30,4 +30,4 @@ export { StyleGenerator } from './generator.js';

declare const all: StyleFunction;
declare const all: (props: StyledProps<ThemeSystemType>) => ResponsiveStyle;
export { all };
export { ResponsiveStyle, StyledProps, ThemeSystemType, all };

675

dist/index.js

@@ -32,22 +32,3 @@ "use strict";

// src/responsive.ts
var import_sheet = require("@kuma-ui/sheet");
var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
const { breakpoints } = import_sheet.theme.getUserTheme();
const media = {};
if (Array.isArray(cssValues)) {
const baseValue = convertFn(cssValues[0]);
cssValues.slice(1).map((value, index) => {
if (breakpoints) {
const breakpoint = Object.keys(breakpoints)[index];
const breakpointValue = breakpoints[breakpoint];
media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
}
});
return { base: `${cssProperty}: ${baseValue};`, media };
}
return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
};
// src/animation.ts
// src/props/animation.ts
var animationMappings = {

@@ -66,25 +47,3 @@ animation: "animation",

};
var animation = (props) => {
let base = "";
const media = {};
for (const key in animationMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = animationMappings[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
void 0
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var animationConverters = {};

@@ -99,3 +58,3 @@ // src/toCSS.ts

// src/space.ts
// src/props/space.ts
var spaceMappings = {

@@ -131,35 +90,5 @@ margin: "margin",

};
var space = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in spaceMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const properties = spaceMappings[key].split(",");
for (const property of properties) {
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
toCssUnit
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(
responsiveStyles.media
)) {
if (mediaStyles[breakpoint]) {
mediaStyles[breakpoint] += css;
} else {
mediaStyles[breakpoint] = css;
}
}
}
}
}
return {
base: baseStyles,
media: mediaStyles
};
};
var spaceConverters = Object.fromEntries(Object.keys(spaceMappings).map((key) => [key, toCssUnit]));
// src/typography.ts
// src/props/typography.ts
var typographyMappings = {

@@ -183,33 +112,8 @@ hyphenateCharacter: "hyphenate-character",

};
var typography = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in typographyMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = typographyMappings[key];
const converter = (value) => {
if (property === "word-spacing" || property === "letter-spacing") {
return toCssUnit(value);
}
return value;
};
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (mediaStyles[breakpoint])
mediaStyles[breakpoint] += css;
else
mediaStyles[breakpoint] = css;
}
}
}
return { base: baseStyles, media: mediaStyles };
var typographyConverters = {
wordSpacing: toCssUnit,
letterSpacing: toCssUnit
};
// src/layout.ts
// src/props/layout.ts
var layoutMappings = {

@@ -239,3 +143,3 @@ width: "width",

};
var converters = {
var layoutConverters = {
width: toCssUnit,

@@ -249,28 +153,4 @@ minWidth: toCssUnit,

};
var layout = (props) => {
let base = "";
const media = {};
for (const key in layoutMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = layoutMappings[key];
const converter = converters[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
// src/color.ts
// src/props/color.ts
var colorMappings = {

@@ -289,23 +169,5 @@ background: "background",

};
var color = (props) => {
let base = "";
const media = {};
for (const key in colorMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = colorMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var colorConverters = {};
// src/flex.ts
// src/props/flex.ts
var flexMappings = {

@@ -331,32 +193,8 @@ flexDirection: "flex-direction",

};
var converters2 = {
var flexConverters = {
gap: toCssUnit,
flexBasis: toCssUnit
};
var flex = (props) => {
let base = "";
const media = {};
for (const key in flexMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = flexMappings[key];
const converter = converters2[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
// src/border.ts
// src/props/border.ts
var borderMappings = {

@@ -394,3 +232,3 @@ border: "border",

};
var converters3 = {
var borderConverters = {
border: toCssUnit,

@@ -420,36 +258,4 @@ borderTop: toCssUnit,

};
var border = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in borderMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const properties = borderMappings[key].split(",");
for (const property of properties) {
const converter = converters3[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(
responsiveStyles.media
)) {
if (mediaStyles[breakpoint]) {
mediaStyles[breakpoint] += css;
} else {
mediaStyles[breakpoint] = css;
}
}
}
}
}
return {
base: baseStyles,
media: mediaStyles
};
};
// src/outline.ts
// src/props/outline.ts
var outlineMappings = {

@@ -461,31 +267,8 @@ outline: "outline",

};
var outline = (props) => {
let base = "";
const media = {};
for (const key in outlineMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = outlineMappings[key];
const converter = [
outlineMappings.outlineWidth,
outlineMappings.outlineOffset
].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var outlineConverters = {
outlineWidth: toCssUnit,
outlineOffset: toCssUnit
};
// src/position.ts
// src/props/position.ts
var positionMappings = {

@@ -498,27 +281,7 @@ top: "top",

};
var position = (props) => {
let base = "";
const media = {};
for (const key in positionMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = positionMappings[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
toCssUnit
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var positionConverters = Object.fromEntries(
Object.keys(positionMappings).map((key) => [key, toCssUnit])
);
// src/shadow.ts
// src/props/shadow.ts
var shadowMappings = {

@@ -528,27 +291,8 @@ boxShadow: "box-shadow",

};
var shadow = (props) => {
let base = "";
const media = {};
for (const key in shadowMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = shadowMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var shadowConverters = {};
// src/compose.ts
// src/consumeStyleProps.ts
var import_sheet2 = require("@kuma-ui/sheet");
// src/grid.ts
var gapKeys = ["gridGap", "gridColumnGap", "gridRowGap"];
// src/props/grid.ts
var gridMappings = {

@@ -574,28 +318,9 @@ grid: "grid",

};
var grid = (props) => {
let base = "";
const media = {};
for (const key in gridMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = gridMappings[key];
const converter = gapKeys.includes(key) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var gridConverters = {
gridGap: toCssUnit,
gridColumnGap: toCssUnit,
gridRowGap: toCssUnit
};
// src/list.ts
// src/props/list.ts
var listMappings = {

@@ -607,23 +332,5 @@ listStyle: "list-style",

};
var list = (props) => {
let base = "";
const media = {};
for (const key in listMappings) {
const cssValue = props[key];
if (cssValue) {
const property = listMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var listConverters = {};
// src/effect.ts
// src/props/effect.ts
var effectMappings = {

@@ -641,23 +348,5 @@ transition: "transition",

};
var effect = (props) => {
let base = "";
const media = {};
for (const key in effectMappings) {
const cssValue = props[key];
if (cssValue) {
const property = effectMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
var effectConverters = {};
// src/text.ts
// src/props/text.ts
var textMappings = {

@@ -687,28 +376,7 @@ textAlign: "text-align",

};
var text = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in textMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = textMappings[key];
const converter = [textMappings.textIndent].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (mediaStyles[breakpoint])
mediaStyles[breakpoint] += css;
else
mediaStyles[breakpoint] = css;
}
}
}
return { base: baseStyles, media: mediaStyles };
var textConverters = {
textIndent: toCssUnit
};
// src/font.ts
// src/props/font.ts
var fontMappings = {

@@ -738,33 +406,7 @@ font: "font",

};
var font = (props) => {
let baseStyles = "";
const mediaStyles = {};
for (const key in fontMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = fontMappings[key];
const converter = (value) => {
if (property === "font-size") {
return toCssUnit(value);
}
return value;
};
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
baseStyles += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (mediaStyles[breakpoint])
mediaStyles[breakpoint] += css;
else
mediaStyles[breakpoint] = css;
}
}
}
return { base: baseStyles, media: mediaStyles };
var fontConverters = {
fontSize: toCssUnit
};
// src/mask.ts
// src/props/mask.ts
var maskMappings = {

@@ -789,28 +431,7 @@ mask: "mask",

};
var mask = (props) => {
let base = "";
const media = {};
for (const key in maskMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = maskMappings[key];
const converter = [maskMappings.maskSize].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var maskConverters = {
maskSize: toCssUnit
};
// src/column.ts
// src/props/column.ts
var columnMappings = {

@@ -828,3 +449,3 @@ columnCount: "column-count",

};
var converters4 = {
var columnConverters = {
columnGap: toCssUnit,

@@ -834,28 +455,4 @@ columnRuleWidth: toCssUnit,

};
var column = (props) => {
let base = "";
const media = {};
for (const key in columnMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = columnMappings[key];
const converter = converters4[key];
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
};
// src/background.ts
// src/props/background.ts
var backgroundMappings = {

@@ -883,32 +480,9 @@ backgroundImage: "background-image",

};
var background = (props) => {
let base = "";
const media = {};
for (const key in backgroundMappings) {
const cssValue = props[key];
if (cssValue) {
const property = backgroundMappings[key];
const converter = [
backgroundMappings.bgPositionX,
backgroundMappings.bgPositionY,
backgroundMappings.bgSize
].includes(property) ? toCssUnit : void 0;
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
}
}
}
return { base, media };
var backgroundConverters = {
bgPositionX: toCssUnit,
bgPositionY: toCssUnit,
bgSize: toCssUnit
};
// src/filter.ts
// src/props/filter.ts
var filterMappings = {

@@ -918,23 +492,24 @@ filter: "filter",

};
var filter = (props) => {
let base = "";
var filterConverters = {};
// src/responsive.ts
var import_sheet = require("@kuma-ui/sheet");
var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
const { breakpoints } = import_sheet.theme.getUserTheme();
const media = {};
for (const key in filterMappings) {
const cssValue = props[key];
if (cssValue != void 0) {
const property = filterMappings[key];
const responsiveStyles = applyResponsiveStyles(property, cssValue);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint])
media[breakpoint] += css;
else
media[breakpoint] = css;
if (Array.isArray(cssValues)) {
const baseValue = convertFn(cssValues[0]);
cssValues.slice(1).map((value, index) => {
if (breakpoints) {
const breakpoint = Object.keys(breakpoints)[index];
const breakpointValue = breakpoints[breakpoint];
media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
}
}
});
return { base: `${cssProperty}: ${baseValue};`, media };
}
return { base, media };
return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
};
// src/compose.ts
// src/consumeStyleProps.ts
var styleMappings = Object.assign(

@@ -962,37 +537,57 @@ {},

);
var compose = (...styleFunctions) => {
return (props) => {
const cacheKey = JSON.stringify(props);
let outputProps = { ...props };
const cachedStyles = import_sheet2.styleCache.get(cacheKey);
if (cachedStyles) {
return cachedStyles;
var styleConverters = Object.assign(
{},
animationConverters,
spaceConverters,
typographyConverters,
layoutConverters,
colorConverters,
flexConverters,
borderConverters,
outlineConverters,
positionConverters,
shadowConverters,
gridConverters,
listConverters,
effectConverters,
textConverters,
fontConverters,
maskConverters,
columnConverters,
backgroundConverters,
filterConverters
);
var consumeStyleProps = (props) => {
const cacheKey = JSON.stringify(props);
const cachedStyles = import_sheet2.styleCache.get(cacheKey);
if (cachedStyles) {
return cachedStyles;
}
let base = "";
const media = {};
for (const key in props) {
const cssValue = props[key];
if (cssValue == null)
continue;
const converter = styleConverters[key];
const properties = styleMappings[key]?.split(",") ?? [];
for (const property of properties) {
const responsiveStyles = applyResponsiveStyles(
property,
cssValue,
converter
);
base += responsiveStyles.base;
for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
if (media[breakpoint]) {
media[breakpoint] += css;
} else {
media[breakpoint] = css;
}
}
}
const combinedStyles = styleFunctions.reduce(
(styles, styleFunction) => {
const newStyles = styleFunction(outputProps);
styles.base += newStyles.base;
for (const [breakpoint, css] of Object.entries(newStyles.media)) {
if (styles.media[breakpoint]) {
styles.media[breakpoint] += css;
} else {
styles.media[breakpoint] = css;
}
}
const processedProps = Object.keys(outputProps).filter(
(key) => newStyles.base.includes(`${styleMappings[key]}:`)
);
outputProps = Object.keys(outputProps).reduce((remainingProps, key) => {
if (!processedProps.includes(key)) {
remainingProps[key] = outputProps[key];
}
return remainingProps;
}, {});
return styles;
},
{ base: "", media: {} }
);
import_sheet2.styleCache.set(cacheKey, combinedStyles);
return combinedStyles;
};
}
const combinedStyles = { base, media };
import_sheet2.styleCache.set(cacheKey, combinedStyles);
return combinedStyles;
};

@@ -1418,23 +1013,3 @@

// src/index.ts
var all = compose(
animation,
space,
typography,
layout,
color,
flex,
border,
outline,
position,
shadow,
grid,
list,
column,
effect,
text,
font,
mask,
background,
filter
);
var all = consumeStyleProps;
// Annotate the CommonJS export names for ESM import in node:

@@ -1441,0 +1016,0 @@ 0 && (module.exports = {

42

dist/pseudo.d.ts

@@ -1,24 +0,24 @@

import { StyledProps } from './compose.js';
import { StyledProps } from './consumeStyleProps.js';
import { ThemeSystemType, ExcludeHyphen, RemoveColon } from './types.js';
import { Pseudos } from 'csstype';
import './animation.js';
import './props/animation.js';
import './keys.js';
import './space.js';
import './typography.js';
import './layout.js';
import './color.js';
import './flex.js';
import './border.js';
import './outline.js';
import './position.js';
import './shadow.js';
import './grid.js';
import './list.js';
import './effect.js';
import './text.js';
import './font.js';
import './mask.js';
import './column.js';
import './background.js';
import './filter.js';
import './props/space.js';
import './props/typography.js';
import './props/layout.js';
import './props/color.js';
import './props/flex.js';
import './props/border.js';
import './props/outline.js';
import './props/position.js';
import './props/shadow.js';
import './props/grid.js';
import './props/list.js';
import './props/effect.js';
import './props/text.js';
import './props/font.js';
import './props/mask.js';
import './props/column.js';
import './props/background.js';
import './props/filter.js';
import '@kuma-ui/sheet';

@@ -30,4 +30,4 @@

declare const normalizePseudo: (props: string) => string;
declare const isPseudoProps: (props: unknown) => props is "_left" | "_right" | "_marker" | "_paused" | "_default" | "_first" | "_grammar-error" | "_spelling-error" | "_read-only" | "_read-write" | "_after" | "_active" | "_disabled" | "_enabled" | "_cue" | "_cue-region" | "_part" | "_slotted" | "_view-transition-group" | "_view-transition-image-pair" | "_view-transition-new" | "_view-transition-old" | "_dir" | "_has" | "_host" | "_host-context" | "_is" | "_lang" | "_matches()" | "_not" | "_nth-child" | "_nth-last-child" | "_nth-last-of-type" | "_nth-of-type" | "_where" | "_backdrop" | "_before" | "_first-letter" | "_first-line" | "_placeholder" | "_selection" | "_target-text" | "_view-transition" | "_any-link" | "_blank" | "_checked" | "_current" | "_defined" | "_empty" | "_first-child" | "_first-of-type" | "_focus" | "_focus-visible" | "_focus-within" | "_fullscreen" | "_future" | "_hover" | "_in-range" | "_indeterminate" | "_invalid" | "_last-child" | "_last-of-type" | "_link" | "_local-link" | "_nth-col" | "_nth-last-col" | "_only-child" | "_only-of-type" | "_optional" | "_out-of-range" | "_past" | "_picture-in-picture" | "_placeholder-shown" | "_playing" | "_required" | "_root" | "_scope" | "_target" | "_target-within" | "_user-invalid" | "_user-valid" | "_valid" | "_visited";
declare const isPseudoProps: (props: unknown) => props is "_left" | "_right" | "_marker" | "_first" | "_paused" | "_default" | "_grammar-error" | "_spelling-error" | "_read-only" | "_read-write" | "_after" | "_active" | "_disabled" | "_enabled" | "_cue" | "_cue-region" | "_part" | "_slotted" | "_view-transition-group" | "_view-transition-image-pair" | "_view-transition-new" | "_view-transition-old" | "_dir" | "_has" | "_host" | "_host-context" | "_is" | "_lang" | "_matches()" | "_not" | "_nth-child" | "_nth-last-child" | "_nth-last-of-type" | "_nth-of-type" | "_where" | "_backdrop" | "_before" | "_first-letter" | "_first-line" | "_placeholder" | "_selection" | "_target-text" | "_view-transition" | "_any-link" | "_blank" | "_checked" | "_current" | "_defined" | "_empty" | "_first-child" | "_first-of-type" | "_focus" | "_focus-visible" | "_focus-within" | "_fullscreen" | "_future" | "_hover" | "_in-range" | "_indeterminate" | "_invalid" | "_last-child" | "_last-of-type" | "_link" | "_local-link" | "_nth-col" | "_nth-last-col" | "_only-child" | "_only-of-type" | "_optional" | "_out-of-range" | "_past" | "_picture-in-picture" | "_placeholder-shown" | "_playing" | "_required" | "_root" | "_scope" | "_target" | "_target-within" | "_user-invalid" | "_user-valid" | "_valid" | "_visited";
export { PseudoProps, isPseudoProps, normalizePseudo };

2

package.json
{
"name": "@kuma-ui/system",
"version": "0.0.0-dev-20231030083442",
"version": "0.0.0-dev-20231105161834",
"description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",

@@ -5,0 +5,0 @@ "repository": {

dist/animation.d.ts
dist/animation.js
dist/animation.mjs
dist/background.d.ts
dist/background.js
dist/background.mjs
dist/border.d.ts
dist/border.js
dist/border.mjs
dist/chunk-4AF4UTSU.mjs
dist/chunk-5Q6JGBPT.mjs
dist/chunk-AKS5YDR7.mjs
dist/chunk-BFA3UMOH.mjs
dist/chunk-BLP6IY27.mjs
dist/chunk-CWOUSWZE.mjs
dist/chunk-D4QRGUSB.mjs
dist/chunk-DEKXHUNB.mjs
dist/chunk-DLNRKMPH.mjs
dist/chunk-EOZSARBL.mjs
dist/chunk-FY54QYZF.mjs
dist/chunk-FZSZIAJ2.mjs
dist/chunk-KTPEKA4N.mjs
dist/chunk-KZT3N7T2.mjs
dist/chunk-QQRELLWG.mjs
dist/chunk-QZ4MQWPY.mjs
dist/chunk-S7H42BCA.mjs
dist/chunk-V5QAEJEH.mjs
dist/chunk-X4PPKHBU.mjs
dist/chunk-Y3TMKKEE.mjs
dist/chunk-ZBALIMYY.mjs
dist/color.d.ts
dist/color.js
dist/color.mjs
dist/column.d.ts
dist/column.js
dist/column.mjs
dist/compose.d.ts
dist/compose.js
dist/compose.mjs
dist/effect.d.ts
dist/effect.js
dist/effect.mjs
dist/filter.d.ts
dist/filter.js
dist/filter.mjs
dist/flex.d.ts
dist/flex.js
dist/flex.mjs
dist/font.d.ts
dist/font.js
dist/font.mjs
dist/grid.d.ts
dist/grid.js
dist/grid.mjs
dist/layout.d.ts
dist/layout.js
dist/layout.mjs
dist/list.d.ts
dist/list.js
dist/list.mjs
dist/mask.d.ts
dist/mask.js
dist/mask.mjs
dist/outline.d.ts
dist/outline.js
dist/outline.mjs
dist/position.d.ts
dist/position.js
dist/position.mjs
dist/shadow.d.ts
dist/shadow.js
dist/shadow.mjs
dist/space.d.ts
dist/space.js
dist/space.mjs
dist/text.d.ts
dist/text.js
dist/text.mjs
dist/typography.d.ts
dist/typography.js
dist/typography.mjs
dist/generator.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc