@ngrok/mantle 0.1.59 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -91
- package/dist/alert.js +1 -1
- package/dist/alert.js.map +1 -1
- package/dist/anchor.js +1 -1
- package/dist/anchor.js.map +1 -1
- package/dist/badge.js +1 -1
- package/dist/badge.js.map +1 -1
- package/dist/button.js +1 -1
- package/dist/calendar.js +1 -1
- package/dist/calendar.js.map +1 -1
- package/dist/card.js +1 -1
- package/dist/card.js.map +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/{chunk-O5Z6DOXW.js → chunk-5YA2UTFS.js} +2 -2
- package/dist/chunk-5YA2UTFS.js.map +1 -0
- package/dist/{chunk-MODFDUXR.js → chunk-7PF4QIBH.js} +1 -1
- package/dist/chunk-7PF4QIBH.js.map +1 -0
- package/dist/{chunk-IGCOSMVM.js → chunk-D3XF6J5A.js} +1 -1
- package/dist/chunk-D3XF6J5A.js.map +1 -0
- package/dist/{chunk-GJVJTVHQ.js → chunk-EAKUJEO5.js} +2 -2
- package/dist/chunk-EAKUJEO5.js.map +1 -0
- package/dist/{chunk-A7RPXAZX.js → chunk-EEMNPJIL.js} +2 -2
- package/dist/chunk-EEMNPJIL.js.map +1 -0
- package/dist/{chunk-5OMWN3DC.js → chunk-EQOASS6Y.js} +2 -2
- package/dist/chunk-EQOASS6Y.js.map +1 -0
- package/dist/{chunk-NREABJ6Y.js → chunk-G2WLA5VU.js} +1 -1
- package/dist/chunk-G2WLA5VU.js.map +1 -0
- package/dist/{chunk-TZX4WBMF.js → chunk-IWKI4XHM.js} +1 -1
- package/dist/chunk-IWKI4XHM.js.map +1 -0
- package/dist/{chunk-Q7RN2OC6.js → chunk-JE2MBLEH.js} +2 -2
- package/dist/chunk-JE2MBLEH.js.map +1 -0
- package/dist/{chunk-Z2YAVERL.js → chunk-LKCV5U37.js} +1 -1
- package/dist/chunk-LKCV5U37.js.map +1 -0
- package/dist/{chunk-A5H52ODC.js → chunk-NSJFPSQC.js} +1 -1
- package/dist/chunk-NSJFPSQC.js.map +1 -0
- package/dist/chunk-XGNB7VBZ.js +2 -0
- package/dist/chunk-XGNB7VBZ.js.map +1 -0
- package/dist/{chunk-AIC74XBY.js → chunk-YPNOQPCP.js} +2 -2
- package/dist/chunk-YPNOQPCP.js.map +1 -0
- package/dist/code-block.js +1 -1
- package/dist/code-block.js.map +1 -1
- package/dist/color.js.map +1 -1
- package/dist/compose-refs.js +1 -1
- package/dist/cx.js +1 -1
- package/dist/dialog.js +1 -1
- package/dist/dialog.js.map +1 -1
- package/dist/dropdown-menu.js +1 -1
- package/dist/dropdown-menu.js.map +1 -1
- package/dist/hooks.js +1 -1
- package/dist/icon.js +1 -1
- package/dist/inline-code.js +1 -1
- package/dist/inline-code.js.map +1 -1
- package/dist/input.js +1 -1
- package/dist/label.js +1 -1
- package/dist/label.js.map +1 -1
- package/dist/media-object.js +1 -1
- package/dist/media-object.js.map +1 -1
- package/dist/pagination.js +1 -1
- package/dist/pagination.js.map +1 -1
- package/dist/popover.js +1 -1
- package/dist/popover.js.map +1 -1
- package/dist/progress.d.ts +1 -1
- package/dist/progress.js +1 -1
- package/dist/progress.js.map +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/select.js +1 -1
- package/dist/separator.js +1 -1
- package/dist/sheet.js +1 -1
- package/dist/sheet.js.map +1 -1
- package/dist/skeleton.js +1 -1
- package/dist/skeleton.js.map +1 -1
- package/dist/switch.js +1 -1
- package/dist/switch.js.map +1 -1
- package/dist/table.js +1 -1
- package/dist/table.js.map +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tabs.js.map +1 -1
- package/dist/tailwind-preset.cjs +1 -1
- package/dist/tailwind-preset.cjs.map +1 -1
- package/dist/tailwind-preset.js.map +1 -1
- package/dist/text-area.js +1 -1
- package/dist/text-area.js.map +1 -1
- package/dist/theme-provider.js +1 -1
- package/dist/theme-provider.js.map +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.js.map +1 -1
- package/dist/types.js +1 -1
- package/package.json +16 -35
- package/dist/chunk-5OMWN3DC.js.map +0 -1
- package/dist/chunk-A5H52ODC.js.map +0 -1
- package/dist/chunk-A7RPXAZX.js.map +0 -1
- package/dist/chunk-AIC74XBY.js.map +0 -1
- package/dist/chunk-GJVJTVHQ.js.map +0 -1
- package/dist/chunk-IGCOSMVM.js.map +0 -1
- package/dist/chunk-MODFDUXR.js.map +0 -1
- package/dist/chunk-NREABJ6Y.js.map +0 -1
- package/dist/chunk-O5Z6DOXW.js.map +0 -1
- package/dist/chunk-Q7RN2OC6.js.map +0 -1
- package/dist/chunk-TZX4WBMF.js.map +0 -1
- package/dist/chunk-YPS473FU.js +0 -2
- package/dist/chunk-YPS473FU.js.map +0 -1
- package/dist/chunk-Z2YAVERL.js.map +0 -1
- package/dist/tailwind-preset.d.cts +0 -513
- package/dist/tailwind-preset.d.ts +0 -513
package/README.md
CHANGED
|
@@ -1,91 +1 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s inspired by [shadcn/ui](https://ui.shadcn.com) and uses [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) for styling. It’s documented using [Remix](https://remix.run/docs).
|
|
4
|
-
|
|
5
|
-
## Get Started
|
|
6
|
-
|
|
7
|
-
To get started, install `@ngrok/mantle` with your preferred package manager:
|
|
8
|
-
|
|
9
|
-
| package manager | command |
|
|
10
|
-
| --------------- | ---------------------------- |
|
|
11
|
-
| npm | npm install -E @ngrok/mantle |
|
|
12
|
-
| yarn | yarn add -E @ngrok/mantle |
|
|
13
|
-
| pnpm | pnpm add -E @ngrok/mantle |
|
|
14
|
-
| bun | bun add -E @ngrok/mantle |
|
|
15
|
-
|
|
16
|
-
Then, add the [preset](https://tailwindcss.com/docs/presets) and mantle content to your tailwind configuration.
|
|
17
|
-
|
|
18
|
-
```ts
|
|
19
|
-
import { createRequire } from "node:module";
|
|
20
|
-
import { mantlePreset, resolveMantleContentGlob } from "@ngrok/mantle/tailwind-preset";
|
|
21
|
-
import type { Config } from "tailwindcss";
|
|
22
|
-
|
|
23
|
-
const require = createRequire(import.meta.url);
|
|
24
|
-
|
|
25
|
-
export default {
|
|
26
|
-
presets: [mantlePreset],
|
|
27
|
-
content: [resolveMantleContentGlob(require), "./app/**/*.tsx"], // 👈 don't forget to swap out app content glob here!
|
|
28
|
-
// ... the rest of your tailwind config!
|
|
29
|
-
} satisfies Config;
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
Next, check out the [Overview & Setup](https://mantle.ngrok.com/) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
|
|
33
|
-
|
|
34
|
-
### Prerequisites
|
|
35
|
-
|
|
36
|
-
The following prerequisites are required to contribute to `@ngrok/mantle`.
|
|
37
|
-
We walk through the [tooling installation](#installation) steps below.
|
|
38
|
-
|
|
39
|
-
- [Node 20](https://nodejs.org/en/download)
|
|
40
|
-
- [pnpm 9](https://pnpm.io/installation#using-npm)
|
|
41
|
-
- [nvm](https://github.com/nvm-sh/nvm)
|
|
42
|
-
|
|
43
|
-
### Installation
|
|
44
|
-
|
|
45
|
-
Install the prerequisites through either the [automated](#automated-installation) or [manual](#manual-installation) installation guides.
|
|
46
|
-
|
|
47
|
-
#### Automated Installation
|
|
48
|
-
|
|
49
|
-
We use [direnv](https://direnv.net/) to assist you with setting up all of the required tooling.
|
|
50
|
-
Prefer to install and manage the tooling yourself? See [the manual installation instructions below](#manual-installation).
|
|
51
|
-
|
|
52
|
-
First, install `direnv`:
|
|
53
|
-
|
|
54
|
-
| OS | command |
|
|
55
|
-
| ------ | ----------------------- |
|
|
56
|
-
| macOS | brew install direnv |
|
|
57
|
-
| ubuntu | sudo apt install direnv |
|
|
58
|
-
|
|
59
|
-
For all other OSes, see the [direnv installation guide](https://direnv.net/docs/installation.html).
|
|
60
|
-
|
|
61
|
-
> [!NOTE]
|
|
62
|
-
> Don't forget to [set up direnv integration with your shell](https://direnv.net/docs/hook.html).
|
|
63
|
-
|
|
64
|
-
Next, clone the repo and move into the directory:
|
|
65
|
-
|
|
66
|
-
```sh
|
|
67
|
-
git clone git@github.com:ngrok-oss/mantle.git
|
|
68
|
-
cd frontend
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
Next, run:
|
|
72
|
-
|
|
73
|
-
```sh
|
|
74
|
-
direnv allow
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
> [!WARNING]
|
|
78
|
-
> If `direnv allow` does nothing for you (you should see things happening!), consider following the [guides to integrate direnv with your shell](https://direnv.net/docs/hook.html) and then try `direnv allow` again! As a last resort, you can follow the [manual installation instructions up above](#manual-installation).
|
|
79
|
-
|
|
80
|
-
This will install `nvm` (if not already installed) as well as set the correct `node` and `pnpm` versions for you.
|
|
81
|
-
It will also run `pnpm install` at the end to install all `node_modules`.
|
|
82
|
-
|
|
83
|
-
#### Manual Installation
|
|
84
|
-
|
|
85
|
-
If you prefer to manually manage and install the tooling yourself, follow these steps:
|
|
86
|
-
|
|
87
|
-
1. Install [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or your node version manager of choice.
|
|
88
|
-
2. Ensure that `node 20` is installed. With `nvm`, run `nvm install`.
|
|
89
|
-
3. Enable `pnpm` with `corepack`: `corepack enable pnpm`
|
|
90
|
-
4. Install `pnpm` with `corepack`: `corepack install`
|
|
91
|
-
5. Install project dependencies with `pnpm`: `pnpm install`
|
|
1
|
+
# `@ngrok/mantle`
|
package/dist/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a}from"./chunk-
|
|
1
|
+
import{a}from"./chunk-NSJFPSQC.js";import{cva as p}from"class-variance-authority";import{forwardRef as n}from"react";import{jsx as i}from"react/jsx-runtime";var d=p("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",default:"border-neutral-500/50 bg-neutral-500/10 text-neutral-700",info:"border-accent-500/50 bg-accent-500/10 text-accent-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"}},defaultVariants:{priority:"default"}}),l=n(({className:e,priority:t="default",...r},c)=>i("div",{ref:c,className:a(d({priority:t}),e),...r}));l.displayName="Alert";var s=n(({className:e,...t},r)=>i("div",{ref:r,className:a("min-w-0 flex-1",e),...t}));s.displayName="AlertContent";var o=n(({className:e,...t},r)=>i("h5",{ref:r,className:a("font-medium",e),...t}));o.displayName="AlertTitle";var m=n(({className:e,...t},r)=>i("div",{ref:r,className:a("text-sm",e),...t}));m.displayName="AlertDescription";export{l as Alert,s as AlertContent,m as AlertDescription,o as AlertTitle};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
package/dist/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../
|
|
1
|
+
{"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport type { VariantProps } from \"../../types\";\nimport { cx } from \"../../utils/cx\";\n\nconst alertVariants = cva(\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm\", {\n\tvariants: {\n\t\t/**\n\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t * @default \"default\"\n\t\t */\n\t\tpriority: {\n\t\t\tdanger: \"border-danger-500/50 bg-danger-500/10 text-danger-700\",\n\t\t\tdefault: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\tinfo: \"border-accent-500/50 bg-accent-500/10 text-accent-700\",\n\t\t\tsuccess: \"border-success-500/50 bg-success-500/10 text-success-700\",\n\t\t\twarning: \"border-warning-500/50 bg-warning-500/10 text-warning-700\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tpriority: \"default\",\n\t},\n});\n\ntype AlertVariants = VariantProps<typeof alertVariants>;\n\n/**\n * Displays a callout for user attention.\n */\nconst Alert = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & AlertVariants>(\n\t({ className, priority = \"default\", ...props }, ref) => (\n\t\t<div ref={ref} className={cx(alertVariants({ priority }), className)} {...props} />\n\t),\n);\nAlert.displayName = \"Alert\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n */\nconst AlertContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n\t<div ref={ref} className={cx(\"min-w-0 flex-1\", className)} {...props} />\n));\nAlertContent.displayName = \"AlertContent\";\n\n/**\n * The title of an alert.\n */\nconst AlertTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(\n\t({ className, ...props }, ref) => <h5 ref={ref} className={cx(\"font-medium\", className)} {...props} />,\n);\nAlertTitle.displayName = \"AlertTitle\";\n\n/**\n * The description of an alert.\n */\nconst AlertDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n\t({ className, ...props }, ref) => <div ref={ref} className={cx(\"text-sm\", className)} {...props} />,\n);\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertContent, AlertTitle, AlertDescription };\n"],"mappings":"mCAAA,OAAS,OAAAA,MAAW,2BACpB,OAAS,cAAAC,MAAkB,QAgCzB,cAAAC,MAAA,oBA3BF,IAAMC,EAAgBC,EAAI,+DAAgE,CACzF,SAAU,CAMT,SAAU,CACT,OAAQ,wDACR,QAAS,2DACT,KAAM,wDACN,QAAS,2DACT,QAAS,0DACV,CACD,EACA,gBAAiB,CAChB,SAAU,SACX,CACD,CAAC,EAOKC,EAAQC,EACb,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAW,UAAW,GAAGC,CAAM,EAAGC,IAC/CR,EAAC,OAAI,IAAKQ,EAAK,UAAWC,EAAGR,EAAc,CAAE,SAAAK,CAAS,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAEnF,EACAJ,EAAM,YAAc,QAKpB,IAAMO,EAAeN,EAA2D,CAAC,CAAE,UAAAC,EAAW,GAAGE,CAAM,EAAGC,IACzGR,EAAC,OAAI,IAAKQ,EAAK,UAAWC,EAAG,iBAAkBJ,CAAS,EAAI,GAAGE,EAAO,CACtE,EACDG,EAAa,YAAc,eAK3B,IAAMC,EAAaP,EAClB,CAAC,CAAE,UAAAC,EAAW,GAAGE,CAAM,EAAGC,IAAQR,EAAC,MAAG,IAAKQ,EAAK,UAAWC,EAAG,cAAeJ,CAAS,EAAI,GAAGE,EAAO,CACrG,EACAI,EAAW,YAAc,aAKzB,IAAMC,EAAmBR,EACxB,CAAC,CAAE,UAAAC,EAAW,GAAGE,CAAM,EAAGC,IAAQR,EAAC,OAAI,IAAKQ,EAAK,UAAWC,EAAG,UAAWJ,CAAS,EAAI,GAAGE,EAAO,CAClG,EACAK,EAAiB,YAAc","names":["cva","forwardRef","jsx","alertVariants","cva","Alert","forwardRef","className","priority","props","ref","cx","AlertContent","AlertTitle","AlertDescription"]}
|
package/dist/anchor.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as o}from"./chunk-
|
|
1
|
+
import{a as o}from"./chunk-NSJFPSQC.js";import{Slot as a}from"@radix-ui/react-slot";import{forwardRef as f}from"react";import{jsx as m}from"react/jsx-runtime";var i=e=>o("cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",e),s=f(({asChild:e,className:n,rel:t,...r},c)=>{let p=e?a:"a",u=l(t);return m(p,{className:i(n),ref:c,rel:u,...r})});s.displayName="Anchor";function l(e){return Array.isArray(e)?[...new Set(e)].map(r=>r?.trim()).filter(Boolean).sort().join(" ")||void 0:e?.trim()||void 0}export{s as Anchor,i as anchorClassNames,l as resolveRel};
|
|
2
2
|
//# sourceMappingURL=anchor.js.map
|
package/dist/anchor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../
|
|
1
|
+
{"version":3,"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport type { AnchorHTMLAttributes } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child\";\nimport { cx } from \"../../utils/cx\";\nimport type { Rel, Target } from \"./types\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className: string | undefined) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"rel\" | \"target\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t\t/**\n\t\t * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).\n\t\t *\n\t\t * Note: Setting `target=\"_blank\"` on <a> elements implicitly provides the same rel behavior as setting `rel=\"noopener\"` which does not set `window.opener`.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n\t\t *\n\t\t * @default \"_self\"\n\t\t */\n\t\ttarget?: Target | undefined;\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the\n * [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).\n */\nconst Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, rel: propRel, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"a\";\n\tconst rel = resolveRel(propRel);\n\n\treturn <Component className={anchorClassNames(className)} ref={ref} rel={rel} {...props} />;\n});\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.sort()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAAS,cAAAC,MAAkB,QAqDnB,cAAAC,MAAA,oBA5CR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAoCKE,EAASC,EAA2C,CAAC,CAAE,QAAAC,EAAS,UAAAJ,EAAW,IAAKK,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAClH,IAAMC,EAAYJ,EAAUK,EAAO,IAC7BC,EAAMC,EAAWN,CAAO,EAE9B,OAAOP,EAACU,EAAA,CAAU,UAAWT,EAAiBC,CAAS,EAAG,IAAKO,EAAK,IAAKG,EAAM,GAAGJ,EAAO,CAC1F,CAAC,EACDJ,EAAO,YAAc,SAOrB,SAASS,EAAWD,EAA0F,CAC7G,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAC1B,IAAKE,GAASA,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,KAAK,EACL,KAAK,GAAG,GACO,OAGXF,GAAK,KAAK,GAAK,MACvB","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","propRel","props","ref","Component","Slot","rel","resolveRel","item"]}
|
package/dist/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as n}from"./chunk-
|
|
1
|
+
import{a as n}from"./chunk-EAKUJEO5.js";import{a as o}from"./chunk-NSJFPSQC.js";import s from"tiny-invariant";import{jsx as x,jsxs as f}from"react/jsx-runtime";var p=({appearance:t,children:e,className:g,color:a="neutral",icon:r,...l})=>{let i=d(a,t),c=b(a,t);return f("span",{className:o("inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs",r&&"ps-1",i,c,g),...l,children:[r&&x(n,{className:"size-5 sm:size-4",svg:r}),e]})};var u={amber:"bg-amber-700/20",blue:"bg-blue-700/20",cyan:"bg-cyan-700/20",emerald:"bg-emerald-700/20",fuchsia:"bg-fuchsia-700/20",gray:"bg-gray-700/20",green:"bg-green-700/20",indigo:"bg-indigo-700/20",lime:"bg-lime-700/20",orange:"bg-orange-700/20",pink:"bg-pink-700/20",purple:"bg-purple-700/20",red:"bg-red-700/20",rose:"bg-rose-700/20",sky:"bg-sky-700/20",teal:"bg-teal-700/20",violet:"bg-violet-700/20",yellow:"bg-yellow-700/20",accent:"bg-accent-700/20",danger:"bg-danger-700/20",neutral:"bg-neutral-700/20",success:"bg-success-700/20",warning:"bg-warning-700/20"};function d(t,e){switch(e){case"muted":return u[t];default:s(!1,`Invalid appearance: ${String(e)}`)}}var m={amber:"text-amber-700",blue:"text-blue-700",cyan:"text-cyan-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",gray:"text-gray-700",green:"text-green-700",indigo:"text-indigo-700",lime:"text-lime-700",orange:"text-orange-700",pink:"text-pink-700",purple:"text-purple-700",red:"text-red-700",rose:"text-rose-700",sky:"text-sky-700",teal:"text-teal-700",violet:"text-violet-700",yellow:"text-yellow-700",accent:"text-accent-700",danger:"text-danger-700",neutral:"text-neutral-700",success:"text-success-700",warning:"text-warning-700"};function b(t,e){switch(e){case"muted":return m[t];default:s(!1,`Invalid appearance: ${String(e)}`)}}export{p as Badge};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
package/dist/badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../
|
|
1
|
+
{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { Color } from \"../../utils/color\";\nimport { cx } from \"../../utils/cx\";\nimport { IconBase } from \"../icon/_icon-base\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n\t/**\n\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t */\n\tcolor?: Color;\n\t/**\n\t * The icon to render inside the badge.\n\t */\n\ticon?: ReactNode;\n\t/**\n\t * The visual style of the badge.\n\t */\n\tappearance: Appearance;\n};\n\n/**\n * A Badge is a non-interactive component used to highlight important information or to visually indicate the status of an item.\n */\nconst Badge = ({ appearance, children, className, color = \"neutral\", icon, ...props }: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\n\t\t\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 text-sm font-medium sm:text-xs\",\n\t\t\t\ticon && \"ps-1\",\n\t\t\t\tbgColor,\n\t\t\t\ttextColor,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <IconBase className=\"size-5 sm:size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\n\n// MARK: - Exports\n\nexport { Badge };\n\nexport type { BadgeProps };\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-700/20\",\n\tblue: \"bg-blue-700/20\",\n\tcyan: \"bg-cyan-700/20\",\n\temerald: \"bg-emerald-700/20\",\n\tfuchsia: \"bg-fuchsia-700/20\",\n\tgray: \"bg-gray-700/20\",\n\tgreen: \"bg-green-700/20\",\n\tindigo: \"bg-indigo-700/20\",\n\tlime: \"bg-lime-700/20\",\n\torange: \"bg-orange-700/20\",\n\tpink: \"bg-pink-700/20\",\n\tpurple: \"bg-purple-700/20\",\n\tred: \"bg-red-700/20\",\n\trose: \"bg-rose-700/20\",\n\tsky: \"bg-sky-700/20\",\n\tteal: \"bg-teal-700/20\",\n\tviolet: \"bg-violet-700/20\",\n\tyellow: \"bg-yellow-700/20\",\n\taccent: \"bg-accent-700/20\",\n\tdanger: \"bg-danger-700/20\",\n\tneutral: \"bg-neutral-700/20\",\n\tsuccess: \"bg-success-700/20\",\n\twarning: \"bg-warning-700/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"gFACA,OAAOA,MAAe,iBA+BpB,OAUU,OAAAC,EAVV,QAAAC,MAAA,oBALF,IAAMC,EAAQ,CAAC,CAAE,WAAAC,EAAY,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAQ,UAAW,KAAAC,EAAM,GAAGC,CAAM,IAAkB,CACrG,IAAMC,EAAUC,EAAeJ,EAAOH,CAAU,EAC1CQ,EAAYC,EAAiBN,EAAOH,CAAU,EAEpD,OACCU,EAAC,QACA,UAAWC,EACV,oHACAP,GAAQ,OACRE,EACAE,EACAN,CACD,EACC,GAAGG,EAEH,UAAAD,GAAQQ,EAACC,EAAA,CAAS,UAAU,mBAAmB,IAAKT,EAAM,EAC1DH,GACF,CAEF,EAUA,IAAMa,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,QAAS,oBACT,QAAS,oBACT,QAAS,mBACV,EAEA,SAASC,EAAeC,EAAcC,EAAwB,CAC7D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOH,EAAmBE,CAAK,EAChC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD,CAEA,IAAME,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,QAAS,mBACT,QAAS,mBACT,QAAS,kBACV,EAEA,SAASC,EAAiBJ,EAAcC,EAAwB,CAC/D,OAAQA,EAAY,CACnB,IAAK,QACJ,OAAOE,EAAqBH,CAAK,EAClC,QACCE,EAAU,GAAO,uBAAuB,OAAOD,CAAU,CAAC,EAAE,CAC9D,CACD","names":["invariant","jsx","jsxs","Badge","appearance","children","className","color","icon","props","bgColor","computeBgColor","textColor","computeTextColor","jsxs","cx","jsx","IconBase","mutedBgColorLookup","computeBgColor","color","appearance","invariant","textColorMutedLookup","computeTextColor"]}
|
package/dist/button.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as b,b as c}from"./chunk-
|
|
1
|
+
import{a as b,b as c}from"./chunk-EEMNPJIL.js";import{b as a}from"./chunk-YPNOQPCP.js";import"./chunk-7PF4QIBH.js";import"./chunk-XGNB7VBZ.js";import"./chunk-EAKUJEO5.js";import"./chunk-NSJFPSQC.js";export{a as Button,c as ButtonGroup,b as IconButton};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
package/dist/calendar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as d}from"./chunk-
|
|
1
|
+
import{a as d}from"./chunk-YPNOQPCP.js";import"./chunk-7PF4QIBH.js";import"./chunk-XGNB7VBZ.js";import"./chunk-EAKUJEO5.js";import{a as e}from"./chunk-NSJFPSQC.js";import{CaretLeft as s}from"@phosphor-icons/react/dist/icons/CaretLeft";import{CaretRight as i}from"@phosphor-icons/react/dist/icons/CaretRight";import{DayPicker as c}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function r({className:o,classNames:n,showOutsideDays:l=!1,...a}){return t(c,{showOutsideDays:l,className:e("",o),classNames:{months:"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",month:"space-y-4",caption:"flex justify-center pt-1 relative items-center",caption_label:"text-sm font-medium",nav:"flex items-center",nav_button:e(d({appearance:"ghost",priority:"neutral"}),"sm:h-7 sm:w-7 h-7 w-7"),nav_button_previous:"absolute left-0",nav_button_next:"absolute right-0",table:"w-full border-collapse space-y-1",head_row:"flex",head_cell:"text-body w-7 text-[0.8rem] text-center font-normal",row:"flex w-full mt-1",cell:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 sm:h-7 sm:w-7 h-7 w-7 ",a.mode==="range"?"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md":""),day:"day size-full rounded-md [&:not([aria-selected],_[disabled])]:hover:bg-filled-accent/15",day_range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",day_range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",day_selected:"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent",day_today:"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10",day_outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",day_disabled:"text-muted opacity-50",day_range_middle:"day-range-middle [&:not([disabled])]:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none [&:not([disabled])]:aria-selected:hover:bg-filled-accent/25",day_hidden:"invisible",...n},components:{IconLeft:()=>t(s,{className:"h-4 w-4 shrink-0",weight:"bold"}),IconRight:()=>t(i,{className:"h-4 w-4 shrink-0",weight:"bold"})},...a})}r.displayName="Calendar";export{r as Calendar};
|
|
2
2
|
//# sourceMappingURL=calendar.js.map
|
package/dist/calendar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../
|
|
1
|
+
{"version":3,"sources":["../src/components/calendar/calendar.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/dist/icons/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/dist/icons/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cx } from \"../../utils/cx\";\nimport { buttonVariants } from \"../button/button\";\n\ntype CalendarProps = ComponentProps<typeof DayPicker>;\n\n/**\n * A calendar component that allows users to select a date or a range of dates.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nfunction Calendar({ className, classNames, showOutsideDays = false, ...props }: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tclassName={cx(\"\", className)}\n\t\t\tclassNames={{\n\t\t\t\tmonths: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tcaption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tnav: \"flex items-center\",\n\t\t\t\tnav_button: cx(buttonVariants({ appearance: \"ghost\", priority: \"neutral\" }), \"sm:h-7 sm:w-7 h-7 w-7\"),\n\t\t\t\tnav_button_previous: \"absolute left-0\",\n\t\t\t\tnav_button_next: \"absolute right-0\",\n\t\t\t\ttable: \"w-full border-collapse space-y-1\",\n\t\t\t\thead_row: \"flex\",\n\t\t\t\thead_cell: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\trow: \"flex w-full mt-1\",\n\t\t\t\tcell: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 sm:h-7 sm:w-7 h-7 w-7 \",\n\t\t\t\t\tprops.mode === \"range\"\n\t\t\t\t\t\t? \"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n\t\t\t\t\t\t: \"\",\n\t\t\t\t),\n\t\t\t\tday: \"day size-full rounded-md [&:not([aria-selected],_[disabled])]:hover:bg-filled-accent/15\",\n\t\t\t\tday_range_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tday_range_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\tday_selected: \"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent\",\n\t\t\t\tday_today:\n\t\t\t\t\t\"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10\",\n\t\t\t\tday_outside: \"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\tday_disabled: \"text-muted opacity-50\",\n\t\t\t\tday_range_middle:\n\t\t\t\t\t\"day-range-middle [&:not([disabled])]:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none [&:not([disabled])]:aria-selected:hover:bg-filled-accent/25\",\n\t\t\t\tday_hidden: \"invisible\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tIconLeft: () => <CaretLeft className=\"h-4 w-4 shrink-0\" weight=\"bold\" />,\n\t\t\t\tIconRight: () => <CaretRight className=\"h-4 w-4 shrink-0\" weight=\"bold\" />,\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport {\n\t//,\n\tCalendar,\n};\n\nexport type {\n\t//,\n\tCalendarProps,\n};\n"],"mappings":"oKAAA,OAAS,aAAAA,MAAiB,6CAC1B,OAAS,cAAAC,MAAkB,8CAE3B,OAAS,aAAAC,MAAiB,mBAoDN,cAAAC,MAAA,oBAtCpB,SAASC,EAAS,CAAE,UAAAC,EAAW,WAAAC,EAAY,gBAAAC,EAAkB,GAAO,GAAGC,CAAM,EAAkB,CAC9F,OACCL,EAACM,EAAA,CACA,gBAAiBF,EACjB,UAAWG,EAAG,GAAIL,CAAS,EAC3B,WAAY,CACX,OAAQ,gEACR,MAAO,YACP,QAAS,iDACT,cAAe,sBACf,IAAK,oBACL,WAAYK,EAAGC,EAAe,CAAE,WAAY,QAAS,SAAU,SAAU,CAAC,EAAG,uBAAuB,EACpG,oBAAqB,kBACrB,gBAAiB,mBACjB,MAAO,mCACP,SAAU,OACV,UAAW,sDACX,IAAK,mBACL,KAAMD,EACL,kHACAF,EAAM,OAAS,QACZ,yFACA,EACJ,EACA,IAAK,0FACL,gBAAiB,yDACjB,cAAe,yDACf,aAAc,iGACd,UACC,4HACD,YAAa,iEACb,aAAc,wBACd,iBACC,4KACD,WAAY,YACZ,GAAGF,CACJ,EACA,WAAY,CACX,SAAU,IAAMH,EAACS,EAAA,CAAU,UAAU,mBAAmB,OAAO,OAAO,EACtE,UAAW,IAAMT,EAACU,EAAA,CAAW,UAAU,mBAAmB,OAAO,OAAO,CACzE,EACC,GAAGL,EACL,CAEF,CACAJ,EAAS,YAAc","names":["CaretLeft","CaretRight","DayPicker","jsx","Calendar","className","classNames","showOutsideDays","props","DayPicker","cx","buttonVariants","CaretLeft","CaretRight"]}
|
package/dist/card.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as t}from"./chunk-
|
|
1
|
+
import{a as t}from"./chunk-NSJFPSQC.js";import{Slot as c}from"@radix-ui/react-slot";import{forwardRef as o}from"react";import{jsx as i}from"react/jsx-runtime";var p=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("divide-card-muted border-card bg-card relative divide-y rounded-md border",r),...d,children:e}));p.displayName="Card";var s=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("p-6",r),...d,children:e}));s.displayName="CardBody";var m=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("px-6 py-3",r),...d,children:e}));m.displayName="CardFooter";var l=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("px-6 py-3",r),...d,children:e}));l.displayName="CardHeader";var C=o(({className:r,asChild:e,...d},a)=>i(e?c:"h3",{ref:a,className:t("text-strong text-base font-medium",r),...d}));C.displayName="CardTitle";export{p as Card,s as CardBody,m as CardFooter,l as CardHeader,C as CardTitle};
|
|
2
2
|
//# sourceMappingURL=card.js.map
|
package/dist/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../
|
|
1
|
+
{"version":3,"sources":["../src/components/card/card.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child\";\nimport { cx } from \"../../utils/cx\";\n\nexport type CardProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A container that can be used to display content in a box resembling a playing\n * card.\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tclassName={cx(\"divide-card-muted border-card bg-card relative divide-y rounded-md border\", className)}\n\t\t{...rest}\n\t>\n\t\t{children}\n\t</div>\n));\nCard.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n */\nconst CardBody = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div ref={ref} className={cx(\"p-6\", className)} {...rest}>\n\t\t{children}\n\t</div>\n));\nCardBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n */\nconst CardFooter = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t{children}\n\t</div>\n));\nCardFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n */\nconst CardHeader = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t{children}\n\t</div>\n));\nCardHeader.displayName = \"CardHeader\";\n\nexport type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `CardHeader` component.\n */\nconst CardTitle = forwardRef<HTMLParagraphElement, CardTitleProps>(({ className, asChild, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\treturn <Comp ref={ref} className={cx(\"text-strong text-base font-medium\", className)} {...props} />;\n});\nCardTitle.displayName = \"CardTitle\";\n\nexport {\n\t//,\n\tCard,\n\tCardBody,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n};\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,cAAAC,MAAkB,QAW1B,cAAAC,MAAA,oBADD,IAAMC,EAAOC,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IACrFN,EAAC,OACA,IAAKM,EACL,UAAWC,EAAG,4EAA6EJ,CAAS,EACnG,GAAGE,EAEH,SAAAD,EACF,CACA,EACDH,EAAK,YAAc,OAKnB,IAAMO,EAAWN,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IACzFN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,MAAOJ,CAAS,EAAI,GAAGE,EAClD,SAAAD,EACF,CACA,EACDI,EAAS,YAAc,WAKvB,IAAMC,EAAaP,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAC3FN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,YAAaJ,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CACA,EACDK,EAAW,YAAc,aAKzB,IAAMC,EAAaR,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAC3FN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,YAAaJ,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CACA,EACDM,EAAW,YAAc,aAOzB,IAAMC,EAAYT,EAAiD,CAAC,CAAE,UAAAC,EAAW,QAAAS,EAAS,GAAGC,CAAM,EAAGP,IAE9FN,EADMY,EAAUE,EAAO,KACtB,CAAK,IAAKR,EAAK,UAAWC,EAAG,oCAAqCJ,CAAS,EAAI,GAAGU,EAAO,CACjG,EACDF,EAAU,YAAc","names":["Slot","forwardRef","jsx","Card","forwardRef","className","children","rest","ref","cx","CardBody","CardFooter","CardHeader","CardTitle","asChild","props","Slot"]}
|
package/dist/checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as u}from"./chunk-
|
|
1
|
+
import{a as u}from"./chunk-G2WLA5VU.js";import C from"clsx";import{forwardRef as w,useEffect as f,useRef as x,useState as y}from"react";import{jsx as R}from"react/jsx-runtime";var i=e=>e==="indeterminate",b=w(({"aria-invalid":e,className:o,checked:n,defaultChecked:m,defaultValue:p="on",onClick:g,readOnly:c,validation:d,...h},v)=>{let t=x(null),[a]=y(m),s=e!=null&&e!=="false"?"error":typeof d=="function"?d():d,k=e??s==="error";return f(()=>{t.current&&(t.current.indeterminate=i(n))},[n]),f(()=>{t.current&&(t.current.indeterminate=i(a))},[a]),R("input",{"aria-checked":i(n)?"mixed":n,"aria-invalid":k,className:C("border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50","bg-center bg-no-repeat focus:outline-none","focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-none focus-visible:ring-4","checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon","indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon","data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger","where:block where:size-4 where:p-0",o),checked:i(n)?void 0:n,"data-validation":s||void 0,defaultChecked:i(a)?void 0:a,defaultValue:p,onClick:l=>{if(c){l.preventDefault();return}g?.(l)},readOnly:c,ref:u(t,v),type:"checkbox",...h})});b.displayName="Checkbox";import{z as r}from"zod";function S(e){let{trueValue:o="on"}=e??{};return r.union([r.literal(o).transform(()=>!0),r.literal(!1).transform(()=>!1),r.literal(void 0).transform(()=>!1)])}export{b as Checkbox,S as zodCheckbox};
|
|
2
2
|
//# sourceMappingURL=checkbox.js.map
|
package/dist/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../
|
|
1
|
+
{"version":3,"sources":["../src/components/checkbox/checkbox.tsx","../src/components/checkbox/zod.ts"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs\";\nimport type { WithValidation } from \"../input\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (checked: CheckedState | undefined): checked is \"indeterminate\" => checked === \"indeterminate\";\n\ntype Props = Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"checked\" | \"defaultChecked\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n */\nconst Checkbox = forwardRef<ElementRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ElementRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid ? \"error\" : typeof _validation === \"function\" ? _validation() : _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-none\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={isIndeterminate(defaultChecked) ? undefined : defaultChecked}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n","import { z } from \"zod\";\n\ntype Options = {\n\t/**\n\t * The value to use when the checkbox is checked.\n\t * @default \"on\"\n\t */\n\ttrueValue?: string;\n};\n\n/**\n * Turns the value from a checkbox field into a boolean,\n * but does not require the checkbox to be checked.\n * For checkboxes with a `value` attribute, you can pass that as the `trueValue` option.\n *\n * @example\n * ```ts\n * z.object({\n * defaultCheckbox: zodCheckbox(),\n * checkboxWithValue: zodCheckbox({ trueValue: \"true\" }),\n * mustBeChecked: zodCheckbox().refine((v) => v, \"Please check this box\"),\n * });\n * ```\n */\nfunction zodCheckbox(options?: Options) {\n\tconst { trueValue = \"on\" } = options ?? {};\n\n\treturn z.union([\n\t\tz.literal(trueValue).transform(() => true),\n\t\tz.literal(false).transform(() => false),\n\t\tz.literal(undefined).transform(() => false),\n\t]);\n}\n\nexport {\n\t//\n\tzodCheckbox,\n};\n"],"mappings":"wCAAA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QA0DrD,cAAAC,MAAA,oBAnDH,IAAMC,EAAmBC,GAAkEA,IAAY,gBAiBjGC,EAAWC,EAChB,CACC,CACC,eAAgBC,EAChB,UAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,aAAAC,EAAe,KACf,QAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAA4B,IAAI,EAC3C,CAACC,CAAc,EAAIC,EAASV,CAAe,EAE3CW,EADYd,GAAgB,MAAQA,IAAiB,QAC5B,QAAU,OAAOO,GAAgB,WAAaA,EAAY,EAAIA,EACvFQ,EAAcf,GAAgBc,IAAe,QAEnD,OAAAE,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBM,CAAQ,EAE3D,EAAG,CAACA,CAAQ,CAAC,EAEbc,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBgB,CAAc,EAEjE,EAAG,CAACA,CAAc,CAAC,EAGlBjB,EAAC,SACA,eAAcC,EAAgBM,CAAQ,EAAI,QAAUA,EACpD,eAAca,EACd,UAAWE,EACV,qIACA,4CACA,kHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACAhB,CACD,EACA,QAASL,EAAgBM,CAAQ,EAAI,OAAYA,EACjD,kBAAiBY,GAAc,OAC/B,eAAgBlB,EAAgBgB,CAAc,EAAI,OAAYA,EAC9D,aAAcR,EACd,QAAUc,GAAU,CACnB,GAAIZ,EAAU,CACbY,EAAM,eAAe,EACrB,MACD,CACAb,IAAUa,CAAK,CAChB,EACA,SAAUZ,EACV,IAAKa,EAAYT,EAAUD,CAAG,EAC9B,KAAK,WACJ,GAAGD,EACL,CAEF,CACD,EACAV,EAAS,YAAc,WC7FvB,OAAS,KAAAsB,MAAS,MAwBlB,SAASC,EAAYC,EAAmB,CACvC,GAAM,CAAE,UAAAC,EAAY,IAAK,EAAID,GAAW,CAAC,EAEzC,OAAOF,EAAE,MAAM,CACdA,EAAE,QAAQG,CAAS,EAAE,UAAU,IAAM,EAAI,EACzCH,EAAE,QAAQ,EAAK,EAAE,UAAU,IAAM,EAAK,EACtCA,EAAE,QAAQ,MAAS,EAAE,UAAU,IAAM,EAAK,CAC3C,CAAC,CACF","names":["clsx","forwardRef","useEffect","useRef","useState","jsx","isIndeterminate","checked","Checkbox","forwardRef","_ariaInvalid","className","_checked","_defaultChecked","defaultValue","onClick","readOnly","_validation","props","ref","innerRef","useRef","defaultChecked","useState","validation","ariaInvalid","useEffect","clsx","event","composeRefs","z","zodCheckbox","options","trueValue"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as g}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{b as g}from"./chunk-JE2MBLEH.js";import{a as S}from"./chunk-G2WLA5VU.js";import{a as r}from"./chunk-NSJFPSQC.js";import{CaretDown as P}from"@phosphor-icons/react/CaretDown";import{CaretUp as E}from"@phosphor-icons/react/CaretUp";import{Check as L}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as V,forwardRef as n,useContext as k}from"react";import{jsx as i,jsxs as u}from"react/jsx-runtime";var h=V({}),b=n(({"aria-invalid":o,children:a,id:t,validation:l,onBlur:s,onChange:d,...m},c)=>i(e.Root,{...m,onValueChange:d,children:i(h.Provider,{value:{"aria-invalid":o,id:t,validation:l,onBlur:s,ref:c},children:a})}));b.displayName="Select";var z=e.Group,D=e.Value,y=n(({"aria-invalid":o,className:a,children:t,id:l,validation:s,...d},m)=>{let c=k(h),p=c["aria-invalid"]??o,T=p!=null&&p!=="false",f=c.validation??s,v=T?"error":typeof f=="function"?f():f,B=p??v==="error",W=c.id??l;return u(e.Trigger,{"aria-invalid":B,"data-validation":v||void 0,className:r("h-11 text-base sm:h-9 sm:text-sm","border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 hover:border-neutral-400 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left","focus:outline-none focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",a),id:W,ref:S(m,c.ref),...d,children:[t,i(e.Icon,{asChild:!0,children:i(P,{className:"size-4 shrink-0",weight:"bold"})})]})});y.displayName="SelectTrigger";var x=n(({className:o,...a},t)=>i(e.ScrollUpButton,{ref:t,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:i(E,{className:"size-4 shrink-0",weight:"bold"})}));x.displayName="SelectScrollUpButton";var w=n(({className:o,...a},t)=>i(e.ScrollDownButton,{ref:t,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:i(P,{className:"size-4 shrink-0",weight:"bold"})}));w.displayName="SelectScrollDownButton";var C=n(({className:o,children:a,position:t="popper",width:l,...s},d)=>i(e.Portal,{children:u(e.Content,{ref:d,className:r("border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md","bg-popover",t==="popper"&&"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]",l==="trigger"&&"w-[var(--radix-select-trigger-width)]",o),position:t,...s,children:[i(x,{}),i(e.Viewport,{className:r("p-1",t==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:a}),i(w,{})]})}));C.displayName="SelectContent";var R=n(({className:o,...a},t)=>i(e.Label,{ref:t,className:r("px-2 py-1.5 text-sm font-semibold",o),...a}));R.displayName="SelectLabel";var I=n(({className:o,children:a,...t},l)=>u(e.Item,{ref:l,className:r("focus:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 data-state-checked:bg-filled-accent data-state-checked:text-on-filled relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none",o),...t,children:[i(e.ItemText,{children:a}),i(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:i(L,{className:"size-4 shrink-0",weight:"bold"})})]}));I.displayName="SelectItem";var N=n(({className:o,...a},t)=>i(g,{ref:t,className:r("-mx-1 my-1 h-px w-auto",o),...a}));N.displayName="SelectSeparator";export{b as a,z as b,D as c,y as d,C as e,R as f,I as g,N as h};
|
|
2
|
+
//# sourceMappingURL=chunk-5YA2UTFS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/select/select.tsx"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUp } from \"@phosphor-icons/react/CaretUp\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tElementRef,\n\tFocusEvent,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs\";\nimport { cx } from \"../../utils/cx\";\nimport type { WithValidation } from \"../input\";\nimport { Separator } from \"../separator\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, \"onValueChange\"> &\n\tWithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Event handler called when the value changes.\n\t\t */\n\t\tonChange?: (value: string) => void;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(\n\t({ \"aria-invalid\": _ariaInvalid, children, id, validation, onBlur, onChange, ...props }, ref) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root {...props} onValueChange={onChange}>\n\t\t\t\t<SelectContext.Provider value={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nSelect.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n */\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n */\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n */\nconst SelectTrigger = forwardRef<ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t({ \"aria-invalid\": ariaInValidProp, className, children, id: propId, validation: propValidation, ...props }, ref) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid ? \"error\" : typeof _validation === \"function\" ? _validation() : _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-11 text-base sm:h-9 sm:text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 hover:border-neutral-400 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"focus:outline-none focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectScrollUpButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretUp className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\nconst SelectScrollDownButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n */\nconst SelectContent = forwardRef<ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width, ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\"p-1\", position === \"popper\" && \"h-[var(--radix-select-trigger-height)] w-full\")}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nSelectContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n */\nconst SelectLabel = forwardRef<\n\tElementRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label ref={ref} className={cx(\"px-2 py-1.5 text-sm font-semibold\", className)} {...props} />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Contains a `value` prop that will be passed to the `onChange` handler of the `Select` component when selected.\n * Displays the children as the option's text.\n */\nconst SelectItem = forwardRef<\n\tElementRef<typeof SelectPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 data-state-checked:bg-filled-accent data-state-checked:text-on-filled relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items in the select.\n */\nconst SelectSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(\n\t({ className, ...props }, ref) => (\n\t\t<Separator ref={ref} className={cx(\"-mx-1 my-1 h-px w-auto\", className)} {...props} />\n\t),\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpButton,\n\tSelectScrollDownButton,\n};\n"],"mappings":"wHAAA,OAAS,aAAAA,MAAiB,kCAC1B,OAAS,WAAAC,MAAe,gCACxB,OAAS,SAAAC,MAAa,8BACtB,UAAYC,MAAqB,yBASjC,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QA2ClD,cAAAC,EAoCD,QAAAC,MApCC,oBAvBJ,IAAMC,EAAgBC,EAAiC,CAAC,CAAC,EAmBnDC,EAASC,EACd,CAAC,CAAE,eAAgBC,EAAc,SAAAC,EAAU,GAAAC,EAAI,WAAAC,EAAY,OAAAC,EAAQ,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAEvFb,EAAiB,OAAhB,CAAsB,GAAGY,EAAO,cAAeD,EAC/C,SAAAX,EAACE,EAAc,SAAd,CAAuB,MAAO,CAAE,eAAgBI,EAAc,GAAAE,EAAI,WAAAC,EAAY,OAAAC,EAAQ,IAAAG,CAAI,EACzF,SAAAN,EACF,EACD,CAGH,EACAH,EAAO,YAAc,SAMrB,IAAMU,EAA8B,QAK9BC,EAA8B,QAO9BC,EAAgBX,EACrB,CAAC,CAAE,eAAgBY,EAAiB,UAAAC,EAAW,SAAAX,EAAU,GAAIY,EAAQ,WAAYC,EAAgB,GAAGR,CAAM,EAAGC,IAAQ,CACpH,IAAMQ,EAAMC,EAAWpB,CAAa,EAC9BI,EAAee,EAAI,cAAc,GAAKJ,EACtCM,EAAYjB,GAAgB,MAAQA,IAAiB,QACrDkB,EAAcH,EAAI,YAAcD,EAChCX,EAAac,EAAY,QAAU,OAAOC,GAAgB,WAAaA,EAAY,EAAIA,EACvFC,EAAcnB,GAAgBG,IAAe,QAC7CD,EAAKa,EAAI,IAAMF,EAErB,OACClB,EAAiB,UAAhB,CACA,eAAcwB,EACd,kBAAiBhB,GAAc,OAC/B,UAAWiB,EACV,mCACA,qSACA,uDACA,kHACA,iQACA,iQACA,kPACAR,CACD,EACA,GAAIV,EACJ,IAAKmB,EAAYd,EAAKQ,EAAI,GAAG,EAC5B,GAAGT,EAEH,UAAAL,EACDP,EAAiB,OAAhB,CAAqB,QAAO,GAC5B,SAAAA,EAAC4B,EAAA,CAAU,UAAU,kBAAkB,OAAO,OAAO,EACtD,GACD,CAEF,CACD,EACAZ,EAAc,YAAc,gBAE5B,IAAMa,EAAuBxB,EAG3B,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IAC3Bb,EAAiB,iBAAhB,CACA,IAAKa,EACL,UAAWa,EAAG,uDAAwDR,CAAS,EAC9E,GAAGN,EAEJ,SAAAZ,EAAC8B,EAAA,CAAQ,UAAU,kBAAkB,OAAO,OAAO,EACpD,CACA,EACDD,EAAqB,YAAc,uBAEnC,IAAME,EAAyB1B,EAG7B,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IAC3Bb,EAAiB,mBAAhB,CACA,IAAKa,EACL,UAAWa,EAAG,uDAAwDR,CAAS,EAC9E,GAAGN,EAEJ,SAAAZ,EAAC4B,EAAA,CAAU,UAAU,kBAAkB,OAAO,OAAO,EACtD,CACA,EACDG,EAAuB,YAAc,yBAUrC,IAAMC,EAAgB3B,EACrB,CAAC,CAAE,UAAAa,EAAW,SAAAX,EAAU,SAAA0B,EAAW,SAAU,MAAAC,EAAO,GAAGtB,CAAM,EAAGC,IAC/Db,EAAiB,SAAhB,CACA,SAAAC,EAAiB,UAAhB,CACA,IAAKY,EACL,UAAWa,EACV,8ZACA,aACAO,IAAa,UACZ,+KACDC,IAAU,WAAa,wCACvBhB,CACD,EACA,SAAUe,EACT,GAAGrB,EAEJ,UAAAZ,EAAC6B,EAAA,EAAqB,EACtB7B,EAAiB,WAAhB,CACA,UAAW0B,EAAG,MAAOO,IAAa,UAAY,+CAA+C,EAE5F,SAAA1B,EACF,EACAP,EAAC+B,EAAA,EAAuB,GACzB,EACD,CAEF,EACAC,EAAc,YAAc,gBAK5B,IAAMG,EAAc9B,EAGlB,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IAC3Bb,EAAiB,QAAhB,CAAsB,IAAKa,EAAK,UAAWa,EAAG,oCAAqCR,CAAS,EAAI,GAAGN,EAAO,CAC3G,EACDuB,EAAY,YAAc,cAO1B,IAAMC,EAAa/B,EAGjB,CAAC,CAAE,UAAAa,EAAW,SAAAX,EAAU,GAAGK,CAAM,EAAGC,IACrCZ,EAAiB,OAAhB,CACA,IAAKY,EACL,UAAWa,EACV,qQACAR,CACD,EACC,GAAGN,EAEJ,UAAAZ,EAAiB,WAAhB,CAA0B,SAAAO,EAAS,EACpCP,EAAiB,gBAAhB,CAA8B,UAAU,gEACxC,SAAAA,EAACqC,EAAA,CAAM,UAAU,kBAAkB,OAAO,OAAO,EAClD,GACD,CACA,EACDD,EAAW,YAAc,aAKzB,IAAME,EAAkBjC,EACvB,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IACzBb,EAACuC,EAAA,CAAU,IAAK1B,EAAK,UAAWa,EAAG,yBAA0BR,CAAS,EAAI,GAAGN,EAAO,CAEtF,EACA0B,EAAgB,YAAc","names":["CaretDown","CaretUp","Check","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Select","forwardRef","_ariaInvalid","children","id","validation","onBlur","onChange","props","ref","SelectGroup","SelectValue","SelectTrigger","ariaInValidProp","className","propId","propValidation","ctx","useContext","isInvalid","_validation","ariaInvalid","cx","composeRefs","CaretDown","SelectScrollUpButton","CaretUp","SelectScrollDownButton","SelectContent","position","width","SelectLabel","SelectItem","Check","SelectSeparator","Separator"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
function o(e){return typeof e=="boolean"?e:e==="true"}export{o as a};
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
2
|
+
//# sourceMappingURL=chunk-7PF4QIBH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/types/booleanish.tsx"],"sourcesContent":["export type Booleanish = boolean | \"true\" | \"false\";\n\n/**\n * Parse/coerce a booleanish value (boolean | \"true\" | \"false\") into a boolean.\n * @default false if the value is not a boolean or \"true\"\n */\nexport function parseBooleanish(value: Booleanish | (string & {}) | undefined | null): boolean {\n\tif (typeof value === \"boolean\") {\n\t\treturn value;\n\t} else {\n\t\treturn value === \"true\";\n\t}\n}\n"],"mappings":"AAMO,SAASA,EAAgBC,EAA+D,CAC9F,OAAI,OAAOA,GAAU,UACbA,EAEAA,IAAU,MAEnB","names":["parseBooleanish","value"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{useCallback as a,useSyncExternalStore as i}from"react";function c(e){let r=a(t=>{let n=window.matchMedia(e);return n.addEventListener("change",t),()=>{n.removeEventListener("change",t)}},[e]);return i(r,()=>window.matchMedia(e).matches,()=>!1)}export{c as a};
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
2
|
+
//# sourceMappingURL=chunk-D3XF6J5A.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-matches-media-query.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\n\nexport function useMatchesMediaQuery(query: string) {\n\tconst subscribe = useCallback(\n\t\t(callback: () => void) => {\n\t\t\tconst matchMedia = window.matchMedia(query);\n\n\t\t\tmatchMedia.addEventListener(\"change\", callback);\n\t\t\treturn () => {\n\t\t\t\tmatchMedia.removeEventListener(\"change\", callback);\n\t\t\t};\n\t\t},\n\t\t[query],\n\t);\n\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => {\n\t\t\treturn window.matchMedia(query).matches;\n\t\t},\n\t\t() => false,\n\t);\n}\n"],"mappings":"AAAA,OAAS,eAAAA,EAAa,wBAAAC,MAA4B,QAE3C,SAASC,EAAqBC,EAAe,CACnD,IAAMC,EAAYJ,EAChBK,GAAyB,CACzB,IAAMC,EAAa,OAAO,WAAWH,CAAK,EAE1C,OAAAG,EAAW,iBAAiB,SAAUD,CAAQ,EACvC,IAAM,CACZC,EAAW,oBAAoB,SAAUD,CAAQ,CAClD,CACD,EACA,CAACF,CAAK,CACP,EAEA,OAAOF,EACNG,EACA,IACQ,OAAO,WAAWD,CAAK,EAAE,QAEjC,IAAM,EACP,CACD","names":["useCallback","useSyncExternalStore","useMatchesMediaQuery","query","subscribe","callback","matchMedia"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as e}from"./chunk-NSJFPSQC.js";import{Children as p,cloneElement as a,isValidElement as n}from"react";import i from"tiny-invariant";import{Fragment as m,jsx as c}from"react/jsx-runtime";var S=({className:o,style:s,svg:r})=>{let t=p.only(r);return i(n(t),"Icon must be passed a single SVG icon as a JSX tag."),c(m,{children:a(t,{className:e("shrink-0",t.props.className,o),style:{...t.props.style,...s}})})};export{S as a};
|
|
2
|
+
//# sourceMappingURL=chunk-EAKUJEO5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/icon/_icon-base.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithStyleProps } from \"../../types\";\nimport { cx } from \"../../utils/cx\";\nimport type { SvgAttributes } from \"./types\";\n\ntype IconBaseProps = WithStyleProps & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * @private Internal component for Icon, should not be exported from mantle. Can be used in other mantle components if needed.\n * The main difference between Icon and IconBase is that IconBase does not apply any default sizing styles, only `shrink-0`.\n *\n * Decorates an svg icon with automatic sizing styles.\n * Merges `className` selectors with the following order of precedence (last one wins):\n * 1. Icon base classes\n * 2. svg className\n * 3. Icon className\n */\nconst IconBase = ({ className, style, svg }: IconBaseProps) => {\n\tconst icon = Children.only(svg) as ReactElement;\n\tinvariant(isValidElement<SvgAttributes>(icon), \"Icon must be passed a single SVG icon as a JSX tag.\");\n\n\treturn (\n\t\t<>\n\t\t\t{cloneElement(icon, {\n\t\t\t\tclassName: cx(\"shrink-0\", icon.props.className, className),\n\t\t\t\tstyle: { ...icon.props.style, ...style },\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport { IconBase };\n"],"mappings":"wCACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,kBAAAC,MAAsB,QACvD,OAAOC,MAAe,iBA2BpB,mBAAAC,EAAA,OAAAC,MAAA,oBALF,IAAMC,EAAW,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,IAAAC,CAAI,IAAqB,CAC9D,IAAMC,EAAOC,EAAS,KAAKF,CAAG,EAC9B,OAAAG,EAAUC,EAA8BH,CAAI,EAAG,qDAAqD,EAGnGL,EAAAD,EAAA,CACE,SAAAU,EAAaJ,EAAM,CACnB,UAAWK,EAAG,WAAYL,EAAK,MAAM,UAAWH,CAAS,EACzD,MAAO,CAAE,GAAGG,EAAK,MAAM,MAAO,GAAGF,CAAM,CACxC,CAAC,EACF,CAEF","names":["Children","cloneElement","isValidElement","invariant","Fragment","jsx","IconBase","className","style","svg","icon","Children","invariant","isValidElement","cloneElement","cx"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as b}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as b}from"./chunk-7PF4QIBH.js";import{a as p}from"./chunk-XGNB7VBZ.js";import{a as e}from"./chunk-NSJFPSQC.js";import{CircleNotch as G}from"@phosphor-icons/react/CircleNotch";import{Slot as C}from"@radix-ui/react-slot";import{cva as I}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as N,isValidElement as T}from"react";import{jsx as t,jsxs as E}from"react/jsx-runtime";var z=I("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-7 sm:size-6",sm:"size-9 sm:size-7",md:"size-11 sm:size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),f=N(({"aria-disabled":r,appearance:n,asChild:i=!1,children:s,className:a,disabled:v,icon:y,isLoading:o=!1,label:g,size:u,type:h,...x},P)=>{let d=b(r??v??o),l=o?t(G,{className:"animate-spin"}):y,c={"aria-disabled":d,className:e("icon-button",z({appearance:n,isLoading:o,size:u}),a),"data-loading":o,"data-size":u,disabled:d,ref:P,...x};if(i){let m=H.only(s),V=T(m);return t(C,{...c,children:V&&M(m,{},t(p,{svg:l}))})}return E("button",{...c,type:h,children:[t("span",{className:"sr-only",children:g}),t(p,{svg:l})]})});f.displayName="IconButton";import{cva as L}from"class-variance-authority";import{forwardRef as A}from"react";import{jsx as w}from"react/jsx-runtime";var R=L("border-form inline-flex items-center rounded-md hover:border-neutral-400",{variants:{appearance:{panel:"bg-form gap-0.5 border p-[0.1875rem] [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px",ghost:"gap-0.5",outlined:""}}}),B=A(({appearance:r,className:n,children:i,...s},a)=>w("div",{className:e(R({appearance:r}),n),ref:a,role:"group",...s,children:i}));B.displayName="ButtonGroup";export{f as a,B as b};
|
|
2
|
+
//# sourceMappingURL=chunk-EEMNPJIL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/button/icon-button.tsx","../src/components/button/button-group.tsx"],"sourcesContent":["import { CircleNotch } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { VariantProps, WithAsChild } from \"../../types\";\nimport { parseBooleanish } from \"../../types\";\nimport { cx } from \"../../utils/cx\";\nimport { Icon } from \"../icon\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tghost:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace the `icon` with a spinner.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * The size of the IconButton.\n\t\t\t */\n\t\t\tsize: {\n\t\t\t\txs: \"size-7 sm:size-6\",\n\t\t\t\tsm: \"size-9 sm:size-7\",\n\t\t\t\tmd: \"size-11 sm:size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ButtonHTMLAttributes<HTMLButtonElement>[\"type\"], undefined>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? <CircleNotch className=\"animate-spin\" /> : propIcon;\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\"icon-button\", iconButtonVariants({ appearance, isLoading, size }), className),\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn <Slot {...buttonProps}>{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}</Slot>;\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport { IconButton, iconButtonVariants };\nexport type { IconButtonProps };\n","import { cva } from \"class-variance-authority\";\nimport { forwardRef, type ComponentProps } from \"react\";\nimport type { VariantProps } from \"../../types\";\nimport { cx } from \"../../utils/cx\";\n\nconst buttonGroupVariants = cva(\"border-form inline-flex items-center rounded-md hover:border-neutral-400\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the ButtonGroup.\n\t\t */\n\t\tappearance: {\n\t\t\tpanel: \"bg-form gap-0.5 border p-[0.1875rem] [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px\",\n\t\t\tghost: \"gap-0.5\",\n\t\t\toutlined: \"\", // TODO(cody): implement me\n\t\t},\n\t},\n});\n\ntype ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;\n\ntype ButtonGroupProps = Omit<ComponentProps<\"div\">, \"role\"> & ButtonGroupVariants;\n\n/**\n * A contained group of related buttons buttons.\n */\nconst ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n\t({ appearance, className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div className={cx(buttonGroupVariants({ appearance }), className)} ref={ref} role=\"group\" {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nButtonGroup.displayName = \"ButtonGroup\";\n\nexport {\n\t//,\n\tButtonGroup,\n};\n\nexport type {\n\t//,\n\tButtonGroupProps,\n};\n"],"mappings":"wHAAA,OAAS,eAAAA,MAAmB,oCAC5B,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QA8IxC,cAAAC,EAoBxB,QAAAC,MApBwB,oBAvI3B,IAAMC,EAAqBC,EAC1B,wNACA,CACC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,mBACJ,GAAI,mBACJ,GAAI,mBACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CACD,EAgFMC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EAAYb,EAACsB,EAAA,CAAY,UAAU,eAAe,EAAKV,EAE9DW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWK,EAAG,cAAetB,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAAGL,CAAS,EAC3F,eAAgBG,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMiB,EAAcC,EAAS,KAAKjB,CAAQ,EACpCkB,EAAeC,EAAeH,CAAW,EAE/C,OAAOzB,EAAC6B,EAAA,CAAM,GAAGN,EAAc,SAAAI,GAAgBG,EAAaL,EAAa,CAAC,EAAGzB,EAAC+B,EAAA,CAAK,IAAKV,EAAM,CAAE,EAAE,CACnG,CAEA,OACCpB,EAAC,UAAQ,GAAGsB,EAAa,KAAMP,EAC9B,UAAAhB,EAAC,QAAK,UAAU,UAAW,SAAAc,EAAM,EACjCd,EAAC+B,EAAA,CAAK,IAAKV,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc,aC5KzB,OAAS,OAAA4B,MAAW,2BACpB,OAAS,cAAAC,MAAuC,QA2B7C,cAAAC,MAAA,oBAvBH,IAAMC,EAAsBC,EAAI,2EAA4E,CAC3G,SAAU,CAIT,WAAY,CACX,MAAO,mGACP,MAAO,UACP,SAAU,EACX,CACD,CACD,CAAC,EASKC,EAAcC,EACnB,CAAC,CAAE,WAAAC,EAAY,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAE9CT,EAAC,OAAI,UAAWU,EAAGT,EAAoB,CAAE,WAAAI,CAAW,CAAC,EAAGC,CAAS,EAAG,IAAKG,EAAK,KAAK,QAAS,GAAGD,EAC7F,SAAAD,EACF,CAGH,EACAJ,EAAY,YAAc","names":["CircleNotch","Slot","cva","Children","cloneElement","forwardRef","isValidElement","jsx","jsxs","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotch","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon","cva","forwardRef","jsx","buttonGroupVariants","cva","ButtonGroup","forwardRef","appearance","className","children","props","ref","cx"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as w}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as w}from"./chunk-G2WLA5VU.js";import{a as y}from"./chunk-NSJFPSQC.js";import{CheckCircle as R}from"@phosphor-icons/react/CheckCircle";import{Warning as E}from"@phosphor-icons/react/Warning";import{WarningDiamond as L}from"@phosphor-icons/react/WarningDiamond";import W from"clsx";import{createContext as A,forwardRef as C,useContext as N,useRef as V}from"react";import{jsx as e,jsxs as P}from"react/jsx-runtime";var I=C(({children:t,className:n,...a},i)=>{let o=!!t,p=V(null);return o?e(x,{className:n,forwardedRef:i,innerRef:p,...a,children:t}):e(x,{...a,className:n,forwardedRef:i,innerRef:p,children:e(f,{...a})})});I.displayName="Input";var f=C(({"aria-invalid":t,className:n,validation:a,...i},o)=>{let{"aria-invalid":p,forwardedRef:d,innerRef:r,validation:c,...u}=N(g),l=c??a,m=p??t??l==="error",s={...u,...i,type:i.type??u.type??"text"};return e("div",{className:"min-w-0 flex-1 text-left",children:e("input",{"aria-invalid":m,"data-validation":l||void 0,className:y("bg-form placeholder:text-placeholder w-full focus:outline-none",n),ref:w(o,d,r),...s})})});f.displayName="InputCapture";var g=A({validation:void 0,innerRef:{current:null}}),x=({"aria-invalid":t,"aria-disabled":n,children:a,className:i,disabled:o,forwardedRef:p,innerRef:d,style:r,type:c,validation:u,...l})=>{let s=t!=null&&t!=="false"?"error":typeof u=="function"?u():u,h=t??s==="error";return e(g.Provider,{value:{"aria-invalid":t,"aria-disabled":n,disabled:o,type:c,validation:s,...l,forwardedRef:p,innerRef:d},children:P("div",{"aria-invalid":h,"aria-disabled":o??n,"data-validation":s||void 0,className:y("h-11 text-base sm:h-9 sm:text-sm","bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4","aria-disabled:opacity-50","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5","border-form text-strong has-[:focus-visible]:border-accent-600 has-[:focus-visible]:ring-focus-accent","data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:ring-focus-danger",i),onClick:()=>{d?.current?.focus()},style:r,children:[a,e(k,{name:l.name,validation:s})]})})};var k=({name:t,validation:n})=>{switch(n){case"error":return P("div",{className:"text-danger-600 pointer-events-none order-last select-none",children:[e("span",{className:"sr-only",children:W("The value entered for the",t,"input has failed validation.")}),e(E,{"aria-hidden":!0,weight:"fill"})]});case"success":return e("div",{className:"text-success-600 pointer-events-none order-last select-none",children:e(R,{weight:"fill"})});case"warning":return e("div",{className:"text-warning-600 pointer-events-none order-last select-none",children:e(L,{weight:"fill"})});default:return null}};import{Eye as F}from"@phosphor-icons/react/Eye";import{EyeClosed as B}from"@phosphor-icons/react/EyeClosed";import O from"clsx";import{forwardRef as z,useEffect as S,useState as T}from"react";import{jsx as M,jsxs as b}from"react/jsx-runtime";var H=z(({maskHiddenValue:t=!1,onBlur:n,onFocus:a,onValueVisibilityChange:i,showValue:o=!1,...p},d)=>{let[r,c]=T(o),u=r?"text":"password",l=r?F:B;S(()=>{c(o)},[o]);let[m,s]=T(!1);return b(I,{onBlur:v=>{s(!1),n?.(v)},onFocus:v=>{s(!0),a?.(v)},type:u,ref:d,...p,children:[M(f,{className:O(t&&!r&&!m&&"max-w-6")}),b("button",{type:"button",tabIndex:-1,className:"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0",onClick:()=>{c(!r),i?.(!r)},children:[b("span",{className:"sr-only",children:["Turn password visibility ",r?"off":"on"]}),M(l,{"aria-hidden":!0})]})]})});H.displayName="PasswordInput";function j(t){return t!=null&&t instanceof HTMLInputElement}export{I as a,f as b,H as c,j as d};
|
|
2
|
+
//# sourceMappingURL=chunk-EQOASS6Y.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/input/input.tsx","../src/components/input/password-input.tsx","../src/components/input/is-input.ts"],"sourcesContent":["import { CheckCircle } from \"@phosphor-icons/react/CheckCircle\";\nimport { Warning } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamond } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type { ElementRef, ForwardedRef, InputHTMLAttributes, MutableRefObject, PropsWithChildren } from \"react\";\nimport { createContext, forwardRef, useContext, useRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs\";\nimport { cx } from \"../../utils/cx\";\nimport type { Validation, WithAutoComplete, WithInputType, WithValidation } from \"./types\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithValidation;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps & PropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(({ children, className, ...props }, forwardedRef) => {\n\tconst hasChildren = Boolean(children);\n\tconst innerRef = useRef<ElementRef<\"input\">>(null);\n\n\tif (hasChildren) {\n\t\treturn (\n\t\t\t<InputContainer className={className} forwardedRef={forwardedRef} innerRef={innerRef} {...props}>\n\t\t\t\t{children}\n\t\t\t</InputContainer>\n\t\t);\n\t}\n\n\treturn (\n\t\t<InputContainer {...props} className={className} forwardedRef={forwardedRef} innerRef={innerRef}>\n\t\t\t<InputCapture {...props} />\n\t\t</InputContainer>\n\t);\n});\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, validation: _validation, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\tvalidation: ctxValidation,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\n\t\tconst validation = ctxValidation ?? _validation;\n\t\tconst ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = { ...ctx, ...restProps, type: restProps.type ?? ctx.type ?? \"text\" };\n\n\t\treturn (\n\t\t\t<div className=\"min-w-0 flex-1 text-left\">\n\t\t\t\t<input\n\t\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\t\tclassName={cx(\"bg-form placeholder:text-placeholder w-full focus:outline-none\", className)}\n\t\t\t\t\tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\nInputCapture.displayName = \"InputCapture\";\n\ntype InputContextType = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps & {\n\t\t/**\n\t\t * inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * forwarded ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef?: ForwardedRef<HTMLInputElement>;\n\t};\n\nconst InputContext = createContext<InputContextType>({ validation: undefined, innerRef: { current: null } });\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/**\n\t\t * @private inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/**\n * The container for the input element.\n */\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\t\"aria-disabled\": _ariaDisabled,\n\tchildren,\n\tclassName,\n\tdisabled,\n\tforwardedRef,\n\tinnerRef,\n\tstyle,\n\ttype,\n\tvalidation: _validation,\n\t...props\n}: InputContainerProps) => {\n\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\tconst validation = isInvalid ? \"error\" : typeof _validation === \"function\" ? _validation() : _validation;\n\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\t\tdisabled,\n\t\t\t\ttype,\n\t\t\t\tvalidation,\n\t\t\t\t...props,\n\t\t\t\tforwardedRef,\n\t\t\t\tinnerRef,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-11 text-base sm:h-9 sm:text-sm\",\n\t\t\t\t\t\"bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5\",\n\t\t\t\t\t\"border-form text-strong has-[:focus-visible]:border-accent-600 has-[:focus-visible]:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({ name, validation }: { name?: string; validation: Validation | undefined }) => {\n\tswitch (validation) {\n\t\tcase \"error\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-danger-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<span className=\"sr-only\">{clsx(\"The value entered for the\", name, \"input has failed validation.\")}</span>\n\t\t\t\t\t<Warning aria-hidden weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"success\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-success-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<CheckCircle weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"warning\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-warning-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<WarningDiamond weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\n","import { Eye } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosed } from \"@phosphor-icons/react/EyeClosed\";\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, InputCapture } from \"./input\";\nimport type { InputType, WithAutoComplete, WithValidation } from \"./types\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithValidation &\n\tWithAutoComplete & {\n\t\t/**\n\t\t * Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.\n\t\t * @default false\n\t\t */\n\t\tmaskHiddenValue?: boolean;\n\t\t/**\n\t\t * Callback for when the visibility of the password value changes.\n\t\t */\n\t\tonValueVisibilityChange?: (visible: boolean) => void;\n\t\t/**\n\t\t * Show/hide the password value as a controlled state.\n\t\t * @default false\n\t\t */\n\t\tshowValue?: boolean;\n\t};\n\ntype PasswordInputType = Extract<InputType, \"text\" | \"password\">;\n\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ maskHiddenValue = false, onBlur, onFocus, onValueVisibilityChange, showValue = false, ...props }, ref) => {\n\t\tconst [showPassword, setShowPassword] = useState<boolean>(showValue);\n\t\tconst type: PasswordInputType = showPassword ? \"text\" : \"password\";\n\t\tconst EyeCon = showPassword ? Eye : EyeClosed;\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\tconst [isFocused, setIsFocused] = useState(false);\n\t\tconst shouldMaskHiddenValue = maskHiddenValue && !showPassword && !isFocused;\n\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tonBlur={(event) => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tonBlur?.(event);\n\t\t\t\t}}\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t}}\n\t\t\t\ttype={type}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<InputCapture className={clsx(shouldMaskHiddenValue && \"max-w-6\")} />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetShowPassword(!showPassword);\n\t\t\t\t\t\tonValueVisibilityChange?.(!showPassword);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"sr-only\">Turn password visibility {showPassword ? \"off\" : \"on\"}</span>\n\t\t\t\t\t<EyeCon aria-hidden />\n\t\t\t\t</button>\n\t\t\t</Input>\n\t\t);\n\t},\n);\nPasswordInput.displayName = \"PasswordInput\";\n\nexport { PasswordInput };\nexport type { PasswordInputProps };\n","/**\n * Type guard for an HTMLInputElement.\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"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","names":["CheckCircle","Warning","WarningDiamond","clsx","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","_validation","restProps","ref","ctxAriaInvalid","ctxForwardedRef","ctxInnerRef","ctxValidation","ctx","useContext","InputContext","validation","ariaInvalid","cx","composeRefs","createContext","_ariaDisabled","disabled","style","type","ValidationFeedback","ValidationFeedback","name","validation","jsxs","jsx","clsx","Warning","CheckCircle","WarningDiamond","Eye","EyeClosed","clsx","forwardRef","useEffect","useState","jsx","jsxs","PasswordInput","forwardRef","maskHiddenValue","onBlur","onFocus","onValueVisibilityChange","showValue","props","ref","showPassword","setShowPassword","useState","type","EyeCon","Eye","EyeClosed","useEffect","isFocused","setIsFocused","Input","event","InputCapture","clsx","isInput","value"]}
|