@cerberus-design/react 0.1.3-next-c6eade1 → 0.1.3-next-b633e4b

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

@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
@@ -91,6 +92,32 @@ declare type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>;
 export { IconButtonUsage }
 export { IconButtonUsage as IconButtonUsage_alias_1 }
 
+/**
+ * A screen ready friendly label component.
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Label docs](https://cerberus.digitalu.design/react/label)
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <Label htmlFor="test">Test Label</Label>
+ * </Field>
+ * ```
+ */
+declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
+export { Label }
+export { Label as Label_alias_1 }
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+declare interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor: string;
+    hidden?: boolean;
+}
+export { LabelProps }
+export { LabelProps as LabelProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

package/build/legacy/chunk-F2AENE7H.js

@@ -0,0 +1,48 @@
+import {
+  useFieldContext
+} from "./chunk-KETL4ZJK.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/Label.tsx
+import { label } from "@cerberus/styled-system/recipes";
+import { css, cx } from "@cerberus/styled-system/css";
+import { hstack } from "@cerberus/styled-system/patterns";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Label(props) {
+  const { hidden, ...nativeProps } = props;
+  const { required } = useFieldContext();
+  const usage = hidden ? "hidden" : "visible";
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        label({ usage }),
+        hstack({
+          justify: "space-between"
+        })
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(Show, { when: !required, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: css({
+              color: "neutral.text.100",
+              fontSize: "inherit"
+            }),
+            children: "optional"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-F2AENE7H.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport interface LabelProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, ...nativeProps } = props\n  const { required } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({ usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={!required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          optional\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAU;AAGxB,SAAS,cAAc;AA6BnB,SAYI,KAZJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,GAAG,YAAY,IAAI;AACnC,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,CAAC;AAAA,QACf,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,CAAC,UACX;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/{chunk-6YEAMVRY.js → chunk-X6PHIZRM.js}

@@ -1,9 +1,9 @@
-import {
-  createNavTriggerProps
-} from "./chunk-JF76VIL3.js";
 import {
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  createNavTriggerProps
+} from "./chunk-JF76VIL3.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
@@ -79,4 +79,4 @@ function NavMenuTrigger(props) {
 export {
   NavMenuTrigger
 };
-//# sourceMappingURL=chunk-6YEAMVRY.js.map
+//# sourceMappingURL=chunk-X6PHIZRM.js.map

package/build/legacy/components/Label.d.ts

@@ -0,0 +1,2 @@
+export { Label_alias_1 as Label } from '../_tsup-dts-rollup';
+export { LabelProps_alias_1 as LabelProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Label.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  Label
+} from "../chunk-F2AENE7H.js";
+import "../chunk-KETL4ZJK.js";
+import "../chunk-R4H3352X.js";
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

package/build/legacy/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/NavMenuTrigger.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   NavMenuTrigger
-} from "../chunk-6YEAMVRY.js";
-import "../chunk-JF76VIL3.js";
+} from "../chunk-X6PHIZRM.js";
 import "../chunk-KJUCHZHV.js";
+import "../chunk-JF76VIL3.js";
 import "../chunk-R4H3352X.js";
 export {
   NavMenuTrigger

package/build/legacy/index.d.ts

@@ -3,6 +3,8 @@ export { ButtonProps } from './_tsup-dts-rollup';
 export { IconButton } from './_tsup-dts-rollup';
 export { IconButtonUsage } from './_tsup-dts-rollup';
 export { IconButtonProps } from './_tsup-dts-rollup';
+export { Label } from './_tsup-dts-rollup';
+export { LabelProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/legacy/index.js

@@ -1,10 +1,14 @@
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-WSQTX34C.js";
 import {
   NavMenuTrigger
-} from "./chunk-6YEAMVRY.js";
+} from "./chunk-X6PHIZRM.js";
 import {
-  Field,
-  useFieldContext
-} from "./chunk-KETL4ZJK.js";
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -23,16 +27,15 @@ import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
-  NavMenuLink
-} from "./chunk-JA4IX7GN.js";
+  Label
+} from "./chunk-F2AENE7H.js";
 import {
-  NavMenuList,
-  getPosition
-} from "./chunk-WSQTX34C.js";
+  Field,
+  useFieldContext
+} from "./chunk-KETL4ZJK.js";
 import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
+  NavMenuLink
+} from "./chunk-JA4IX7GN.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
@@ -40,6 +43,7 @@ export {
   Button,
   Field,
   IconButton,
+  Label,
   MODE_KEY,
   NavMenu,
   NavMenuLink,

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

@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
@@ -91,6 +92,32 @@ declare type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>;
 export { IconButtonUsage }
 export { IconButtonUsage as IconButtonUsage_alias_1 }
 
+/**
+ * A screen ready friendly label component.
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Label docs](https://cerberus.digitalu.design/react/label)
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <Label htmlFor="test">Test Label</Label>
+ * </Field>
+ * ```
+ */
+declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
+export { Label }
+export { Label as Label_alias_1 }
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+declare interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor: string;
+    hidden?: boolean;
+}
+export { LabelProps }
+export { LabelProps as LabelProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

package/build/modern/chunk-F2AENE7H.js

@@ -0,0 +1,48 @@
+import {
+  useFieldContext
+} from "./chunk-KETL4ZJK.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+
+// src/components/Label.tsx
+import { label } from "@cerberus/styled-system/recipes";
+import { css, cx } from "@cerberus/styled-system/css";
+import { hstack } from "@cerberus/styled-system/patterns";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Label(props) {
+  const { hidden, ...nativeProps } = props;
+  const { required } = useFieldContext();
+  const usage = hidden ? "hidden" : "visible";
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        label({ usage }),
+        hstack({
+          justify: "space-between"
+        })
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(Show, { when: !required, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: css({
+              color: "neutral.text.100",
+              fontSize: "inherit"
+            }),
+            children: "optional"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-F2AENE7H.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport interface LabelProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, ...nativeProps } = props\n  const { required } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({ usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={!required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          optional\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAU;AAGxB,SAAS,cAAc;AA6BnB,SAYI,KAZJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,GAAG,YAAY,IAAI;AACnC,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,CAAC;AAAA,QACf,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,CAAC,UACX;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-6YEAMVRY.js → chunk-X6PHIZRM.js}

@@ -1,9 +1,9 @@
-import {
-  createNavTriggerProps
-} from "./chunk-JF76VIL3.js";
 import {
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  createNavTriggerProps
+} from "./chunk-JF76VIL3.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
@@ -79,4 +79,4 @@ function NavMenuTrigger(props) {
 export {
   NavMenuTrigger
 };
-//# sourceMappingURL=chunk-6YEAMVRY.js.map
+//# sourceMappingURL=chunk-X6PHIZRM.js.map

package/build/modern/components/Label.d.ts

@@ -0,0 +1,2 @@
+export { Label_alias_1 as Label } from '../_tsup-dts-rollup';
+export { LabelProps_alias_1 as LabelProps } from '../_tsup-dts-rollup';

package/build/modern/components/Label.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  Label
+} from "../chunk-F2AENE7H.js";
+import "../chunk-KETL4ZJK.js";
+import "../chunk-R4H3352X.js";
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

package/build/modern/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/NavMenuTrigger.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   NavMenuTrigger
-} from "../chunk-6YEAMVRY.js";
-import "../chunk-JF76VIL3.js";
+} from "../chunk-X6PHIZRM.js";
 import "../chunk-KJUCHZHV.js";
+import "../chunk-JF76VIL3.js";
 import "../chunk-R4H3352X.js";
 export {
   NavMenuTrigger

package/build/modern/index.d.ts

@@ -3,6 +3,8 @@ export { ButtonProps } from './_tsup-dts-rollup';
 export { IconButton } from './_tsup-dts-rollup';
 export { IconButtonUsage } from './_tsup-dts-rollup';
 export { IconButtonProps } from './_tsup-dts-rollup';
+export { Label } from './_tsup-dts-rollup';
+export { LabelProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/modern/index.js

@@ -1,10 +1,14 @@
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-WSQTX34C.js";
 import {
   NavMenuTrigger
-} from "./chunk-6YEAMVRY.js";
+} from "./chunk-X6PHIZRM.js";
 import {
-  Field,
-  useFieldContext
-} from "./chunk-KETL4ZJK.js";
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -23,16 +27,15 @@ import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
-  NavMenuLink
-} from "./chunk-JA4IX7GN.js";
+  Label
+} from "./chunk-F2AENE7H.js";
 import {
-  NavMenuList,
-  getPosition
-} from "./chunk-WSQTX34C.js";
+  Field,
+  useFieldContext
+} from "./chunk-KETL4ZJK.js";
 import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
+  NavMenuLink
+} from "./chunk-JA4IX7GN.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
@@ -40,6 +43,7 @@ export {
   Button,
   Field,
   IconButton,
+  Label,
   MODE_KEY,
   NavMenu,
   NavMenuLink,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.1.3-next-c6eade1",
+  "version": "0.1.3-next-b633e4b",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,

package/src/components/Label.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import { label } from '@cerberus/styled-system/recipes'
+import { css, cx } from '@cerberus/styled-system/css'
+import { useFieldContext } from '../context/field'
+import { Show } from './Show'
+import { hstack } from '@cerberus/styled-system/patterns'
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+
+export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+  htmlFor: string
+  hidden?: boolean
+}
+
+/**
+ * A screen ready friendly label component.
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Label docs](https://cerberus.digitalu.design/react/label)
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <Label htmlFor="test">Test Label</Label>
+ * </Field>
+ * ```
+ */
+export function Label(props: PropsWithChildren<LabelProps>) {
+  const { hidden, ...nativeProps } = props
+  const { required } = useFieldContext()
+  const usage = hidden ? 'hidden' : 'visible'
+
+  return (
+    <label
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        label({ usage }),
+        hstack({
+          justify: 'space-between',
+        }),
+      )}
+    >
+      {props.children}
+      <Show when={!required}>
+        <span
+          className={css({
+            color: 'neutral.text.100',
+            fontSize: 'inherit',
+          })}
+        >
+          optional
+        </span>
+      </Show>
+    </label>
+  )
+}

package/src/index.ts

@@ -7,6 +7,7 @@
 
 export * from './components/Button'
 export * from './components/IconButton'
+export * from './components/Label'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'