@cerberus-design/react 0.7.4-next-f357b4f → 0.7.4-next-73e6ea1

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -1325,7 +1325,9 @@ export { Th as Th_alias_1 }
  * Th component for the Table component
  * @module
  */
-declare type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement>;
+declare type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+    onClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
+};
 export { ThBaseProps }
 export { ThBaseProps as ThBaseProps_alias_1 }
 

package/build/legacy/chunk-3GXISGPS.js

@@ -0,0 +1,47 @@
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/components/Th.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { th } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function Th(props) {
+  const { size, onClick, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: Boolean(onClick),
+      fallback: /* @__PURE__ */ jsx(
+        "th",
+        {
+          ...nativeProps,
+          className: cx(nativeProps.className, th({ size }))
+        }
+      ),
+      children: /* @__PURE__ */ jsx("th", { ...nativeProps, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx(
+            nativeProps.className,
+            th({ size }),
+            css({
+              alignItems: "center",
+              display: "inline-flex",
+              justifyContent: "space-between",
+              userSelect: "none",
+              w: "full"
+            })
+          ),
+          onClick,
+          children: props.children
+        }
+      ) })
+    }
+  );
+}
+
+export {
+  Th
+};
+//# sourceMappingURL=chunk-3GXISGPS.js.map

package/build/legacy/chunk-3GXISGPS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AA4BhC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Th.js

@@ -1,6 +1,7 @@
 import {
   Th
-} from "../chunk-KFJKK2WX.js";
+} from "../chunk-3GXISGPS.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Th
 };

package/build/legacy/index.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-DB2OA5PU.js";
 import {
   Th
-} from "./chunk-KFJKK2WX.js";
+} from "./chunk-3GXISGPS.js";
 import {
   Thead
 } from "./chunk-N3FUF4TB.js";

package/build/modern/_tsup-dts-rollup.d.ts

@@ -1325,7 +1325,9 @@ export { Th as Th_alias_1 }
  * Th component for the Table component
  * @module
  */
-declare type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement>;
+declare type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+    onClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
+};
 export { ThBaseProps }
 export { ThBaseProps as ThBaseProps_alias_1 }
 

package/build/modern/chunk-3GXISGPS.js

@@ -0,0 +1,47 @@
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/components/Th.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { th } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function Th(props) {
+  const { size, onClick, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    Show,
+    {
+      when: Boolean(onClick),
+      fallback: /* @__PURE__ */ jsx(
+        "th",
+        {
+          ...nativeProps,
+          className: cx(nativeProps.className, th({ size }))
+        }
+      ),
+      children: /* @__PURE__ */ jsx("th", { ...nativeProps, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx(
+            nativeProps.className,
+            th({ size }),
+            css({
+              alignItems: "center",
+              display: "inline-flex",
+              justifyContent: "space-between",
+              userSelect: "none",
+              w: "full"
+            })
+          ),
+          onClick,
+          children: props.children
+        }
+      ) })
+    }
+  );
+}
+
+export {
+  Th
+};
+//# sourceMappingURL=chunk-3GXISGPS.js.map

package/build/modern/chunk-3GXISGPS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AA4BhC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/Th.js

@@ -1,6 +1,7 @@
 import {
   Th
-} from "../chunk-KFJKK2WX.js";
+} from "../chunk-3GXISGPS.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Th
 };

package/build/modern/index.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-BMQ7I2PL.js";
 import {
   Th
-} from "./chunk-KFJKK2WX.js";
+} from "./chunk-3GXISGPS.js";
 import {
   Thead
 } from "./chunk-N3FUF4TB.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.7.4-next-f357b4f",
+  "version": "0.7.4-next-73e6ea1",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.7.4-next-f357b4f"
+    "@cerberus-design/styled-system": "0.7.4-next-73e6ea1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Th.tsx

@@ -1,13 +1,16 @@
-import { cx } from '@cerberus/styled-system/css'
+import { css, cx } from '@cerberus/styled-system/css'
 import { th, type ThVariantProps } from '@cerberus/styled-system/recipes'
-import type { TableHTMLAttributes } from 'react'
+import type { MouseEvent, TableHTMLAttributes } from 'react'
+import { Show } from './Show'
 
 /**
  * Th component for the Table component
  * @module
  */
 
-export type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement>
+export type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
+}
 export type ThProps = ThBaseProps & ThVariantProps
 
 /**
@@ -19,8 +22,35 @@ export type ThProps = ThBaseProps & ThVariantProps
  * ```
  */
 export function Th(props: ThProps) {
-  const { size, ...nativeProps } = props
+  const { size, onClick, ...nativeProps } = props
   return (
-    <th {...nativeProps} className={cx(nativeProps.className, th({ size }))} />
+    <Show
+      when={Boolean(onClick)}
+      fallback={
+        <th
+          {...nativeProps}
+          className={cx(nativeProps.className, th({ size }))}
+        />
+      }
+    >
+      <th {...nativeProps}>
+        <button
+          className={cx(
+            nativeProps.className,
+            th({ size }),
+            css({
+              alignItems: 'center',
+              display: 'inline-flex',
+              justifyContent: 'space-between',
+              userSelect: 'none',
+              w: 'full',
+            }),
+          )}
+          onClick={onClick}
+        >
+          {props.children}
+        </button>
+      </th>
+    </Show>
   )
 }

package/build/legacy/chunk-KFJKK2WX.js

@@ -1,13 +0,0 @@
-// src/components/Th.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { th } from "@cerberus/styled-system/recipes";
-import { jsx } from "react/jsx-runtime";
-function Th(props) {
-  const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ jsx("th", { ...nativeProps, className: cx(nativeProps.className, th({ size })) });
-}
-
-export {
-  Th
-};
-//# sourceMappingURL=chunk-KFJKK2WX.js.map

package/build/legacy/chunk-KFJKK2WX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement>\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, ...nativeProps } = props\n  return (\n    <th {...nativeProps} className={cx(nativeProps.className, th({ size }))} />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,UAA+B;AAsBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE,oBAAC,QAAI,GAAG,aAAa,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG;AAE7E;","names":[]}

package/build/modern/chunk-KFJKK2WX.js

@@ -1,13 +0,0 @@
-// src/components/Th.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { th } from "@cerberus/styled-system/recipes";
-import { jsx } from "react/jsx-runtime";
-function Th(props) {
-  const { size, ...nativeProps } = props;
-  return /* @__PURE__ */ jsx("th", { ...nativeProps, className: cx(nativeProps.className, th({ size })) });
-}
-
-export {
-  Th
-};
-//# sourceMappingURL=chunk-KFJKK2WX.js.map

package/build/modern/chunk-KFJKK2WX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement>\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, ...nativeProps } = props\n  return (\n    <th {...nativeProps} className={cx(nativeProps.className, th({ size }))} />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,UAA+B;AAsBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE,oBAAC,QAAI,GAAG,aAAa,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG;AAE7E;","names":[]}