@zonos/amino 5.5.30 → 5.5.32

package/components/skeleton/Skeleton.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),n=require("clsx"),t=require("../../style-inject.es-d4ddeae4.js");function o(e){return e&&e.__esModule?e:{default:e}}var i=o(n),a="Amino_Skeleton-module__skeletonWrapper--5p9qr",r="Amino_Skeleton-module__animation--V7bRQ";t.styleInject('@keyframes Amino_Skeleton-module__shimmerAction--dSaE6{0%{transform:translateX(-100%)}75%,to{transform:translateX(100%)}}.Amino_Skeleton-module__skeletonWrapper--5p9qr{background:var(--amino-gray-100);border-radius:20px;height:var(--amino-skeleton-height);overflow:hidden;position:relative;width:var(--amino-skeleton-width)}.Amino_Skeleton-module__skeletonWrapper--5p9qr.Amino_Skeleton-module__animation--V7bRQ:after{animation:Amino_Skeleton-module__shimmerAction--dSaE6 1.4s linear .5s infinite;background:linear-gradient(90deg,#0000,#00000014,#0000);content:"";inset:0;position:absolute;transform:translateX(-100%)}');exports.Skeleton=function(n){var t=n.animation,o=void 0===t||t,s=n.children,l=n.className,m=n.height,d=n.style,_=n.width;return React.createElement("div",{className:i.default(l,a,o&&r),style:e.__assign(e.__assign({},d),{"--amino-skeleton-height":m?"".concat(m,"px"):"1em","--amino-skeleton-width":_?"".concat(_,"px"):"100%"})},s)};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),n=require("clsx"),t=require("../../style-inject.es-d4ddeae4.js"),i=require("react/jsx-runtime");function o(e){return e&&e.__esModule?e:{default:e}}var r=o(n),a="Amino_Skeleton-module__skeletonWrapper--5p9qr",s="Amino_Skeleton-module__animation--V7bRQ";t.styleInject('@keyframes Amino_Skeleton-module__shimmerAction--dSaE6{0%{transform:translateX(-100%)}75%,to{transform:translateX(100%)}}.Amino_Skeleton-module__skeletonWrapper--5p9qr{background:var(--amino-gray-100);border-radius:20px;height:var(--amino-skeleton-height);overflow:hidden;position:relative;width:var(--amino-skeleton-width)}.Amino_Skeleton-module__skeletonWrapper--5p9qr.Amino_Skeleton-module__animation--V7bRQ:after{animation:Amino_Skeleton-module__shimmerAction--dSaE6 1.4s linear .5s infinite;background:linear-gradient(90deg,#0000,#00000014,#0000);content:"";inset:0;position:absolute;transform:translateX(-100%)}');exports.Skeleton=function(n){var t=n.animation,o=void 0===t||t,l=n.children,m=n.className,d=n.height,_=n.style,u=n.width;return i.jsx("div",{className:r.default(m,a,o&&s),style:e.__assign(e.__assign({},_),{"--amino-skeleton-height":d?"".concat(d,"px"):"1em","--amino-skeleton-width":u?"".concat(u,"px"):"100%"}),children:l})};

package/components/slide-over/SlideOver.d.ts

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react';
+import { type BaseDialogProps } from "../dialog/BaseDialog";
+export type SlideOverProps = BaseDialogProps & {
+    actions?: ReactNode;
+    bottomActions?: ReactNode;
+    fullWindowWidth?: boolean;
+    label?: string;
+    subtitle?: ReactNode;
+};
+/**
+ * SlideOver component displays content in a panel that slides in from the edge of the screen.
+ * It's useful for secondary content or actions that don't require leaving the current page.
+ *
+ * @example Basic usage
+ * <SlideOver
+ *   label="Panel Title"
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>Panel content goes here.</Text>
+ * </SlideOver>
+ *
+ * @example With subtitle
+ * <SlideOver
+ *   label="Edit Profile"
+ *   subtitle={<Text type="caption">Update your personal information</Text>}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <VStack spacing={16}>
+ *     <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+ *     <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+ *   </VStack>
+ * </SlideOver>
+ *
+ * @example With header actions
+ * <SlideOver
+ *   label="Document Details"
+ *   actions={<Button variant="primary" size="small">Edit</Button>}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>Document content preview</Text>
+ * </SlideOver>
+ *
+ * @example With bottom actions
+ * <SlideOver
+ *   label="Create Item"
+ *   bottomActions={
+ *     <>
+ *       <Button variant="standard" onClick={() => setIsOpen(false)}>
+ *         Cancel
+ *       </Button>
+ *       <Button variant="primary" onClick={handleSave}>
+ *         Save
+ *       </Button>
+ *     </>
+ *   }
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>Form content</Text>
+ * </SlideOver>
+ *
+ * @example Custom width
+ * <SlideOver
+ *   label="Wide Panel"
+ *   width={600}
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>This panel is wider than the default.</Text>
+ * </SlideOver>
+ *
+ * @example Full window width
+ * <SlideOver
+ *   label="Detailed View"
+ *   fullWindowWidth
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <Text>This panel takes the full window width.</Text>
+ * </SlideOver>
+ *
+ * @example With complex content
+ * <SlideOver
+ *   label="Shopping Cart"
+ *   subtitle={<Text type="caption">3 items</Text>}
+ *   bottomActions={
+ *     <>
+ *       <Button variant="standard" onClick={() => setIsOpen(false)}>
+ *         Continue Shopping
+ *       </Button>
+ *       <Button variant="primary" onClick={handleCheckout}>
+ *         Checkout
+ *       </Button>
+ *     </>
+ *   }
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <VStack spacing={16}>
+ *     {items.map(item => (
+ *       <Card key={item.id}>
+ *         <Text>{item.name}</Text>
+ *         <Text>${item.price}</Text>
+ *       </Card>
+ *     ))}
+ *   </VStack>
+ * </SlideOver>
+ */
+export declare const SlideOver: ({ actions, bottomActions, children, fullWindowWidth, label, onClose, subtitle, width, ...props }: SlideOverProps) => import("react").JSX.Element;

package/components/slide-over/SlideOver.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),i=require("../../tslib.es6-8c21e256.js"),t=require("../button/Button.js"),r=require("../dialog/BaseDialog.js"),o=require("../stack/HStack.js"),a=require("../stack/VStack.js"),l=require("../text/Text.js"),n=require("../../icons/RemoveIcon.js"),s=require("../../style-inject.es-d4ddeae4.js");require("react"),require("clsx"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("react-dom"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var d="Amino_SlideOver-module__styledBaseDialog--kdoHN",c="Amino_SlideOver-module__wrapper--h4h0-",u="Amino_SlideOver-module__slideOverHeader--QseSi",m="Amino_SlideOver-module__slideOverContent--vCKvH",p="Amino_SlideOver-module__footer--mwPVV";s.styleInject(".Amino_SlideOver-module__styledBaseDialog--kdoHN{background:#0000;border:none;border-radius:0;box-shadow:none;height:100vh;max-height:none;overflow:unset;position:absolute;right:0;top:0}.Amino_SlideOver-module__wrapper--h4h0-{background:var(--amino-page-background);border-radius:12px;box-shadow:var(--amino-v3-shadow-large);display:flex;flex-direction:column;height:calc(100% - 16px);margin:8px}.Amino_SlideOver-module__slideOverHeader--QseSi{align-items:center;border-bottom:var(--amino-border-subtle);display:flex;gap:16px;justify-content:space-between;padding:16px}.Amino_SlideOver-module__slideOverHeader--QseSi>div{align-items:center;display:flex;gap:16px}.Amino_SlideOver-module__slideOverContent--vCKvH{flex:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:24px}.Amino_SlideOver-module__footer--mwPVV{align-items:center;background:var(--amino-page-background);border-radius:0 0 12px 12px;display:flex;justify-content:flex-end;padding:24px}.Amino_SlideOver-module__footer--mwPVV>div+div{margin-left:8px}");exports.SlideOver=function(s){var v=s.actions,_=s.bottomActions,b=s.children,x=s.fullWindowWidth,g=s.label,h=s.onClose,q=s.subtitle,j=s.width,S=void 0===j?444:j,f=i.__rest(s,["actions","bottomActions","children","fullWindowWidth","label","onClose","subtitle","width"]);return React.createElement(r.BaseDialog,e._extends({className:d,fullWindowWidth:x,onClose:h,popupMotionProps:{animate:{x:0},exit:{x:S},initial:{x:S},transition:{duration:.45,ease:[.4,0,.2,1]}},width:S},f),React.createElement("div",{className:c},React.createElement("header",{className:u},React.createElement("div",null,React.createElement(t.Button,{icon:React.createElement(n.RemoveIcon,null),onClick:h}),q?React.createElement(a.VStack,{spacing:0},React.createElement(l.Text,{type:"subheader"},g),q):React.createElement(l.Text,{type:"subheader"},g)),v&&React.createElement("div",null,v)),React.createElement("div",{className:m},b),_&&React.createElement("div",{className:p},React.createElement(o.HStack,{spacing:8},_))))};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),i=require("../../tslib.es6-8c21e256.js"),r=require("../button/Button.js"),o=require("../dialog/BaseDialog.js"),s=require("../stack/HStack.js"),t=require("../stack/VStack.js"),n=require("../text/Text.js"),l=require("../../icons/RemoveIcon.js"),d=require("../../style-inject.es-d4ddeae4.js"),a=require("react/jsx-runtime");require("react"),require("clsx"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("react-dom"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var u="Amino_SlideOver-module__styledBaseDialog--kdoHN",c="Amino_SlideOver-module__wrapper--h4h0-",m="Amino_SlideOver-module__slideOverHeader--QseSi",p="Amino_SlideOver-module__slideOverContent--vCKvH",v="Amino_SlideOver-module__footer--mwPVV";d.styleInject(".Amino_SlideOver-module__styledBaseDialog--kdoHN{background:#0000;border:none;border-radius:0;box-shadow:none;height:100vh;max-height:none;overflow:unset;position:absolute;right:0;top:0}.Amino_SlideOver-module__wrapper--h4h0-{background:var(--amino-page-background);border-radius:12px;box-shadow:var(--amino-v3-shadow-large);display:flex;flex-direction:column;height:calc(100% - 16px);margin:8px}.Amino_SlideOver-module__slideOverHeader--QseSi{align-items:center;border-bottom:var(--amino-border-subtle);display:flex;gap:16px;justify-content:space-between;padding:16px}.Amino_SlideOver-module__slideOverHeader--QseSi>div{align-items:center;display:flex;gap:16px}.Amino_SlideOver-module__slideOverContent--vCKvH{flex:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:24px}.Amino_SlideOver-module__footer--mwPVV{align-items:center;background:var(--amino-page-background);border-radius:0 0 12px 12px;display:flex;justify-content:flex-end;padding:24px}.Amino_SlideOver-module__footer--mwPVV>div+div{margin-left:8px}");exports.SlideOver=function(d){var x=d.actions,_=d.bottomActions,h=d.children,j=d.fullWindowWidth,b=d.label,g=d.onClose,q=d.subtitle,S=d.width,f=void 0===S?444:S,w=i.__rest(d,["actions","bottomActions","children","fullWindowWidth","label","onClose","subtitle","width"]);return a.jsx(o.BaseDialog,e._objectSpread2(e._objectSpread2({className:u,fullWindowWidth:j,onClose:g,popupMotionProps:{animate:{x:0},exit:{x:f},initial:{x:f},transition:{duration:.45,ease:[.4,0,.2,1]}},width:f},w),{},{children:a.jsxs("div",{className:c,children:[a.jsxs("header",{className:m,children:[a.jsxs("div",{children:[a.jsx(r.Button,{icon:a.jsx(l.RemoveIcon,{}),onClick:g}),q?a.jsxs(t.VStack,{spacing:0,children:[a.jsx(n.Text,{type:"subheader",children:b}),q]}):a.jsx(n.Text,{type:"subheader",children:b})]}),x&&a.jsx("div",{children:x})]}),a.jsx("div",{className:p,children:h}),_&&a.jsx("div",{className:v,children:a.jsx(s.HStack,{spacing:8,children:_})})]})}))};

package/components/spinner/Spinner.d.ts

@@ -0,0 +1,55 @@
+import type { BaseProps } from "../../types/BaseProps";
+export type SpinnerColor = 'primary' | 'info' | 'success' | 'danger' | 'warning' | 'inverted' | 'black' | 'white' | 'purple' | 'cyan';
+export type SpinnerProps = BaseProps & {
+    /**
+     * @default 'primary'
+     */
+    color?: SpinnerColor;
+    /**
+     * @default 32
+     */
+    size?: number;
+};
+/**
+ * Spinner component displays an animated loading indicator.
+ * Used to indicate that content is loading or an action is in progress.
+ *
+ * @example Basic spinner with default size and color
+ * <Spinner />
+ *
+ * @example Different colors
+ * <Spinner color="primary" />
+ * <Spinner color="success" />
+ * <Spinner color="danger" />
+ * <Spinner color="warning" />
+ * <Spinner color="info" />
+ *
+ * @example Different sizes
+ * <Spinner size={16} /> // Small
+ * <Spinner size={32} /> // Default
+ * <Spinner size={48} /> // Large
+ * <Spinner size={64} /> // Extra large
+ *
+ * @example On dark background
+ * <div style={{ backgroundColor: "#333", padding: "20px" }}>
+ *   <Spinner color="inverted" />
+ * </div>
+ *
+ * @example In a button
+ * <Button disabled loading>
+ *   <Spinner size={16} color="white" />
+ *   Loading
+ * </Button>
+ *
+ * @example Centering in container
+ * <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100px" }}>
+ *   <Spinner />
+ * </div>
+ *
+ * @example With text
+ * <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
+ *   <Spinner />
+ *   <Text>Loading data...</Text>
+ * </div>
+ */
+export declare const Spinner: ({ className, color, size, style, }: SpinnerProps) => import("react").JSX.Element;

package/components/spinner/Spinner.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),n=require("clsx"),i=require("../../style-inject.es-d4ddeae4.js");function r(e){return e&&e.__esModule?e:{default:e}}var o=r(n),_={wrapper:"Amino_Spinner-module__wrapper--HsFcH",styledSvg:"Amino_Spinner-module__styledSvg--b-3GA",rotate:"Amino_Spinner-module__rotate--1zs3G",track:"Amino_Spinner-module__track--8g3IO",black:"Amino_Spinner-module__black--fWAPm",white:"Amino_Spinner-module__white---tttI",inverted:"Amino_Spinner-module__inverted--k3MWK",info:"Amino_Spinner-module__info--vNEZ8",success:"Amino_Spinner-module__success--wtOak",danger:"Amino_Spinner-module__danger--XUgrZ",warning:"Amino_Spinner-module__warning--skHle",purple:"Amino_Spinner-module__purple--aJNNQ",cyan:"Amino_Spinner-module__cyan--Qx8eX",dash:"Amino_Spinner-module__dash--74jKn"};i.styleInject(".Amino_Spinner-module__wrapper--HsFcH{height:var(--amino-spinner-height);overflow:hidden;position:relative;width:var(--amino-spinner-width)}.Amino_Spinner-module__styledSvg--b-3GA{stroke:var(--amino-blue-600);animation:Amino_Spinner-module__rotate--1zs3G 2s linear infinite;height:var(--amino-spinner-height);position:absolute;width:var(--amino-spinner-width)}.Amino_Spinner-module__styledSvg--b-3GA circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-gray-200)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__black--fWAPm{stroke:var(--amino-spinner-stroke-black)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__black--fWAPm circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-spinner-track-black)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK,.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__white---tttI{stroke:var(--amino-spinner-stroke-white)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK circle.Amino_Spinner-module__track--8g3IO,.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__white---tttI circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-spinner-track-white)}[data-theme=night] .Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK{stroke:var(--amino-spinner-stroke-black)}[data-theme=night] .Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-spinner-track-black)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__info--vNEZ8{stroke:var(--amino-blue-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__info--vNEZ8 circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-blue-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__success--wtOak{stroke:var(--amino-green-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__success--wtOak circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-green-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__danger--XUgrZ{stroke:var(--amino-red-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__danger--XUgrZ circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-red-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__warning--skHle{stroke:var(--amino-orange-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__warning--skHle circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-orange-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__purple--aJNNQ{stroke:var(--amino-purple-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__purple--aJNNQ circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-purple-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__cyan--Qx8eX{stroke:var(--amino-cyan-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__cyan--Qx8eX circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-cyan-100)}@keyframes Amino_Spinner-module__rotate--1zs3G{to{transform:rotate(1turn)}}@keyframes Amino_Spinner-module__dash--74jKn{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.Amino_Spinner-module__styledSvg--b-3GA circle:not(.Amino_Spinner-module__track--8g3IO){stroke-linecap:round;animation:Amino_Spinner-module__dash--74jKn 1.5s ease-in-out infinite}");exports.Spinner=function(n){var i=n.className,r=n.color,m=void 0===r?"primary":r,t=n.size,a=void 0===t?32:t,l=n.style;return React.createElement("div",{className:_.wrapper,style:e.__assign(e.__assign({},l),{"--amino-spinner-height":"".concat(a,"px"),"--amino-spinner-width":"".concat(a,"px")})},React.createElement("svg",{className:o.default(i,_.styledSvg,"primary"!==m&&_[m],"amino-spinner"),viewBox:"0 0 50 50"},React.createElement("circle",{className:o.default(_.track,"track"),cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20",strokeWidth:"5"}),React.createElement("circle",{cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20",strokeWidth:"5"})))};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),n=require("clsx"),i=require("../../style-inject.es-d4ddeae4.js"),r=require("react/jsx-runtime");function o(e){return e&&e.__esModule?e:{default:e}}var _=o(n),m={wrapper:"Amino_Spinner-module__wrapper--HsFcH",styledSvg:"Amino_Spinner-module__styledSvg--b-3GA",rotate:"Amino_Spinner-module__rotate--1zs3G",track:"Amino_Spinner-module__track--8g3IO",black:"Amino_Spinner-module__black--fWAPm",white:"Amino_Spinner-module__white---tttI",inverted:"Amino_Spinner-module__inverted--k3MWK",info:"Amino_Spinner-module__info--vNEZ8",success:"Amino_Spinner-module__success--wtOak",danger:"Amino_Spinner-module__danger--XUgrZ",warning:"Amino_Spinner-module__warning--skHle",purple:"Amino_Spinner-module__purple--aJNNQ",cyan:"Amino_Spinner-module__cyan--Qx8eX",dash:"Amino_Spinner-module__dash--74jKn"};i.styleInject(".Amino_Spinner-module__wrapper--HsFcH{height:var(--amino-spinner-height);overflow:hidden;position:relative;width:var(--amino-spinner-width)}.Amino_Spinner-module__styledSvg--b-3GA{stroke:var(--amino-blue-600);animation:Amino_Spinner-module__rotate--1zs3G 2s linear infinite;height:var(--amino-spinner-height);position:absolute;width:var(--amino-spinner-width)}.Amino_Spinner-module__styledSvg--b-3GA circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-gray-200)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__black--fWAPm{stroke:var(--amino-spinner-stroke-black)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__black--fWAPm circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-spinner-track-black)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK,.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__white---tttI{stroke:var(--amino-spinner-stroke-white)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK circle.Amino_Spinner-module__track--8g3IO,.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__white---tttI circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-spinner-track-white)}[data-theme=night] .Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK{stroke:var(--amino-spinner-stroke-black)}[data-theme=night] .Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__inverted--k3MWK circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-spinner-track-black)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__info--vNEZ8{stroke:var(--amino-blue-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__info--vNEZ8 circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-blue-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__success--wtOak{stroke:var(--amino-green-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__success--wtOak circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-green-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__danger--XUgrZ{stroke:var(--amino-red-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__danger--XUgrZ circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-red-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__warning--skHle{stroke:var(--amino-orange-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__warning--skHle circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-orange-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__purple--aJNNQ{stroke:var(--amino-purple-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__purple--aJNNQ circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-purple-100)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__cyan--Qx8eX{stroke:var(--amino-cyan-600)}.Amino_Spinner-module__styledSvg--b-3GA.Amino_Spinner-module__cyan--Qx8eX circle.Amino_Spinner-module__track--8g3IO{stroke:var(--amino-cyan-100)}@keyframes Amino_Spinner-module__rotate--1zs3G{to{transform:rotate(1turn)}}@keyframes Amino_Spinner-module__dash--74jKn{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.Amino_Spinner-module__styledSvg--b-3GA circle:not(.Amino_Spinner-module__track--8g3IO){stroke-linecap:round;animation:Amino_Spinner-module__dash--74jKn 1.5s ease-in-out infinite}");exports.Spinner=function(n){var i=n.className,o=n.color,t=void 0===o?"primary":o,a=n.size,l=void 0===a?32:a,s=n.style;return r.jsx("div",{className:m.wrapper,style:e.__assign(e.__assign({},s),{"--amino-spinner-height":"".concat(l,"px"),"--amino-spinner-width":"".concat(l,"px")}),children:r.jsxs("svg",{className:_.default(i,m.styledSvg,"primary"!==t&&m[t],"amino-spinner"),viewBox:"0 0 50 50",children:[r.jsx("circle",{className:_.default(m.track,"track"),cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20",strokeWidth:"5"}),r.jsx("circle",{cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20",strokeWidth:"5"})]})})};

package/components/split-panel/SplitPanel.d.ts

@@ -0,0 +1,113 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type SplitPanelProps = BaseProps & {
+    /**
+     * Content to render within the split panels
+     */
+    children: any;
+    /**
+     * Whether to collapse all panels except the first one
+     * @default false
+     */
+    collapseAll?: boolean;
+    /**
+     * Direction in which the panels should be split
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Size of the resize gutter between panels in pixels
+     * @default 3
+     */
+    gutterSize?: number;
+    /**
+     * Whether to display a line in the gutter
+     * @default false
+     */
+    lineBar?: boolean;
+    /**
+     * Minimum size of each panel in pixels
+     * @default 10
+     */
+    minSize?: number;
+    /**
+     * Callback function invoked when panel sizes change
+     */
+    onSetSizes?: Dispatch<SetStateAction<number[]>>;
+    /**
+     * Initial sizes of panels as proportions, where the sum should equal 1
+     * @default [1]
+     */
+    sizes?: number[];
+};
+/**
+ * SplitPanel component creates resizable panels with draggable dividers.
+ * It allows users to adjust the relative sizes of content sections either
+ * horizontally or vertically.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SplitPanel>
+ *   <div>Left panel content</div>
+ *   <div>Right panel content</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example With custom initial sizes
+ * ```tsx
+ * <SplitPanel sizes={[0.7, 0.3]}>
+ *   <div>Larger panel (70%)</div>
+ *   <div>Smaller panel (30%)</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example Vertical split
+ * ```tsx
+ * <SplitPanel direction="vertical" sizes={[0.4, 0.6]}>
+ *   <div>Top panel</div>
+ *   <div>Bottom panel</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example With state management
+ * ```tsx
+ * const [sizes, setSizes] = useState([0.5, 0.5]);
+ *
+ * <SplitPanel
+ *   sizes={sizes}
+ *   onSetSizes={setSizes}
+ * >
+ *   <div>Panel 1</div>
+ *   <div>Panel 2</div>
+ * </SplitPanel>
+ * ```
+ *
+ * @example With collapsible panels
+ * ```tsx
+ * const [collapsed, setCollapsed] = useState(false);
+ *
+ * <>
+ *   <Button onClick={() => setCollapsed(!collapsed)}>
+ *     {collapsed ? 'Expand' : 'Collapse'}
+ *   </Button>
+ *
+ *   <SplitPanel
+ *     collapseAll={collapsed}
+ *     sizes={[0.3, 0.7]}
+ *   >
+ *     <div>Navigation panel</div>
+ *     <div>Content panel</div>
+ *   </SplitPanel>
+ * </>
+ * ```
+ *
+ * @example With multiple panels
+ * ```tsx
+ * <SplitPanel sizes={[0.2, 0.5, 0.3]}>
+ *   <div>Left sidebar</div>
+ *   <div>Main content</div>
+ *   <div>Right sidebar</div>
+ * </SplitPanel>
+ * ```
+ */
+export declare const SplitPanel: ({ children, className, collapseAll, direction, gutterSize, onSetSizes, sizes, style, ...props }: SplitPanelProps) => import("react").JSX.Element;

package/components/split-panel/SplitPanel.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),r=require("../../tslib.es6-8c21e256.js"),t=require("react"),l=require("react-split-it"),i=require("clsx"),n=require("../../style-inject.es-d4ddeae4.js");function s(e){return e&&e.__esModule?e:{default:e}}var a=s(l),u=s(i),c="Amino_SplitPanel-module__styledWrapper--cj4W-";n.styleInject(".Amino_SplitPanel-module__styledWrapper--cj4W-{display:block;height:100%;width:100%}");var d=function(e){var t=e.childrenCount,l=e.sizes;if(0===l.length)return r.__spreadArray([1],r.__read(new Array(t-1).fill(0)),!1);if(l.length!==t){var i=Math.abs(t-l.length);return r.__spreadArray(r.__spreadArray([],r.__read(l),!1),r.__read(new Array(i).fill(1)),!1)}var n=l.reduce((function(e,r){return e+r}),0);return l.map((function(e){return e/n}))};exports.SplitPanel=function(l){var i=l.children,n=l.className,s=l.collapseAll,_=l.direction,o=l.gutterSize,p=void 0===o?3:o,f=l.onSetSizes,y=l.sizes,h=void 0===y?[1]:y,z=l.style,S=r.__rest(l,["children","className","collapseAll","direction","gutterSize","onSetSizes","sizes","style"]),A=t.Children.count(i),v=r.__read(t.useState(d({childrenCount:A,sizes:h})),1)[0];return t.useEffect((function(){if(1!==v[0]||s)s?null==f||f(r.__spreadArray([1],r.__read(new Array(A-1).fill(0)),!1)):null==f||f(d({childrenCount:A,sizes:v}));else{var e=1/A;null==f||f(new Array(A).fill(e))}}),[A,s,v,f]),React.createElement("div",{className:u.default(n,c),style:z},React.createElement(a.default,e._extends({direction:_,gutterSize:s?0:p,onSetSizes:f,sizes:d({childrenCount:A,sizes:h})},S),i))};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),r=require("../../tslib.es6-8c21e256.js"),l=require("react"),t=require("react-split-it"),i=require("clsx"),n=require("../../style-inject.es-d4ddeae4.js"),s=require("react/jsx-runtime");function a(e){return e&&e.__esModule?e:{default:e}}var u=a(t),c=a(i),d="Amino_SplitPanel-module__styledWrapper--cj4W-";n.styleInject(".Amino_SplitPanel-module__styledWrapper--cj4W-{display:block;height:100%;width:100%}");var o=function(e){var l=e.childrenCount,t=e.sizes;if(0===t.length)return r.__spreadArray([1],r.__read(new Array(l-1).fill(0)),!1);if(t.length!==l){var i=Math.abs(l-t.length);return r.__spreadArray(r.__spreadArray([],r.__read(t),!1),r.__read(new Array(i).fill(1)),!1)}var n=t.reduce((function(e,r){return e+r}),0);return t.map((function(e){return e/n}))};exports.SplitPanel=function(t){var i=t.children,n=t.className,a=t.collapseAll,_=t.direction,p=t.gutterSize,f=void 0===p?3:p,h=t.onSetSizes,y=t.sizes,S=void 0===y?[1]:y,z=t.style,j=r.__rest(t,["children","className","collapseAll","direction","gutterSize","onSetSizes","sizes","style"]),A=l.Children.count(i),v=r.__read(l.useState(o({childrenCount:A,sizes:S})),1)[0];return l.useEffect((function(){if(1!==v[0]||a)a?null==h||h(r.__spreadArray([1],r.__read(new Array(A-1).fill(0)),!1)):null==h||h(o({childrenCount:A,sizes:v}));else{var e=1/A;null==h||h(new Array(A).fill(e))}}),[A,a,v,h]),s.jsx("div",{className:c.default(n,d),style:z,children:s.jsx(u.default,e._objectSpread2(e._objectSpread2({direction:_,gutterSize:a?0:f,onSetSizes:h,sizes:o({childrenCount:A,sizes:S})},j),{},{children:i}))})};

package/components/stack/HStack.d.ts

@@ -0,0 +1,44 @@
+import { type StackProps } from "./Stack";
+/**
+ * HStack component arranges children horizontally with consistent spacing.
+ * It's a specialized version of Stack that automatically sets horizontal layout.
+ *
+ * @example Basic horizontal layout
+ * <HStack>
+ *   <div>Left item</div>
+ *   <div>Middle item</div>
+ *   <div>Right item</div>
+ * </HStack>
+ *
+ * @example Custom spacing
+ * <HStack spacing={8}>
+ *   <Button>Save</Button>
+ *   <Button>Cancel</Button>
+ * </HStack>
+ *
+ * @example With center alignment
+ * <HStack alignment="center">
+ *   <Badge>New</Badge>
+ *   <Text>Product title</Text>
+ * </HStack>
+ *
+ * @example With space between items
+ * <HStack alignment="space-between">
+ *   <div>Left aligned</div>
+ *   <div>Right aligned</div>
+ * </HStack>
+ *
+ * @example With buttons and consistent spacing
+ * <HStack spacing={16}>
+ *   <Button variant="primary">Submit</Button>
+ *   <Button variant="standard">Cancel</Button>
+ *   <Button variant="link">Learn more</Button>
+ * </HStack>
+ *
+ * @example Form actions layout
+ * <HStack alignment="end" spacing={8}>
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="standard">Cancel</Button>
+ * </HStack>
+ */
+export declare const HStack: ({ children, className, spacing, style, ...props }: StackProps) => import("react").JSX.Element;

package/components/stack/HStack.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),s=require("../../tslib.es6-8c21e256.js"),a=require("clsx"),t=require("./Stack.js"),c=require("../../style-inject.es-d4ddeae4.js");function l(e){return e&&e.__esModule?e:{default:e}}var r=l(a),i="Amino_HStack-module__styledHStack--sbuQ3";c.styleInject(".Amino_HStack-module__styledHStack--sbuQ3{grid-column-gap:var(--amino-h-stack-gap);grid-auto-flow:column}");exports.HStack=function(a){var c=a.children,l=a.className,n=a.spacing,u=void 0===n?24:n,o=a.style,_=s.__rest(a,["children","className","spacing","style"]);return React.createElement(t.Stack,e._extends({className:r.default(l,i),style:s.__assign(s.__assign({},o),{"--amino-h-stack-gap":"".concat(u,"px")})},_),c)};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),s=require("../../tslib.es6-8c21e256.js"),a=require("clsx"),t=require("./Stack.js"),r=require("../../style-inject.es-d4ddeae4.js"),c=require("react/jsx-runtime");function l(e){return e&&e.__esModule?e:{default:e}}var i=l(a),n="Amino_HStack-module__styledHStack--sbuQ3";r.styleInject(".Amino_HStack-module__styledHStack--sbuQ3{grid-column-gap:var(--amino-h-stack-gap);grid-auto-flow:column}");exports.HStack=function(a){var r=a.children,l=a.className,u=a.spacing,o=void 0===u?24:u,_=a.style,d=s.__rest(a,["children","className","spacing","style"]);return c.jsx(t.Stack,e._objectSpread2(e._objectSpread2({className:i.default(l,n),style:s.__assign(s.__assign({},_),{"--amino-h-stack-gap":"".concat(o,"px")})},d),{},{children:r}))};

package/components/stack/Stack.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { GridAlignment, GridSpacing } from "../../types/GridSpacing";
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'translate' | 'style' | 'prefix' | 'contentEditable' | 'inputMode' | 'children'>;
+export type StackProps = {
+    /** @default 'unset' */
+    alignment?: GridAlignment;
+    children: ReactNode;
+    /** @default 24 */
+    spacing?: GridSpacing;
+} & DivProps & BaseProps;
+/**
+ * Stack component creates a container for vertical or horizontal layouts with consistent spacing between items.
+ * It serves as the base component for more specific HStack and VStack components.
+ *
+ * @example Basic stack
+ * <Stack spacing={16}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stack>
+ *
+ * @example With different spacing values
+ * <Stack spacing={8}>
+ *   <div>Closely spaced items</div>
+ *   <div>With 8px gap</div>
+ * </Stack>
+ *
+ * <Stack spacing={24}>
+ *   <div>Standard spacing</div>
+ *   <div>With 24px gap</div>
+ * </Stack>
+ *
+ * <Stack spacing={32}>
+ *   <div>Widely spaced items</div>
+ *   <div>With 32px gap</div>
+ * </Stack>
+ *
+ * @example With alignment
+ * <Stack alignment="center">
+ *   <div>Centered content</div>
+ *   <div>Also centered</div>
+ * </Stack>
+ *
+ * <Stack alignment="end">
+ *   <div>Right/end aligned content</div>
+ *   <div>Also right/end aligned</div>
+ * </Stack>
+ *
+ * @example With custom className
+ * <Stack className="custom-stack" spacing={16}>
+ *   <div>Custom styled stack</div>
+ *   <div>With additional classes</div>
+ * </Stack>
+ *
+ * @example Combining with other components
+ * <Stack spacing={16}>
+ *   <Card>First card</Card>
+ *   <Card>Second card</Card>
+ *   <Button>Action button</Button>
+ * </Stack>
+ */
+export declare const Stack: ({ alignment, children, className, style, ...otherProps }: StackProps) => import("react").JSX.Element;
+export {};

package/components/stack/Stack.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),t=require("../../tslib.es6-8c21e256.js"),s=require("clsx"),a=require("../../style-inject.es-d4ddeae4.js");function l(e){return e&&e.__esModule?e:{default:e}}var n=l(s),i="Amino_Stack-module__styledStack--L5tSA";a.styleInject(".Amino_Stack-module__styledStack--L5tSA{display:grid;grid-auto-columns:minmax(0,1fr)}.Amino_Stack-module__styledStack--L5tSA>*{justify-self:var(--amino-stack-alignment)}");exports.Stack=function(s){var a=s.alignment,l=s.children,r=s.className,c=s.style,u=t.__rest(s,["alignment","children","className","style"]);return React.createElement("div",e._extends({className:n.default(r,i),style:t.__assign(t.__assign({},c),{"--amino-stack-alignment":a||"unset"})},u),l)};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),t=require("../../tslib.es6-8c21e256.js"),s=require("clsx"),a=require("../../style-inject.es-d4ddeae4.js"),l=require("react/jsx-runtime");function r(e){return e&&e.__esModule?e:{default:e}}var i=r(s),n="Amino_Stack-module__styledStack--L5tSA";a.styleInject(".Amino_Stack-module__styledStack--L5tSA{display:grid;grid-auto-columns:minmax(0,1fr)}.Amino_Stack-module__styledStack--L5tSA>*{justify-self:var(--amino-stack-alignment)}");exports.Stack=function(s){var a=s.alignment,r=s.children,c=s.className,u=s.style,_=t.__rest(s,["alignment","children","className","style"]);return l.jsx("div",e._objectSpread2(e._objectSpread2({className:i.default(c,n),style:t.__assign(t.__assign({},u),{"--amino-stack-alignment":a||"unset"})},_),{},{children:r}))};

package/components/stack/VStack.d.ts

@@ -0,0 +1,53 @@
+import { type StackProps } from "./Stack";
+/**
+ * VStack component arranges children vertically with consistent spacing.
+ * It's a specialized version of Stack that automatically sets vertical layout.
+ *
+ * @example Basic vertical layout
+ * <VStack>
+ *   <div>Top item</div>
+ *   <div>Middle item</div>
+ *   <div>Bottom item</div>
+ * </VStack>
+ *
+ * @example Custom spacing
+ * <VStack spacing={16}>
+ *   <Text type="header">Section Title</Text>
+ *   <Text>Description text for this section that explains what it does.</Text>
+ *   <Button>Action</Button>
+ * </VStack>
+ *
+ * @example With center alignment
+ * <VStack alignment="center">
+ *   <Badge>Featured</Badge>
+ *   <Text>Product name</Text>
+ *   <Text>$19.99</Text>
+ * </VStack>
+ *
+ * @example Form layout
+ * <VStack spacing={12}>
+ *   <Input label="Name" />
+ *   <Input label="Email" />
+ *   <Input label="Password" type="password" />
+ *   <Checkbox label="I agree to terms" />
+ *   <Button variant="primary">Sign up</Button>
+ * </VStack>
+ *
+ * @example Content sections
+ * <VStack spacing={32}>
+ *   <Card>Section 1 content</Card>
+ *   <Card>Section 2 content</Card>
+ *   <Card>Section 3 content</Card>
+ * </VStack>
+ *
+ * @example With different spacing for visual hierarchy
+ * <VStack spacing={8}>
+ *   <Text type="bold-subheader">Group Title</Text>
+ *   <VStack spacing={4}>
+ *     <Text>Item 1</Text>
+ *     <Text>Item 2</Text>
+ *     <Text>Item 3</Text>
+ *   </VStack>
+ * </VStack>
+ */
+export declare const VStack: ({ children, className, spacing, style, ...props }: StackProps) => import("react").JSX.Element;

package/components/stack/VStack.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),s=require("../../tslib.es6-8c21e256.js"),a=require("clsx"),t=require("./Stack.js"),r=require("../../style-inject.es-d4ddeae4.js");function c(e){return e&&e.__esModule?e:{default:e}}var l=c(a),i="Amino_VStack-module__styledVStack--GCZhv";r.styleInject(".Amino_VStack-module__styledVStack--GCZhv{grid-row-gap:var(--amino-v-stack-gap);grid-auto-flow:row}");exports.VStack=function(a){var r=a.children,c=a.className,n=a.spacing,u=void 0===n?24:n,o=a.style,_=s.__rest(a,["children","className","spacing","style"]);return React.createElement(t.Stack,e._extends({className:l.default(c,i),style:s.__assign(s.__assign({},o),{"--amino-v-stack-gap":"".concat(u,"px")})},_),r)};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),s=require("../../tslib.es6-8c21e256.js"),a=require("clsx"),r=require("./Stack.js"),t=require("../../style-inject.es-d4ddeae4.js"),c=require("react/jsx-runtime");function i(e){return e&&e.__esModule?e:{default:e}}var l=i(a),n="Amino_VStack-module__styledVStack--GCZhv";t.styleInject(".Amino_VStack-module__styledVStack--GCZhv{grid-row-gap:var(--amino-v-stack-gap);grid-auto-flow:row}");exports.VStack=function(a){var t=a.children,i=a.className,u=a.spacing,o=void 0===u?24:u,_=a.style,d=s.__rest(a,["children","className","spacing","style"]);return c.jsx(r.Stack,e._objectSpread2(e._objectSpread2({className:l.default(i,n),style:s.__assign(s.__assign({},_),{"--amino-v-stack-gap":"".concat(o,"px")})},d),{},{children:t}))};

package/components/surface/Surface.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Depth } from "../../types/Depth";
+type Props = BaseProps & {
+    /**
+     * Content to be displayed within the surface
+     */
+    children: ReactNode;
+    /**
+     * Reduces the surface's padding for more compact layouts
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Controls the elevation depth of the surface
+     * @default 'depth4'
+     */
+    depth?: Depth;
+};
+/**
+ * Surface component provides an elevated container with customizable depth
+ * for creating visual hierarchy in layouts.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Surface>
+ *   <Card>
+ *     <Text>Content with default elevation</Text>
+ *   </Card>
+ * </Surface>
+ * ```
+ *
+ * @example With custom depth
+ * ```tsx
+ * <Surface depth="depth8">
+ *   <Card>
+ *     <Text>Content with increased elevation</Text>
+ *   </Card>
+ * </Surface>
+ * ```
+ *
+ * @example Dense surface for compact layouts
+ * ```tsx
+ * <Surface dense>
+ *   <Card>
+ *     <Text>Content with reduced padding</Text>
+ *   </Card>
+ * </Surface>
+ * ```
+ *
+ * @example Multiple nested surfaces for hierarchy
+ * ```tsx
+ * <Surface depth="depth1">
+ *   <Text>Base layer</Text>
+ *   <Surface depth="depth4">
+ *     <Text>Middle layer</Text>
+ *     <Surface depth="depth8">
+ *       <Text>Top layer</Text>
+ *     </Surface>
+ *   </Surface>
+ * </Surface>
+ * ```
+ */
+export declare const Surface: ({ children, className, dense, depth, style, }: Props) => import("react").JSX.Element;
+export {};

package/components/surface/Surface.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),a=require("../../style-inject.es-d4ddeae4.js");function o(e){return e&&e.__esModule?e:{default:e}}var r=o(e),d={surfaceBase:"Amino_Surface-module__surfaceBase--kTy01",dense:"Amino_Surface-module__dense--kLwc3",depth4:"Amino_Surface-module__depth4--B3yw8",depth8:"Amino_Surface-module__depth8--NDOvt",depth16:"Amino_Surface-module__depth16--vDCOy",depth64:"Amino_Surface-module__depth64--pyxEJ"};a.styleInject(".Amino_Surface-module__surfaceBase--kTy01{background:var(--amino-surface-color);border-radius:var(--amino-radius-8);color:var(--amino-text-color);padding:24px}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__dense--kLwc3{border-radius:var(--amino-radius-6)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth4--B3yw8{border:var(--amino-border);box-shadow:var(--amino-v3-shadow-base)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth8--NDOvt{box-shadow:var(--amino-v3-shadow-medium)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth16--vDCOy{box-shadow:var(--amino-v3-shadow-large)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth64--pyxEJ{box-shadow:var(--amino-v3-shadow-xl)}");exports.Surface=function(e){var a=e.children,o=e.className,u=e.dense,_=void 0!==u&&u,s=e.depth,m=void 0===s?"depth4":s,c=e.style,n=r.default(o,d.surfaceBase,"elevated",_&&d.dense,m&&d[m]);return React.createElement("div",{className:n,style:c},a)};
+"use strict";var e=require("clsx"),a=require("../../style-inject.es-d4ddeae4.js"),r=require("react/jsx-runtime");function o(e){return e&&e.__esModule?e:{default:e}}var d=o(e),u={surfaceBase:"Amino_Surface-module__surfaceBase--kTy01",dense:"Amino_Surface-module__dense--kLwc3",depth4:"Amino_Surface-module__depth4--B3yw8",depth8:"Amino_Surface-module__depth8--NDOvt",depth16:"Amino_Surface-module__depth16--vDCOy",depth64:"Amino_Surface-module__depth64--pyxEJ"};a.styleInject(".Amino_Surface-module__surfaceBase--kTy01{background:var(--amino-surface-color);border-radius:var(--amino-radius-8);color:var(--amino-text-color);padding:24px}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__dense--kLwc3{border-radius:var(--amino-radius-6)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth4--B3yw8{border:var(--amino-border);box-shadow:var(--amino-v3-shadow-base)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth8--NDOvt{box-shadow:var(--amino-v3-shadow-medium)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth16--vDCOy{box-shadow:var(--amino-v3-shadow-large)}.Amino_Surface-module__surfaceBase--kTy01.Amino_Surface-module__depth64--pyxEJ{box-shadow:var(--amino-v3-shadow-xl)}");exports.Surface=function(e){var a=e.children,o=e.className,s=e.dense,_=void 0!==s&&s,m=e.depth,c=void 0===m?"depth4":m,i=e.style,n=d.default(o,u.surfaceBase,"elevated",_&&u.dense,c&&u[c]);return r.jsx("div",{className:n,style:i,children:a})};