@firedesktop/react-base 3.0.2 → 3.1.0

package/dist/components/Layout/Content.d.ts

@@ -0,0 +1,3 @@
+import { ContentProps } from './Types';
+declare const Content: ({ children, className, style }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+export default Content;

package/dist/components/Layout/Content.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Content = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style;
+    var cls = ['fd-layout-content', className].filter(Boolean).join(' ');
+    return (_jsx("main", { className: cls, style: style, children: children }));
+};
+export default Content;
+//# sourceMappingURL=Content.js.map

package/dist/components/Layout/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Content.tsx"],"names":[],"mappings":";AAGA,IAAM,OAAO,GAAG,UAAC,EAA4C;QAA1C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACzC,IAAM,GAAG,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvE,OAAO,CACH,eAAM,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAC7B,QAAQ,GACN,CACV,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Layout/Footer.d.ts

@@ -0,0 +1,3 @@
+import { FooterProps } from './Types';
+declare const Footer: ({ children, className, style }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;

package/dist/components/Layout/Footer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Footer = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style;
+    var cls = ['fd-layout-footer', className].filter(Boolean).join(' ');
+    return (_jsx("footer", { className: cls, style: style, children: children }));
+};
+export default Footer;
+//# sourceMappingURL=Footer.js.map

package/dist/components/Layout/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Footer.tsx"],"names":[],"mappings":";AAGA,IAAM,MAAM,GAAG,UAAC,EAA2C;QAAzC,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACxC,IAAM,GAAG,GAAG,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtE,OAAO,CACH,iBAAQ,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAC/B,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Layout/Header.d.ts

@@ -0,0 +1,3 @@
+import { HeaderProps } from './Types';
+declare const Header: ({ children, className, style }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/components/Layout/Header.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Header = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style;
+    var cls = ['fd-layout-header', className].filter(Boolean).join(' ');
+    return (_jsx("header", { className: cls, style: style, children: children }));
+};
+export default Header;
+//# sourceMappingURL=Header.js.map

package/dist/components/Layout/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Header.tsx"],"names":[],"mappings":";AAGA,IAAM,MAAM,GAAG,UAAC,EAA2C;QAAzC,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA;IACxC,IAAM,GAAG,GAAG,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtE,OAAO,CACH,iBAAQ,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAC/B,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LayoutProps } from './Types';
+import Header from './Header';
+import Footer from './Footer';
+import Content from './Content';
+import Sider from './Sider';
+import '../../styles/layout.css';
+type LayoutComponent = React.FC<LayoutProps> & {
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Content: typeof Content;
+    Sider: typeof Sider;
+};
+declare const Layout: LayoutComponent;
+export default Layout;

package/dist/components/Layout/Layout.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Header from './Header';
+import Footer from './Footer';
+import Content from './Content';
+import Sider from './Sider';
+import '../../styles/layout.css';
+var Layout = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.hasSider, hasSider = _b === void 0 ? false : _b;
+    var cls = [
+        'fd-layout',
+        hasSider ? 'fd-layout--has-sider' : '',
+        className,
+    ].filter(Boolean).join(' ');
+    return (_jsx("section", { className: cls, style: style, children: children }));
+};
+Layout.Header = Header;
+Layout.Footer = Footer;
+Layout.Content = Content;
+Layout.Sider = Sider;
+export default Layout;
+//# sourceMappingURL=Layout.js.map

package/dist/components/Layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Layout.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,yBAAyB,CAAC;AASjC,IAAM,MAAM,GAAoB,UAAC,EAAgD;QAA9C,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IAC3E,IAAM,GAAG,GAAG;QACR,WAAW;QACX,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;QACtC,SAAS;KACZ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACH,kBAAS,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAChC,QAAQ,GACH,CACb,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AACvB,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AACvB,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;AACzB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;AAErB,eAAe,MAAM,CAAC"}

package/dist/components/Layout/Sider.d.ts

@@ -0,0 +1,3 @@
+import { SiderProps } from './Types';
+declare const Sider: ({ children, className, style, collapsed, width, collapsedWidth, breakpoint, onBreakpoint, }: SiderProps) => import("react/jsx-runtime").JSX.Element;
+export default Sider;

package/dist/components/Layout/Sider.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+var BREAKPOINTS = {
+    sm: '(max-width: 576px)',
+    md: '(max-width: 768px)',
+    lg: '(max-width: 992px)',
+    xl: '(max-width: 1200px)',
+};
+var Sider = function (_a) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, _c = _a.width, width = _c === void 0 ? 240 : _c, _d = _a.collapsedWidth, collapsedWidth = _d === void 0 ? 64 : _d, breakpoint = _a.breakpoint, onBreakpoint = _a.onBreakpoint;
+    useEffect(function () {
+        if (!breakpoint || !onBreakpoint)
+            return;
+        var query = BREAKPOINTS[breakpoint];
+        if (!query)
+            return;
+        var mql = window.matchMedia(query);
+        var handler = function (e) { return onBreakpoint(e.matches); };
+        onBreakpoint(mql.matches);
+        mql.addEventListener('change', handler);
+        return function () { return mql.removeEventListener('change', handler); };
+    }, [breakpoint, onBreakpoint]);
+    var cls = [
+        'fd-layout-sider',
+        collapsed ? 'fd-layout-sider--collapsed' : '',
+        className,
+    ].filter(Boolean).join(' ');
+    var siderWidth = collapsed ? collapsedWidth : width;
+    var mergedStyle = __assign({ width: typeof siderWidth === 'number' ? "".concat(siderWidth, "px") : siderWidth, minWidth: typeof siderWidth === 'number' ? "".concat(siderWidth, "px") : siderWidth, maxWidth: typeof siderWidth === 'number' ? "".concat(siderWidth, "px") : siderWidth }, style);
+    return (_jsx("aside", { className: cls, style: mergedStyle, children: children }));
+};
+export default Sider;
+//# sourceMappingURL=Sider.js.map

package/dist/components/Layout/Sider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sider.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Sider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,IAAM,WAAW,GAA2B;IACxC,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,qBAAqB;CAC5B,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EASF;QART,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAA,EACX,sBAAmB,EAAnB,cAAc,mBAAG,EAAE,KAAA,EACnB,UAAU,gBAAA,EACV,YAAY,kBAAA;IAEZ,SAAS,CAAC;QACN,IAAI,CAAC,UAAU,IAAI,CAAC,YAAY;YAAE,OAAO;QAEzC,IAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,IAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACrC,IAAM,OAAO,GAAG,UAAC,CAAsB,IAAK,OAAA,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,EAAvB,CAAuB,CAAC;QAEpE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1B,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,cAAM,OAAA,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,EAA1C,CAA0C,CAAC;IAC5D,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/B,IAAM,GAAG,GAAG;QACR,iBAAiB;QACjB,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;QAC7C,SAAS;KACZ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,IAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC;IACtD,IAAM,WAAW,cACb,KAAK,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,UAAU,EACzE,QAAQ,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,CAAC,CAAC,CAAC,UAAU,IACtE,KAAK,CACX,CAAC;IAEF,OAAO,CACH,gBAAO,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,YACpC,QAAQ,GACL,CACX,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Layout/Types.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+export type LayoutBaseProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+export type LayoutProps = LayoutBaseProps & {
+    hasSider?: boolean;
+};
+export type HeaderProps = LayoutBaseProps;
+export type FooterProps = LayoutBaseProps;
+export type ContentProps = LayoutBaseProps;
+export type SiderProps = LayoutBaseProps & {
+    collapsed?: boolean;
+    width?: number | string;
+    collapsedWidth?: number;
+    breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+    onBreakpoint?: (broken: boolean) => void;
+};

package/dist/components/Layout/Types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Types.js.map

package/dist/components/Layout/Types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../src/lib/components/Layout/Types.ts"],"names":[],"mappings":""}

package/dist/components/index.d.ts

@@ -1,7 +1,9 @@
 import AppIcon from './AppIcon';
 import AppInput from './AppInput';
 import AppPagination from './AppPagination';
+import Layout from './Layout/Layout';
+import * as Layout_Types from './Layout/Types';
 import Spin from './Spin';
 import Toaster from './Toaster/Toaster';
 import * as Toaster_Types from './Toaster/Types';
-export { AppIcon, AppInput, AppPagination, Spin, Toaster, Toaster_Types };
+export { AppIcon, AppInput, AppPagination, Layout, Layout_Types, Spin, Toaster, Toaster_Types };

package/dist/components/index.js

@@ -1,8 +1,10 @@
 import AppIcon from './AppIcon';
 import AppInput from './AppInput';
 import AppPagination from './AppPagination';
+import Layout from './Layout/Layout';
+import * as Layout_Types from './Layout/Types';
 import Spin from './Spin';
 import Toaster from './Toaster/Toaster';
 import * as Toaster_Types from './Toaster/Types';
-export { AppIcon, AppInput, AppPagination, Spin, Toaster, Toaster_Types };
+export { AppIcon, AppInput, AppPagination, Layout, Layout_Types, Spin, Toaster, Toaster_Types };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAC/C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,aAAa,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/styles/layout.css

@@ -0,0 +1,57 @@
+:root {
+    --fd-layout-header-height: 64px;
+    --fd-layout-header-bg: var(--primary-color);
+    --fd-layout-header-color: var(--white-color);
+    --fd-layout-footer-bg: #f0f0f0;
+    --fd-layout-body-bg: #f7f7f7;
+    --fd-layout-sider-bg: #ffffff;
+    --fd-layout-sider-transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
+}
+
+.fd-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
+}
+
+.fd-layout--has-sider {
+    flex-direction: row;
+}
+
+.fd-layout-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    height: var(--fd-layout-header-height);
+    padding: 0 24px;
+    background: var(--fd-layout-header-bg);
+    color: var(--fd-layout-header-color);
+    flex-shrink: 0;
+}
+
+.fd-layout-footer {
+    padding: 16px 24px;
+    background: var(--fd-layout-footer-bg);
+    flex-shrink: 0;
+}
+
+.fd-layout-content {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    background: var(--fd-layout-body-bg);
+}
+
+.fd-layout-sider {
+    background: var(--fd-layout-sider-bg);
+    overflow: hidden;
+    flex-shrink: 0;
+    transition: var(--fd-layout-sider-transition);
+}
+
+.fd-layout-sider--collapsed {
+    overflow: hidden;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firedesktop/react-base",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "license": "SEE LICENSE IN LICENSE",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",