@janbox/storefront-ui 5.0.3 → 6.0.0

package/README.md

@@ -56,13 +56,20 @@ pnpm add react-router
 ### 1. Wrap app với ThemeProvider
 
 ```tsx
-import { ThemeProvider } from '@janbox/storefront-ui/theme';
+import { Preflight, ThemeProvider, defaultTheme } from '@janbox/storefront-ui/theme';
 
 function App() {
-  return <ThemeProvider>{/* Your app */}</ThemeProvider>;
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Preflight />
+      {/* Your app */}
+    </ThemeProvider>
+  );
 }
 ```
 
+`Preflight` inject reset/base styles mặc định. Nếu app đã dùng Tailwind Preflight, MUI CssBaseline, Normalize.css hoặc reset riêng, có thể bỏ qua component này để tránh xung đột global styles.
+
 ### 2. Import và sử dụng components
 
 ```tsx
@@ -254,7 +261,7 @@ Thư viện cung cấp 60+ components được tổ chức theo các nhóm. Xem
 import { Button, Input, Box } from '@janbox/storefront-ui';
 
 // Theme utilities
-import { ThemeProvider, getColorVar } from '@janbox/storefront-ui/theme';
+import { Preflight, ThemeProvider, defaultTheme, getColorVar } from '@janbox/storefront-ui/theme';
 
 // Hooks
 import { useWindowScreen, useControllableState } from '@janbox/storefront-ui/hooks';
@@ -327,17 +334,36 @@ Mọi component đều hỗ trợ `sx` prop để override styles:
 Wrap root app với `ThemeProvider` để inject design tokens:
 
 ```tsx
-import { ThemeProvider } from '@janbox/storefront-ui/theme';
+import { ThemeProvider, defaultTheme } from '@janbox/storefront-ui/theme';
 
 function App() {
   return (
-    <ThemeProvider>
+    <ThemeProvider theme={defaultTheme}>
       <YourApp />
     </ThemeProvider>
   );
 }
 ```
 
+### Preflight
+
+Render `Preflight` bên trong `ThemeProvider` nếu app muốn dùng reset/base styles mặc định của thư viện:
+
+```tsx
+import { Preflight, ThemeProvider, defaultTheme } from '@janbox/storefront-ui/theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Preflight />
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+Consumer có thể không render `Preflight` nếu đã có global reset riêng.
+
 ### Design Tokens
 
 Design tokens được expose qua CSS variables:

package/dist/lib/dialog/dialog/dialog.js

@@ -22,13 +22,15 @@ const Dialog = (_props) => {
               display: "grid",
               placeItems: "center",
               backgroundColor: "rgba(0, 0, 0, 0.4)",
-              backdropFilter: "blur(2px)"
+              backdropFilter: "blur(2px)",
+              paddingBlock: 16
             }
           },
           sx: {
             width: getDialogSizeInNumber(size),
             backgroundColor: getColorVar("surface.default"),
             maxWidth: `calc(100dvw - ${breakpoint.xs.padding * 2}px)`,
+            maxHeight: "100%",
             overflow: "hidden",
             display: "flex",
             flexDirection: "column",

package/dist/theme/index.d.ts

@@ -4,6 +4,7 @@ export * from './screens';
 export * from './palette';
 export * from './typography';
 export * from './provider';
+export * from './preflight';
 export * from './create-theme';
 export interface Theme {
     palette: Palette;

package/dist/theme/index.js

@@ -2,10 +2,12 @@ import { breakpoint, containerQuery, getSmallerScreens, mediaQuery, screens } fr
 import { getColorVar, groupedColors, paletteVars, parseColor } from "./palette.js";
 import { getSmallerTypographyVariants, getTypographyVar, typographyVars } from "./typography.js";
 import { ThemeProvider, usePortalContainer, useTheme } from "./provider.js";
+import { Preflight } from "./preflight.js";
 import { createTheme, defaultTheme } from "./create-theme.js";
 const FLOATING_Z_INDEX = 9999;
 export {
   FLOATING_Z_INDEX,
+  Preflight,
   ThemeProvider,
   breakpoint,
   containerQuery,

package/dist/theme/preflight.d.ts

@@ -0,0 +1 @@
+export declare const Preflight: () => import("react/jsx-runtime").JSX.Element;

package/dist/theme/preflight.js

@@ -0,0 +1,269 @@
+import { jsx } from "react/jsx-runtime";
+import { Global } from "@emotion/react";
+import { getColorVar } from "./palette.js";
+import { getTypographyVar } from "./typography.js";
+const Preflight = () => {
+  return /* @__PURE__ */ jsx(Global, { styles: preflightStyles });
+};
+const preflightStyles = {
+  // ─── Reset / Preflight ───────────────────────────────────────────────────
+  // 1. Prevent padding and border from affecting element width.
+  // 2. Allow adding a border to an element by just adding a border-width.
+  "*, ::before, ::after": {
+    boxSizing: "border-box",
+    // 1
+    borderWidth: 0,
+    // 2
+    borderStyle: "solid",
+    // 2
+    borderColor: getColorVar("border.default")
+  },
+  // 1. Use a consistent sensible line-height in all browsers.
+  // 2. Prevent adjustments of font size after orientation changes in iOS.
+  // 3. Use a more readable tab size.
+  // 4. Use the user's configured `sans` font-family by default.
+  // 5. Use the user's configured `sans` font-feature-settings by default.
+  // 6. Use the user's configured `sans` font-variation-settings by default.
+  // 7. Disable tap highlights on iOS
+  "html, :host": {
+    lineHeight: 1.5,
+    // 1
+    WebkitTextSizeAdjust: "100%",
+    // 2
+    MozTabSize: 4,
+    // 3
+    tabSize: 4,
+    // 3
+    fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    // 4
+    fontFeatureSettings: "normal",
+    // 5
+    fontVariationSettings: "normal",
+    // 6
+    WebkitTapHighlightColor: "transparent"
+    // 7
+  },
+  // 1. Remove the margin in all browsers.
+  // 2. Inherit line-height from `html` — overridden below by app-level typography.
+  body: {
+    margin: 0,
+    // 1
+    // ─── App-level styles ───────────────────────────────────────────
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "100dvh",
+    color: getColorVar("neutral.600"),
+    backgroundColor: getColorVar("background.default"),
+    fontSize: getTypographyVar("sm").fontSize,
+    lineHeight: getTypographyVar("sm").lineHeight
+  },
+  // 1. Add the correct height in Firefox.
+  // 2. Correct the inheritance of border color in Firefox.
+  // 3. Ensure horizontal rules are visible by default.
+  hr: {
+    height: 0,
+    // 1
+    color: "inherit",
+    // 2
+    borderTopWidth: "1px"
+    // 3
+  },
+  // Add the correct text decoration in Chrome, Edge, and Safari.
+  "abbr:where([title])": {
+    textDecoration: "underline dotted"
+  },
+  // Remove the default font size and weight for headings.
+  "h1, h2, h3, h4, h5, h6": {
+    fontSize: "inherit",
+    fontWeight: "inherit"
+  },
+  // Reset links to optimize for opt-in styling instead of opt-out.
+  a: {
+    color: "inherit",
+    textDecoration: "inherit"
+  },
+  // Add the correct font weight in Edge and Safari.
+  "b, strong": {
+    fontWeight: "bolder"
+  },
+  // 1. Use the user's configured `mono` font-family by default.
+  // 2. Use the user's configured `mono` font-feature-settings by default.
+  // 3. Use the user's configured `mono` font-variation-settings by default.
+  // 4. Correct the odd `em` font sizing in all browsers.
+  "code, kbd, samp, pre": {
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    // 1
+    fontFeatureSettings: "normal",
+    // 2
+    fontVariationSettings: "normal",
+    // 3
+    fontSize: "1em"
+    // 4
+  },
+  // Add the correct font size in all browsers.
+  small: {
+    fontSize: "80%"
+  },
+  // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+  "sub, sup": {
+    fontSize: "75%",
+    lineHeight: 0,
+    position: "relative",
+    verticalAlign: "baseline"
+  },
+  sub: {
+    bottom: "-0.25em"
+  },
+  sup: {
+    top: "-0.5em"
+  },
+  // 1. Remove text indentation from table contents in Chrome and Safari.
+  // 2. Correct table border color inheritance in all Chrome and Safari.
+  // 3. Remove gaps between table borders by default.
+  table: {
+    textIndent: 0,
+    // 1
+    borderColor: "inherit",
+    // 2
+    borderCollapse: "collapse"
+    // 3
+  },
+  // 1. Change the font styles in all browsers.
+  // 2. Remove the margin in Firefox and Safari.
+  // 3. Remove default padding in all browsers.
+  "button, input, optgroup, select, textarea": {
+    fontFamily: "inherit",
+    // 1
+    fontFeatureSettings: "inherit",
+    // 1
+    fontVariationSettings: "inherit",
+    // 1
+    fontSize: "100%",
+    // 1
+    fontWeight: "inherit",
+    // 1
+    lineHeight: "inherit",
+    // 1
+    letterSpacing: "inherit",
+    // 1
+    color: "inherit",
+    // 1
+    margin: 0,
+    // 2
+    padding: 0
+    // 3
+  },
+  // Remove the inheritance of text transform in Edge and Firefox.
+  "button, select": {
+    textTransform: "none"
+  },
+  // 1. Correct the inability to style clickable types in iOS and Safari.
+  // 2. Remove default button styles.
+  "button, input:where([type='button']), input:where([type='reset']), input:where([type='submit'])": {
+    WebkitAppearance: "button",
+    // 1
+    backgroundColor: "transparent",
+    // 2
+    backgroundImage: "none"
+    // 2
+  },
+  // Use the modern Firefox focus style for all focusable elements.
+  ":-moz-focusring": {
+    outline: "auto"
+  },
+  // Remove the additional `:invalid` styles in Firefox.
+  ":-moz-ui-invalid": {
+    boxShadow: "none"
+  },
+  // Add the correct vertical alignment in Chrome and Firefox.
+  progress: {
+    verticalAlign: "baseline"
+  },
+  // Correct the cursor style of increment and decrement buttons in Safari.
+  "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
+    height: "auto"
+  },
+  // 1. Correct the odd appearance in Chrome and Safari.
+  // 2. Correct the outline style in Safari.
+  "[type='search']": {
+    WebkitAppearance: "textfield",
+    // 1
+    outlineOffset: "-2px"
+    // 2
+  },
+  // Remove the inner padding in Chrome and Safari on macOS.
+  "::-webkit-search-decoration": {
+    WebkitAppearance: "none"
+  },
+  // 1. Correct the inability to style clickable types in iOS and Safari.
+  // 2. Change font properties to `inherit` in Safari.
+  "::-webkit-file-upload-button": {
+    WebkitAppearance: "button",
+    // 1
+    font: "inherit"
+    // 2
+  },
+  // Add the correct display in Chrome and Safari.
+  summary: {
+    display: "list-item"
+  },
+  // Removes the default spacing and border for appropriate elements.
+  "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": {
+    margin: 0
+  },
+  fieldset: {
+    margin: 0,
+    padding: 0
+  },
+  legend: {
+    padding: 0
+  },
+  "ol, ul, menu": {
+    listStyle: "none",
+    margin: 0,
+    padding: 0
+  },
+  // Reset default styling for dialogs.
+  dialog: {
+    padding: 0
+  },
+  // Prevent resizing textareas horizontally by default.
+  textarea: {
+    resize: "vertical"
+  },
+  // 1. Reset the default placeholder opacity in Firefox.
+  // 2. Set the default placeholder color to gray 400.
+  "input::placeholder, textarea::placeholder": {
+    opacity: 1,
+    // 1
+    color: getColorVar("neutral.400")
+  },
+  // Set the default cursor for buttons.
+  "button, [role='button']": {
+    cursor: "pointer"
+  },
+  // Make sure disabled buttons don't get the pointer cursor.
+  ":disabled": {
+    cursor: "default"
+  },
+  // 1. Make replaced elements `display: block` by default.
+  // 2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
+  "img, svg, video, canvas, audio, iframe, embed, object": {
+    display: "block",
+    // 1
+    verticalAlign: "middle"
+    // 2
+  },
+  // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
+  "img, video": {
+    maxWidth: "100%",
+    height: "auto"
+  },
+  // Make elements with the HTML hidden attribute stay hidden by default.
+  "[hidden]:where(:not([hidden='until-found']))": {
+    display: "none"
+  }
+};
+export {
+  Preflight
+};

package/dist/theme/provider.js

@@ -45,263 +45,6 @@ const createGlobalStyle = ({ palette, typography }) => {
     )
   );
   return {
-    // ─── Reset / Preflight ───────────────────────────────────────────────────
-    // 1. Prevent padding and border from affecting element width.
-    // 2. Allow adding a border to an element by just adding a border-width.
-    "*, ::before, ::after": {
-      boxSizing: "border-box",
-      // 1
-      borderWidth: 0,
-      // 2
-      borderStyle: "solid",
-      // 2
-      borderColor: getColorVar("border.default")
-    },
-    // 1. Use a consistent sensible line-height in all browsers.
-    // 2. Prevent adjustments of font size after orientation changes in iOS.
-    // 3. Use a more readable tab size.
-    // 4. Use the user's configured `sans` font-family by default.
-    // 5. Use the user's configured `sans` font-feature-settings by default.
-    // 6. Use the user's configured `sans` font-variation-settings by default.
-    // 7. Disable tap highlights on iOS
-    "html, :host": {
-      lineHeight: 1.5,
-      // 1
-      WebkitTextSizeAdjust: "100%",
-      // 2
-      MozTabSize: 4,
-      // 3
-      tabSize: 4,
-      // 3
-      fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-      // 4
-      fontFeatureSettings: "normal",
-      // 5
-      fontVariationSettings: "normal",
-      // 6
-      WebkitTapHighlightColor: "transparent"
-      // 7
-    },
-    // 1. Remove the margin in all browsers.
-    // 2. Inherit line-height from `html` — overridden below by app-level typography.
-    body: {
-      margin: 0,
-      // 1
-      // ─── App-level styles ───────────────────────────────────────────
-      display: "flex",
-      flexDirection: "column",
-      minHeight: "100dvh",
-      color: getColorVar("neutral.600"),
-      backgroundColor: getColorVar("background.default"),
-      fontSize: getTypographyVar("sm").fontSize,
-      lineHeight: getTypographyVar("sm").lineHeight
-    },
-    // 1. Add the correct height in Firefox.
-    // 2. Correct the inheritance of border color in Firefox.
-    // 3. Ensure horizontal rules are visible by default.
-    hr: {
-      height: 0,
-      // 1
-      color: "inherit",
-      // 2
-      borderTopWidth: "1px"
-      // 3
-    },
-    // Add the correct text decoration in Chrome, Edge, and Safari.
-    "abbr:where([title])": {
-      textDecoration: "underline dotted"
-    },
-    // Remove the default font size and weight for headings.
-    "h1, h2, h3, h4, h5, h6": {
-      fontSize: "inherit",
-      fontWeight: "inherit"
-    },
-    // Reset links to optimize for opt-in styling instead of opt-out.
-    a: {
-      color: "inherit",
-      textDecoration: "inherit"
-    },
-    // Add the correct font weight in Edge and Safari.
-    "b, strong": {
-      fontWeight: "bolder"
-    },
-    // 1. Use the user's configured `mono` font-family by default.
-    // 2. Use the user's configured `mono` font-feature-settings by default.
-    // 3. Use the user's configured `mono` font-variation-settings by default.
-    // 4. Correct the odd `em` font sizing in all browsers.
-    "code, kbd, samp, pre": {
-      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-      // 1
-      fontFeatureSettings: "normal",
-      // 2
-      fontVariationSettings: "normal",
-      // 3
-      fontSize: "1em"
-      // 4
-    },
-    // Add the correct font size in all browsers.
-    small: {
-      fontSize: "80%"
-    },
-    // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-    "sub, sup": {
-      fontSize: "75%",
-      lineHeight: 0,
-      position: "relative",
-      verticalAlign: "baseline"
-    },
-    sub: {
-      bottom: "-0.25em"
-    },
-    sup: {
-      top: "-0.5em"
-    },
-    // 1. Remove text indentation from table contents in Chrome and Safari.
-    // 2. Correct table border color inheritance in all Chrome and Safari.
-    // 3. Remove gaps between table borders by default.
-    table: {
-      textIndent: 0,
-      // 1
-      borderColor: "inherit",
-      // 2
-      borderCollapse: "collapse"
-      // 3
-    },
-    // 1. Change the font styles in all browsers.
-    // 2. Remove the margin in Firefox and Safari.
-    // 3. Remove default padding in all browsers.
-    "button, input, optgroup, select, textarea": {
-      fontFamily: "inherit",
-      // 1
-      fontFeatureSettings: "inherit",
-      // 1
-      fontVariationSettings: "inherit",
-      // 1
-      fontSize: "100%",
-      // 1
-      fontWeight: "inherit",
-      // 1
-      lineHeight: "inherit",
-      // 1
-      letterSpacing: "inherit",
-      // 1
-      color: "inherit",
-      // 1
-      margin: 0,
-      // 2
-      padding: 0
-      // 3
-    },
-    // Remove the inheritance of text transform in Edge and Firefox.
-    "button, select": {
-      textTransform: "none"
-    },
-    // 1. Correct the inability to style clickable types in iOS and Safari.
-    // 2. Remove default button styles.
-    "button, input:where([type='button']), input:where([type='reset']), input:where([type='submit'])": {
-      WebkitAppearance: "button",
-      // 1
-      backgroundColor: "transparent",
-      // 2
-      backgroundImage: "none"
-      // 2
-    },
-    // Use the modern Firefox focus style for all focusable elements.
-    ":-moz-focusring": {
-      outline: "auto"
-    },
-    // Remove the additional `:invalid` styles in Firefox.
-    ":-moz-ui-invalid": {
-      boxShadow: "none"
-    },
-    // Add the correct vertical alignment in Chrome and Firefox.
-    progress: {
-      verticalAlign: "baseline"
-    },
-    // Correct the cursor style of increment and decrement buttons in Safari.
-    "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
-      height: "auto"
-    },
-    // 1. Correct the odd appearance in Chrome and Safari.
-    // 2. Correct the outline style in Safari.
-    "[type='search']": {
-      WebkitAppearance: "textfield",
-      // 1
-      outlineOffset: "-2px"
-      // 2
-    },
-    // Remove the inner padding in Chrome and Safari on macOS.
-    "::-webkit-search-decoration": {
-      WebkitAppearance: "none"
-    },
-    // 1. Correct the inability to style clickable types in iOS and Safari.
-    // 2. Change font properties to `inherit` in Safari.
-    "::-webkit-file-upload-button": {
-      WebkitAppearance: "button",
-      // 1
-      font: "inherit"
-      // 2
-    },
-    // Add the correct display in Chrome and Safari.
-    summary: {
-      display: "list-item"
-    },
-    // Removes the default spacing and border for appropriate elements.
-    "blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre": {
-      margin: 0
-    },
-    fieldset: {
-      margin: 0,
-      padding: 0
-    },
-    legend: {
-      padding: 0
-    },
-    "ol, ul, menu": {
-      listStyle: "none",
-      margin: 0,
-      padding: 0
-    },
-    // Reset default styling for dialogs.
-    dialog: {
-      padding: 0
-    },
-    // Prevent resizing textareas horizontally by default.
-    textarea: {
-      resize: "vertical"
-    },
-    // 1. Reset the default placeholder opacity in Firefox.
-    // 2. Set the default placeholder color to gray 400.
-    "input::placeholder, textarea::placeholder": {
-      opacity: 1,
-      // 1
-      color: getColorVar("neutral.400")
-    },
-    // Set the default cursor for buttons.
-    "button, [role='button']": {
-      cursor: "pointer"
-    },
-    // Make sure disabled buttons don't get the pointer cursor.
-    ":disabled": {
-      cursor: "default"
-    },
-    // 1. Make replaced elements `display: block` by default.
-    // 2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
-    "img, svg, video, canvas, audio, iframe, embed, object": {
-      display: "block",
-      // 1
-      verticalAlign: "middle"
-      // 2
-    },
-    // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
-    "img, video": {
-      maxWidth: "100%",
-      height: "auto"
-    },
-    // Make elements with the HTML hidden attribute stay hidden by default.
-    "[hidden]:where(:not([hidden='until-found']))": {
-      display: "none"
-    },
     // ─── CSS Variables ───────────────────────────────────────────────────────
     ":root": {
       ...colorVars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "5.0.3",
+  "version": "6.0.0",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [