@nayhoo/ui 0.18.0 → 0.19.1

package/dist/components/dialog.mjs

@@ -5,17 +5,18 @@ import {
   dialogHeader,
   dialogOverlayRecipe,
   dialogTitle
-} from "../chunk-BBTIKGXS.mjs";
+} from "../chunk-VMWZ4AUH.mjs";
+import "../chunk-Y6BNWBLR.mjs";
 import "../chunk-O62XWWJU.mjs";
+import "../chunk-P3OUEGR4.mjs";
 import "../chunk-KH7OG63I.mjs";
 import "../chunk-C4NLMHMQ.mjs";
 import "../chunk-P3KR7WP5.mjs";
 import "../chunk-DXKT5AFF.mjs";
-import "../chunk-Y6BNWBLR.mjs";
+import "../chunk-DOHVBMXO.mjs";
 import "../chunk-NOIOHUNH.mjs";
 import "../chunk-JGZLOTH3.mjs";
-import "../chunk-HGLO5LDS.mjs";
-import "../chunk-P3OUEGR4.mjs";
+import "../chunk-PUW3KNR3.mjs";
 import "../chunk-5WJ4KGIE.mjs";
 import "../chunk-WUVNL3DI.mjs";
 import {
@@ -26,7 +27,8 @@ import "../chunk-AXOHCT5Q.mjs";
 import "../chunk-KE7EIF6L.mjs";
 import "../chunk-JZBPCPSP.mjs";
 import "../chunk-HNVVD3WS.mjs";
-import "../chunk-DOHVBMXO.mjs";
+import "../chunk-TCGR6PEH.mjs";
+import "../chunk-HGLO5LDS.mjs";
 import "../chunk-P2VEMZGS.mjs";
 import "../chunk-EXKRRQYL.mjs";
 import {
@@ -42,7 +44,6 @@ import "../chunk-47YGQSLM.mjs";
 import "../chunk-6RSPMV3B.mjs";
 import "../chunk-IFN22XIN.mjs";
 import "../chunk-5ZOT2LOO.mjs";
-import "../chunk-PUW3KNR3.mjs";
 import {
   extractVariantsFromProps
 } from "../chunk-UPZYS6TE.mjs";

package/dist/components/dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Flex } from \"@/components/flex\";\nimport { theme } from \"@/theme\";\nimport {\n  DialogContentVariants,\n  dialogContentRecipe,\n  dialogOverlayRecipe,\n} from \"@/theme/recipes/dialog.css\";\nimport {\n  dialogDescription,\n  dialogFooter,\n  dialogHeader,\n  dialogTitle,\n} from \"@/theme/styles/dialog.css\";\nimport { extractVariantsFromProps, mergeClasses } from \"@/utils\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nexport type DialogProps = DialogPrimitive.DialogProps;\n\n/**\n * @see https://github.com/nayhoo/ui/blob/main/apps/react-cosmos/src/dialog.fixture.tsx\n */\nexport const Dialog = DialogPrimitive.Root;\n\nexport type DialogCloseProps = DialogPrimitive.DialogCloseProps;\n\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogContentProps = DialogPrimitive.DialogContentProps &\n  DialogContentVariants & {\n    components?: { Footer?: React.ReactNode; Header?: React.ReactNode };\n    disableOverlayBlur?: boolean;\n  };\n\nexport const DialogContent = ({\n  children,\n  components,\n  disableOverlayBlur = false,\n  ...props\n}: DialogContentProps) => {\n  const dialogOverlay = dialogOverlayRecipe({ disableOverlayBlur });\n  const [variants, rest] = extractVariantsFromProps(\n    props,\n    ...dialogContentRecipe.variants(),\n  );\n  const dialogContent = dialogContentRecipe(variants);\n\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay className={dialogOverlay} />\n      <DialogPrimitive.Content\n        {...rest}\n        className={mergeClasses(dialogContent, rest.className)}\n      >\n        {components?.Header}\n\n        <Box style={{ padding: theme.space[5] }}>{children}</Box>\n\n        {components?.Footer}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport type DialogDescriptionProps = DialogPrimitive.DialogDescriptionProps;\n\nexport const DialogDescription = ({ ...props }: DialogDescriptionProps) => {\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={mergeClasses(dialogDescription, props.className)}\n    />\n  );\n};\n\nexport type DialogFooterProps = { children: React.ReactNode };\n\nexport const DialogFooter = ({ children }: DialogFooterProps) => {\n  return (\n    <Flex\n      className={dialogFooter}\n      direction={{ initial: \"column\", sm: \"row\" }}\n      gap=\"2\"\n      justify=\"end\"\n    >\n      {children}\n    </Flex>\n  );\n};\n\nexport type DialogHeaderProps = { children: React.ReactNode };\n\nexport const DialogHeader = ({ children }: DialogHeaderProps) => {\n  return <Flex className={dialogHeader}>{children}</Flex>;\n};\n\nexport type DialogTitleProps = DialogPrimitive.DialogTitleProps;\n\nexport const DialogTitle = ({ ...props }: DialogTitleProps) => {\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      className={mergeClasses(dialogTitle, props.className)}\n    />\n  );\n};\n\nexport type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,YAAY,qBAAqB;AAkC3B,cACA,YADA;AA3BC,IAAM,SAAyB;AAI/B,IAAM,cAA8B;AAQpC,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,GAAG;AACL,MAA0B;AACxB,QAAM,gBAAgB,oBAAoB,EAAE,mBAAmB,CAAC;AAChE,QAAM,CAAC,UAAU,IAAI,IAAI;AAAA,IACvB;AAAA,IACA,GAAG,oBAAoB,SAAS;AAAA,EAClC;AACA,QAAM,gBAAgB,oBAAoB,QAAQ;AAElD,SACE,qBAAiB,wBAAhB,EACC;AAAA,wBAAiB,yBAAhB,EAAwB,WAAW,eAAe;AAAA,IACnD;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,aAAa,eAAe,KAAK,SAAS;AAAA,QAEpD;AAAA,sBAAY;AAAA,UAEb,oBAAC,OAAI,OAAO,EAAE,SAAS,MAAM,MAAM,CAAC,EAAE,GAAI,UAAS;AAAA,UAElD,YAAY;AAAA;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAIO,IAAM,oBAAoB,CAAC,EAAE,GAAG,MAAM,MAA8B;AACzE,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,aAAa,mBAAmB,MAAM,SAAS;AAAA;AAAA,EAC5D;AAEJ;AAIO,IAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,WAAW,EAAE,SAAS,UAAU,IAAI,MAAM;AAAA,MAC1C,KAAI;AAAA,MACJ,SAAQ;AAAA,MAEP;AAAA;AAAA,EACH;AAEJ;AAIO,IAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,SAAO,oBAAC,QAAK,WAAW,cAAe,UAAS;AAClD;AAIO,IAAM,cAAc,CAAC,EAAE,GAAG,MAAM,MAAwB;AAC7D,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,aAAa,aAAa,MAAM,SAAS;AAAA;AAAA,EACtD;AAEJ;AAIO,IAAM,gBAAgC;","names":[]}
+{"version":3,"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Flex } from \"@/components/flex\";\nimport { theme } from \"@/theme\";\nimport {\n  DialogContentVariants,\n  dialogContentRecipe,\n  dialogOverlayRecipe,\n} from \"@/theme/recipes/dialog.css\";\nimport {\n  dialogDescription,\n  dialogFooter,\n  dialogHeader,\n  dialogTitle,\n} from \"@/theme/styles/dialog.css\";\nimport { extractVariantsFromProps, mergeClasses } from \"@/utils\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nexport type DialogProps = DialogPrimitive.DialogProps;\n\n/**\n * @see https://github.com/nayhoo/ui/blob/main/apps/react-cosmos/src/dialog.fixture.tsx\n */\nexport const Dialog = DialogPrimitive.Root;\n\nexport type DialogCloseProps = DialogPrimitive.DialogCloseProps;\n\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogContentProps = DialogPrimitive.DialogContentProps &\n  DialogContentVariants & {\n    components?: { Footer?: React.ReactNode; Header?: React.ReactNode };\n    disableOverlayBlur?: boolean;\n  };\n\nexport const DialogContent = ({\n  children,\n  components,\n  disableOverlayBlur = false,\n  ...props\n}: DialogContentProps) => {\n  const dialogOverlay = dialogOverlayRecipe({ disableOverlayBlur });\n  const [variants, rest] = extractVariantsFromProps(\n    props,\n    ...dialogContentRecipe.variants(),\n  );\n  const dialogContent = dialogContentRecipe(variants);\n\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay className={dialogOverlay} />\n      <DialogPrimitive.Content\n        {...rest}\n        className={mergeClasses(dialogContent, rest.className)}\n      >\n        {components?.Header}\n\n        <Box style={{ padding: theme.space[5] }}>{children}</Box>\n\n        {components?.Footer}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n};\n\nexport type DialogDescriptionProps = DialogPrimitive.DialogDescriptionProps;\n\nexport const DialogDescription = ({ ...props }: DialogDescriptionProps) => {\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={mergeClasses(dialogDescription, props.className)}\n    />\n  );\n};\n\nexport type DialogFooterProps = { children: React.ReactNode };\n\nexport const DialogFooter = ({ children }: DialogFooterProps) => {\n  return (\n    <Flex\n      className={dialogFooter}\n      direction={{ initial: \"column\", sm: \"row\" }}\n      gap=\"2\"\n      justify=\"end\"\n    >\n      {children}\n    </Flex>\n  );\n};\n\nexport type DialogHeaderProps = { children: React.ReactNode };\n\nexport const DialogHeader = ({ children }: DialogHeaderProps) => {\n  return <Flex className={dialogHeader}>{children}</Flex>;\n};\n\nexport type DialogTitleProps = DialogPrimitive.DialogTitleProps;\n\nexport const DialogTitle = ({ ...props }: DialogTitleProps) => {\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      className={mergeClasses(dialogTitle, props.className)}\n    />\n  );\n};\n\nexport type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,YAAY,qBAAqB;AAkC3B,cACA,YADA;AA3BC,IAAM,SAAyB;AAI/B,IAAM,cAA8B;AAQpC,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,GAAG;AACL,MAA0B;AACxB,QAAM,gBAAgB,oBAAoB,EAAE,mBAAmB,CAAC;AAChE,QAAM,CAAC,UAAU,IAAI,IAAI;AAAA,IACvB;AAAA,IACA,GAAG,oBAAoB,SAAS;AAAA,EAClC;AACA,QAAM,gBAAgB,oBAAoB,QAAQ;AAElD,SACE,qBAAiB,wBAAhB,EACC;AAAA,wBAAiB,yBAAhB,EAAwB,WAAW,eAAe;AAAA,IACnD;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,aAAa,eAAe,KAAK,SAAS;AAAA,QAEpD;AAAA,sBAAY;AAAA,UAEb,oBAAC,OAAI,OAAO,EAAE,SAAS,MAAM,MAAM,CAAC,EAAE,GAAI,UAAS;AAAA,UAElD,YAAY;AAAA;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAIO,IAAM,oBAAoB,CAAC,EAAE,GAAG,MAAM,MAA8B;AACzE,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,aAAa,mBAAmB,MAAM,SAAS;AAAA;AAAA,EAC5D;AAEJ;AAIO,IAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,WAAW,EAAE,SAAS,UAAU,IAAI,MAAM;AAAA,MAC1C,KAAI;AAAA,MACJ,SAAQ;AAAA,MAEP;AAAA;AAAA,EACH;AAEJ;AAIO,IAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,SAAO,oBAAC,QAAK,WAAW,cAAe,UAAS;AAClD;AAIO,IAAM,cAAc,CAAC,EAAE,GAAG,MAAM,MAAwB;AAC7D,SACE;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,aAAa,aAAa,MAAM,SAAS;AAAA;AAAA,EACtD;AAEJ;AAIO,IAAM,gBAAgC;","names":[]}

package/dist/components/popover.mjs

@@ -1,10 +1,10 @@
-import "../chunk-HGLO5LDS.mjs";
 import {
   menu
 } from "../chunk-5WJ4KGIE.mjs";
 import {
   panel
 } from "../chunk-WUVNL3DI.mjs";
+import "../chunk-HGLO5LDS.mjs";
 import "../chunk-IFN22XIN.mjs";
 import "../chunk-UPZYS6TE.mjs";
 import {

package/dist/patterns/index.css

@@ -4097,6 +4097,85 @@
   }
 }
 
+/* vanilla-extract-css-ns:src/theme/styles/accordion.css.ts.vanilla.css?source=#H4sIAAAAAAAAA61Vy27bMBC8+ysWOSVAGEh20rgMCgRID+m56akoDEpcSdtQpEDSzyL/XpCyZDWxU7voSYTs2Zkdzq7un3FdWFGjA5HnxkoyeuYUSfxslno2S28Xcr0QE/g1AiisqeMBoEIqK88huRsBvIwAvHn1y0LYc8askLRifWmWG+1Re9b+66JFv4zuD8r41vQirg+JOIFqj9CkE3G1o96dOvIkojJjJdpINXdDYmLj2Sz9qDOcynFJkW1J0lccJknSrO4O1P/ise450shRC1uSZt40HNKABDALtIUySw4VSYn6uGq8IOs8yytScqjem4YpLPzeNtJBG1VsY4CywbEjYcM2kiMFK7FPb2a8N/U/SN4Cj1d9nKsmnzu2JF+RjjIb48iT0RwsKuFpgUHDhpGWuOKQvqqbV7iwg2SNYxFvhe7KxHNhbB2yUzvI5xnlLMMNoT1Prqa3l5BcQnKVTi4hjbK/S+EFc154/GQa1D/gOMJAwsGaADxPp4nE8qAND+089WVu2nE02jNHG+ycDS++0gYdm/TuZhenpPgN0bC7s9De2Y/ILTTVorXs/eV1rI2nq8mVcSj/quePLfYf1DzhaqfoQ5tCISXpkkN606xg/M7OeUQh0fbw21a7Uhzm2qEPVyXJNUqsORQKD9Z5slSWg0LTPYWEolIz8lg7DjlqjzYOqMifS2vmWrLcKGO3mW+ERe3bCV4xVwkZ0pKENQjJNl8Oa6E95Q8B55gijbspLvBij3yIzziJ28AWoia15kC6Qkv+7rQgd1+O65t2Pf+cO0/FuvvicHCNyJFl6JcYYg4QVLIOFmX015W8e1dvPOZVGKN2Pb4xca9DA2cfA3bgVhFy9hvpHNAJAwgAAA== */
+@keyframes accordion_slideDown__17vdyva3 {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes accordion_slideUp__17vdyva4 {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.accordion_accordion__17vdyva0 {
+  border-radius: var(--radii-2__19nbe8d2gi);
+  width: 300px;
+}
+.accordion_accordionItem__17vdyva1 {
+  margin-top: 1px;
+  overflow: hidden;
+}
+.accordion_accordionItem__17vdyva1:first-child {
+  border-top-left-radius: var(--radii-1__19nbe8d2gh);
+  border-top-right-radius: var(--radii-1__19nbe8d2gh);
+  margin-top: 0;
+}
+.accordion_accordionItem__17vdyva1:last-child {
+  border-bottom-left-radius: var(--radii-1__19nbe8d2gh);
+  border-bottom-right-radius: var(--radii-1__19nbe8d2gh);
+}
+.accordion_accordionItem__17vdyva1:focus-within {
+  position: relative;
+  z-index: 1;
+}
+.accordion_chevron__17vdyva2 {
+  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+[data-state=open] .accordion_chevron__17vdyva2 {
+  transform: rotate(180deg);
+}
+.accordion_accordionContent__17vdyva5 {
+  font-size: var(--fontSizes-3__19nbe8db);
+  overflow: hidden;
+}
+.accordion_accordionContent__17vdyva5[data-state=open] {
+  animation: accordion_slideDown__17vdyva3 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion_accordionContent__17vdyva5[data-state=closed] {
+  animation: accordion_slideUp__17vdyva4 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.accordion_accordionContentText__17vdyva6 {
+  padding: 15px 20px;
+}
+.accordion_accordionHeader__17vdyva7 {
+  all: unset;
+  display: flex;
+}
+.accordion_accordionTrigger__17vdyva8 {
+  all: unset;
+  align-items: center;
+  background-color: transparent;
+  box-shadow: 0 1px 0 var(--semanticColors-line__19nbe8d2fe);
+  display: flex;
+  flex: 1;
+  font-family: inherit;
+  font-size: var(--fontSizes-3__19nbe8db);
+  height: 45px;
+  justify-content: space-between;
+  line-height: 1;
+  padding: 0 20px;
+}
+.accordion_accordionTrigger__17vdyva8:hover {
+  background-color: var(--semanticColors-transparentHover__19nbe8d2ff);
+}
+
 /* vanilla-extract-css-ns:src/theme/styles/avatar.css.ts.vanilla.css?source=LmF2YXRhcl9hdmF0YXJJbWFnZV9fbjljc3VjMCB7CiAgZGlzcGxheTogZmxleDsKICBvYmplY3QtZml0OiBjb3ZlcjsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGhlaWdodDogMTAwJTsKICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOwogIHdpZHRoOiAxMDAlOwp9 */
 .avatar_avatarImage__n9csuc0 {
   display: flex;