@seed-design/react 0.0.13 → 0.0.15

package/lib/components/index.cjs

@@ -25,6 +25,7 @@ const ControlChip = require('./ControlChip/ControlChip.cjs');
 const Count = require('./Count/Count.cjs');
 const Dialog = require('./Dialog/Dialog.cjs');
 const Dialog_namespace = require('./Dialog/Dialog.namespace.cjs');
+const Divider = require('./Divider/Divider.cjs');
 const ExtendedActionSheet = require('./ExtendedActionSheet/ExtendedActionSheet.cjs');
 const ExtendedActionSheet_namespace = require('./ExtendedActionSheet/ExtendedActionSheet.namespace.cjs');
 const ExtendedFab = require('./ExtendedFab/ExtendedFab.cjs');
@@ -144,6 +145,7 @@ exports.DialogRoot = Dialog.DialogRoot;
 exports.DialogTitle = Dialog.DialogTitle;
 exports.DialogTrigger = Dialog.DialogTrigger;
 exports.Dialog = Dialog_namespace;
+exports.Divider = Divider.Divider;
 exports.ExtendedActionSheetBackdrop = ExtendedActionSheet.ExtendedActionSheetBackdrop;
 exports.ExtendedActionSheetCloseButton = ExtendedActionSheet.ExtendedActionSheetCloseButton;
 exports.ExtendedActionSheetContent = ExtendedActionSheet.ExtendedActionSheetContent;
@@ -163,7 +165,6 @@ exports.Flex = Flex.Flex;
 exports.HelpBubbleAnchor = HelpBubble.HelpBubbleAnchor;
 exports.HelpBubbleArrow = HelpBubble.HelpBubbleArrow;
 exports.HelpBubbleArrowTip = HelpBubble.HelpBubbleArrowTip;
-exports.HelpBubbleBackdrop = HelpBubble.HelpBubbleBackdrop;
 exports.HelpBubbleCloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.HelpBubbleContent = HelpBubble.HelpBubbleContent;
 exports.HelpBubbleDescription = HelpBubble.HelpBubbleDescription;
@@ -241,7 +242,9 @@ Object.defineProperty(exports, "useSnackbarContext", {
 });
 exports.useSnackbarAdapter = useSnackbarAdapter.useSnackbarAdapter;
 exports.Snackbar = Snackbar_namespace;
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;
 exports.SwitchControl = Switch.SwitchControl;
 exports.SwitchHiddenInput = Switch.SwitchHiddenInput;
 exports.SwitchLabel = Switch.SwitchLabel;

package/lib/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './ConsistentWidth';
 export * from './ControlChip';
 export * from './Count';
 export * from './Dialog';
+export * from './Divider';
 export * from './ExtendedActionSheet';
 export * from './ExtendedFab';
 export * from './Fab';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -28,13 +28,14 @@ export { Count } from './Count/Count.js';
 export { DialogAction, DialogBackdrop, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger } from './Dialog/Dialog.js';
 import * as Dialog_namespace from './Dialog/Dialog.namespace.js';
 export { Dialog_namespace as Dialog };
+export { Divider } from './Divider/Divider.js';
 export { ExtendedActionSheetBackdrop, ExtendedActionSheetCloseButton, ExtendedActionSheetContent, ExtendedActionSheetFooter, ExtendedActionSheetGroup, ExtendedActionSheetHeader, ExtendedActionSheetItem, ExtendedActionSheetList, ExtendedActionSheetPositioner, ExtendedActionSheetRoot, ExtendedActionSheetTitle, ExtendedActionSheetTrigger } from './ExtendedActionSheet/ExtendedActionSheet.js';
 import * as ExtendedActionSheet_namespace from './ExtendedActionSheet/ExtendedActionSheet.namespace.js';
 export { ExtendedActionSheet_namespace as ExtendedActionSheet };
 export { ExtendedFab } from './ExtendedFab/ExtendedFab.js';
 export { Fab } from './Fab/Fab.js';
 export { Flex } from './Flex/Flex.js';
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleBackdrop, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble/HelpBubble.js';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble/HelpBubble.js';
 import * as HelpBubble_namespace from './HelpBubble/HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };
 export { Icon, PrefixIcon, SuffixIcon } from './Icon/Icon.js';
@@ -73,7 +74,7 @@ export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './Snackbar/Snackbar.namespace.js';
 export { Snackbar_namespace as Snackbar };
-export { Stack } from './Stack/Stack.js';
+export { HStack, Stack, VStack } from './Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './Switch/Switch.js';
 import * as Switch_namespace from './Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };

package/lib/index.cjs

@@ -25,6 +25,7 @@ const ControlChip = require('./components/ControlChip/ControlChip.cjs');
 const Count = require('./components/Count/Count.cjs');
 const Dialog = require('./components/Dialog/Dialog.cjs');
 const Dialog_namespace = require('./components/Dialog/Dialog.namespace.cjs');
+const Divider = require('./components/Divider/Divider.cjs');
 const ExtendedActionSheet = require('./components/ExtendedActionSheet/ExtendedActionSheet.cjs');
 const ExtendedActionSheet_namespace = require('./components/ExtendedActionSheet/ExtendedActionSheet.namespace.cjs');
 const ExtendedFab = require('./components/ExtendedFab/ExtendedFab.cjs');
@@ -144,6 +145,7 @@ exports.DialogRoot = Dialog.DialogRoot;
 exports.DialogTitle = Dialog.DialogTitle;
 exports.DialogTrigger = Dialog.DialogTrigger;
 exports.Dialog = Dialog_namespace;
+exports.Divider = Divider.Divider;
 exports.ExtendedActionSheetBackdrop = ExtendedActionSheet.ExtendedActionSheetBackdrop;
 exports.ExtendedActionSheetCloseButton = ExtendedActionSheet.ExtendedActionSheetCloseButton;
 exports.ExtendedActionSheetContent = ExtendedActionSheet.ExtendedActionSheetContent;
@@ -163,7 +165,6 @@ exports.Flex = Flex.Flex;
 exports.HelpBubbleAnchor = HelpBubble.HelpBubbleAnchor;
 exports.HelpBubbleArrow = HelpBubble.HelpBubbleArrow;
 exports.HelpBubbleArrowTip = HelpBubble.HelpBubbleArrowTip;
-exports.HelpBubbleBackdrop = HelpBubble.HelpBubbleBackdrop;
 exports.HelpBubbleCloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.HelpBubbleContent = HelpBubble.HelpBubbleContent;
 exports.HelpBubbleDescription = HelpBubble.HelpBubbleDescription;
@@ -241,7 +242,9 @@ Object.defineProperty(exports, "useSnackbarContext", {
 });
 exports.useSnackbarAdapter = useSnackbarAdapter.useSnackbarAdapter;
 exports.Snackbar = Snackbar_namespace;
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;
 exports.SwitchControl = Switch.SwitchControl;
 exports.SwitchHiddenInput = Switch.SwitchHiddenInput;
 exports.SwitchLabel = Switch.SwitchLabel;

package/lib/index.js

@@ -28,13 +28,14 @@ export { Count } from './components/Count/Count.js';
 export { DialogAction, DialogBackdrop, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger } from './components/Dialog/Dialog.js';
 import * as Dialog_namespace from './components/Dialog/Dialog.namespace.js';
 export { Dialog_namespace as Dialog };
+export { Divider } from './components/Divider/Divider.js';
 export { ExtendedActionSheetBackdrop, ExtendedActionSheetCloseButton, ExtendedActionSheetContent, ExtendedActionSheetFooter, ExtendedActionSheetGroup, ExtendedActionSheetHeader, ExtendedActionSheetItem, ExtendedActionSheetList, ExtendedActionSheetPositioner, ExtendedActionSheetRoot, ExtendedActionSheetTitle, ExtendedActionSheetTrigger } from './components/ExtendedActionSheet/ExtendedActionSheet.js';
 import * as ExtendedActionSheet_namespace from './components/ExtendedActionSheet/ExtendedActionSheet.namespace.js';
 export { ExtendedActionSheet_namespace as ExtendedActionSheet };
 export { ExtendedFab } from './components/ExtendedFab/ExtendedFab.js';
 export { Fab } from './components/Fab/Fab.js';
 export { Flex } from './components/Flex/Flex.js';
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleBackdrop, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './components/HelpBubble/HelpBubble.js';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './components/HelpBubble/HelpBubble.js';
 import * as HelpBubble_namespace from './components/HelpBubble/HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };
 export { Icon, PrefixIcon, SuffixIcon } from './components/Icon/Icon.js';
@@ -73,7 +74,7 @@ export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './components/Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './components/Snackbar/Snackbar.namespace.js';
 export { Snackbar_namespace as Snackbar };
-export { Stack } from './components/Stack/Stack.js';
+export { HStack, Stack, VStack } from './components/Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './components/Switch/Switch.js';
 import * as Switch_namespace from './components/Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };

package/lib/utils/styled.cjs

@@ -11,7 +11,7 @@ function handleColor(color) {
     return void 0;
   }
   const [type, value] = color.split(".");
-  return vars.vars.$color[type][value] ?? void 0;
+  return vars.vars.$color[type]?.[value] ?? color;
 }
 function handleDimension(dimension) {
   if (dimension == null) {
@@ -36,52 +36,94 @@ function handleDisplay(display) {
   if (!display) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (display === "inlineFlex" || display === "inlineBlock") {
+      console.warn(
+        `[SEED Design System] ${display} is deprecated. Use inline-flex or inline-block instead.`
+      );
+    }
+  }
   return {
-    block: "block",
     flex: "flex",
     inlineFlex: "inline-flex",
-    inline: "inline",
+    // @deprecated Use `inline-flex` instead.
     inlineBlock: "inline-block",
+    // @deprecated Use `inline-block` instead.
     none: "none"
-  }[display];
+  }[display] ?? display;
 }
 function handleFlexDirection(flexDirection) {
   if (!flexDirection) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (flexDirection === "rowReverse" || flexDirection === "columnReverse") {
+      console.warn(
+        `[SEED Design System] ${flexDirection} is deprecated. Use row-reverse or column-reverse instead.`
+      );
+    }
+  }
   return {
     row: "row",
     column: "column",
     rowReverse: "row-reverse",
+    // @deprecated Use `row-reverse` instead.
     columnReverse: "column-reverse"
-  }[flexDirection];
+    // @deprecated Use `column-reverse` instead.
+  }[flexDirection] ?? flexDirection;
 }
 function handleJustifyContent(justifyContent) {
   if (!justifyContent) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (justifyContent === "flexStart" || justifyContent === "flexEnd") {
+      console.warn(
+        `[SEED Design System] ${justifyContent} is deprecated. Use flex-start or flex-end instead.`
+      );
+    }
+    if (justifyContent === "spaceBetween" || justifyContent === "spaceAround") {
+      console.warn(
+        `[SEED Design System] ${justifyContent} is deprecated. Use space-between or space-around instead.`
+      );
+    }
+  }
   return {
     flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
     flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
     center: "center",
     spaceBetween: "space-between",
+    // @deprecated Use `space-between` instead.
     spaceAround: "space-around"
-  }[justifyContent];
+    // @deprecated Use `space-around` instead.
+  }[justifyContent] ?? justifyContent;
 }
 function handleAlignItems(alignItems) {
   if (!alignItems) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (alignItems === "flexStart" || alignItems === "flexEnd") {
+      console.warn(
+        `[SEED Design System] ${alignItems} is deprecated. Use flex-start or flex-end instead.`
+      );
+    }
+  }
   return {
     flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
     flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
     center: "center",
     stretch: "stretch"
-  }[alignItems];
+  }[alignItems] ?? alignItems;
 }
 function useStyleProps(props) {
   const {
     background,
+    bg,
     color,
     borderColor,
     borderWidth,
@@ -107,6 +149,13 @@ function useStyleProps(props) {
     paddingRight,
     paddingBottom,
     paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
     bottom,
     left,
     right,
@@ -129,7 +178,7 @@ function useStyleProps(props) {
   } = props;
   return {
     style: {
-      "--seed-box-background": handleColor(background),
+      "--seed-box-background": handleColor(background ?? bg),
       "--seed-box-color": handleColor(color),
       "--seed-box-border-color": handleColor(borderColor),
       "--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
@@ -148,13 +197,13 @@ function useStyleProps(props) {
       "--seed-box-height": handleDimension(height),
       "--seed-box-min-height": handleDimension(minHeight),
       "--seed-box-max-height": handleDimension(maxHeight),
-      "--seed-box-padding": handleDimension(padding),
-      "--seed-box-padding-x": handleDimension(paddingX),
-      "--seed-box-padding-y": handleDimension(paddingY),
-      "--seed-box-padding-top": handleDimension(paddingTop),
-      "--seed-box-padding-right": handleDimension(paddingRight),
-      "--seed-box-padding-bottom": handleDimension(paddingBottom),
-      "--seed-box-padding-left": handleDimension(paddingLeft),
+      "--seed-box-padding": handleDimension(padding ?? p),
+      "--seed-box-padding-x": handleDimension(paddingX ?? px),
+      "--seed-box-padding-y": handleDimension(paddingY ?? py),
+      "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
+      "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
+      "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
+      "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
       "--seed-box-top": top,
       "--seed-box-left": left,
       "--seed-box-right": right,

package/lib/utils/styled.d.ts

@@ -3,49 +3,81 @@ import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react
 export declare function handleColor(color: string | undefined): any;
 export declare function handleDimension(dimension: string | 0 | undefined): any;
 export interface StyleProps {
-    background?: ScopedColorBg | ScopedColorPalette;
-    color?: ScopedColorFg | ScopedColorPalette;
-    borderColor?: ScopedColorStroke | ScopedColorPalette;
-    borderWidth?: 0 | 1 | (number & {});
-    borderTopWidth?: 0 | 1 | (number & {});
-    borderRightWidth?: 0 | 1 | (number & {});
-    borderBottomWidth?: 0 | 1 | (number & {});
-    borderLeftWidth?: 0 | 1 | (number & {});
-    borderRadius?: Radius | 0;
-    borderTopLeftRadius?: Radius | 0;
-    borderTopRightRadius?: Radius | 0;
-    borderBottomRightRadius?: Radius | 0;
-    borderBottomLeftRadius?: Radius | 0;
+    background?: ScopedColorBg | ScopedColorPalette | (string & {});
+    /**
+     * Shorthand for `background`.
+     */
+    bg?: ScopedColorBg | ScopedColorPalette | (string & {});
+    color?: ScopedColorFg | ScopedColorPalette | (string & {});
+    borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
+    borderWidth?: 0 | 1 | (string & {});
+    borderTopWidth?: 0 | 1 | (string & {});
+    borderRightWidth?: 0 | 1 | (string & {});
+    borderBottomWidth?: 0 | 1 | (string & {});
+    borderLeftWidth?: 0 | 1 | (string & {});
+    borderRadius?: Radius | 0 | (string & {});
+    borderTopLeftRadius?: Radius | 0 | (string & {});
+    borderTopRightRadius?: Radius | 0 | (string & {});
+    borderBottomRightRadius?: Radius | 0 | (string & {});
+    borderBottomLeftRadius?: Radius | 0 | (string & {});
     width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     height?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     minHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
     maxHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
-    top?: 0;
-    left?: 0;
-    right?: 0;
-    bottom?: 0;
-    padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
-    display?: "block" | "flex" | "inlineFlex" | "inline" | "inlineBlock" | "none";
+    top?: 0 | (string & {});
+    left?: 0 | (string & {});
+    right?: 0 | (string & {});
+    bottom?: 0 | (string & {});
+    padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `padding`.
+     */
+    p?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingX`.
+     */
+    px?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingY`.
+     */
+    py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingTop`.
+     */
+    pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingRight`.
+     */
+    pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingBottom`.
+     */
+    pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingLeft`.
+     */
+    pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    display?: "block" | "flex" | "inline-flex" | "inline" | "inline-block" | "none" | "inlineFlex" | "inlineBlock";
     position?: "relative" | "absolute" | "fixed" | "sticky";
     overflowX?: "visible" | "hidden" | "scroll" | "auto";
     overflowY?: "visible" | "hidden" | "scroll" | "auto";
     flexGrow?: 0 | 1 | (number & {});
     flexShrink?: 0 | (number & {});
-    flexDirection?: "row" | "column" | "rowReverse" | "columnReverse";
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse";
     flexWrap?: "wrap" | "nowrap";
-    justifyContent?: "flexStart" | "flexEnd" | "center" | "spaceBetween" | "spaceAround";
-    alignItems?: "flexStart" | "flexEnd" | "center" | "stretch";
-    alignContent?: "flexStart" | "flexEnd" | "center" | "stretch";
-    alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch";
-    gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0;
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "flexStart" | "flexEnd";
+    gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 }
 interface UseStyleProps extends StyleProps {
     style?: React.CSSProperties;

package/lib/utils/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}

package/lib/utils/styled.js

@@ -7,7 +7,7 @@ function handleColor(color) {
     return void 0;
   }
   const [type, value] = color.split(".");
-  return vars.$color[type][value] ?? void 0;
+  return vars.$color[type]?.[value] ?? color;
 }
 function handleDimension(dimension) {
   if (dimension == null) {
@@ -32,52 +32,94 @@ function handleDisplay(display) {
   if (!display) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (display === "inlineFlex" || display === "inlineBlock") {
+      console.warn(
+        `[SEED Design System] ${display} is deprecated. Use inline-flex or inline-block instead.`
+      );
+    }
+  }
   return {
-    block: "block",
     flex: "flex",
     inlineFlex: "inline-flex",
-    inline: "inline",
+    // @deprecated Use `inline-flex` instead.
     inlineBlock: "inline-block",
+    // @deprecated Use `inline-block` instead.
     none: "none"
-  }[display];
+  }[display] ?? display;
 }
 function handleFlexDirection(flexDirection) {
   if (!flexDirection) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (flexDirection === "rowReverse" || flexDirection === "columnReverse") {
+      console.warn(
+        `[SEED Design System] ${flexDirection} is deprecated. Use row-reverse or column-reverse instead.`
+      );
+    }
+  }
   return {
     row: "row",
     column: "column",
     rowReverse: "row-reverse",
+    // @deprecated Use `row-reverse` instead.
     columnReverse: "column-reverse"
-  }[flexDirection];
+    // @deprecated Use `column-reverse` instead.
+  }[flexDirection] ?? flexDirection;
 }
 function handleJustifyContent(justifyContent) {
   if (!justifyContent) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (justifyContent === "flexStart" || justifyContent === "flexEnd") {
+      console.warn(
+        `[SEED Design System] ${justifyContent} is deprecated. Use flex-start or flex-end instead.`
+      );
+    }
+    if (justifyContent === "spaceBetween" || justifyContent === "spaceAround") {
+      console.warn(
+        `[SEED Design System] ${justifyContent} is deprecated. Use space-between or space-around instead.`
+      );
+    }
+  }
   return {
     flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
     flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
     center: "center",
     spaceBetween: "space-between",
+    // @deprecated Use `space-between` instead.
     spaceAround: "space-around"
-  }[justifyContent];
+    // @deprecated Use `space-around` instead.
+  }[justifyContent] ?? justifyContent;
 }
 function handleAlignItems(alignItems) {
   if (!alignItems) {
     return void 0;
   }
+  if (process.env.NODE_ENV !== "production") {
+    if (alignItems === "flexStart" || alignItems === "flexEnd") {
+      console.warn(
+        `[SEED Design System] ${alignItems} is deprecated. Use flex-start or flex-end instead.`
+      );
+    }
+  }
   return {
     flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
     flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
     center: "center",
     stretch: "stretch"
-  }[alignItems];
+  }[alignItems] ?? alignItems;
 }
 function useStyleProps(props) {
   const {
     background,
+    bg,
     color,
     borderColor,
     borderWidth,
@@ -103,6 +145,13 @@ function useStyleProps(props) {
     paddingRight,
     paddingBottom,
     paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
     bottom,
     left,
     right,
@@ -125,7 +174,7 @@ function useStyleProps(props) {
   } = props;
   return {
     style: {
-      "--seed-box-background": handleColor(background),
+      "--seed-box-background": handleColor(background ?? bg),
       "--seed-box-color": handleColor(color),
       "--seed-box-border-color": handleColor(borderColor),
       "--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
@@ -144,13 +193,13 @@ function useStyleProps(props) {
       "--seed-box-height": handleDimension(height),
       "--seed-box-min-height": handleDimension(minHeight),
       "--seed-box-max-height": handleDimension(maxHeight),
-      "--seed-box-padding": handleDimension(padding),
-      "--seed-box-padding-x": handleDimension(paddingX),
-      "--seed-box-padding-y": handleDimension(paddingY),
-      "--seed-box-padding-top": handleDimension(paddingTop),
-      "--seed-box-padding-right": handleDimension(paddingRight),
-      "--seed-box-padding-bottom": handleDimension(paddingBottom),
-      "--seed-box-padding-left": handleDimension(paddingLeft),
+      "--seed-box-padding": handleDimension(padding ?? p),
+      "--seed-box-padding-x": handleDimension(paddingX ?? px),
+      "--seed-box-padding-y": handleDimension(paddingY ?? py),
+      "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
+      "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
+      "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
+      "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
       "--seed-box-top": top,
       "--seed-box-left": left,
       "--seed-box-right": right,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -30,7 +30,8 @@
   ],
   "scripts": {
     "clean": "rm -rf lib",
-    "build": "vite build"
+    "build": "vite build",
+    "lint:publish": "bun publint"
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.1",
@@ -41,7 +42,7 @@
     "@seed-design/react-avatar": "0.0.1",
     "@seed-design/react-checkbox": "0.0.1",
     "@seed-design/react-dialog": "0.0.2",
-    "@seed-design/react-popover": "0.0.2",
+    "@seed-design/react-popover": "0.0.4",
     "@seed-design/react-primitive": "0.0.1",
     "@seed-design/react-progress": "0.0.1",
     "@seed-design/react-pull-to-refresh": "0.0.2",
@@ -55,12 +56,13 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.0.13",
+    "@seed-design/css": "0.0.15",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.0.13",
+    "@seed-design/css": "0.0.15",
+    "@seed-design/qvism-rollup-plugin": "0.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "globby": "^14.1.0",
     "vite": "^6.2.3",