@ngrok/mantle 0.1.3 → 0.1.5
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 +10 -27
- package/dist/alert.cjs +2 -0
- package/dist/alert.cjs.map +1 -0
- package/dist/alert.d.cts +26 -0
- package/dist/anchor.cjs +2 -0
- package/dist/anchor.cjs.map +1 -0
- package/dist/anchor.d.cts +87 -0
- package/dist/anchor.d.ts +73 -3
- package/dist/anchor.js +1 -1
- package/dist/anchor.js.map +1 -1
- package/dist/as-child-BjnPZ1DU.d.cts +22 -0
- package/dist/button.cjs +2 -0
- package/dist/button.cjs.map +1 -0
- package/dist/button.d.cts +92 -0
- package/dist/card.cjs +2 -0
- package/dist/card.cjs.map +1 -0
- package/dist/card.d.cts +29 -0
- package/dist/checkbox.cjs +2 -0
- package/dist/checkbox.cjs.map +1 -0
- package/dist/checkbox.d.cts +6 -0
- package/dist/chunk-D3F6KERE.cjs +2 -0
- package/dist/chunk-D3F6KERE.cjs.map +1 -0
- package/dist/chunk-IN6SIXF2.cjs +2 -0
- package/dist/chunk-IN6SIXF2.cjs.map +1 -0
- package/dist/chunk-JGNAMNKZ.cjs +2 -0
- package/dist/chunk-JGNAMNKZ.cjs.map +1 -0
- package/dist/chunk-K4UKFOMI.cjs +2 -0
- package/dist/chunk-K4UKFOMI.cjs.map +1 -0
- package/dist/chunk-ROHPZJ5N.cjs +2 -0
- package/dist/chunk-ROHPZJ5N.cjs.map +1 -0
- package/dist/code-block.cjs +4 -0
- package/dist/code-block.cjs.map +1 -0
- package/dist/code-block.d.cts +108 -0
- package/dist/cx.cjs +2 -0
- package/dist/cx.cjs.map +1 -0
- package/dist/cx.d.cts +10 -0
- package/dist/deep-non-nullable-SmpSvoSd.d.cts +8 -0
- package/dist/dialog.cjs +2 -0
- package/dist/dialog.cjs.map +1 -0
- package/dist/dialog.d.cts +26 -0
- package/dist/dropdown-menu.cjs +2 -0
- package/dist/dropdown-menu.cjs.map +1 -0
- package/dist/dropdown-menu.d.cts +37 -0
- package/dist/hooks.cjs +2 -0
- package/dist/hooks.cjs.map +1 -0
- package/dist/hooks.d.cts +15 -0
- package/dist/icon.cjs +2 -0
- package/dist/icon.cjs.map +1 -0
- package/dist/icon.d.cts +23 -0
- package/dist/inline-code.cjs +2 -0
- package/dist/inline-code.cjs.map +1 -0
- package/dist/inline-code.d.cts +9 -0
- package/dist/input.cjs +2 -0
- package/dist/input.cjs.map +1 -0
- package/dist/input.d.cts +75 -0
- package/dist/media-object.cjs +2 -0
- package/dist/media-object.cjs.map +1 -0
- package/dist/media-object.d.cts +26 -0
- package/dist/popover.cjs +2 -0
- package/dist/popover.cjs.map +1 -0
- package/dist/popover.d.cts +8 -0
- package/dist/select.cjs +2 -0
- package/dist/select.cjs.map +1 -0
- package/dist/select.d.cts +19 -0
- package/dist/separator.cjs +2 -0
- package/dist/separator.cjs.map +1 -0
- package/dist/separator.d.cts +9 -0
- package/dist/sheet.cjs +2 -0
- package/dist/sheet.cjs.map +1 -0
- package/dist/sheet.d.cts +22 -0
- package/dist/skeleton.cjs +2 -0
- package/dist/skeleton.cjs.map +1 -0
- package/dist/skeleton.d.cts +14 -0
- package/dist/table.cjs +2 -0
- package/dist/table.cjs.map +1 -0
- package/dist/table.d.cts +13 -0
- package/dist/tailwind-preset.cjs +2 -0
- package/dist/tailwind-preset.cjs.map +1 -0
- package/dist/tailwind-preset.d.cts +475 -0
- package/dist/text-area.cjs +2 -0
- package/dist/text-area.cjs.map +1 -0
- package/dist/text-area.d.cts +19 -0
- package/dist/theme-provider.cjs +29 -0
- package/dist/theme-provider.cjs.map +1 -0
- package/dist/theme-provider.d.cts +75 -0
- package/dist/tooltip.cjs +2 -0
- package/dist/tooltip.cjs.map +1 -0
- package/dist/tooltip.d.cts +15 -0
- package/dist/types.cjs +1 -0
- package/dist/types.cjs.map +1 -0
- package/dist/types.d.cts +6 -0
- package/dist/variant-props-DnYnbC7s.d.cts +11 -0
- package/dist/with-style-props-VnLWm0Yd.d.cts +27 -0
- package/package.json +32 -7
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Mantle
|
|
2
2
|
|
|
3
|
-
[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s
|
|
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
4
|
|
|
5
5
|
## Get Started
|
|
6
6
|
|
|
@@ -25,37 +25,20 @@ export default {
|
|
|
25
25
|
} satisfies Config;
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
Mantle uses `pnpm` as its package manager. First, install the dependencies in the repo’s directory by running `pnpm install`.
|
|
31
|
-
|
|
32
|
-
### Development and preview
|
|
33
|
-
|
|
34
|
-
Run `pnpm run docs:dev` to run Remix's development mode, rebuilding assets on file changes.
|
|
35
|
-
|
|
36
|
-
Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
|
|
28
|
+
Next, check out the [Setup](https://mantle.ngrok.com/setup) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
|
|
37
29
|
|
|
38
|
-
##
|
|
30
|
+
## Development
|
|
39
31
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```sh
|
|
43
|
-
pnpm run build
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
Then run the app in production mode:
|
|
32
|
+
### Installation
|
|
47
33
|
|
|
48
|
-
|
|
49
|
-
pnpm start
|
|
50
|
-
```
|
|
34
|
+
Mantle uses [bun](https://bun.sh/) as its package manager. First, install the dependencies in the repo’s directory by running `bun install`.
|
|
51
35
|
|
|
52
|
-
|
|
36
|
+
### Local Development
|
|
53
37
|
|
|
54
|
-
|
|
38
|
+
Run `bun run docs:dev` to run Remix's development mode, rebuilding assets on file changes.
|
|
55
39
|
|
|
56
|
-
|
|
40
|
+
Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
|
|
57
41
|
|
|
58
|
-
|
|
42
|
+
## Production Deployment
|
|
59
43
|
|
|
60
|
-
|
|
61
|
-
- `public/build/`
|
|
44
|
+
We use GitHub Actions to deploy our production site to vercel and publish to npm.
|
package/dist/alert.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _classvarianceauthority = require('class-variance-authority');var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var d=_classvarianceauthority.cva.call(void 0, "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= exports.Alert =_react.forwardRef.call(void 0, ({className:e,priority:t="default",...r},c)=>_jsxruntime.jsx.call(void 0, "div",{ref:c,className:_chunkD3F6KEREcjs.a.call(void 0, d({priority:t}),e),...r}));l.displayName="Alert";var s=_react.forwardRef.call(void 0, ({className:e,...t},r)=>_jsxruntime.jsx.call(void 0, "div",{ref:r,className:_chunkD3F6KEREcjs.a.call(void 0, "min-w-0 flex-1",e),...t}));s.displayName="AlertContent";var o=_react.forwardRef.call(void 0, ({className:e,...t},r)=>_jsxruntime.jsx.call(void 0, "h5",{ref:r,className:_chunkD3F6KEREcjs.a.call(void 0, "font-medium",e),...t}));o.displayName="AlertTitle";var m=_react.forwardRef.call(void 0, ({className:e,...t},r)=>_jsxruntime.jsx.call(void 0, "div",{ref:r,className:_chunkD3F6KEREcjs.a.call(void 0, "text-sm",e),...t}));m.displayName="AlertDescription";exports.Alert = l; exports.AlertContent = s; exports.AlertDescription = m; exports.AlertTitle = o;
|
|
2
|
+
//# sourceMappingURL=alert.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/alert/src/alert.tsx"],"names":["cva","forwardRef","jsx","alertVariants","Alert","className","priority","props","ref","cx","AlertContent","AlertTitle","AlertDescription"],"mappings":"oCAAA,OAAS,OAAAA,MAAW,2BACpB,OAAS,cAAAC,MAAkB,QAgCzB,cAAAC,MAAA,oBA3BF,IAAMC,EAAgBH,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,EAOKI,EAAQH,EACb,CAAC,CAAE,UAAAI,EAAW,SAAAC,EAAW,UAAW,GAAGC,CAAM,EAAGC,IAC/CN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAGN,EAAc,CAAE,SAAAG,CAAS,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAEnF,EACAH,EAAM,YAAc,QAKpB,IAAMM,EAAeT,EAA2D,CAAC,CAAE,UAAAI,EAAW,GAAGE,CAAM,EAAGC,IACzGN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,iBAAkBJ,CAAS,EAAI,GAAGE,EAAO,CACtE,EACDG,EAAa,YAAc,eAK3B,IAAMC,EAAaV,EAClB,CAAC,CAAE,UAAAI,EAAW,GAAGE,CAAM,EAAGC,IAAQN,EAAC,MAAG,IAAKM,EAAK,UAAWC,EAAG,cAAeJ,CAAS,EAAI,GAAGE,EAAO,CACrG,EACAI,EAAW,YAAc,aAKzB,IAAMC,EAAmBX,EACxB,CAAC,CAAE,UAAAI,EAAW,GAAGE,CAAM,EAAGC,IAAQN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,UAAWJ,CAAS,EAAI,GAAGE,EAAO,CAClG,EACAK,EAAiB,YAAc","sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { VariantProps } from \"../../types\";\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"]}
|
package/dist/alert.d.cts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
import * as class_variance_authority from 'class-variance-authority';
|
|
4
|
+
import { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.cjs';
|
|
5
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Displays a callout for user attention.
|
|
9
|
+
*/
|
|
10
|
+
declare const Alert: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
11
|
+
priority?: "danger" | "default" | "info" | "success" | "warning" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & react.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
/**
|
|
14
|
+
* The container for the content slot of an alert. Place the title and description as direct children.
|
|
15
|
+
*/
|
|
16
|
+
declare const AlertContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
/**
|
|
18
|
+
* The title of an alert.
|
|
19
|
+
*/
|
|
20
|
+
declare const AlertTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLParagraphElement>>;
|
|
21
|
+
/**
|
|
22
|
+
* The description of an alert.
|
|
23
|
+
*/
|
|
24
|
+
declare const AlertDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
|
|
25
|
+
|
|
26
|
+
export { Alert, AlertContent, AlertDescription, AlertTitle };
|
package/dist/anchor.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _reactslot = require('@radix-ui/react-slot');var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var t=e=>_chunkD3F6KEREcjs.a.call(void 0, "cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent",e),s= exports.Anchor =_react.forwardRef.call(void 0, ({asChild:e,className:r,rel:n,...l},c)=>{let u=e?_reactslot.Slot:"a",f=i(n);return _jsxruntime.jsx.call(void 0, u,{className:t(r),ref:c,rel:f,...l})});s.displayName="Anchor";function i(e){return Array.isArray(e)?[...new Set(e)].filter(Boolean).sort().join(" ")||void 0:e||void 0}exports.Anchor = s; exports.anchorClassNames = t; exports.resolveRel = i;
|
|
2
|
+
//# sourceMappingURL=anchor.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","asChild","propRel","props","ref","Component","rel","resolveRel"],"mappings":"yCAAA,OAAS,QAAAA,MAAY,uBACrB,OAA+B,cAAAC,MAAkB,QAoDzC,cAAAC,MAAA,oBA5CR,IAAMC,EAAoBC,GACzBC,EACC,8IACAD,CACD,EAoCKE,EAASL,EAA2C,CAAC,CAAE,QAAAM,EAAS,UAAAH,EAAW,IAAKI,EAAS,GAAGC,CAAM,EAAGC,IAAQ,CAClH,IAAMC,EAAYJ,EAAUP,EAAO,IAC7BY,EAAMC,EAAWL,CAAO,EAE9B,OAAON,EAACS,EAAA,CAAU,UAAWR,EAAiBC,CAAS,EAAG,IAAKM,EAAK,IAAKE,EAAM,GAAGH,EAAO,CAC1F,CAAC,EACDH,EAAO,YAAc,SAOrB,SAASO,EAAWD,EAA0F,CAC7G,OAAI,MAAM,QAAQA,CAAG,EAEL,CAAC,GADE,IAAI,IAAIA,CAAG,CACD,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG,GAC5C,OAIXA,GAAO,MACf","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\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].filter(Boolean).sort().join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\treturn rel || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"]}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributeAnchorTarget, AnchorHTMLAttributes } from 'react';
|
|
3
|
+
import { W as WithAsChild } from './as-child-BjnPZ1DU.cjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
|
|
7
|
+
*
|
|
8
|
+
* Every keyword within a space-separated value should be unique within that value.
|
|
9
|
+
*
|
|
10
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
|
|
11
|
+
*/
|
|
12
|
+
type Rel = "alternate" | "author" | "bookmark" | "canonical" | "dns-prefetch" | "external" | "help" | "icon" | "license" | "manifest" | "me" | "modulepreload" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "pingback" | "preconnect" | "prefetch" | "preload" | "prerender" | "prev" | "privacy-policy" | "search" | "stylesheet" | "tag" | "terms-of-service";
|
|
13
|
+
/**
|
|
14
|
+
* Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
|
|
15
|
+
*
|
|
16
|
+
* Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.
|
|
17
|
+
*
|
|
18
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
|
|
19
|
+
*
|
|
20
|
+
* @default "_self"
|
|
21
|
+
*/
|
|
22
|
+
type Target = (HTMLAttributeAnchorTarget & "_self") | "_blank" | "_parent" | "_top" | "_unfencedTop";
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* The class names for the `Anchor` component which define the styles for the component.
|
|
26
|
+
*/
|
|
27
|
+
declare const anchorClassNames: (className: string | undefined) => string;
|
|
28
|
+
/**
|
|
29
|
+
* The props for the `Anchor` component.
|
|
30
|
+
*/
|
|
31
|
+
type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
|
|
32
|
+
/**
|
|
33
|
+
* The rel attribute defines the relationship between a linked resource and the current document.
|
|
34
|
+
*
|
|
35
|
+
* Every keyword within a space-separated value should be unique within that value.
|
|
36
|
+
*
|
|
37
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
|
|
38
|
+
*/
|
|
39
|
+
rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
|
|
40
|
+
/**
|
|
41
|
+
* Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
|
|
42
|
+
*
|
|
43
|
+
* Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
|
|
44
|
+
*
|
|
45
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
|
|
46
|
+
*
|
|
47
|
+
* @default "_self"
|
|
48
|
+
*/
|
|
49
|
+
target?: Target | undefined;
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* Fundamental component for rendering links to external addresses.
|
|
53
|
+
*
|
|
54
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
|
|
55
|
+
*
|
|
56
|
+
* @note If you need to link to an internal application route, prefer using the
|
|
57
|
+
* [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the
|
|
58
|
+
* [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).
|
|
59
|
+
*/
|
|
60
|
+
declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
|
|
61
|
+
/**
|
|
62
|
+
* The rel attribute defines the relationship between a linked resource and the current document.
|
|
63
|
+
*
|
|
64
|
+
* Every keyword within a space-separated value should be unique within that value.
|
|
65
|
+
*
|
|
66
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
|
|
67
|
+
*/
|
|
68
|
+
rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
|
|
69
|
+
/**
|
|
70
|
+
* Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
|
|
71
|
+
*
|
|
72
|
+
* Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
|
|
73
|
+
*
|
|
74
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
|
|
75
|
+
*
|
|
76
|
+
* @default "_self"
|
|
77
|
+
*/
|
|
78
|
+
target?: Target | undefined;
|
|
79
|
+
} & react.RefAttributes<HTMLAnchorElement>>;
|
|
80
|
+
/**
|
|
81
|
+
* Resolves the `rel` attribute to a string.
|
|
82
|
+
*
|
|
83
|
+
* If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.
|
|
84
|
+
*/
|
|
85
|
+
declare function resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]): string | undefined;
|
|
86
|
+
|
|
87
|
+
export { Anchor, type AnchorProps, type Rel, type Target, anchorClassNames, resolveRel };
|
package/dist/anchor.d.ts
CHANGED
|
@@ -1,8 +1,53 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { AnchorHTMLAttributes } from 'react';
|
|
2
|
+
import { HTMLAttributeAnchorTarget, AnchorHTMLAttributes } from 'react';
|
|
3
3
|
import { W as WithAsChild } from './as-child-BjnPZ1DU.js';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
|
|
7
|
+
*
|
|
8
|
+
* Every keyword within a space-separated value should be unique within that value.
|
|
9
|
+
*
|
|
10
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
|
|
11
|
+
*/
|
|
12
|
+
type Rel = "alternate" | "author" | "bookmark" | "canonical" | "dns-prefetch" | "external" | "help" | "icon" | "license" | "manifest" | "me" | "modulepreload" | "next" | "nofollow" | "noopener" | "noreferrer" | "opener" | "pingback" | "preconnect" | "prefetch" | "preload" | "prerender" | "prev" | "privacy-policy" | "search" | "stylesheet" | "tag" | "terms-of-service";
|
|
13
|
+
/**
|
|
14
|
+
* Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
|
|
15
|
+
*
|
|
16
|
+
* Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.
|
|
17
|
+
*
|
|
18
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
|
|
19
|
+
*
|
|
20
|
+
* @default "_self"
|
|
21
|
+
*/
|
|
22
|
+
type Target = (HTMLAttributeAnchorTarget & "_self") | "_blank" | "_parent" | "_top" | "_unfencedTop";
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* The class names for the `Anchor` component which define the styles for the component.
|
|
26
|
+
*/
|
|
5
27
|
declare const anchorClassNames: (className: string | undefined) => string;
|
|
28
|
+
/**
|
|
29
|
+
* The props for the `Anchor` component.
|
|
30
|
+
*/
|
|
31
|
+
type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
|
|
32
|
+
/**
|
|
33
|
+
* The rel attribute defines the relationship between a linked resource and the current document.
|
|
34
|
+
*
|
|
35
|
+
* Every keyword within a space-separated value should be unique within that value.
|
|
36
|
+
*
|
|
37
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
|
|
38
|
+
*/
|
|
39
|
+
rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
|
|
40
|
+
/**
|
|
41
|
+
* Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
|
|
42
|
+
*
|
|
43
|
+
* Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
|
|
44
|
+
*
|
|
45
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
|
|
46
|
+
*
|
|
47
|
+
* @default "_self"
|
|
48
|
+
*/
|
|
49
|
+
target?: Target | undefined;
|
|
50
|
+
};
|
|
6
51
|
/**
|
|
7
52
|
* Fundamental component for rendering links to external addresses.
|
|
8
53
|
*
|
|
@@ -12,6 +57,31 @@ declare const anchorClassNames: (className: string | undefined) => string;
|
|
|
12
57
|
* [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the
|
|
13
58
|
* [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).
|
|
14
59
|
*/
|
|
15
|
-
declare const Anchor: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild &
|
|
60
|
+
declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target"> & WithAsChild & {
|
|
61
|
+
/**
|
|
62
|
+
* The rel attribute defines the relationship between a linked resource and the current document.
|
|
63
|
+
*
|
|
64
|
+
* Every keyword within a space-separated value should be unique within that value.
|
|
65
|
+
*
|
|
66
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
|
|
67
|
+
*/
|
|
68
|
+
rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
|
|
69
|
+
/**
|
|
70
|
+
* Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
|
|
71
|
+
*
|
|
72
|
+
* Note: Setting `target="_blank"` on <a> elements implicitly provides the same rel behavior as setting `rel="noopener"` which does not set `window.opener`.
|
|
73
|
+
*
|
|
74
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
|
|
75
|
+
*
|
|
76
|
+
* @default "_self"
|
|
77
|
+
*/
|
|
78
|
+
target?: Target | undefined;
|
|
79
|
+
} & react.RefAttributes<HTMLAnchorElement>>;
|
|
80
|
+
/**
|
|
81
|
+
* Resolves the `rel` attribute to a string.
|
|
82
|
+
*
|
|
83
|
+
* If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.
|
|
84
|
+
*/
|
|
85
|
+
declare function resolveRel(rel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[]): string | undefined;
|
|
16
86
|
|
|
17
|
-
export { Anchor, anchorClassNames };
|
|
87
|
+
export { Anchor, type AnchorProps, type Rel, type Target, anchorClassNames, resolveRel };
|
package/dist/anchor.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as o}from"./chunk-A5H52ODC.js";import{Slot as p}from"@radix-ui/react-slot";import{forwardRef as a}from"react";import{jsx as d}from"react/jsx-runtime";var t=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=a(({asChild:e,className:r,rel:n,...l},c)=>{let u=e?p:"a",f=i(n);return d(u,{className:t(r),ref:c,rel:f,...l})});s.displayName="Anchor";function i(e){return Array.isArray(e)?[...new Set(e)].filter(Boolean).sort().join(" ")||void 0:e||void 0}export{s as Anchor,t as anchorClassNames,i as resolveRel};
|
|
2
2
|
//# sourceMappingURL=anchor.js.map
|
package/dist/anchor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\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\ntype AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> &
|
|
1
|
+
{"version":3,"sources":["../packages/anchor/src/anchor.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { AnchorHTMLAttributes, forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithAsChild } from \"../../types/src/as-child\";\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].filter(Boolean).sort().join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n\treturn rel || undefined;\n}\n\nexport { Anchor, anchorClassNames, resolveRel };\nexport type { AnchorProps };\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBACrB,OAA+B,cAAAC,MAAkB,QAoDzC,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,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG,GAC5C,OAIXA,GAAO,MACf","names":["Slot","forwardRef","jsx","anchorClassNames","className","cx","Anchor","forwardRef","asChild","propRel","props","ref","Component","Slot","rel","resolveRel"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Utility type for adding the `asChild` boolean prop to a component.
|
|
3
|
+
*/
|
|
4
|
+
type WithAsChild = {
|
|
5
|
+
/**
|
|
6
|
+
* Use the `asChild` prop to compose Radix's functionality onto alternative
|
|
7
|
+
* element types or your own React components.
|
|
8
|
+
*
|
|
9
|
+
* All Radix primitive parts that render a DOM element accept an `asChild`
|
|
10
|
+
* prop. When `asChild` is set to `true`, Radix will not render a default DOM
|
|
11
|
+
* element, instead cloning the part's child and passing it the props and
|
|
12
|
+
* behavior required to make it functional.
|
|
13
|
+
*
|
|
14
|
+
* asChild can be used as deeply as you need to. This means it is a great way
|
|
15
|
+
* to compose multiple primitive's behavior together.
|
|
16
|
+
*
|
|
17
|
+
* @see https://www.radix-ui.com/docs/primitives/guides/composition#composition
|
|
18
|
+
*/
|
|
19
|
+
asChild?: boolean;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export type { WithAsChild as W };
|
package/dist/button.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkK4UKFOMIcjs = require('./chunk-K4UKFOMI.cjs');require('./chunk-JGNAMNKZ.cjs');require('./chunk-D3F6KERE.cjs');exports.Button = _chunkK4UKFOMIcjs.a; exports.IconButton = _chunkK4UKFOMIcjs.b;
|
|
2
|
+
//# sourceMappingURL=button.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { W as WithAsChild } from './as-child-BjnPZ1DU.cjs';
|
|
4
|
+
import { V as VariantProps } from './variant-props-DnYnbC7s.cjs';
|
|
5
|
+
import { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.cjs';
|
|
6
|
+
import * as class_variance_authority from 'class-variance-authority';
|
|
7
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
8
|
+
|
|
9
|
+
declare const buttonVariants: (props?: ({
|
|
10
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
11
|
+
iconPlacement?: "end" | "start" | null | undefined;
|
|
12
|
+
isLoading?: boolean | null | undefined;
|
|
13
|
+
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
14
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
15
|
+
type ButtonVariants = VariantProps<typeof buttonVariants>;
|
|
16
|
+
/**
|
|
17
|
+
* The props for the `Button` component.
|
|
18
|
+
*/
|
|
19
|
+
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & ButtonVariants & {
|
|
20
|
+
/**
|
|
21
|
+
* An icon to render inside the button. If the `state` is `"pending"`, then
|
|
22
|
+
* the icon will automatically be replaced with a spinner.
|
|
23
|
+
*/
|
|
24
|
+
icon?: ReactNode;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Renders a button or a component that looks like a button, an interactive
|
|
28
|
+
* element activated by a user with a mouse, keyboard, finger, voice command, or
|
|
29
|
+
* other assistive technology. Once activated, it then performs an action, such
|
|
30
|
+
* as submitting a form or opening a dialog.
|
|
31
|
+
*
|
|
32
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
|
|
33
|
+
*/
|
|
34
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
35
|
+
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
36
|
+
iconPlacement?: "end" | "start" | null | undefined;
|
|
37
|
+
isLoading?: boolean | null | undefined;
|
|
38
|
+
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
39
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
|
40
|
+
/**
|
|
41
|
+
* An icon to render inside the button. If the `state` is `"pending"`, then
|
|
42
|
+
* the icon will automatically be replaced with a spinner.
|
|
43
|
+
*/
|
|
44
|
+
icon?: ReactNode;
|
|
45
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
46
|
+
|
|
47
|
+
declare const iconButtonVariants: (props?: ({
|
|
48
|
+
appearance?: "ghost" | "outlined" | null | undefined;
|
|
49
|
+
isLoading?: boolean | null | undefined;
|
|
50
|
+
size?: "xs" | "sm" | "md" | null | undefined;
|
|
51
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
52
|
+
type IconButtonVariants = VariantProps<typeof iconButtonVariants>;
|
|
53
|
+
/**
|
|
54
|
+
* The props for the `Button` component.
|
|
55
|
+
*/
|
|
56
|
+
type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & IconButtonVariants & {
|
|
57
|
+
/**
|
|
58
|
+
* 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.
|
|
59
|
+
*/
|
|
60
|
+
label: string;
|
|
61
|
+
/**
|
|
62
|
+
* An icon to render inside the button. If the `state` is `"pending"`, then
|
|
63
|
+
* the icon will automatically be replaced with a spinner.
|
|
64
|
+
*/
|
|
65
|
+
icon: ReactNode;
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* Renders a button or a component that looks like a button, an interactive
|
|
69
|
+
* element activated by a user with a mouse, keyboard, finger, voice command, or
|
|
70
|
+
* other assistive technology. Once activated, it then performs an action, such
|
|
71
|
+
* as submitting a form or opening a dialog.
|
|
72
|
+
* Renders only a single icon as children with an accessible, screen-reader-only label.
|
|
73
|
+
*
|
|
74
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
|
|
75
|
+
*/
|
|
76
|
+
declare const IconButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
77
|
+
appearance?: "ghost" | "outlined" | null | undefined;
|
|
78
|
+
isLoading?: boolean | null | undefined;
|
|
79
|
+
size?: "xs" | "sm" | "md" | null | undefined;
|
|
80
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
|
81
|
+
/**
|
|
82
|
+
* 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.
|
|
83
|
+
*/
|
|
84
|
+
label: string;
|
|
85
|
+
/**
|
|
86
|
+
* An icon to render inside the button. If the `state` is `"pending"`, then
|
|
87
|
+
* the icon will automatically be replaced with a spinner.
|
|
88
|
+
*/
|
|
89
|
+
icon: ReactNode;
|
|
90
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
91
|
+
|
|
92
|
+
export { Button, type ButtonProps, IconButton, type IconButtonProps };
|
package/dist/card.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _reactslot = require('@radix-ui/react-slot');var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var p=_react.forwardRef.call(void 0, ({className:r,children:e,...d},a)=>_jsxruntime.jsx.call(void 0, "div",{ref:a,className:_chunkD3F6KEREcjs.a.call(void 0, "relative divide-y divide-card-muted rounded-md border border-card bg-card",r),...d,children:e}));p.displayName="Card";var s=_react.forwardRef.call(void 0, ({className:r,children:e,...d},a)=>_jsxruntime.jsx.call(void 0, "div",{ref:a,className:_chunkD3F6KEREcjs.a.call(void 0, "p-6",r),...d,children:e}));s.displayName="CardBody";var m=_react.forwardRef.call(void 0, ({className:r,children:e,...d},a)=>_jsxruntime.jsx.call(void 0, "div",{ref:a,className:_chunkD3F6KEREcjs.a.call(void 0, "px-6 py-3",r),...d,children:e}));m.displayName="CardFooter";var l=_react.forwardRef.call(void 0, ({className:r,children:e,...d},a)=>_jsxruntime.jsx.call(void 0, "div",{ref:a,className:_chunkD3F6KEREcjs.a.call(void 0, "px-6 py-3",r),...d,children:e}));l.displayName="CardHeader";var C=_react.forwardRef.call(void 0, ({className:r,asChild:e,...d},a)=>_jsxruntime.jsx.call(void 0, e?_reactslot.Slot:"h3",{ref:a,className:_chunkD3F6KEREcjs.a.call(void 0, "font-semibold leading-none tracking-tight",r),...d}));C.displayName="CardTitle";exports.Card = p; exports.CardBody = s; exports.CardFooter = m; exports.CardHeader = l; exports.CardTitle = C;
|
|
2
|
+
//# sourceMappingURL=card.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/card/src/card.tsx"],"names":["Slot","forwardRef","jsx","Card","className","children","rest","ref","cx","CardBody","CardFooter","CardHeader","CardTitle","asChild","props"],"mappings":"yCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,cAAAC,MAAkB,QAW1B,cAAAC,MAAA,oBADM,IAAMC,EAAOF,EAAsC,CAAC,CAAE,UAAAG,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAC5FL,EAAC,OACA,IAAKK,EACL,UAAWC,EAAG,4EAA6EJ,CAAS,EACnG,GAAGE,EAEH,SAAAD,EACF,CACA,EACDF,EAAK,YAAc,OAKZ,IAAMM,EAAWR,EAAsC,CAAC,CAAE,UAAAG,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAChGL,EAAC,OAAI,IAAKK,EAAK,UAAWC,EAAG,MAAOJ,CAAS,EAAI,GAAGE,EAClD,SAAAD,EACF,CACA,EACDI,EAAS,YAAc,WAKhB,IAAMC,EAAaT,EAAsC,CAAC,CAAE,UAAAG,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAClGL,EAAC,OAAI,IAAKK,EAAK,UAAWC,EAAG,YAAaJ,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CACA,EACDK,EAAW,YAAc,aAKlB,IAAMC,EAAaV,EAAsC,CAAC,CAAE,UAAAG,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAClGL,EAAC,OAAI,IAAKK,EAAK,UAAWC,EAAG,YAAaJ,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CACA,EACDM,EAAW,YAAc,aAOlB,IAAMC,EAAYX,EAAiD,CAAC,CAAE,UAAAG,EAAW,QAAAS,EAAS,GAAGC,CAAM,EAAGP,IAErGL,EADMW,EAAUb,EAAO,KACtB,CAAK,IAAKO,EAAK,UAAWC,EAAG,4CAA6CJ,CAAS,EAAI,GAAGU,EAAO,CACzG,EACDF,EAAU,YAAc","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithAsChild } from \"../../types/src/as-child\";\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 */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tclassName={cx(\"relative divide-y divide-card-muted rounded-md border border-card bg-card\", 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 */\nexport const 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 */\nexport const 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 */\nexport const 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 */\nexport const CardTitle = forwardRef<HTMLParagraphElement, CardTitleProps>(({ className, asChild, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\treturn <Comp ref={ref} className={cx(\"font-semibold leading-none tracking-tight\", className)} {...props} />;\n});\nCardTitle.displayName = \"CardTitle\";\n"]}
|
package/dist/card.d.cts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
import { W as WithAsChild } from './as-child-BjnPZ1DU.cjs';
|
|
4
|
+
|
|
5
|
+
type CardProps = HTMLAttributes<HTMLDivElement>;
|
|
6
|
+
/**
|
|
7
|
+
* A container that can be used to display content in a box resembling a playing
|
|
8
|
+
* card.
|
|
9
|
+
*/
|
|
10
|
+
declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
/**
|
|
12
|
+
* The main content of a card. Usually composed as a direct child of a `Card` component.
|
|
13
|
+
*/
|
|
14
|
+
declare const CardBody: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
/**
|
|
16
|
+
* The footer container of a card. Usually composed as a direct child of a `Card` component.
|
|
17
|
+
*/
|
|
18
|
+
declare const CardFooter: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
/**
|
|
20
|
+
* The header container of a card. Usually composed as a direct child of a `Card` component.
|
|
21
|
+
*/
|
|
22
|
+
declare const CardHeader: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
|
|
24
|
+
/**
|
|
25
|
+
* The title of a card. Usually composed as a direct child of a `CardHeader` component.
|
|
26
|
+
*/
|
|
27
|
+
declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLParagraphElement>>;
|
|
28
|
+
|
|
29
|
+
export { Card, CardBody, CardFooter, CardHeader, type CardProps, CardTitle, type CardTitleProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _reactcheckbox = require('@radix-ui/react-checkbox'); var t = _interopRequireWildcard(_reactcheckbox);var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var a=_react.forwardRef.call(void 0, ({className:o,...i},s)=>_jsxruntime.jsxs.call(void 0, t.Root,{ref:s,className:_chunkD3F6KEREcjs.a.call(void 0, "size-4 shrink-0 appearance-none rounded border border-form bg-form focus:border-accent-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-focus-accent disabled:cursor-not-allowed disabled:opacity-50 data-state-checked:border-transparent data-state-checked:bg-filled-accent data-state-indeterminate:border-transparent data-state-indeterminate:bg-filled-accent",o),...i,children:[_jsxruntime.jsx.call(void 0, t.Indicator,{className:"hidden items-center justify-center leading-none text-on-filled data-state-checked:flex",children:_jsxruntime.jsx.call(void 0, c,{className:"size-3"})}),_jsxruntime.jsx.call(void 0, t.Indicator,{className:"hidden items-center justify-center text-on-filled data-state-indeterminate:flex",children:_jsxruntime.jsx.call(void 0, l,{className:"size-3"})}),_jsxruntime.jsx.call(void 0, t.Indicator,{})]}));a.displayName="Checkbox";var c=({className:o,style:i})=>_jsxruntime.jsx.call(void 0, "svg",{className:o,style:i,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:_jsxruntime.jsx.call(void 0, "path",{d:"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L3.29289 9.70711C2.90237 9.31658 2.90237 8.68342 3.29289 8.29289C3.68342 7.90237 4.31658 7.90237 4.70711 8.29289L6 9.58579L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z",fill:"currentColor"})}),l=({className:o,style:i})=>_jsxruntime.jsx.call(void 0, "svg",{className:o,style:i,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:_jsxruntime.jsx.call(void 0, "path",{d:"M4 8C4 7.44772 4.44772 7 5 7H11C11.5523 7 12 7.44772 12 8C12 8.55228 11.5523 9 11 9H5C4.44772 9 4 8.55228 4 8Z",fill:"currentColor"})});exports.Checkbox = a;
|
|
2
|
+
//# sourceMappingURL=checkbox.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/checkbox/src/checkbox.tsx"],"names":["CheckboxPrimitive","forwardRef","jsx","jsxs","Checkbox","className","props","ref","cx","CheckedIcon","IndeterminateIcon","style"],"mappings":"yCAAA,UAAYA,MAAuB,2BACnC,OAAS,cAAAC,MAAkB,QAQ1B,OASE,OAAAC,EATF,QAAAC,MAAA,oBADD,IAAMC,EAAWH,EAA6D,CAAC,CAAE,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IACvGJ,EAAmB,OAAlB,CACA,IAAKI,EACL,UAAWC,EACV,6XACAH,CACD,EACC,GAAGC,EAEJ,UAAAJ,EAAmB,YAAlB,CAA4B,UAAU,yFACtC,SAAAA,EAACO,EAAA,CAAY,UAAU,SAAS,EACjC,EACAP,EAAmB,YAAlB,CAA4B,UAAU,kFACtC,SAAAA,EAACQ,EAAA,CAAkB,UAAU,SAAS,EACvC,EACAR,EAAmB,YAAlB,EAA4B,GAC9B,CACA,EACDE,EAAS,YAAc,WAIvB,IAAMK,EAAc,CAAC,CAAE,UAAAJ,EAAW,MAAAM,CAAM,IACvCT,EAAC,OAAI,UAAWG,EAAW,MAAOM,EAAO,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAC9E,SAAAT,EAAC,QACA,EAAE,8TACF,KAAK,eACN,EACD,EAGKQ,EAAoB,CAAC,CAAE,UAAAL,EAAW,MAAAM,CAAM,IAC7CT,EAAC,OAAI,UAAWG,EAAW,MAAOM,EAAO,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAC9E,SAAAT,EAAC,QACA,EAAE,iHACF,KAAK,eACN,EACD","sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport { WithStyleProps } from \"../../types\";\n\ntype Props = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, Props>(({ className, ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"size-4 shrink-0 appearance-none rounded border border-form bg-form focus:border-accent-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-focus-accent disabled:cursor-not-allowed disabled:opacity-50 data-state-checked:border-transparent data-state-checked:bg-filled-accent data-state-indeterminate:border-transparent data-state-indeterminate:bg-filled-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className=\"hidden items-center justify-center leading-none text-on-filled data-state-checked:flex\">\n\t\t\t<CheckedIcon className=\"size-3\" />\n\t\t</CheckboxPrimitive.Indicator>\n\t\t<CheckboxPrimitive.Indicator className=\"hidden items-center justify-center text-on-filled data-state-indeterminate:flex\">\n\t\t\t<IndeterminateIcon className=\"size-3\" />\n\t\t</CheckboxPrimitive.Indicator>\n\t\t<CheckboxPrimitive.Indicator />\n\t</CheckboxPrimitive.Root>\n));\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n\nconst CheckedIcon = ({ className, style }: WithStyleProps) => (\n\t<svg className={className} style={style} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\td=\"M12.7071 4.29289C13.0976 4.68342 13.0976 5.31658 12.7071 5.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L3.29289 9.70711C2.90237 9.31658 2.90237 8.68342 3.29289 8.29289C3.68342 7.90237 4.31658 7.90237 4.70711 8.29289L6 9.58579L11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289Z\"\n\t\t\tfill=\"currentColor\"\n\t\t/>\n\t</svg>\n);\n\nconst IndeterminateIcon = ({ className, style }: WithStyleProps) => (\n\t<svg className={className} style={style} viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\td=\"M4 8C4 7.44772 4.44772 7 5 7H11C11.5523 7 12 7.44772 12 8C12 8.55228 11.5523 9 11 9H5C4.44772 9 4 8.55228 4 8Z\"\n\t\t\tfill=\"currentColor\"\n\t\t/>\n\t</svg>\n);\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
|
+
|
|
4
|
+
declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
|
|
6
|
+
export { Checkbox };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _clsx = require('clsx');var _tailwindmerge = require('tailwind-merge');function t(...r){return _tailwindmerge.twMerge.call(void 0, _clsx.clsx.call(void 0, r))}exports.a = t;
|
|
2
|
+
//# sourceMappingURL=chunk-D3F6KERE.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/cx/src/cx.ts"],"names":["clsx","twMerge","cx","inputs"],"mappings":"AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,WAAAC,MAAe,iBAOjB,SAASC,KAAMC,EAAsB,CAC3C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC5B","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Conditionally add Tailwind (and other) CSS classes.\n *\n * Allows for tailwind overrides in LTR-specificity-like order of applied classes.\n */\nexport function cx(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _react = require('react');function c(e){let r=_react.useCallback.call(void 0, t=>{let n=window.matchMedia(e);return n.addEventListener("change",t),()=>{n.removeEventListener("change",t)}},[e]);return _react.useSyncExternalStore.call(void 0, r,()=>window.matchMedia(e).matches,()=>!1)}exports.a = c;
|
|
2
|
+
//# sourceMappingURL=chunk-IN6SIXF2.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/hooks/src/use-matches-media-query.tsx"],"names":["useCallback","useSyncExternalStore","useMatchesMediaQuery","query","subscribe","callback","matchMedia"],"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","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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _react = require('react');var _tinyinvariant = require('tiny-invariant'); var _tinyinvariant2 = _interopRequireDefault(_tinyinvariant);var _jsxruntime = require('react/jsx-runtime');var a=({className:o,style:s,svg:r})=>{let t=_react.Children.only(r);return _tinyinvariant2.default.call(void 0, _react.isValidElement.call(void 0, t),"Icon must be passed a single SVG icon as a JSX tag."),_jsxruntime.jsx.call(void 0, _jsxruntime.Fragment,{children:_react.cloneElement.call(void 0, t,{className:_chunkD3F6KEREcjs.a.call(void 0, "size-6 sm:size-5 shrink-0",t.props.className,o),style:{...t.props.style,...s}})})};exports.a = a;
|
|
2
|
+
//# sourceMappingURL=chunk-JGNAMNKZ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/icon/src/icon.tsx"],"names":["Children","cloneElement","isValidElement","invariant","Fragment","jsx","Icon","className","style","svg","icon","cx"],"mappings":"yCAAA,OAAS,YAAAA,EAAU,gBAAAC,EAA8B,kBAAAC,MAA+C,QAChG,OAAOC,MAAe,iBA2BpB,mBAAAC,EAAA,OAAAC,MAAA,oBALF,IAAMC,EAAO,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,IAAAC,CAAI,IAAiB,CACtD,IAAMC,EAAOV,EAAS,KAAKS,CAAG,EAC9B,OAAAN,EAAUD,EAA8BQ,CAAI,EAAG,qDAAqD,EAGnGL,EAAAD,EAAA,CACE,SAAAH,EAAaS,EAAM,CACnB,UAAWC,EAAG,4BAA6BD,EAAK,MAAM,UAAWH,CAAS,EAC1E,MAAO,CAAE,GAAGG,EAAK,MAAM,MAAO,GAAGF,CAAM,CACxC,CAAC,EACF,CAEF","sourcesContent":["import { Children, cloneElement, HTMLAttributes, isValidElement, ReactElement, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../cx\";\nimport { WithStyleProps } from \"../../types\";\n\ntype IconProps = WithStyleProps & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\ntype SvgAttributes = HTMLAttributes<SVGElement> & {\n\tfocusable?: \"true\" | \"false\";\n};\n\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 Icon = ({ className, style, svg }: IconProps) => {\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(\"size-6 sm:size-5 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 { Icon };\nexport type { IconProps, SvgAttributes };\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _chunkJGNAMNKZcjs = require('./chunk-JGNAMNKZ.cjs');var _chunkD3F6KEREcjs = require('./chunk-D3F6KERE.cjs');var _CircleNotch = require('@phosphor-icons/react/CircleNotch');var _reactslot = require('@radix-ui/react-slot');var _classvarianceauthority = require('class-variance-authority');var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);var _react = require('react');var _tinyinvariant = require('tiny-invariant'); var _tinyinvariant2 = _interopRequireDefault(_tinyinvariant);var _jsxruntime = require('react/jsx-runtime');var W=_classvarianceauthority.cva.call(void 0, "items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50 sm:text-sm [&>*]:focus-within:outline-none",{variants:{appearance:{filled:"inline-flex h-11 border border-transparent bg-filled-accent px-3 font-medium text-on-filled hover:bg-filled-accent-hover focus-visible:border-accent-600 focus-visible:ring-focus-accent active:bg-filled-accent-active sm:h-9",ghost:"inline-flex h-11 border border-transparent px-3 font-medium text-accent-600 hover:bg-accent-500/10 hover:text-accent-700 focus-visible:ring-focus-accent active:bg-accent-500/15 active:text-accent-700 sm:h-9",outlined:"inline-flex h-11 border border-accent-600 bg-form px-3 font-medium text-accent-600 hover:border-accent-700 hover:bg-accent-500/10 hover:text-accent-700 focus-visible:ring-focus-accent active:border-accent-700 active:bg-accent-500/15 active:text-accent-700 sm:h-9",link:"group inline cursor-pointer border-transparent text-accent-600 hover:underline focus-visible:ring-focus-accent"},iconPlacement:{end:"pe-2.5",start:"ps-2.5"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"border-transparent text-danger-600 hover:bg-danger-500/10 hover:text-danger-700 focus-visible:ring-focus-danger active:bg-danger-500/15 active:text-danger-700"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 hover:border-danger-700 hover:bg-danger-500/10 hover:text-danger-700 focus-visible:ring-focus-danger active:border-danger-700 active:bg-danger-500/15 active:text-danger-700"},{appearance:"filled",priority:"danger",class:"border-transparent bg-filled-danger hover:bg-filled-danger-hover focus-visible:border-danger-600 focus-visible:ring-focus-danger active:bg-filled-danger-active"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"border-transparent text-strong hover:bg-neutral-500/10 hover:text-strong focus-visible:ring-focus-accent active:bg-neutral-500/15 active:text-strong"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"border-transparent bg-filled-neutral hover:bg-filled-neutral-hover focus-visible:border-neutral-600 focus-visible:ring-focus-neutral active:bg-filled-neutral-active"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),V= exports.a =_react.forwardRef.call(void 0, ({"aria-disabled":l,appearance:r="outlined",asChild:o=!1,children:a,className:b,icon:t,iconPlacement:i="start",isLoading:n=!1,onClickCapture:g,priority:m="default",...v},h)=>{let x=_nullishCoalesce(l, () => (n)),u=n?_jsxruntime.jsx.call(void 0, _CircleNotch.CircleNotch,{className:"animate-spin"}):t,d=e=>{n&&(e.preventDefault(),e.stopPropagation()),_optionalChain([g, 'optionalCall', _2 => _2(e)])},y={"aria-disabled":x,className:_chunkD3F6KEREcjs.a.call(void 0, W({appearance:r,priority:m,isLoading:n,iconPlacement:u?i:void 0}),b),"data-loading":n,onClickCapture:d,ref:h,...v};if(o){let e=_react.Children.only(a);_tinyinvariant2.default.call(void 0, _react.isValidElement.call(void 0, e),"When using `asChild`, Button must be passed a single child as a JSX tag.");let B=_optionalChain([e, 'access', _3 => _3.props, 'optionalAccess', _4 => _4.children]);return _jsxruntime.jsx.call(void 0, _reactslot.Slot,{...y,children:_react.cloneElement.call(void 0, e,{},_jsxruntime.jsx.call(void 0, P,{appearance:r,icon:u,iconPlacement:i,children:B}))})}return _jsxruntime.jsx.call(void 0, "button",{...y,children:_jsxruntime.jsx.call(void 0, P,{appearance:r,icon:u,iconPlacement:i,children:a})})});V.displayName="Button";var P=({appearance:l,children:r,icon:o,iconPlacement:a})=>_jsxruntime.jsxs.call(void 0, "span",{className:_clsx2.default.call(void 0, "inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none",l==="link"&&"group-hover:underline"),children:[o&&_jsxruntime.jsx.call(void 0, _chunkJGNAMNKZcjs.a,{svg:o,className:_clsx2.default.call(void 0, a==="end"&&"order-last")}),r]});var j=_classvarianceauthority.cva.call(void 0, "inline-flex items-center justify-center rounded-md border focus-within:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50",{variants:{appearance:{ghost:"border-transparent text-strong hover:bg-neutral-500/10 hover:text-strong focus-visible:ring-focus-accent active:bg-neutral-500/15 active:text-strong",outlined:"border-form bg-form text-strong hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible: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"}}),I= exports.b =_react.forwardRef.call(void 0, ({"aria-disabled":l,appearance:r,asChild:o=!1,children:a,className:b,isLoading:t=!1,icon:i,label:n,onClickCapture:g,size:m,...v},h)=>{let x=_nullishCoalesce(l, () => (t)),u=e=>{t&&(e.preventDefault(),e.stopPropagation()),_optionalChain([g, 'optionalCall', _5 => _5(e)])},d={"aria-disabled":x,className:_chunkD3F6KEREcjs.a.call(void 0, j({appearance:r,isLoading:t,size:m}),b),"data-loading":t,onClickCapture:u,ref:h,...v};if(o){let e=_react.Children.only(a),B=_react.isValidElement.call(void 0, e);return _jsxruntime.jsx.call(void 0, _reactslot.Slot,{...d,children:B&&_react.cloneElement.call(void 0, e,{},_jsxruntime.jsx.call(void 0, _chunkJGNAMNKZcjs.a,{svg:t?_jsxruntime.jsx.call(void 0, _CircleNotch.CircleNotch,{className:"animate-spin"}):i}))})}return _jsxruntime.jsxs.call(void 0, "button",{...d,children:[_jsxruntime.jsx.call(void 0, "span",{className:"sr-only",children:n}),_jsxruntime.jsx.call(void 0, _chunkJGNAMNKZcjs.a,{svg:t?_jsxruntime.jsx.call(void 0, _CircleNotch.CircleNotch,{className:"animate-spin"}):i})]})});I.displayName="IconButton";exports.a = V; exports.b = I;
|
|
2
|
+
//# sourceMappingURL=chunk-K4UKFOMI.cjs.map
|