@photon-ai/pho-ui 4.3.0 → 4.3.1

package/dist/components/accordion.js

@@ -8,21 +8,21 @@ var i = {
     item: "py-3",
     hit: "before:-top-3 before:-bottom-3",
     question: "text-base",
-    gap: "pt-1",
+    gap: "pt-1 pb-1",
     answer: "text-xs"
   },
   md: {
     item: "py-4",
     hit: "before:-top-4 before:-bottom-4",
     question: "text-md",
-    gap: "pt-1.5",
+    gap: "pt-1.5 pb-1.5",
     answer: "text-base"
   },
   lg: {
     item: "py-5",
     hit: "before:-top-5 before:-bottom-5",
     question: "text-xl leading-7",
-    gap: "pt-2",
+    gap: "pt-2 pb-2",
     answer: "text-lg"
   }
 }, p = d("md");

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../../src/components/accordion/accordion.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentProps,\n  type ElementType,\n} from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nexport type AccordionSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * Three sizes, one step of the type scale apart. `lg` is photon.codes's\n * FAQ to the pixel: the question at 20/28, the answer at 18/28, 20px\n * above and below, 8px between. `md` and `sm` step the type, the\n * padding, and the gap down together; the chevron is the same small\n * glyph in the same 24px box at every size, so a row is never shorter\n * than it.\n */\nconst SIZE: Record<\n  AccordionSize,\n  { item: string; hit: string; question: string; gap: string; answer: string }\n> = {\n  sm: {\n    item: \"py-3\",\n    hit: \"before:-top-3 before:-bottom-3\",\n    question: \"text-base\",\n    gap: \"pt-1\",\n    answer: \"text-xs\",\n  },\n  md: {\n    item: \"py-4\",\n    hit: \"before:-top-4 before:-bottom-4\",\n    question: \"text-md\",\n    gap: \"pt-1.5\",\n    answer: \"text-base\",\n  },\n  lg: {\n    item: \"py-5\",\n    hit: \"before:-top-5 before:-bottom-5\",\n    question: \"text-xl leading-7\",\n    gap: \"pt-2\",\n    answer: \"text-lg\",\n  },\n};\n\nconst SizeContext = createContext<AccordionSize>(\"md\");\n\nexport interface AccordionRootProps extends StyledProps<\n  typeof BaseAccordion.Root\n> {\n  /** @default \"md\" */\n  size?: AccordionSize;\n}\n\n/**\n * The list — bare, so the page decides the surface: on photon.codes the\n * FAQ card is the section's, 32px around the list; in a settings page it\n * is a `Card`. Items divide with a hairline and the list has no outer\n * lines. Items are independent, as on the site, so `multiple` is on\n * unless said otherwise.\n */\nfunction Root({\n  className,\n  multiple = true,\n  size = \"md\",\n  ...props\n}: AccordionRootProps) {\n  return (\n    <SizeContext.Provider value={size}>\n      <BaseAccordion.Root\n        multiple={multiple}\n        data-size={size}\n        className={cn(\"w-full\", className)}\n        {...props}\n      />\n    </SizeContext.Provider>\n  );\n}\n\n/**\n * One question, padded above and below, whatever is open inside. The\n * hairline under it overlaps the next item by its own pixel, the way\n * Framer draws a border inside the box, so an item advances by exactly\n * its padding and its rows: 68px at `lg`, the site's figure. The last\n * item draws none.\n */\nfunction Item({ className, ...props }: StyledProps<typeof BaseAccordion.Item>) {\n  const size = useContext(SizeContext);\n  return (\n    <BaseAccordion.Item\n      className={cn(\n        \"border-pho-secondary -mb-px border-b last:mb-0 last:border-b-0\",\n        SIZE[size].item,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Header({\n  className,\n  ...props\n}: StyledProps<typeof BaseAccordion.Header>) {\n  return <BaseAccordion.Header className={cn(\"flex\", className)} {...props} />;\n}\n\n/**\n * The question row: the question in medium with the chevron at the row's\n * end. The chevron is the site's small one (a 6.5×3.5 stroke in a 24px\n * box, weight 1.5) and the trigger wears it itself — pass only the\n * question. Open, the question settles to the description tone and the\n * chevron makes a half turn, both on the section spring; the chevron keeps\n * the primary ink. The whole item is the target, as on the site: the hit\n * area reaches through the item's padding above and below the row.\n */\nfunction Trigger({\n  className,\n  children,\n  ...props\n}: StyledProps<typeof BaseAccordion.Trigger>) {\n  const size = useContext(SizeContext);\n  return (\n    <BaseAccordion.Trigger\n      className={cn(\n        \"group/trigger text-pho-primary outline-pho-brand relative flex flex-1 cursor-pointer items-center justify-between gap-3 text-left font-medium tracking-[-0.1px]\",\n        \"ease-pho-spring-reveal data-[panel-open]:text-pho-description transition-colors duration-500\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-4\",\n        \"before:absolute before:inset-x-0\",\n        SIZE[size].question,\n        SIZE[size].hit,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        data-accordion-chevron=\"\"\n        className=\"text-pho-primary ease-pho-spring-reveal size-6 shrink-0 transition-[rotate] duration-500 group-data-[panel-open]/trigger:rotate-180\"\n      >\n        <path d=\"M 6.5 0 L 3.25 3.5 L 0 0\" transform=\"translate(8.75 10.75)\" />\n      </svg>\n    </BaseAccordion.Trigger>\n  );\n}\n\n/**\n * The answer: medium in the primary ink, one type step under the\n * question, a short gap below it. Opening, the panel's height rides the\n * section spring while the answer arrives 100ms later on the appear\n * spring, fading in as it rises 20px. Closing, the answer is gone at once\n * and the height settles on the section spring — the site's way round.\n */\nfunction Panel({\n  className,\n  children,\n  ...props\n}: StyledProps<typeof BaseAccordion.Panel>) {\n  const size = useContext(SizeContext);\n  return (\n    <BaseAccordion.Panel\n      className={cn(\n        \"group/panel ease-pho-spring-reveal h-[var(--accordion-panel-height)] overflow-hidden transition-[height] duration-500\",\n        \"data-[ending-style]:h-0 data-[starting-style]:h-0\",\n        className,\n      )}\n      {...props}\n    >\n      {/* The gap and the clip live on one wrapper, the rise on another:\n          the panel measures its height from layout, and a translated\n          child would count its 20px of overflow into that measure. */}\n      <div className={cn(\"overflow-clip\", SIZE[size].gap)}>\n        <div\n          data-accordion-answer=\"\"\n          className={cn(\n            \"text-pho-primary font-medium tracking-[-0.1px]\",\n            \"ease-pho-spring-appear transition-[opacity,translate] delay-100 duration-700\",\n            \"group-data-[starting-style]/panel:translate-y-5 group-data-[starting-style]/panel:opacity-0\",\n            \"group-data-[ending-style]/panel:opacity-0 group-data-[ending-style]/panel:transition-none\",\n            SIZE[size].answer,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </BaseAccordion.Panel>\n  );\n}\n\n/**\n * Questions that each reveal an answer — photon.codes's FAQ, as a\n * component, built on Base UI `Accordion`. Each `Accordion.Item` needs a\n * `value`; control the open set with `value` / `onValueChange` or\n * `defaultValue`. Items are independent by default; `multiple={false}`\n * opens one at a time. Three sizes; `lg` is the site's.\n */\nexport const Accordion = { Root, Item, Header, Trigger, Panel };\n"],"mappings":";;;;;AA2BA,IAAM,IAGF;AAAA,EACF,IAAI;AAAA,IACF,MAAM;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACF,GAEM,IAAc,EAA6B,IAAI;AAgBrD,SAAS,EAAK,EACZ,WAAA,GACA,UAAA,IAAW,IACX,MAAA,IAAO,MACP,GAAG,EAAA,GACkB;AACrB,SACE,gBAAA,EAAC,EAAY,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC3B,UAAA,gBAAA,EAAC,EAAc,MAAf;AAAA,MACY,UAAA;AAAA,MACV,aAAW;AAAA,MACX,WAAW,EAAG,UAAU,CAAS;AAAA,MACjC,GAAI;AAAA,IACL,CAAA;AAAA,EACmB,CAAA;AAE1B;AASA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAAiD;AAC7E,QAAM,IAAO,EAAW,CAAW;AACnC,SACE,gBAAA,EAAC,EAAc,MAAf;AAAA,IACE,WAAW,EACT,kEACA,EAAK,CAAA,EAAM,MACX,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAO,EACd,WAAA,GACA,GAAG,EAAA,GACwC;AAC3C,SAAO,gBAAA,EAAC,EAAc,QAAf;AAAA,IAAsB,WAAW,EAAG,QAAQ,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAC7E;AAWA,SAAS,EAAQ,EACf,WAAA,GACA,UAAA,GACA,GAAG,EAAA,GACyC;AAC5C,QAAM,IAAO,EAAW,CAAW;AACnC,SACE,gBAAA,EAAC,EAAc,SAAf;AAAA,IACE,WAAW,EACT,mKACA,gGACA,0DACA,oCACA,EAAK,CAAA,EAAM,UACX,EAAK,CAAA,EAAM,KACX,CACF;AAAA,IACA,GAAI;AAAA,IAVN,UAAA,CAYG,GACD,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,0BAAuB;AAAA,MACvB,WAAU;AAAA,MAEV,UAAA,gBAAA,EAAC,QAAD;AAAA,QAAM,GAAE;AAAA,QAA2B,WAAU;AAAA,MAAyB,CAAA;AAAA,IACnE,CAAA,CACgB;AAAA;AAE3B;AASA,SAAS,EAAM,EACb,WAAA,GACA,UAAA,GACA,GAAG,EAAA,GACuC;AAC1C,QAAM,IAAO,EAAW,CAAW;AACnC,SACE,gBAAA,EAAC,EAAc,OAAf;AAAA,IACE,WAAW,EACT,yHACA,qDACA,CACF;AAAA,IACA,GAAI;AAAA,IAKJ,UAAA,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAW,EAAG,iBAAiB,EAAK,CAAA,EAAM,GAAG;AAAA,MAChD,UAAA,gBAAA,EAAC,OAAD;AAAA,QACE,yBAAsB;AAAA,QACtB,WAAW,EACT,kDACA,gFACA,+FACA,6FACA,EAAK,CAAA,EAAM,MACb;AAAA,QAEC,UAAA;AAAA,MACE,CAAA;AAAA,IACF,CAAA;AAAA,EACc,CAAA;AAEzB;AASA,IAAa,IAAY;AAAA,EAAE,MAAA;AAAA,EAAM,MAAA;AAAA,EAAM,QAAA;AAAA,EAAQ,SAAA;AAAA,EAAS,OAAA;AAAM"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../../src/components/accordion/accordion.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentProps,\n  type ElementType,\n} from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { cn } from \"../../utils/cn\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\nexport type AccordionSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * Three sizes, one step of the type scale apart. `lg` is photon.codes's\n * FAQ to the pixel: the question at 20/28, the answer at 18/28, 20px\n * above and below, 8px between. `md` and `sm` step the type, the\n * padding, and the gap down together; the chevron is the same small\n * glyph in the same 24px box at every size, so a row is never shorter\n * than it.\n */\nconst SIZE: Record<\n  AccordionSize,\n  { item: string; hit: string; question: string; gap: string; answer: string }\n> = {\n  sm: {\n    item: \"py-3\",\n    hit: \"before:-top-3 before:-bottom-3\",\n    question: \"text-base\",\n    gap: \"pt-1 pb-1\",\n    answer: \"text-xs\",\n  },\n  md: {\n    item: \"py-4\",\n    hit: \"before:-top-4 before:-bottom-4\",\n    question: \"text-md\",\n    gap: \"pt-1.5 pb-1.5\",\n    answer: \"text-base\",\n  },\n  lg: {\n    item: \"py-5\",\n    hit: \"before:-top-5 before:-bottom-5\",\n    question: \"text-xl leading-7\",\n    gap: \"pt-2 pb-2\",\n    answer: \"text-lg\",\n  },\n};\n\nconst SizeContext = createContext<AccordionSize>(\"md\");\n\nexport interface AccordionRootProps extends StyledProps<\n  typeof BaseAccordion.Root\n> {\n  /** @default \"md\" */\n  size?: AccordionSize;\n}\n\n/**\n * The list — bare, so the page decides the surface: on photon.codes the\n * FAQ card is the section's, 32px around the list; in a settings page it\n * is a `Card`. Items divide with a hairline and the list has no outer\n * lines. Items are independent, as on the site, so `multiple` is on\n * unless said otherwise.\n */\nfunction Root({\n  className,\n  multiple = true,\n  size = \"md\",\n  ...props\n}: AccordionRootProps) {\n  return (\n    <SizeContext.Provider value={size}>\n      <BaseAccordion.Root\n        multiple={multiple}\n        data-size={size}\n        className={cn(\"w-full\", className)}\n        {...props}\n      />\n    </SizeContext.Provider>\n  );\n}\n\n/**\n * One question, padded above and below, whatever is open inside. The\n * hairline under it overlaps the next item by its own pixel, the way\n * Framer draws a border inside the box, so an item advances by exactly\n * its padding and its rows: 68px at `lg`, the site's figure. The last\n * item draws none.\n */\nfunction Item({ className, ...props }: StyledProps<typeof BaseAccordion.Item>) {\n  const size = useContext(SizeContext);\n  return (\n    <BaseAccordion.Item\n      className={cn(\n        \"border-pho-secondary -mb-px border-b last:mb-0 last:border-b-0\",\n        SIZE[size].item,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Header({\n  className,\n  ...props\n}: StyledProps<typeof BaseAccordion.Header>) {\n  return <BaseAccordion.Header className={cn(\"flex\", className)} {...props} />;\n}\n\n/**\n * The question row: the question in medium with the chevron at the row's\n * end. The chevron is the site's small one (a 6.5×3.5 stroke in a 24px\n * box, weight 1.5) and the trigger wears it itself — pass only the\n * question. Open, the question settles to the description tone and the\n * chevron makes a half turn, both on the section spring; the chevron keeps\n * the primary ink. The whole item is the target, as on the site: the hit\n * area reaches through the item's padding above and below the row.\n */\nfunction Trigger({\n  className,\n  children,\n  ...props\n}: StyledProps<typeof BaseAccordion.Trigger>) {\n  const size = useContext(SizeContext);\n  return (\n    <BaseAccordion.Trigger\n      className={cn(\n        \"group/trigger text-pho-primary outline-pho-brand relative flex flex-1 cursor-pointer items-center justify-between gap-3 text-left font-medium tracking-[-0.1px]\",\n        \"ease-pho-spring-reveal data-[panel-open]:text-pho-description transition-colors duration-500\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-4\",\n        \"before:absolute before:inset-x-0\",\n        SIZE[size].question,\n        SIZE[size].hit,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        data-accordion-chevron=\"\"\n        className=\"text-pho-primary ease-pho-spring-reveal size-6 shrink-0 transition-[rotate] duration-500 group-data-[panel-open]/trigger:rotate-180\"\n      >\n        <path d=\"M 6.5 0 L 3.25 3.5 L 0 0\" transform=\"translate(8.75 10.75)\" />\n      </svg>\n    </BaseAccordion.Trigger>\n  );\n}\n\n/**\n * The answer: medium in the primary ink, one type step under the\n * question, a short gap below it. Opening, the panel's height rides the\n * section spring while the answer arrives 100ms later on the appear\n * spring, fading in as it rises 20px. Closing, the answer is gone at once\n * and the height settles on the section spring — the site's way round.\n */\nfunction Panel({\n  className,\n  children,\n  ...props\n}: StyledProps<typeof BaseAccordion.Panel>) {\n  const size = useContext(SizeContext);\n  return (\n    <BaseAccordion.Panel\n      className={cn(\n        \"group/panel ease-pho-spring-reveal h-[var(--accordion-panel-height)] overflow-hidden transition-[height] duration-500\",\n        \"data-[ending-style]:h-0 data-[starting-style]:h-0\",\n        className,\n      )}\n      {...props}\n    >\n      {/* The gap is symmetric: the panel clips, so the answer's last line\n          needs room below it for a link's focus ring, not just above.\n          The gap and the clip live on one wrapper, the rise on another:\n          the panel measures its height from layout, and a translated\n          child would count its 20px of overflow into that measure. */}\n      <div className={cn(\"overflow-clip\", SIZE[size].gap)}>\n        <div\n          data-accordion-answer=\"\"\n          className={cn(\n            \"text-pho-primary font-medium tracking-[-0.1px]\",\n            \"ease-pho-spring-appear transition-[opacity,translate] delay-100 duration-700\",\n            \"group-data-[starting-style]/panel:translate-y-5 group-data-[starting-style]/panel:opacity-0\",\n            \"group-data-[ending-style]/panel:opacity-0 group-data-[ending-style]/panel:transition-none\",\n            SIZE[size].answer,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </BaseAccordion.Panel>\n  );\n}\n\n/**\n * Questions that each reveal an answer — photon.codes's FAQ, as a\n * component, built on Base UI `Accordion`. Each `Accordion.Item` needs a\n * `value`; control the open set with `value` / `onValueChange` or\n * `defaultValue`. Items are independent by default; `multiple={false}`\n * opens one at a time. Three sizes; `lg` is the site's.\n */\nexport const Accordion = { Root, Item, Header, Trigger, Panel };\n"],"mappings":";;;;;AA2BA,IAAM,IAGF;AAAA,EACF,IAAI;AAAA,IACF,MAAM;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,KAAK;AAAA,IACL,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACF,GAEM,IAAc,EAA6B,IAAI;AAgBrD,SAAS,EAAK,EACZ,WAAA,GACA,UAAA,IAAW,IACX,MAAA,IAAO,MACP,GAAG,EAAA,GACkB;AACrB,SACE,gBAAA,EAAC,EAAY,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC3B,UAAA,gBAAA,EAAC,EAAc,MAAf;AAAA,MACY,UAAA;AAAA,MACV,aAAW;AAAA,MACX,WAAW,EAAG,UAAU,CAAS;AAAA,MACjC,GAAI;AAAA,IACL,CAAA;AAAA,EACmB,CAAA;AAE1B;AASA,SAAS,EAAK,EAAE,WAAA,GAAW,GAAG,EAAA,GAAiD;AAC7E,QAAM,IAAO,EAAW,CAAW;AACnC,SACE,gBAAA,EAAC,EAAc,MAAf;AAAA,IACE,WAAW,EACT,kEACA,EAAK,CAAA,EAAM,MACX,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAO,EACd,WAAA,GACA,GAAG,EAAA,GACwC;AAC3C,SAAO,gBAAA,EAAC,EAAc,QAAf;AAAA,IAAsB,WAAW,EAAG,QAAQ,CAAS;AAAA,IAAG,GAAI;AAAA,EAAQ,CAAA;AAC7E;AAWA,SAAS,EAAQ,EACf,WAAA,GACA,UAAA,GACA,GAAG,EAAA,GACyC;AAC5C,QAAM,IAAO,EAAW,CAAW;AACnC,SACE,gBAAA,EAAC,EAAc,SAAf;AAAA,IACE,WAAW,EACT,mKACA,gGACA,0DACA,oCACA,EAAK,CAAA,EAAM,UACX,EAAK,CAAA,EAAM,KACX,CACF;AAAA,IACA,GAAI;AAAA,IAVN,UAAA,CAYG,GACD,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,0BAAuB;AAAA,MACvB,WAAU;AAAA,MAEV,UAAA,gBAAA,EAAC,QAAD;AAAA,QAAM,GAAE;AAAA,QAA2B,WAAU;AAAA,MAAyB,CAAA;AAAA,IACnE,CAAA,CACgB;AAAA;AAE3B;AASA,SAAS,EAAM,EACb,WAAA,GACA,UAAA,GACA,GAAG,EAAA,GACuC;AAC1C,QAAM,IAAO,EAAW,CAAW;AACnC,SACE,gBAAA,EAAC,EAAc,OAAf;AAAA,IACE,WAAW,EACT,yHACA,qDACA,CACF;AAAA,IACA,GAAI;AAAA,IAOJ,UAAA,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAW,EAAG,iBAAiB,EAAK,CAAA,EAAM,GAAG;AAAA,MAChD,UAAA,gBAAA,EAAC,OAAD;AAAA,QACE,yBAAsB;AAAA,QACtB,WAAW,EACT,kDACA,gFACA,+FACA,6FACA,EAAK,CAAA,EAAM,MACb;AAAA,QAEC,UAAA;AAAA,MACE,CAAA;AAAA,IACF,CAAA;AAAA,EACc,CAAA;AAEzB;AASA,IAAa,IAAY;AAAA,EAAE,MAAA;AAAA,EAAM,MAAA;AAAA,EAAM,QAAA;AAAA,EAAQ,SAAA;AAAA,EAAS,OAAA;AAAM"}

package/dist/components/collapsible.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as l } from "../chunks/collapsible-if7ncPbI.js";
+import { t as l } from "../chunks/collapsible-Dv306QOT.js";
 export {
   l as Collapsible
 };

package/dist/components/command.js

@@ -1,5 +1,5 @@
 "use client";
-import { n as t, t as a } from "../chunks/command-ZagVyDx7.js";
+import { n as t, t as a } from "../chunks/command-Cn000hMK.js";
 export {
   a as Command,
   t as useCommandState

package/dist/components/data-table.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as e, i as t, n as o, o as r, r as s, t as c } from "../chunks/data-table-BeUwsjmX.js";
+import { a as e, i as t, n as o, o as r, r as s, t as c } from "../chunks/data-table-Mog6m3d9.js";
 import { t as T } from "../chunks/ghost-search-AmVXd0zE.js";
 export {
   c as DATA_TABLE_SURFACE,

package/dist/components/dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { n as i, t as o } from "../chunks/dialog-BYiAFetB.js";
+import { n as i, t as o } from "../chunks/dialog-BOz_xOrn.js";
 export {
   o as Dialog,
   i as useDialogPending

package/dist/components/filter-bar.js

@@ -1,5 +1,5 @@
 "use client";
-import { i as t, n as e, r as a, t as i } from "../chunks/filter-bar-DTaLgQr0.js";
+import { i as t, n as e, r as a, t as i } from "../chunks/filter-bar-Cr_1zBFq.js";
 export {
   i as FILTER_DATE_PRESETS,
   e as FilterBar,

package/dist/components/trace.js

@@ -1,5 +1,5 @@
 "use client";
-import { A as s, B as e, C as i, D as n, E as l, F as r, I as t, L as o, M as p, N as c, O as T, P as u, R as I, S, T as m, V as d, _ as v, a as b, b as V, c as w, d as f, f as D, g as L, h as _, i as k, j as x, k as g, l as A, m as E, n as F, o as N, p as y, r as z, s as B, t as O, u as P, v as R, w as W, x as C, y as G, z as K } from "../chunks/trace-Hku-rImp.js";
+import { A as s, B as e, C as i, D as n, E as l, F as r, I as t, L as o, M as p, N as c, O as T, P as u, R as I, S, T as m, V as d, _ as v, a as b, b as V, c as w, d as f, f as D, g as L, h as _, i as k, j as x, k as g, l as A, m as E, n as F, o as N, p as y, r as z, s as B, t as O, u as P, v as R, w as W, x as C, y as G, z as K } from "../chunks/trace-CjOi3_IP.js";
 export {
   i as FULL_VIEW,
   y as GEN_AI_KINDS,

package/dist/index.js

@@ -9,22 +9,22 @@ import { n as b, t as F } from "./chunks/use-copy-D6JwKUll.js";
 import "./utils.js";
 import { a as h, c as k, d as v, i as w, l as W, n as x, o as H, r as y, s as z, t as K, u as X } from "./chunks/button-CdqS_t5a.js";
 import { a as Z, c as j, i as J, l as Q, n as q, o as $, r as aa, s as sa, t as ta } from "./chunks/error-BAQgnde7.js";
-import { A as oa, B as ea, C as ia, D as Ea, E as Sa, F as _a, I as na, L as ma, M as Ia, N as Ta, O as pa, P as Aa, R as Ra, S as la, T as Ca, V as Ba, _ as fa, a as Na, b as Pa, c as ua, d as La, f as ca, g as Da, h as Oa, i as Va, j as da, k as Ua, l as Ga, m as ba, n as Fa, o as Ma, p as ga, r as ha, s as ka, t as va, u as wa, v as Wa, w as xa, x as Ha, y as ya, z as za } from "./chunks/trace-Hku-rImp.js";
+import { A as oa, B as ea, C as ia, D as Ea, E as Sa, F as _a, I as na, L as ma, M as Ia, N as Ta, O as pa, P as Aa, R as Ra, S as la, T as Ca, V as Ba, _ as fa, a as Na, b as Pa, c as ua, d as La, f as ca, g as Da, h as Oa, i as Va, j as da, k as Ua, l as Ga, m as ba, n as Fa, o as Ma, p as ga, r as ha, s as ka, t as va, u as wa, v as Wa, w as xa, x as Ha, y as ya, z as za } from "./chunks/trace-CjOi3_IP.js";
 import { n as Xa, t as Ya } from "./chunks/date-picker-CZbcNIe-.js";
 import { n as ja, t as Ja } from "./chunks/copy-button-B_B15mEi.js";
-import { a as qa, c as $a, d as as, i as ss, l as ts, n as rs, o as os, r as es, s as is, t as Es, u as Ss } from "./chunks/sidebar-DRPe5CAh.js";
+import { a as qa, c as $a, d as as, i as ss, l as ts, n as rs, o as os, r as es, s as is, t as Es, u as Ss } from "./chunks/sidebar-bLsjo_yb.js";
 import { t as ns } from "./chunks/input-DjvZoF8v.js";
-import { i as Is, n as Ts, r as ps, t as As } from "./chunks/filter-bar-DTaLgQr0.js";
-import { a as ls } from "./chunks/data-table-BeUwsjmX.js";
+import { i as Is, n as Ts, r as ps, t as As } from "./chunks/filter-bar-Cr_1zBFq.js";
+import { a as ls } from "./chunks/data-table-Mog6m3d9.js";
 import { n as Bs, t as fs } from "./chunks/code-block-BuDIo8Q0.js";
 import { n as Ps, t as us } from "./chunks/stat-hnNqjWVG.js";
 import { t as cs } from "./chunks/calendar-4OFiCLAv.js";
 import { t as Os } from "./chunks/close-button-GvqWbLl0.js";
 import { t as ds } from "./chunks/input-group-fc9_jD4d.js";
 import { n as Gs, t as bs } from "./chunks/card-N-tvFsuV.js";
-import { n as Ms, t as gs } from "./chunks/dialog-BYiAFetB.js";
+import { n as Ms, t as gs } from "./chunks/dialog-BOz_xOrn.js";
 import { i as ks, n as vs, r as ws, t as Ws } from "./chunks/status-view-C8tabjDu.js";
-import { a as Hs, c as ys, d as zs, f as Ks, i as Xs, l as Ys, m as Zs, n as js, o as Js, p as Qs, r as qs, s as $s, t as at, u as st } from "./chunks/basic-page-65eFgq8o.js";
+import { a as Hs, c as ys, d as zs, f as Ks, i as Xs, l as Ys, m as Zs, n as js, o as Js, p as Qs, r as qs, s as $s, t as at, u as st } from "./chunks/basic-page-OrUVXKrx.js";
 import { i as rt, n as ot, r as et, t as it } from "./chunks/legend-C0mU7dqd.js";
 import "./components/chart.js";
 import { t as _t } from "./chunks/bar-chart-DIALC2_z.js";

package/dist/sections/basic-page.js

@@ -1,6 +1,6 @@
 "use client";
-import { a as s } from "../chunks/data-table-BeUwsjmX.js";
-import { a as E, c as a, d as C, f as S, i as I, l as e, m as o, n as B, o as P, p as N, r, s as t, t as D, u as R } from "../chunks/basic-page-65eFgq8o.js";
+import { a as s } from "../chunks/data-table-Mog6m3d9.js";
+import { a as E, c as a, d as C, f as S, i as I, l as e, m as o, n as B, o as P, p as N, r, s as t, t as D, u as R } from "../chunks/basic-page-OrUVXKrx.js";
 export {
   D as AUTO_SAVE_DELAY_MS,
   B as BASIC_PAGE_CALLOUT,

package/dist/sections/sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as I, c as _, d as S, i as R, l as A, n as B, o as T, r as a, s, t as D, u as N } from "../chunks/sidebar-DRPe5CAh.js";
+import { a as I, c as _, d as S, i as R, l as A, n as B, o as T, r as a, s, t as D, u as N } from "../chunks/sidebar-bLsjo_yb.js";
 export {
   D as SIDEBAR_HEADER_INSET,
   B as SIDEBAR_ITEM,

package/dist/src/components/collapsible/collapsible.d.ts

@@ -5,7 +5,7 @@ type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> &
     className?: string;
 };
 declare function Trigger({ className, ...props }: StyledProps<typeof BaseCollapsible.Trigger>): import("react").JSX.Element;
-declare function Panel({ className, ...props }: StyledProps<typeof BaseCollapsible.Panel>): import("react").JSX.Element;
+declare function Panel({ className, onTransitionRun, onTransitionEnd, onTransitionCancel, ...props }: StyledProps<typeof BaseCollapsible.Panel>): import("react").JSX.Element;
 /**
  * Show/hide a region of content, built on Base UI `Collapsible` with a smooth
  * height animation. Control with `open` / `onOpenChange` or leave uncontrolled

package/dist/src/utils/animated-height.d.ts

@@ -4,6 +4,12 @@ import { ValueAnimationTransition } from 'motion/react';
  * Animates its own height to follow the measured height of `children`, so
  * content swaps (search filtering, skeleton → data) glide instead of jumping.
  * Honors `prefers-reduced-motion` by snapping height with no spring.
+ *
+ * The container clips only while the spring is in flight. ResizeObserver
+ * callbacks run after layout but before paint, so the clip lands before the
+ * swap frame can show; once the spring settles it is lifted again, so a focus
+ * ring, an effect button's rim, or any other overhang on the last row paints
+ * normally at rest instead of being cut off at the container's edge.
  */
 export declare function AnimatedHeight({ className, transition, children, }: {
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {

package/dist/chunks/animated-height-CCO-Ocoz.js

@@ -1,48 +0,0 @@
-"use client";
-import { SPRING_SETTLE as v } from "../motion.js";
-import { useEffect as R, useRef as a } from "react";
-import { jsx as m } from "react/jsx-runtime";
-import { animate as x, motion as S, useMotionValue as g, useReducedMotion as E } from "motion/react";
-var H = v;
-function N({ className: d, transition: r, children: p }) {
-  const s = a(null), i = a(null), t = g("auto"), c = E();
-  return R(() => {
-    const h = s.current, o = i.current;
-    if (!h || !o) return;
-    let e = null;
-    const u = new ResizeObserver((b) => {
-      const l = b[0]?.borderBoxSize?.[0], n = l ? l.blockSize : o.offsetHeight, f = t.get();
-      if (f === "auto" || c) {
-        e?.stop(), e = null, t.set(n);
-        return;
-      }
-      !e && Math.abs(f - n) < 0.5 || (e?.stop(), e = x(t, n, {
-        ...r ?? H,
-        onComplete: () => {
-          e = null;
-        }
-      }));
-    });
-    return u.observe(o), () => {
-      u.disconnect(), e?.stop();
-    };
-  }, [
-    t,
-    c,
-    r
-  ]), /* @__PURE__ */ m(S.div, {
-    ref: s,
-    className: "min-h-0 overflow-hidden",
-    style: { height: t },
-    children: /* @__PURE__ */ m("div", {
-      ref: i,
-      className: d,
-      children: p
-    })
-  });
-}
-export {
-  N as t
-};
-
-//# sourceMappingURL=animated-height-CCO-Ocoz.js.map

package/dist/chunks/animated-height-CCO-Ocoz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animated-height-CCO-Ocoz.js","names":[],"sources":["../../src/utils/animated-height.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from \"react\";\nimport { SPRING_SETTLE } from \"../motion\";\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  type ValueAnimationTransition,\n} from \"motion/react\";\n\n/**\n * Height spring for container-size transitions — same feel as the onboarding /\n * invite card and BasicPage footer reveal: quick, critically damped (no\n * overshoot that would flash clipped content).\n */\nconst HEIGHT_SPRING = SPRING_SETTLE;\n\n/**\n * Animates its own height to follow the measured height of `children`, so\n * content swaps (search filtering, skeleton → data) glide instead of jumping.\n * Honors `prefers-reduced-motion` by snapping height with no spring.\n */\nexport function AnimatedHeight({\n  className,\n  transition,\n  children,\n}: {\n  className?: string;\n  /** Spring override for the height follow. @default the Command spring */\n  transition?: ValueAnimationTransition<number | \"auto\">;\n  children: ReactNode;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const height = useMotionValue<number | \"auto\">(\"auto\");\n  const reduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const content = contentRef.current;\n    if (!container || !content) return;\n\n    let animation: ReturnType<typeof animate> | null = null;\n\n    const observer = new ResizeObserver((entries) => {\n      const box = entries[0]?.borderBoxSize?.[0];\n      const next = box ? box.blockSize : content.offsetHeight;\n      const current = height.get();\n      if (current === \"auto\" || reduceMotion) {\n        animation?.stop();\n        animation = null;\n        height.set(next);\n        return;\n      }\n      if (!animation && Math.abs(current - next) < 0.5) return;\n      animation?.stop();\n      animation = animate(height, next, {\n        ...(transition ?? HEIGHT_SPRING),\n        onComplete: () => {\n          animation = null;\n        },\n      });\n    });\n    observer.observe(content);\n\n    return () => {\n      observer.disconnect();\n      animation?.stop();\n    };\n  }, [height, reduceMotion, transition]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      // Stack (and other flex parents) set `min-height: auto` on children,\n      // which sizes to content and swallows the height spring. Clip and\n      // allow shrinking so the measured height can actually animate.\n      className=\"min-h-0 overflow-hidden\"\n      style={{ height }}\n    >\n      <div ref={contentRef} className={className}>\n        {children}\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AAeA,IAAM,IAAgB;AAOtB,SAAgB,EAAe,EAC7B,WAAA,GACA,YAAA,GACA,UAAA,EAAA,GAMC;AACD,QAAM,IAAe,EAAuB,IAAI,GAC1C,IAAa,EAAuB,IAAI,GACxC,IAAS,EAAgC,MAAM,GAC/C,IAAe,EAAiB;AAEtC,SAAA,EAAA,MAAgB;AACd,UAAM,IAAY,EAAa,SACzB,IAAU,EAAW;AAC3B,QAAI,CAAC,KAAa,CAAC,EAAS;AAE5B,QAAI,IAA+C;AAEnD,UAAM,IAAW,IAAI,eAAA,CAAgB,MAAY;AAC/C,YAAM,IAAM,EAAQ,CAAA,GAAI,gBAAgB,CAAA,GAClC,IAAO,IAAM,EAAI,YAAY,EAAQ,cACrC,IAAU,EAAO,IAAI;AAC3B,UAAI,MAAY,UAAU,GAAc;AACtC,QAAA,GAAW,KAAK,GAChB,IAAY,MACZ,EAAO,IAAI,CAAI;AACf;AAAA,MACF;AACA,MAAI,CAAC,KAAa,KAAK,IAAI,IAAU,CAAI,IAAI,QAC7C,GAAW,KAAK,GAChB,IAAY,EAAQ,GAAQ,GAAM;AAAA,QAChC,GAAI,KAAc;AAAA,QAClB,YAAA,MAAkB;AAChB,UAAA,IAAY;AAAA,QACd;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAA,EAAS,QAAQ,CAAO,GAExB,MAAa;AACX,MAAA,EAAS,WAAW,GACpB,GAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAc;AAAA,EAAU,CAAC,GAGnC,gBAAA,EAAC,EAAO,KAAR;AAAA,IACE,KAAK;AAAA,IAIL,WAAU;AAAA,IACV,OAAO,EAAE,QAAA,EAAO;AAAA,IAEhB,UAAA,gBAAA,EAAC,OAAD;AAAA,MAAK,KAAK;AAAA,MAAuB,WAAA;AAAA,MAC9B,UAAA;AAAA,IACE,CAAA;AAAA,EACK,CAAA;AAEhB"}