@maelstrom-futurism/sidebar 0.7.4-beta.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright 2025 OSMstudios
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Heading.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface HeadingProps {
+    title: string;
+}
+declare const Heading: {
+    ({ title }: HeadingProps): ReactNode;
+    displayName: string;
+};
+export default Heading;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../src/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAQ9C,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO;gBAAe,YAAY,GAAG,SAAS;;CAiCnD,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/Heading.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { css } from "@emotion/react";
+import { Button } from "@maelstrom-futurism/button";
+import { useTheme } from "@maelstrom-futurism/core";
+import { Icon } from "@maelstrom-futurism/icons";
+import { SidebarContext } from "./SidebarContext";
+const Heading = ({ title }) => {
+    const theme = useTheme();
+    const sidebarContext = useContext(SidebarContext);
+    const headingStyle = css `
+        padding: 0.5rem 1rem;
+        ${sidebarContext.isOpen ? `border-bottom: inset 2px ${theme.color('borderMuted')}` : "border-bottom: none"};
+
+        ${sidebarContext.isOpen && `h2 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }`}
+    `;
+    return (_jsx("div", { css: headingStyle, children: _jsxs("h2", { children: [sidebarContext.isOpen && (_jsx("div", { children: title })), sidebarContext.isClosable && (_jsx(Button, { variant: "ghost", onClick: () => sidebarContext.setIsOpen(!sidebarContext.isOpen), children: sidebarContext.isOpen ? (_jsx(Icon, { icon: "AngleLeft" })) : (_jsx(Icon, { icon: "MenuBurger" })) }))] }) }));
+};
+Heading.displayName = "Heading";
+export default Heading;
+//# sourceMappingURL=Heading.js.map

package/dist/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../src/Heading.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMlD,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,EAAa,EAAE;IACnD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,GAAG,CAAA;;UAElB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB;;UAExG,cAAc,CAAC,MAAM,IAAI;;;;UAIzB;KACL,CAAC;IAEF,OAAO,CACH,cAAK,GAAG,EAAE,YAAY,YAClB,yBACK,cAAc,CAAC,MAAM,IAAI,CAAC,wBAAM,KAAK,GAAO,CAAC,EAE7C,cAAc,CAAC,UAAU,IAAI,CAC1B,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,YAClF,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CACrB,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAE,CAC3B,CAAC,CAAC,CAAC,CACA,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAE,CAC5B,GACI,CACZ,IAEA,GACH,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,eAAe,OAAO,CAAC"}

package/dist/Item.d.ts

@@ -0,0 +1,3 @@
+export interface ItemProps {
+}
+//# sourceMappingURL=Item.d.ts.map

package/dist/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../src/Item.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,SAAS;CAEzB"}

package/dist/Item.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+const menuItemContainer = css `
+    display: flex;
+    justify-content: space-between;
+`;
+const Item = ({}) => _jsx("div", { css: menuItemContainer });
+//# sourceMappingURL=Item.js.map

package/dist/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../src/Item.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;CAG5B,CAAC;AAMF,MAAM,IAAI,GAAG,CAAC,EAAa,EAAa,EAAE,CAAC,cAAK,GAAG,EAAE,iBAAiB,GAAI,CAAA"}

package/dist/Sidebar.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Styling ideas: https://freefrontend.com/css-sidebar-menus/
+ *
+ * https://cloudscape.design/get-started/integration/global-styles/ <- i like this
+ *
+ * Sidebar > Item > Item (A sidebar has items and those items have items)
+ */
+import { ReactNode } from 'react';
+interface SidebarProps {
+    name?: string;
+    isClosable?: boolean;
+    isOpen?: boolean;
+    children?: ReactNode;
+}
+declare const Sidebar: {
+    ({ isClosable, isOpen, children }: SidebarProps): ReactNode;
+    Heading: {
+        ({ title }: import("./Heading").HeadingProps): ReactNode;
+        displayName: string;
+    };
+};
+export default Sidebar;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../src/Sidebar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAO5C,UAAU,YAAY;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,OAAO;uCAIV,YAAY,GAAG,SAAS;;;;;CAoD1B,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/Sidebar.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+ * Styling ideas: https://freefrontend.com/css-sidebar-menus/
+ *
+ * https://cloudscape.design/get-started/integration/global-styles/ <- i like this
+ *
+ * Sidebar > Item > Item (A sidebar has items and those items have items)
+ */
+import { useState } from 'react';
+import { css } from '@emotion/react';
+import { useTheme } from '@maelstrom-futurism/core';
+import Heading from './Heading';
+import { SidebarContext } from './SidebarContext';
+const Sidebar = ({ isClosable = false, isOpen = true, children }) => {
+    const theme = useTheme();
+    const [isOpenState, setIsOpenState] = useState(isOpen);
+    const openStyle = css `
+        overflow-x: hidden;
+        overflow-y: auto;
+        min-width: 300px;
+        max-width: 100%;
+
+        border-right: solid 1px ${theme.color('borderMuted')};
+    `;
+    const closedStyle = css `
+        width: 65px;
+        height: 44px;
+        
+        ul, hr, a {
+            display: none;
+        }
+    `;
+    const sidebarContainer = css `
+        position: sticky;
+
+        ul {
+            list-style: none;
+        }
+        
+        hr {
+            border: 0;
+            border-top: solid 1px ${theme.color('borderMuted')};
+        }
+
+        a {
+            color: ${theme.color('textColor')};
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: ${theme.color('linkColor')};
+            text-decoration: underline;
+        }
+    `;
+    return (_jsx("aside", { css: [sidebarContainer, isOpenState ? openStyle : closedStyle], children: _jsx(SidebarContext.Provider, { value: { isOpen: isOpenState, setIsOpen: setIsOpenState, isClosable }, children: children }) }));
+};
+Sidebar.Heading = Heading;
+export default Sidebar;
+//# sourceMappingURL=Sidebar.js.map

package/dist/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../src/Sidebar.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AASlD,MAAM,OAAO,GAAG,CAAC,EACb,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,IAAI,EACb,QAAQ,EACG,EAAa,EAAE;IAC1B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAEvD,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;kCAMS,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC;KACvD,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;KAOtB,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;oCASI,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC;;;;qBAIzC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;;;qBAKxB,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;;KAGxC,CAAC;IAEF,OAAO,CACH,gBAAO,GAAG,EAAE,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,YACjE,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,YACzF,QAAQ,GACa,GACtB,CACX,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;AAE1B,eAAe,OAAO,CAAC"}

package/dist/SidebarContext.d.ts

@@ -0,0 +1,8 @@
+interface SidebarContext {
+    isOpen: boolean;
+    isClosable: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}
+export declare const SidebarContext: import("react").Context<SidebarContext>;
+export {};
+//# sourceMappingURL=SidebarContext.d.ts.map

package/dist/SidebarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.d.ts","sourceRoot":"","sources":["../src/SidebarContext.ts"],"names":[],"mappings":"AAEA,UAAU,cAAc;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,cAAc,yCAAsC,CAAC"}

package/dist/SidebarContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const SidebarContext = createContext({});
+//# sourceMappingURL=SidebarContext.js.map

package/dist/SidebarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.js","sourceRoot":"","sources":["../src/SidebarContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,EAAoB,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Sidebar } from './Sidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as Sidebar } from './Sidebar';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@maelstrom-futurism/sidebar",
+  "version": "0.7.4-beta.0",
+  "description": "A flexible sidebar component for navigation",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run --coverage",
+    "test:dev": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "author": "Dawson Goodell <dawsong@osmstudios.com>",
+  "homepage": "https://osmstudios.com",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DawsonG/maelstrom-futurism.git",
+    "directory": "packages/sidebar"
+  },
+  "dependencies": {
+    "@maelstrom-futurism/button": "^0.7.4-beta.0",
+    "@maelstrom-futurism/core": "^0.7.4-beta.0",
+    "@maelstrom-futurism/icons": "^0.7.4-alpha.3"
+  },
+  "peerDependences": {
+    "react": ">= 18.0.0",
+    "react-dom": ">= 18.0.0"
+  },
+  "gitHead": "e1ece2ae9ed8f855378d20e7a87636b3bd15a556"
+}