@astral/ui 0.17.0 → 0.18.0

package/List/List.d.ts

@@ -1,3 +1,3 @@
-import { ListProps } from '@mui/material';
-export { StyledList as List } from './styled';
-export type { ListProps };
+/// <reference types="react" />
+import { ListProps } from './types';
+export declare const List: ({ collapsed, children, ...props }: ListProps) => JSX.Element;

package/List/List.js

@@ -1,5 +1,39 @@
 "use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Collapse_1 = __importDefault(require("@mui/material/Collapse"));
+var ListProvider_1 = require("../ListProvider");
 var styled_1 = require("./styled");
-Object.defineProperty(exports, "List", { enumerable: true, get: function () { return styled_1.StyledList; } });
+var COLLAPSED_SIZE = 60;
+var List = function (_a) {
+    var collapsed = _a.collapsed, children = _a.children, props = __rest(_a, ["collapsed", "children"]);
+    var open = collapsed === undefined || collapsed;
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(ListProvider_1.ListProvider, __assign({ value: { open: open } }, { children: (0, jsx_runtime_1.jsx)(Collapse_1.default, __assign({ orientation: "horizontal", in: open, collapsedSize: COLLAPSED_SIZE }, { children: children }), void 0) }), void 0) }), void 0));
+};
+exports.List = List;

package/List/index.d.ts

@@ -1 +1,2 @@
 export * from './List';
+export * from './types';

package/List/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./List"), exports);
+__exportStar(require("./types"), exports);

package/List/styled.d.ts

@@ -10,4 +10,6 @@ export declare const StyledList: import("@emotion/styled").StyledComponent<{
     ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    collapsed?: boolean | undefined;
 }, {}, {}>;

package/List/styled.js

@@ -7,5 +7,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledList = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../styles");
-exports.StyledList = (0, styles_1.styled)(material_1.List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"])));
+exports.StyledList = (0, styles_1.styled)(material_1.List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('width', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.shortest,
+    }), " !important");
+});
 var templateObject_1;

package/List/types.d.ts

@@ -0,0 +1,4 @@
+import { ListProps as MuiListProps } from '@mui/material';
+export declare type ListProps = MuiListProps & {
+    collapsed?: boolean;
+};

package/List/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ListItemText/ListItemText.js

@@ -24,9 +24,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItemText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
+var react_1 = require("react");
+var ListProvider_1 = require("../ListProvider");
+var styled_1 = require("./styled");
 var ListItemText = function (_a) {
     var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)(material_1.ListItemText, __assign({}, props), void 0);
+    var open = (0, react_1.useContext)(ListProvider_1.ListContext).open;
+    return (0, jsx_runtime_1.jsx)(styled_1.StyledListItemText, __assign({}, props, { open: open }), void 0);
 };
 exports.ListItemText = ListItemText;

package/ListItemText/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ListItemTextProps } from '@mui/material';
+export declare const StyledListItemText: import("@emotion/styled").StyledComponent<ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ListItemTextProps<"span", "p"> & {
+    open: boolean;
+}, {}, {}>;

package/ListItemText/styled.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledListItemText = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("../styles");
+exports.StyledListItemText = (0, styles_1.styled)(material_1.ListItemText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"], ["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"])), function (_a) {
+    var open = _a.open;
+    return (open ? 1 : 0);
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('opacity', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }));
+});
+var templateObject_1;

package/ListProvider/ListProvider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const ListContext: import("react").Context<{
+    open: boolean;
+}>;
+export declare const ListProvider: import("react").Provider<{
+    open: boolean;
+}>;

package/ListProvider/ListProvider.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListProvider = exports.ListContext = void 0;
+var react_1 = require("react");
+exports.ListContext = (0, react_1.createContext)({ open: true });
+exports.ListProvider = exports.ListContext.Provider;

package/ListProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListProvider';
+export * from './types';

package/ListProvider/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ListProvider"), exports);
+__exportStar(require("./types"), exports);

package/ListProvider/types.d.ts

@@ -0,0 +1,3 @@
+export declare type ListContextType = {
+    open: boolean;
+};

package/ListProvider/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/esm/List/List.d.ts

@@ -1,3 +1,3 @@
-import { ListProps } from '@mui/material';
-export { StyledList as List } from './styled';
-export type { ListProps };
+/// <reference types="react" />
+import { ListProps } from './types';
+export declare const List: ({ collapsed, children, ...props }: ListProps) => JSX.Element;

package/esm/List/List.js

@@ -1 +1,32 @@
-export { StyledList as List } from './styled';
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Collapse from '@mui/material/Collapse';
+import { ListProvider } from '../ListProvider';
+import { StyledList } from './styled';
+var COLLAPSED_SIZE = 60;
+export var List = function (_a) {
+    var collapsed = _a.collapsed, children = _a.children, props = __rest(_a, ["collapsed", "children"]);
+    var open = collapsed === undefined || collapsed;
+    return (_jsx(StyledList, __assign({}, props, { children: _jsx(ListProvider, __assign({ value: { open: open } }, { children: _jsx(Collapse, __assign({ orientation: "horizontal", in: open, collapsedSize: COLLAPSED_SIZE }, { children: children }), void 0) }), void 0) }), void 0));
+};

package/esm/List/index.d.ts

@@ -1 +1,2 @@
 export * from './List';
+export * from './types';

package/esm/List/index.js

@@ -1 +1,2 @@
 export * from './List';
+export * from './types';

package/esm/List/styled.d.ts

@@ -10,4 +10,6 @@ export declare const StyledList: import("@emotion/styled").StyledComponent<{
     ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    collapsed?: boolean | undefined;
 }, {}, {}>;

package/esm/List/styled.js

@@ -4,5 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { List as MuiList } from '@mui/material';
 import { styled } from '../styles';
-export var StyledList = styled(MuiList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"])));
+export var StyledList = styled(MuiList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('width', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.shortest,
+    }), " !important");
+});
 var templateObject_1;

package/esm/List/types.d.ts

@@ -0,0 +1,4 @@
+import { ListProps as MuiListProps } from '@mui/material';
+export declare type ListProps = MuiListProps & {
+    collapsed?: boolean;
+};

package/esm/List/types.js

@@ -0,0 +1 @@
+export {};

package/esm/ListItemText/ListItemText.js

@@ -21,8 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ListItemText as MuiListItemText, } from '@mui/material';
+import { useContext } from 'react';
+import { ListContext } from '../ListProvider';
+import { StyledListItemText } from './styled';
 export var ListItemText = function (_a) {
     var props = __rest(_a, []);
-    return _jsx(MuiListItemText, __assign({}, props), void 0);
+    var open = useContext(ListContext).open;
+    return _jsx(StyledListItemText, __assign({}, props, { open: open }), void 0);
 };

package/esm/ListItemText/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ListItemTextProps } from '@mui/material';
+export declare const StyledListItemText: import("@emotion/styled").StyledComponent<ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ListItemTextProps<"span", "p"> & {
+    open: boolean;
+}, {}, {}>;

package/esm/ListItemText/styled.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { ListItemText } from '@mui/material';
+import { styled } from '../styles';
+export var StyledListItemText = styled(ListItemText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"], ["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"])), function (_a) {
+    var open = _a.open;
+    return (open ? 1 : 0);
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('opacity', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }));
+});
+var templateObject_1;

package/esm/ListProvider/ListProvider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const ListContext: import("react").Context<{
+    open: boolean;
+}>;
+export declare const ListProvider: import("react").Provider<{
+    open: boolean;
+}>;

package/esm/ListProvider/ListProvider.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export var ListContext = createContext({ open: true });
+export var ListProvider = ListContext.Provider;

package/esm/ListProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListProvider';
+export * from './types';

package/esm/ListProvider/index.js

@@ -0,0 +1,2 @@
+export * from './ListProvider';
+export * from './types';

package/esm/ListProvider/types.d.ts

@@ -0,0 +1,3 @@
+export declare type ListContextType = {
+    open: boolean;
+};

package/esm/ListProvider/types.js

@@ -0,0 +1 @@
+export {};

package/esm/index.d.ts

@@ -21,6 +21,7 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './ListProvider';
 export * from './ListSubheader';
 export * from './MaskField';
 export * from './Menu';

package/esm/index.js

@@ -21,6 +21,7 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './ListProvider';
 export * from './ListSubheader';
 export * from './MaskField';
 export * from './Menu';

package/index.d.ts

@@ -21,6 +21,7 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './ListProvider';
 export * from './ListSubheader';
 export * from './MaskField';
 export * from './Menu';

package/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./ListItemButton"), exports);
 __exportStar(require("./ListItemIcon"), exports);
 __exportStar(require("./ListItemSecondaryAction"), exports);
 __exportStar(require("./ListItemText"), exports);
+__exportStar(require("./ListProvider"), exports);
 __exportStar(require("./ListSubheader"), exports);
 __exportStar(require("./MaskField"), exports);
 __exportStar(require("./Menu"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.17.0",
+    "@astral/icons": "^0.18.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.8.1",
     "@emotion/server": "11.4.0",