@pantool/components 1.0.0-alpha.0

package/dist/atoms/text/text.css

@@ -0,0 +1,273 @@
+.D5_2ra_root {
+  --txt-color: currentColor;
+  --txt-size: inherit;
+  --txt-weight: inherit;
+  --txt-line-height: inherit;
+  color: var(--txt-color);
+  font-size: var(--txt-size);
+  font-weight: var(--txt-weight);
+  font-family: var(--typography-typeface-ltr);
+  margin: 0;
+  padding: 0;
+  transition: color .2s ease-in-out;
+}
+
+.D5_2ra_root[data-display="inline"] {
+  display: inline;
+}
+
+.D5_2ra_root[data-display="block"] {
+  display: block;
+}
+
+.D5_2ra_root[data-display="inline-block"] {
+  display: inline-block;
+}
+
+.D5_2ra_root[data-align="left"] {
+  text-align: left;
+}
+
+.D5_2ra_root[data-align="right"] {
+  text-align: right;
+}
+
+.D5_2ra_root[data-align="center"] {
+  text-align: center;
+}
+
+.D5_2ra_root[data-align="justify"] {
+  text-align: justify;
+}
+
+.D5_2ra_root[data-align="start"] {
+  text-align: start;
+}
+
+.D5_2ra_root[data-align="end"] {
+  text-align: end;
+}
+
+.D5_2ra_root[data-no-wrap] {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.D5_2ra_root[data-text-overflow="clip"] {
+  text-overflow: clip;
+}
+
+.D5_2ra_root[data-text-overflow="ellipsis"] {
+  text-overflow: ellipsis;
+}
+
+.D5_2ra_root[data-weight="100"] {
+  --txt-weight: 100 !important;
+}
+
+.D5_2ra_root[data-weight="200"] {
+  --txt-weight: 200 !important;
+}
+
+.D5_2ra_root[data-weight="300"] {
+  --txt-weight: 300 !important;
+}
+
+.D5_2ra_root[data-weight="400"] {
+  --txt-weight: 400 !important;
+}
+
+.D5_2ra_root[data-weight="500"] {
+  --txt-weight: 500 !important;
+}
+
+.D5_2ra_root[data-weight="600"] {
+  --txt-weight: 600 !important;
+}
+
+.D5_2ra_root[data-weight="700"] {
+  --txt-weight: 700 !important;
+}
+
+.D5_2ra_root[data-weight="800"] {
+  --txt-weight: 800 !important;
+}
+
+.D5_2ra_root[data-weight="900"] {
+  --txt-weight: 900 !important;
+}
+
+.D5_2ra_root[data-variant="h1"] {
+  --txt-size: var(--typography-heading-h1-size);
+  --txt-weight: var(--typography-heading-h1-weight);
+}
+
+.D5_2ra_root[data-variant="h2"] {
+  --txt-size: var(--typography-heading-h2-size);
+  --txt-weight: var(--typography-heading-h2-weight);
+}
+
+.D5_2ra_root[data-variant="h3"] {
+  --txt-size: var(--typography-heading-h3-size);
+  --txt-weight: var(--typography-heading-h3-weight);
+}
+
+.D5_2ra_root[data-variant="h4"] {
+  --txt-size: var(--typography-heading-h4-size);
+  --txt-weight: var(--typography-heading-h4-weight);
+}
+
+.D5_2ra_root[data-variant="h5"] {
+  --txt-size: var(--typography-heading-h5-size);
+  --txt-weight: var(--typography-heading-h5-weight);
+}
+
+.D5_2ra_root[data-variant="h6"] {
+  --txt-size: var(--typography-heading-h6-size);
+  --txt-weight: var(--typography-heading-h6-weight);
+}
+
+.D5_2ra_root[data-variant="subheading1"] {
+  --txt-size: var(--typography-subheading-1-size);
+  --txt-weight: var(--typography-subheading-1-weight);
+}
+
+.D5_2ra_root[data-variant="subheading2"] {
+  --txt-size: var(--typography-subheading-2-size);
+  --txt-weight: var(--typography-subheading-2-weight);
+}
+
+.D5_2ra_root[data-variant="body1"] {
+  --txt-size: var(--typography-body-1-size);
+  --txt-weight: var(--typography-body-1-weight);
+}
+
+.D5_2ra_root[data-variant="body2"] {
+  --txt-size: var(--typography-body-2-size);
+  --txt-weight: var(--typography-body-2-weight);
+}
+
+.D5_2ra_root[data-variant="caption"] {
+  --txt-size: var(--typography-caption-base-size);
+  --txt-weight: var(--typography-caption-base-weight);
+}
+
+.D5_2ra_root[data-color="normal"] {
+  --txt-color: var(--color-content-neutral-base);
+}
+
+.D5_2ra_root[data-color="secondary"] {
+  --txt-color: var(--color-content-neutral-secondary);
+}
+
+.D5_2ra_root[data-color="tertiary"] {
+  --txt-color: var(--color-content-neutral-tertiary);
+}
+
+.D5_2ra_root[data-color="muted"] {
+  --txt-color: var(--color-content-neutral-muted);
+}
+
+.D5_2ra_root[data-color="brand"] {
+  --txt-color: var(--color-content-brand-base);
+}
+
+.D5_2ra_root[data-color="brand-secondary"] {
+  --txt-color: var(--color-content-brand-secondary);
+}
+
+.D5_2ra_root[data-color="brand-tertiary"] {
+  --txt-color: var(--color-content-brand-tertiary);
+}
+
+.D5_2ra_root[data-color="brand-muted"] {
+  --txt-color: var(--color-content-brand-muted);
+}
+
+.D5_2ra_root[data-color="positive"] {
+  --txt-color: var(--color-content-positive-base);
+}
+
+.D5_2ra_root[data-color="positive-secondary"] {
+  --txt-color: var(--color-content-positive-secondary);
+}
+
+.D5_2ra_root[data-color="positive-tertiary"] {
+  --txt-color: var(--color-content-positive-tertiary);
+}
+
+.D5_2ra_root[data-color="positive-muted"] {
+  --txt-color: var(--color-content-positive-muted);
+}
+
+.D5_2ra_root[data-color="negative"] {
+  --txt-color: var(--color-content-negative-base);
+}
+
+.D5_2ra_root[data-color="negative-secondary"] {
+  --txt-color: var(--color-content-negative-secondary);
+}
+
+.D5_2ra_root[data-color="negative-tertiary"] {
+  --txt-color: var(--color-content-negative-tertiary);
+}
+
+.D5_2ra_root[data-color="negative-muted"] {
+  --txt-color: var(--color-content-negative-muted);
+}
+
+.D5_2ra_root[data-color="warn"] {
+  --txt-color: var(--color-content-warn-base);
+}
+
+.D5_2ra_root[data-color="warn-secondary"] {
+  --txt-color: var(--color-content-warn-secondary);
+}
+
+.D5_2ra_root[data-color="warn-tertiary"] {
+  --txt-color: var(--color-content-warn-tertiary);
+}
+
+.D5_2ra_root[data-color="warn-muted"] {
+  --txt-color: var(--color-content-warn-muted);
+}
+
+.D5_2ra_root[data-color="info"] {
+  --txt-color: var(--color-content-info-base);
+}
+
+.D5_2ra_root[data-color="info-secondary"] {
+  --txt-color: var(--color-content-info-secondary);
+}
+
+.D5_2ra_root[data-color="info-tertiary"] {
+  --txt-color: var(--color-content-info-tertiary);
+}
+
+.D5_2ra_root[data-color="info-muted"] {
+  --txt-color: var(--color-content-info-muted);
+}
+
+.D5_2ra_root[data-color="on-neutral"] {
+  --txt-color: var(--color-on-neutral);
+}
+
+.D5_2ra_root[data-color="on-brand"] {
+  --txt-color: var(--color-on-brand);
+}
+
+.D5_2ra_root[data-color="on-positive"] {
+  --txt-color: var(--color-on-positive);
+}
+
+.D5_2ra_root[data-color="on-negative"] {
+  --txt-color: var(--color-on-negative);
+}
+
+.D5_2ra_root[data-color="on-warn"] {
+  --txt-color: var(--color-on-warn);
+}
+
+.D5_2ra_root[data-color="on-info"] {
+  --txt-color: var(--color-on-info);
+}

package/dist/atoms/text/text.d.ts

@@ -0,0 +1,18 @@
+import { PolymorphicProps, WithBaseProps, WithColorProps } from "../../types.js";
+import * as React from "react";
+
+//#region src/atoms/text/text.d.ts
+type TextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subheading1" | "subheading2" | "body1" | "body2" | "caption";
+type TextColor = "currentcolor" | "normal" | "secondary" | "tertiary" | "muted" | "brand" | "brand-secondary" | "brand-tertiary" | "brand-muted" | "positive" | "positive-secondary" | "positive-tertiary" | "positive-muted" | "negative" | "negative-secondary" | "negative-tertiary" | "negative-muted" | "warn" | "warn-secondary" | "warn-tertiary" | "warn-muted" | "info" | "info-secondary" | "info-tertiary" | "info-muted" | "on-neutral" | "on-brand" | "on-positive" | "on-negative" | "on-warn" | "on-info";
+type TextProps<E extends React.ElementType = "span"> = PolymorphicProps<E, WithBaseProps<WithColorProps<{
+  /** Applies the theme typography styles. */variant: TextVariant; /** Set the text-align on the text. */
+  align?: "left" | "center" | "right" | "justify" | "start" | "end"; /** Set the font-weight on the text. Overrides variant default if provided. */
+  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; /** Set the display property. */
+  display?: "inline" | "block" | "inline-block"; /** Set the text-overflow strategy. @default "ellipsis" */
+  textOverflow?: "clip" | "ellipsis"; /** If true, text will not wrap and will overflow based on `textOverflow`. @default false */
+  noWrap?: boolean;
+}>>>;
+declare const Text: <E extends React.ElementType = "span">(props: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Text, TextColor, TextProps, TextVariant };
+//# sourceMappingURL=text.d.ts.map

package/dist/atoms/text/text.js

@@ -0,0 +1,2 @@
+import e from"./text.module.js";import"react";import{jsx as t}from"react/jsx-runtime";const n=n=>{let{children:r,className:i,variant:a,align:o,display:s,weight:c,as:l=`span`,color:u=`currentcolor`,noWrap:d=!1,textOverflow:f=`ellipsis`,...p}=n;return t(l,{...p,className:`${e.root} ${i||``}`.trim(),"data-variant":a,"data-color":u,"data-align":o,"data-weight":c,"data-display":s,"data-text-overflow":f,"data-no-wrap":d?``:void 0,children:r})};export{n as Text};
+//# sourceMappingURL=text.js.map

package/dist/atoms/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":["styles"],"sources":["../../../src/atoms/text/text.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type {\n  PolymorphicProps,\n  WithBaseProps,\n  WithColorProps,\n} from \"../../types.ts\";\nimport styles from \"./text.module.css\";\n\nexport type TextVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subheading1\"\n  | \"subheading2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\";\n\nexport type TextColor =\n  | \"currentcolor\"\n  | \"normal\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"muted\"\n  | \"brand\"\n  | \"brand-secondary\"\n  | \"brand-tertiary\"\n  | \"brand-muted\"\n  | \"positive\"\n  | \"positive-secondary\"\n  | \"positive-tertiary\"\n  | \"positive-muted\"\n  | \"negative\"\n  | \"negative-secondary\"\n  | \"negative-tertiary\"\n  | \"negative-muted\"\n  | \"warn\"\n  | \"warn-secondary\"\n  | \"warn-tertiary\"\n  | \"warn-muted\"\n  | \"info\"\n  | \"info-secondary\"\n  | \"info-tertiary\"\n  | \"info-muted\"\n  | \"on-neutral\"\n  | \"on-brand\"\n  | \"on-positive\"\n  | \"on-negative\"\n  | \"on-warn\"\n  | \"on-info\";\n\nexport type TextProps<E extends React.ElementType = \"span\"> = PolymorphicProps<\n  E,\n  WithBaseProps<\n    WithColorProps<{\n      /** Applies the theme typography styles. */\n      variant: TextVariant;\n      /** Set the text-align on the text. */\n      align?: \"left\" | \"center\" | \"right\" | \"justify\" | \"start\" | \"end\";\n      /** Set the font-weight on the text. Overrides variant default if provided. */\n      weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;\n      /** Set the display property. */\n      display?: \"inline\" | \"block\" | \"inline-block\";\n      /** Set the text-overflow strategy. @default \"ellipsis\" */\n      textOverflow?: \"clip\" | \"ellipsis\";\n      /** If true, text will not wrap and will overflow based on `textOverflow`. @default false */\n      noWrap?: boolean;\n    }>\n  >\n>;\n\nexport const Text = <E extends React.ElementType = \"span\">(\n  props: TextProps<E>,\n) => {\n  const {\n    children,\n    className,\n    variant,\n    align,\n    display,\n    weight,\n    as: Root = \"span\",\n    color = \"currentcolor\",\n    noWrap = false,\n    textOverflow = \"ellipsis\",\n    ...otherProps\n  } = props as any; // Type asserted to any to satisfy Polymorphic wrapper internals\n\n  return (\n    <Root\n      {...otherProps}\n      className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n      data-variant={variant}\n      data-color={color}\n      data-align={align}\n      data-weight={weight}\n      data-display={display}\n      data-text-overflow={textOverflow}\n      data-no-wrap={noWrap ? \"\" : undefined}\n    >\n      {children}\n    </Root>\n  );\n};\n"],"mappings":"sFA0EA,MAAa,EACX,GACG,CACH,GAAM,CACJ,WACA,YACA,UACA,QACA,UACA,SACA,GAAI,EAAO,OACX,QAAQ,eACR,SAAS,GACT,eAAe,WACf,GAAG,GACD,EAEJ,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,GAAGA,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,eAAc,EACd,aAAY,EACZ,aAAY,EACZ,cAAa,EACb,eAAc,EACd,qBAAoB,EACpB,eAAc,EAAS,GAAK,IAAA,GAE3B,UACG,CAAA,CAEV"}

package/dist/atoms/text/text.module.js

@@ -0,0 +1,2 @@
+var e={root:`D5_2ra_root`};export{e as default};
+//# sourceMappingURL=text.module.js.map

package/dist/atoms/text/text.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.module.js","names":[],"sources":["../../../src/atoms/text/text.module.css"],"sourcesContent":[".root {\n  /* Internal local variables */\n  --txt-color: currentColor;\n  --txt-size: inherit;\n  --txt-weight: inherit;\n  --txt-line-height: inherit;\n\n  /* Base properties mapped to local variables */\n  color: var(--txt-color);\n  font-size: var(--txt-size);\n  font-weight: var(--txt-weight);\n  /* line-height: var(--txt-line-height); */\n\n  /* Defaults */\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-typeface-ltr);\n  transition: color 0.2s ease-in-out;\n}\n\n/* --- Layout & Alignment --- */\n.root[data-display=\"inline\"] {\n  display: inline;\n}\n.root[data-display=\"block\"] {\n  display: block;\n}\n.root[data-display=\"inline-block\"] {\n  display: inline-block;\n}\n\n.root[data-align=\"left\"] {\n  text-align: left;\n}\n.root[data-align=\"right\"] {\n  text-align: right;\n}\n.root[data-align=\"center\"] {\n  text-align: center;\n}\n.root[data-align=\"justify\"] {\n  text-align: justify;\n}\n.root[data-align=\"start\"] {\n  text-align: start;\n}\n.root[data-align=\"end\"] {\n  text-align: end;\n}\n\n/* --- Text Overflow --- */\n.root[data-no-wrap] {\n  white-space: nowrap;\n  overflow: hidden;\n}\n.root[data-text-overflow=\"clip\"] {\n  text-overflow: clip;\n}\n.root[data-text-overflow=\"ellipsis\"] {\n  text-overflow: ellipsis;\n}\n\n/* --- Custom Weights (Overrides variant defaults) --- */\n.root[data-weight=\"100\"] {\n  --txt-weight: 100 !important;\n}\n.root[data-weight=\"200\"] {\n  --txt-weight: 200 !important;\n}\n.root[data-weight=\"300\"] {\n  --txt-weight: 300 !important;\n}\n.root[data-weight=\"400\"] {\n  --txt-weight: 400 !important;\n}\n.root[data-weight=\"500\"] {\n  --txt-weight: 500 !important;\n}\n.root[data-weight=\"600\"] {\n  --txt-weight: 600 !important;\n}\n.root[data-weight=\"700\"] {\n  --txt-weight: 700 !important;\n}\n.root[data-weight=\"800\"] {\n  --txt-weight: 800 !important;\n}\n.root[data-weight=\"900\"] {\n  --txt-weight: 900 !important;\n}\n\n/* --- Typography Variants --- */\n.root[data-variant=\"h1\"] {\n  --txt-size: var(--typography-heading-h1-size);\n  --txt-weight: var(--typography-heading-h1-weight);\n  /* --txt-line-height: var(--typography-heading-h1-height); */\n}\n.root[data-variant=\"h2\"] {\n  --txt-size: var(--typography-heading-h2-size);\n  --txt-weight: var(--typography-heading-h2-weight);\n  /* --txt-line-height: var(--typography-heading-h2-height); */\n}\n.root[data-variant=\"h3\"] {\n  --txt-size: var(--typography-heading-h3-size);\n  --txt-weight: var(--typography-heading-h3-weight);\n  /* --txt-line-height: var(--typography-heading-h3-height); */\n}\n.root[data-variant=\"h4\"] {\n  --txt-size: var(--typography-heading-h4-size);\n  --txt-weight: var(--typography-heading-h4-weight);\n  /* --txt-line-height: var(--typography-heading-h4-height); */\n}\n.root[data-variant=\"h5\"] {\n  --txt-size: var(--typography-heading-h5-size);\n  --txt-weight: var(--typography-heading-h5-weight);\n  /* --txt-line-height: var(--typography-heading-h5-height); */\n}\n.root[data-variant=\"h6\"] {\n  --txt-size: var(--typography-heading-h6-size);\n  --txt-weight: var(--typography-heading-h6-weight);\n  /* --txt-line-height: var(--typography-heading-h6-height); */\n}\n.root[data-variant=\"subheading1\"] {\n  --txt-size: var(--typography-subheading-1-size);\n  --txt-weight: var(--typography-subheading-1-weight);\n  /* --txt-line-height: var(--typography-subheading-1-height); */\n}\n.root[data-variant=\"subheading2\"] {\n  --txt-size: var(--typography-subheading-2-size);\n  --txt-weight: var(--typography-subheading-2-weight);\n  /* --txt-line-height: var(--typography-subheading-2-height); */\n}\n.root[data-variant=\"body1\"] {\n  --txt-size: var(--typography-body-1-size);\n  --txt-weight: var(--typography-body-1-weight);\n  /* --txt-line-height: var(--typography-body-1-height); */\n}\n.root[data-variant=\"body2\"] {\n  --txt-size: var(--typography-body-2-size);\n  --txt-weight: var(--typography-body-2-weight);\n  /* --txt-line-height: var(--typography-body-2-height); */\n}\n.root[data-variant=\"caption\"] {\n  --txt-size: var(--typography-caption-base-size);\n  --txt-weight: var(--typography-caption-base-weight);\n  /* --txt-line-height: var(--typography-caption-base-height); */\n}\n\n/* --- Color Variants --- */\n.root[data-color=\"normal\"] {\n  --txt-color: var(--color-content-neutral-base);\n}\n.root[data-color=\"secondary\"] {\n  --txt-color: var(--color-content-neutral-secondary);\n}\n.root[data-color=\"tertiary\"] {\n  --txt-color: var(--color-content-neutral-tertiary);\n}\n.root[data-color=\"muted\"] {\n  --txt-color: var(--color-content-neutral-muted);\n}\n\n.root[data-color=\"brand\"] {\n  --txt-color: var(--color-content-brand-base);\n}\n.root[data-color=\"brand-secondary\"] {\n  --txt-color: var(--color-content-brand-secondary);\n}\n.root[data-color=\"brand-tertiary\"] {\n  --txt-color: var(--color-content-brand-tertiary);\n}\n.root[data-color=\"brand-muted\"] {\n  --txt-color: var(--color-content-brand-muted);\n}\n\n.root[data-color=\"positive\"] {\n  --txt-color: var(--color-content-positive-base);\n}\n.root[data-color=\"positive-secondary\"] {\n  --txt-color: var(--color-content-positive-secondary);\n}\n.root[data-color=\"positive-tertiary\"] {\n  --txt-color: var(--color-content-positive-tertiary);\n}\n.root[data-color=\"positive-muted\"] {\n  --txt-color: var(--color-content-positive-muted);\n}\n\n.root[data-color=\"negative\"] {\n  --txt-color: var(--color-content-negative-base);\n}\n.root[data-color=\"negative-secondary\"] {\n  --txt-color: var(--color-content-negative-secondary);\n}\n.root[data-color=\"negative-tertiary\"] {\n  --txt-color: var(--color-content-negative-tertiary);\n}\n.root[data-color=\"negative-muted\"] {\n  --txt-color: var(--color-content-negative-muted);\n}\n\n.root[data-color=\"warn\"] {\n  --txt-color: var(--color-content-warn-base);\n}\n.root[data-color=\"warn-secondary\"] {\n  --txt-color: var(--color-content-warn-secondary);\n}\n.root[data-color=\"warn-tertiary\"] {\n  --txt-color: var(--color-content-warn-tertiary);\n}\n.root[data-color=\"warn-muted\"] {\n  --txt-color: var(--color-content-warn-muted);\n}\n\n.root[data-color=\"info\"] {\n  --txt-color: var(--color-content-info-base);\n}\n.root[data-color=\"info-secondary\"] {\n  --txt-color: var(--color-content-info-secondary);\n}\n.root[data-color=\"info-tertiary\"] {\n  --txt-color: var(--color-content-info-tertiary);\n}\n.root[data-color=\"info-muted\"] {\n  --txt-color: var(--color-content-info-muted);\n}\n\n/* On-Backgrounds */\n.root[data-color=\"on-neutral\"] {\n  --txt-color: var(--color-on-neutral);\n}\n.root[data-color=\"on-brand\"] {\n  --txt-color: var(--color-on-brand);\n}\n.root[data-color=\"on-positive\"] {\n  --txt-color: var(--color-on-positive);\n}\n.root[data-color=\"on-negative\"] {\n  --txt-color: var(--color-on-negative);\n}\n.root[data-color=\"on-warn\"] {\n  --txt-color: var(--color-on-warn);\n}\n.root[data-color=\"on-info\"] {\n  --txt-color: var(--color-on-info);\n}\n"],"mappings":"AAEA,IAAA,EAAc,CAAA,KAAC,aAAA"}

package/dist/atoms/toast/index.d.ts

@@ -0,0 +1 @@
+import { Toast, ToastData, ToastProps } from "./toast.js";

package/dist/atoms/toast/index.js

@@ -0,0 +1 @@
+import"./toast.js";

package/dist/atoms/toast/toast.css

@@ -0,0 +1,151 @@
+.dLl3pG_root {
+  --gap: .75rem;
+  --peek: .75rem;
+  --scale: calc(max(0, 1 - (var(--toast-index) * .1)));
+  --shrink: calc(1 - var(--scale));
+  --height: var(--toast-frontmost-height, var(--toast-height));
+  --offset-y: calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
+      var(--toast-swipe-movement-y));
+  --background: var(--color-surface-secondary);
+  --foreground: var(--color-content-neutral-base);
+  --border: var(--color-border-primary);
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  background-color: var(--background);
+  width: 100%;
+  color: var(--foreground);
+  transform-origin: bottom;
+  border-radius: var(--spacing-sm);
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+  z-index: calc(1000 - var(--toast-index));
+  height: var(--height);
+  transform: translateX(var(--toast-swipe-movement-x))
+    translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
+          (var(--shrink) * var(--height))))
+    scale(var(--scale));
+  margin: 0 0 0 auto;
+  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s, height .15s;
+  position: absolute;
+  bottom: 0;
+  left: auto;
+  right: 0;
+
+  &[data-expanded] {
+    transform: translateX(var(--toast-swipe-movement-x))
+      translateY(var(--offset-y));
+    height: var(--toast-height);
+  }
+
+  &[data-starting-style], &[data-ending-style] {
+    transform: translateY(150%);
+  }
+
+  &[data-limited] {
+    opacity: 0;
+  }
+
+  &[data-ending-style] {
+    opacity: 0;
+
+    &[data-swipe-direction="up"] {
+      transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+    }
+
+    &[data-swipe-direction="left"] {
+      transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+        translateY(var(--offset-y));
+    }
+
+    &[data-swipe-direction="right"] {
+      transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+        translateY(var(--offset-y));
+    }
+
+    &[data-swipe-direction="down"] {
+      transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+    }
+  }
+
+  &:after {
+    content: "";
+    width: 100%;
+    height: calc(var(--gap) + 1px);
+    position: absolute;
+    top: 100%;
+    left: 0;
+  }
+
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: var(--stroke-focus-ring);
+    outline-color: var(--color-action-info-base);
+    outline-offset: var(--spacing-xxs);
+  }
+
+  &[data-color="neutral"] {
+    --background: var(--color-action-neutral-base);
+    --foreground: var(--color-on-neutral);
+  }
+
+  &[data-color="positive"] {
+    --background: var(--color-action-positive-base);
+    --foreground: var(--color-on-positive);
+  }
+
+  &[data-color="negative"] {
+    --background: var(--color-action-negative-base);
+    --foreground: var(--color-on-negative);
+  }
+
+  &[data-color="warn"] {
+    --background: var(--color-action-warn-base);
+    --foreground: var(--color-on-warn);
+  }
+
+  &[data-color="info"] {
+    --background: var(--color-action-info-base);
+    --foreground: var(--color-on-info);
+  }
+}
+
+.dLl3pG_content {
+  box-sizing: border-box;
+  align-items: center;
+  gap: 1rem;
+  height: 100%;
+  padding: .75rem;
+  transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
+  display: flex;
+  overflow: hidden;
+
+  &[data-behind] {
+    opacity: 0;
+  }
+
+  &[data-expanded] {
+    opacity: 1;
+  }
+}
+
+.dLl3pG_text {
+  flex-direction: column;
+  flex: 1;
+  gap: .25rem;
+  min-width: 0;
+  display: flex;
+}
+
+.dLl3pG_title {
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+}
+
+.dLl3pG_description {
+  margin: 0;
+  font-size: .875rem;
+  line-height: 1.25rem;
+}

package/dist/atoms/toast/toast.d.ts

@@ -0,0 +1,11 @@
+import { ToastObject } from "@base-ui/react/toast";
+
+//#region src/atoms/toast/toast.d.ts
+type ToastData = {
+  color: "neutral" | "info" | "warn" | "negative" | "positive" | "brand";
+};
+type ToastProps = ToastObject<ToastData>;
+declare const Toast$1: (props: ToastProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Toast$1 as Toast, ToastData, ToastProps };
+//# sourceMappingURL=toast.d.ts.map

package/dist/atoms/toast/toast.js

@@ -0,0 +1,2 @@
+import{Text as e}from"../text/text.js";import"../text/index.js";import{Icon as t}from"../icon/icon.js";import"../icon/index.js";import{IconButton as n}from"../icon-button/icon-button.js";import"../icon-button/index.js";import r from"./toast.module.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{mdiClose as o}from"@mdi/js";import{Toast as s}from"@base-ui/react/toast";const c=c=>{let{id:l,title:u,description:d,data:f}=c,p=f?.color||`neutral`;return i(s.Root,{"data-color":p,toast:c,className:r.root,children:a(s.Content,{className:r.content,children:[a(`div`,{className:r.text,children:[i(e,{as:`h2`,variant:`h6`,children:u}),i(e,{as:`p`,variant:`body1`,children:d})]}),i(s.Close,{render:i(n,{label:`close`,color:p,icon:i(t,{data:o})})})]})},l)};export{c as Toast};
+//# sourceMappingURL=toast.js.map

package/dist/atoms/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":["Toast","BaseUIToast","styles"],"sources":["../../../src/atoms/toast/toast.tsx"],"sourcesContent":["import { Toast as BaseUIToast, type ToastObject } from \"@base-ui/react/toast\";\nimport { mdiClose } from \"@mdi/js\";\nimport { Icon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { Text } from \"../text\";\nimport styles from \"./toast.module.css\";\n\nexport type ToastData = {\n  color: \"neutral\" | \"info\" | \"warn\" | \"negative\" | \"positive\" | \"brand\";\n};\n\nexport type ToastProps = ToastObject<ToastData>;\n\nexport const Toast = (props: ToastProps) => {\n  const { id, title, description, data } = props;\n  const color = data?.color || \"neutral\";\n  return (\n    <BaseUIToast.Root\n      data-color={color}\n      key={id}\n      toast={props}\n      className={styles[\"root\"]}\n    >\n      <BaseUIToast.Content className={styles[\"content\"]}>\n        <div className={styles[\"text\"]}>\n          <Text\n            as=\"h2\"\n            variant=\"h6\"\n          >\n            {title}\n          </Text>\n          <Text\n            as=\"p\"\n            variant=\"body1\"\n          >\n            {description}\n          </Text>\n        </div>\n\n        <BaseUIToast.Close\n          render={\n            <IconButton\n              label=\"close\"\n              color={color}\n              icon={<Icon data={mdiClose} />}\n            />\n          }\n        />\n      </BaseUIToast.Content>\n    </BaseUIToast.Root>\n  );\n};\n"],"mappings":"8XAaA,MAAaA,EAAS,GAAsB,CAC1C,GAAM,CAAE,KAAI,QAAO,cAAa,QAAS,EACnC,EAAQ,GAAM,OAAS,UAC7B,OACE,EAACC,EAAY,KAAb,CACE,aAAY,EAEZ,MAAO,EACP,UAAWC,EAAO,cAElB,EAACD,EAAY,QAAb,CAAqB,UAAWC,EAAO,iBAAvC,CACE,EAAC,MAAD,CAAK,UAAWA,EAAO,cAAvB,CACE,EAAC,EAAD,CACE,GAAG,KACH,QAAQ,cAEP,CACG,CAAA,EACN,EAAC,EAAD,CACE,GAAG,IACH,QAAQ,iBAEP,CACG,CAAA,CACH,IAEL,EAACD,EAAY,MAAb,CACE,OACE,EAAC,EAAD,CACE,MAAM,QACC,QACP,KAAM,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CAC9B,CAAA,CAEJ,CAAA,CACkB,GACL,EA9BX,CA8BW,CAEtB"}

package/dist/atoms/toast/toast.module.js

@@ -0,0 +1,2 @@
+var e={content:`dLl3pG_content`,description:`dLl3pG_description`,root:`dLl3pG_root`,text:`dLl3pG_text`,title:`dLl3pG_title`};export{e as default};
+//# sourceMappingURL=toast.module.js.map

package/dist/atoms/toast/toast.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.module.js","names":[],"sources":["../../../src/atoms/toast/toast.module.css"],"sourcesContent":[".root {\n  --gap: 0.75rem;\n  --peek: 0.75rem;\n  --scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));\n  --shrink: calc(1 - var(--scale));\n  --height: var(--toast-frontmost-height, var(--toast-height));\n  --offset-y: calc(\n    var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +\n      var(--toast-swipe-movement-y)\n  );\n  --background: var(--color-surface-secondary);\n  --foreground: var(--color-content-neutral-base);\n  --border: var(--color-border-primary);\n\n  position: absolute;\n  right: 0;\n  margin: 0 auto;\n  box-sizing: border-box;\n  width: 100%;\n  border: 1px solid var(--border);\n  background-color: var(--background);\n  color: var(--foreground);\n  transform-origin: bottom center;\n  border-radius: var(--spacing-sm);\n  bottom: 0;\n  left: auto;\n  margin-right: 0;\n  -webkit-user-select: none;\n  user-select: none;\n  transition:\n    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),\n    opacity 0.5s,\n    height 0.15s;\n  cursor: default;\n  z-index: calc(1000 - var(--toast-index));\n  height: var(--height);\n  transform: translateX(var(--toast-swipe-movement-x))\n    translateY(\n      calc(\n        var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -\n          (var(--shrink) * var(--height))\n      )\n    )\n    scale(var(--scale));\n\n  &[data-expanded] {\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(var(--offset-y));\n    height: var(--toast-height);\n  }\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    transform: translateY(150%);\n  }\n\n  &[data-limited] {\n    opacity: 0;\n  }\n\n  &[data-ending-style] {\n    opacity: 0;\n\n    &[data-swipe-direction=\"up\"] {\n      transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));\n    }\n    &[data-swipe-direction=\"left\"] {\n      transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))\n        translateY(var(--offset-y));\n    }\n    &[data-swipe-direction=\"right\"] {\n      transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))\n        translateY(var(--offset-y));\n    }\n    &[data-swipe-direction=\"down\"] {\n      transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));\n    }\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    width: 100%;\n    top: 100%;\n    left: 0;\n    height: calc(var(--gap) + 1px);\n  }\n\n  &:focus-visible {\n    outline-style: solid;\n    outline-width: var(--stroke-focus-ring);\n    outline-color: var(--color-action-info-base);\n    outline-offset: var(--spacing-xxs);\n  }\n\n  &[data-color=\"neutral\"] {\n    --background: var(--color-action-neutral-base);\n    --foreground: var(--color-on-neutral);\n  }\n  &[data-color=\"positive\"] {\n    --background: var(--color-action-positive-base);\n    --foreground: var(--color-on-positive);\n  }\n  &[data-color=\"negative\"] {\n    --background: var(--color-action-negative-base);\n    --foreground: var(--color-on-negative);\n  }\n  &[data-color=\"warn\"] {\n    --background: var(--color-action-warn-base);\n    --foreground: var(--color-on-warn);\n  }\n  &[data-color=\"info\"] {\n    --background: var(--color-action-info-base);\n    --foreground: var(--color-on-info);\n  }\n}\n\n.content {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  height: 100%;\n  padding: 0.75rem;\n  overflow: hidden;\n  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n  &[data-behind] {\n    opacity: 0;\n  }\n\n  &[data-expanded] {\n    opacity: 1;\n  }\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n  flex: 1;\n}\n\n.title {\n  font-weight: 700;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  margin: 0;\n}\n\n.description {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  margin: 0;\n}\n"],"mappings":"AAUA,IAAA,EAAe,CAAC,QAAM,iBAAc,YAAA,qBAAA,KAAA,cAAA,KAAA,cAAA,MAAA,cAAA"}

package/dist/atoms/tooltip/index.d.ts

@@ -0,0 +1 @@
+import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip.js";

package/dist/atoms/tooltip/index.js

@@ -0,0 +1 @@
+import"./tooltip.js";

package/dist/atoms/tooltip/tooltip.css

@@ -0,0 +1,92 @@
+.o4Okuq_trigger {
+  border: 0;
+  outline: none;
+  margin: 0;
+  padding: 0;
+}
+
+.o4Okuq_trigger:focus-visible {
+  outline-style: solid;
+  outline-width: var(--stroke-focus-ring);
+  outline-color: var(--color-action-info-base);
+  outline-offset: var(--spacing-xxs);
+}
+
+.o4Okuq_popup {
+  box-sizing: border-box;
+  z-index: 1;
+  max-width: 20rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-style: solid;
+  border-width: .0625rem;
+  border-color: var(--color-border-primary);
+  border-radius: var(--spacing-xs);
+  background-color: var(--color-surface-base);
+  color: var(--color-content-neutral-base);
+  transform-origin: var(--transform-origin);
+  flex-direction: column;
+  transition: opacity .1s ease-out, scale .1s ease-out;
+  display: flex;
+  position: relative;
+  box-shadow: 0 .25rem .75rem #0000001f;
+}
+
+.o4Okuq_popup[data-starting-style], .o4Okuq_popup[data-ending-style] {
+  opacity: 0;
+  scale: .98;
+}
+
+.o4Okuq_popup[data-instant] {
+  transition: none;
+}
+
+.o4Okuq_viewport {
+  font-family: var(--typography-typeface-ltr);
+  font-size: var(--typography-caption-base-size);
+  color: inherit;
+  line-height: 1.4;
+}
+
+.o4Okuq_arrow {
+  width: .75rem;
+  height: .375rem;
+  display: block;
+  position: relative;
+  overflow: clip;
+}
+
+.o4Okuq_arrow[data-side="top"] {
+  bottom: -.375rem;
+  rotate: 180deg;
+}
+
+.o4Okuq_arrow[data-side="bottom"] {
+  top: -.375rem;
+  rotate: 0deg;
+}
+
+.o4Okuq_arrow[data-side="left"] {
+  right: -.5625rem;
+  rotate: 90deg;
+}
+
+.o4Okuq_arrow[data-side="right"] {
+  left: -.5625rem;
+  rotate: -90deg;
+}
+
+.o4Okuq_arrow:before {
+  content: "";
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: .0625rem;
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-base);
+  width: .53033rem;
+  height: .53033rem;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%) rotate(45deg);
+}

package/dist/atoms/tooltip/tooltip.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+
+//#region src/atoms/tooltip/tooltip.d.ts
+type TooltipProps = Omit<Tooltip.Root.Props, "children"> & {
+  /**
+   * The trigger element.
+   * Should be a single React element that can accept props/refs (e.g. button).
+   */
+  children: React.ReactElement;
+  /**
+   * Tooltip content.
+   */
+  content: React.ReactNode;
+  /**
+   * Distance from trigger.
+   */
+  sideOffset?: number;
+  /**
+   * Whether to render the arrow.
+   */
+  arrow?: boolean;
+  /**
+   * Props forwarded to BaseTooltip.Popup.
+   */
+  popupProps?: Omit<Tooltip.Popup.Props, "children" | "className">;
+  /**
+   * Class name applied to the popup.
+   */
+  popupClassName?: string;
+  /**
+   * Class name applied to the arrow.
+   */
+  arrowClassName?: string;
+};
+declare function Tooltip$1({
+  children,
+  content,
+  sideOffset,
+  arrow,
+  popupProps,
+  popupClassName,
+  arrowClassName,
+  ...rootProps
+}: TooltipProps): import("react/jsx-runtime").JSX.Element;
+type TooltipProviderProps = Tooltip.Provider.Props;
+declare function TooltipProvider(props: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/atoms/tooltip/tooltip.js

@@ -0,0 +1,2 @@
+import{usePortalConfig as e}from"../../helpers/portal/context/hooks.js";import"../../helpers/portal/index.js";import t from"./tooltip.module.js";import n from"clsx";import"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Tooltip as a}from"@base-ui/react/tooltip";function o({children:o,content:s,sideOffset:c=8,arrow:l=!0,popupProps:u,popupClassName:d,arrowClassName:f,...p}){let{resolveContainer:m}=e(),h=m();return i(a.Root,{...p,children:[r(a.Trigger,{className:t.trigger,children:o}),r(a.Portal,{container:h,children:r(a.Positioner,{sideOffset:c,children:i(a.Popup,{...u,className:n(t.popup,d),children:[l?r(a.Arrow,{className:n([t.arrow,f])}):null,r(a.Viewport,{className:t.viewport,children:s})]})})})]})}function s(e){return r(a.Provider,{...e})}export{o as Tooltip,s as TooltipProvider};
+//# sourceMappingURL=tooltip.js.map