@mindlogic-ai/logician-ui 4.0.0-alpha.32 → 4.0.0-alpha.34

package/dist/components/Modal/Modal.js

@@ -6,7 +6,7 @@ var React = require('react');
 var react = require('@chakra-ui/react');
 var ModalContext = require('./ModalContext.js');
 
-const Modal = ({ children, open, onOpenChange, portalProps, fullScreenOnMobile = true, ...rest }) => {
+const Modal = ({ children, open, onOpenChange, portalProps, fullScreenOnMobile = false, ...rest }) => {
     const ctx = React.useMemo(() => ({ fullScreenOnMobile }), [fullScreenOnMobile]);
     return (jsxRuntime.jsx(react.Dialog.Root, { open: open, onOpenChange: onOpenChange, placement: "center", closeOnInteractOutside: true, ...rest, children: jsxRuntime.jsxs(react.Portal, { ...portalProps, children: [jsxRuntime.jsx(react.Dialog.Backdrop, { _open: { animationDuration: 'motion.base' }, _closed: { animationDuration: 'fast' } }), jsxRuntime.jsx(ModalContext.ModalContext.Provider, { value: ctx, children: children })] }) }));
 };

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["useMemo","_jsx","Dialog","_jsxs","Portal","ModalContext"],"mappings":";;;;;;;;MAMa,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,kBAAkB,GAAG,IAAI,EACzB,GAAG,IAAI,EACI,KAAI;AACf,IAAA,MAAM,GAAG,GAAGA,aAAO,CAAC,OAAO,EAAE,kBAAkB,EAAE,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzE,IAAA,QACEC,cAAA,CAACC,YAAM,CAAC,IAAI,EAAA,EACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAERC,eAAA,CAACC,YAAM,EAAA,EAAA,GAAK,WAAW,EAAA,QAAA,EAAA,CAIrBH,cAAA,CAACC,YAAM,CAAC,QAAQ,EAAA,EACd,KAAK,EAAE,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAC3C,OAAO,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,EAAA,CACtC,EACFD,cAAA,CAACI,yBAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAyB,CAAA,EAAA,CAC9D,EAAA,CACG;AAElB;;;;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["useMemo","_jsx","Dialog","_jsxs","Portal","ModalContext"],"mappings":";;;;;;;;MAMa,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,kBAAkB,GAAG,KAAK,EAC1B,GAAG,IAAI,EACI,KAAI;AACf,IAAA,MAAM,GAAG,GAAGA,aAAO,CAAC,OAAO,EAAE,kBAAkB,EAAE,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzE,IAAA,QACEC,cAAA,CAACC,YAAM,CAAC,IAAI,EAAA,EACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAERC,eAAA,CAACC,YAAM,EAAA,EAAA,GAAK,WAAW,EAAA,QAAA,EAAA,CAIrBH,cAAA,CAACC,YAAM,CAAC,QAAQ,EAAA,EACd,KAAK,EAAE,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAC3C,OAAO,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,EAAA,CACtC,EACFD,cAAA,CAACI,yBAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAyB,CAAA,EAAA,CAC9D,EAAA,CACG;AAElB;;;;"}

package/dist/components/Modal/Modal.mjs

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { Dialog, Portal } from '@chakra-ui/react';
 import { ModalContext } from './ModalContext.mjs';
 
-const Modal = ({ children, open, onOpenChange, portalProps, fullScreenOnMobile = true, ...rest }) => {
+const Modal = ({ children, open, onOpenChange, portalProps, fullScreenOnMobile = false, ...rest }) => {
     const ctx = useMemo(() => ({ fullScreenOnMobile }), [fullScreenOnMobile]);
     return (jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, placement: "center", closeOnInteractOutside: true, ...rest, children: jsxs(Portal, { ...portalProps, children: [jsx(Dialog.Backdrop, { _open: { animationDuration: 'motion.base' }, _closed: { animationDuration: 'fast' } }), jsx(ModalContext.Provider, { value: ctx, children: children })] }) }));
 };

package/dist/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;MAMa,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,kBAAkB,GAAG,IAAI,EACzB,GAAG,IAAI,EACI,KAAI;AACf,IAAA,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,EAAE,kBAAkB,EAAE,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzE,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAERC,IAAA,CAAC,MAAM,EAAA,EAAA,GAAK,WAAW,EAAA,QAAA,EAAA,CAIrBD,GAAA,CAAC,MAAM,CAAC,QAAQ,EAAA,EACd,KAAK,EAAE,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAC3C,OAAO,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,EAAA,CACtC,EACFA,GAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAyB,CAAA,EAAA,CAC9D,EAAA,CACG;AAElB;;;;"}
+{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;MAMa,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,kBAAkB,GAAG,KAAK,EAC1B,GAAG,IAAI,EACI,KAAI;AACf,IAAA,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,EAAE,kBAAkB,EAAE,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzE,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,QAAQ,EAClB,sBAAsB,EAAA,IAAA,EAAA,GAClB,IAAI,EAAA,QAAA,EAERC,IAAA,CAAC,MAAM,EAAA,EAAA,GAAK,WAAW,EAAA,QAAA,EAAA,CAIrBD,GAAA,CAAC,MAAM,CAAC,QAAQ,EAAA,EACd,KAAK,EAAE,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAC3C,OAAO,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,EAAA,CACtC,EACFA,GAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAyB,CAAA,EAAA,CAC9D,EAAA,CACG;AAElB;;;;"}

package/dist/components/Modal/Modal.types.d.ts

@@ -2,8 +2,16 @@ import { Dialog, PortalProps } from '@chakra-ui/react';
 export type ModalProps = Dialog.RootProps & {
     portalProps?: PortalProps;
     /**
-     * When true, the modal becomes fullscreen on mobile viewports.
-     * @default true
+     * When true, the modal becomes fullscreen on mobile viewports
+     * (100vw x 100dvh, no border-radius). When false it keeps the dialog
+     * shape and applies a horizontal margin instead.
+     *
+     * Defaults to false: a full-screen takeover suits long or immersive
+     * content (a file picker, a course switcher), not the confirm dialogs
+     * and short forms that make up most modals. Opt in where the takeover
+     * is the point.
+     *
+     * @default false
      */
     fullScreenOnMobile?: boolean;
 };

package/dist/components/Modal/Modal.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,GAAG;IAG1C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,GAAG;IAG1C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC"}

package/dist/components/Modal/ModalContext.js

@@ -4,7 +4,7 @@
 var React = require('react');
 
 const ModalContext = React.createContext({
-    fullScreenOnMobile: true,
+    fullScreenOnMobile: false,
 });
 const useModalContext = () => React.useContext(ModalContext);
 

package/dist/components/Modal/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.js","sources":["../../../src/components/Modal/ModalContext.ts"],"sourcesContent":[null],"names":["createContext","useContext"],"mappings":";;;;;AAQO,MAAM,YAAY,GAAGA,mBAAa,CAAoB;AAC3D,IAAA,kBAAkB,EAAE,IAAI;AACzB,CAAA;AAEM,MAAM,eAAe,GAAG,MAAMC,gBAAU,CAAC,YAAY;;;;;"}
+{"version":3,"file":"ModalContext.js","sources":["../../../src/components/Modal/ModalContext.ts"],"sourcesContent":[null],"names":["createContext","useContext"],"mappings":";;;;;AAQO,MAAM,YAAY,GAAGA,mBAAa,CAAoB;AAC3D,IAAA,kBAAkB,EAAE,KAAK;AAC1B,CAAA;AAEM,MAAM,eAAe,GAAG,MAAMC,gBAAU,CAAC,YAAY;;;;;"}

package/dist/components/Modal/ModalContext.mjs

@@ -2,7 +2,7 @@
 import { createContext, useContext } from 'react';
 
 const ModalContext = createContext({
-    fullScreenOnMobile: true,
+    fullScreenOnMobile: false,
 });
 const useModalContext = () => useContext(ModalContext);
 

package/dist/components/Modal/ModalContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.mjs","sources":["../../../src/components/Modal/ModalContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQO,MAAM,YAAY,GAAG,aAAa,CAAoB;AAC3D,IAAA,kBAAkB,EAAE,IAAI;AACzB,CAAA;AAEM,MAAM,eAAe,GAAG,MAAM,UAAU,CAAC,YAAY;;;;"}
+{"version":3,"file":"ModalContext.mjs","sources":["../../../src/components/Modal/ModalContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQO,MAAM,YAAY,GAAG,aAAa,CAAoB;AAC3D,IAAA,kBAAkB,EAAE,KAAK;AAC1B,CAAA;AAEM,MAAM,eAAe,GAAG,MAAM,UAAU,CAAC,YAAY;;;;"}

package/dist/styles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pure style objects, importable without the component barrel.
+ *
+ * The root entry (`@mindlogic-ai/logician-ui`) pulls in every component, and
+ * with them side-effect CSS imports such as `katex/dist/katex.min.css`. A
+ * bundler handles that; a plain Node loader does not, so a consumer's unit test
+ * that imports a style constant from the root fails to load the module at all
+ * (`Unknown file extension ".css"`). Importing a style object should not cost
+ * the whole design system.
+ *
+ * Everything re-exported here must stay free of runtime imports — types only —
+ * so this entry brings in nothing but the objects themselves.
+ *
+ * ```ts
+ * import { noZoomOnFocus } from '@mindlogic-ai/logician-ui/styles';
+ * ```
+ *
+ * These names are also on the root entry, so existing imports keep working.
+ */
+export { noZoomOnFocus } from './theme/formControls';
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,9 @@
+"use client";
+'use strict';
+
+var formControls = require('./theme/formControls.js');
+
+
+
+exports.noZoomOnFocus = formControls.noZoomOnFocus;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/styles.mjs

@@ -0,0 +1,3 @@
+"use client";
+export { noZoomOnFocus } from './theme/formControls.mjs';
+//# sourceMappingURL=styles.mjs.map

package/dist/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0-alpha.32",
+  "version": "4.0.0-alpha.34",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -15,6 +15,11 @@
       "types": "./dist/icons.d.ts",
       "import": "./dist/icons.mjs",
       "require": "./dist/icons.js"
+    },
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "import": "./dist/styles.mjs",
+      "require": "./dist/styles.js"
     }
   },
   "files": [

package/src/components/Modal/Modal.stories.tsx

@@ -482,13 +482,14 @@ export const PreventOutsideClick: Story = {
 /**
  * 모바일 풀스크린 모달 (기본값)
  *
- * fullScreenOnMobile이 true(기본값)이면 모바일 뷰포트에서
+ * fullScreenOnMobile을 true로 주면 모바일 뷰포트에서
  * 모달이 전체 화면으로 표시됩니다 (100vw × 100dvh, border-radius 0).
+ * 기본값은 false이니 전체 화면이 필요한 곳에서만 켜세요.
  * 브라우저를 좁혀서 확인해보세요.
  */
 export const FullScreenOnMobile: Story = {
   args: {
-    headerTitle: 'Full Screen on Mobile (Default)',
+    headerTitle: 'Full Screen on Mobile (opt-in)',
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -507,7 +508,7 @@ export const FullScreenOnMobile: Story = {
             <ModalCloseButton />
             <ModalBody>
               모바일에서 이 모달은 전체 화면으로 표시됩니다. 브라우저 창을 좁혀서
-              확인해보세요. fullScreenOnMobile은 기본값이 true입니다.
+              확인해보세요. fullScreenOnMobile은 기본값이 false라 직접 켜야 합니다.
             </ModalBody>
             <ModalFooter>
               <Button variant="ghost" onClick={() => setIsOpen(false)}>
@@ -527,13 +528,13 @@ export const FullScreenOnMobile: Story = {
 /**
  * 모바일에서 인라인 모달
  *
- * fullScreenOnMobile={false}이면 모바일에서도 풀스크린이 아닌
+ * fullScreenOnMobile={false}(기본값)이면 모바일에서도 풀스크린이 아닌
  * 일반 모달로 표시되며, 좌우 마진(mx: 4)이 적용됩니다.
- * Confirm 모달 등 작은 모달에 적합합니다.
+ * Confirm 모달 등 대부분의 모달이 여기에 해당합니다.
  */
 export const NoFullScreenOnMobile: Story = {
   args: {
-    headerTitle: 'Inline on Mobile',
+    headerTitle: 'Inline on Mobile (default)',
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(false);

package/src/components/Modal/Modal.tsx

@@ -9,7 +9,7 @@ export const Modal = ({
   open,
   onOpenChange,
   portalProps,
-  fullScreenOnMobile = true,
+  fullScreenOnMobile = false,
   ...rest
 }: ModalProps) => {
   const ctx = useMemo(() => ({ fullScreenOnMobile }), [fullScreenOnMobile]);

package/src/components/Modal/Modal.types.ts

@@ -5,8 +5,16 @@ export type ModalProps = Dialog.RootProps & {
   // Added for backwards compatibility.
   portalProps?: PortalProps;
   /**
-   * When true, the modal becomes fullscreen on mobile viewports.
-   * @default true
+   * When true, the modal becomes fullscreen on mobile viewports
+   * (100vw x 100dvh, no border-radius). When false it keeps the dialog
+   * shape and applies a horizontal margin instead.
+   *
+   * Defaults to false: a full-screen takeover suits long or immersive
+   * content (a file picker, a course switcher), not the confirm dialogs
+   * and short forms that make up most modals. Opt in where the takeover
+   * is the point.
+   *
+   * @default false
    */
   fullScreenOnMobile?: boolean;
 };

package/src/components/Modal/ModalContext.ts

@@ -7,7 +7,7 @@ interface ModalContextValue {
 }
 
 export const ModalContext = createContext<ModalContextValue>({
-  fullScreenOnMobile: true,
+  fullScreenOnMobile: false,
 });
 
 export const useModalContext = () => useContext(ModalContext);

package/src/styles.ts

@@ -0,0 +1,20 @@
+/**
+ * Pure style objects, importable without the component barrel.
+ *
+ * The root entry (`@mindlogic-ai/logician-ui`) pulls in every component, and
+ * with them side-effect CSS imports such as `katex/dist/katex.min.css`. A
+ * bundler handles that; a plain Node loader does not, so a consumer's unit test
+ * that imports a style constant from the root fails to load the module at all
+ * (`Unknown file extension ".css"`). Importing a style object should not cost
+ * the whole design system.
+ *
+ * Everything re-exported here must stay free of runtime imports — types only —
+ * so this entry brings in nothing but the objects themselves.
+ *
+ * ```ts
+ * import { noZoomOnFocus } from '@mindlogic-ai/logician-ui/styles';
+ * ```
+ *
+ * These names are also on the root entry, so existing imports keep working.
+ */
+export { noZoomOnFocus } from './theme/formControls';