@ngrok/mantle 0.84.0 → 0.84.2
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/dist/accordion.d.ts +14 -10
- package/dist/accordion.js +1 -1
- package/dist/agent.json +1 -1
- package/dist/{alert-Blmunr_D.d.ts → alert-DCVfviBx.d.ts} +18 -3
- package/dist/alert-DtBQuuuP.js +1 -0
- package/dist/alert-center.d.ts +15 -6
- package/dist/alert-center.js +1 -1
- package/dist/alert-dialog.d.ts +58 -37
- package/dist/alert-dialog.js +1 -1
- package/dist/alert.d.ts +1 -1
- package/dist/alert.js +1 -1
- package/dist/alternate-announcement-BkH4bOKp.js +1 -0
- package/dist/anchor-Cqu4GPPV.js +1 -0
- package/dist/anchor.d.ts +15 -15
- package/dist/anchor.js +1 -1
- package/dist/app-layout.js +1 -1
- package/dist/area-chart.js +1 -1
- package/dist/avatar.js +1 -1
- package/dist/badge.d.ts +3 -1
- package/dist/badge.js +1 -1
- package/dist/bar-chart.d.ts +17 -8
- package/dist/bar-chart.js +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/button-B52_vczK.js +1 -0
- package/dist/{button-DjsmeoJ2.d.ts → button-B5i9n7Qp.d.ts} +19 -7
- package/dist/button-CaM-ZAH5.js +1 -0
- package/dist/{button-Bc0lEOJ2.js → button-DGsTE3P2.js} +1 -1
- package/dist/{button-CRCNRnk6.d.ts → button-DO53OA70.d.ts} +2 -2
- package/dist/{button-DmJkYfyl.js → button-Wn-yt0c_.js} +1 -1
- package/dist/{button-C39M5h4K.d.ts → button-crUf0hbR.d.ts} +19 -2
- package/dist/button.d.ts +3 -3
- package/dist/button.js +1 -1
- package/dist/calendar.d.ts +20 -4
- package/dist/calendar.js +1 -1
- package/dist/card.d.ts +10 -6
- package/dist/card.js +1 -1
- package/dist/centered-layout.js +1 -1
- package/dist/chart-B_rZqf8a.js +2 -0
- package/dist/checkbox-Gg6nGUnR.js +1 -0
- package/dist/checkbox.js +1 -1
- package/dist/choice-CT_AdesL.js +1 -0
- package/dist/{choice-CVdQrs-m.d.ts → choice-PESu-9s8.d.ts} +46 -12
- package/dist/choice.d.ts +1 -1
- package/dist/choice.js +1 -1
- package/dist/{code-block-Dj9otiLi.js → code-block-BE3Q0iAo.js} +2 -2
- package/dist/code-block.d.ts +26 -2
- package/dist/code-block.js +6 -6
- package/dist/code-block_highlight-utils.js +1 -1
- package/dist/code.js +1 -1
- package/dist/combobox.d.ts +19 -2
- package/dist/combobox.js +1 -1
- package/dist/command.d.ts +32 -13
- package/dist/command.js +1 -1
- package/dist/compose-refs-DdUwopIY.js +1 -0
- package/dist/{cx-IiQEAKf5.js → cx-0HCjnNv1.js} +1 -1
- package/dist/cx.d.ts +3 -3
- package/dist/cx.js +1 -1
- package/dist/data-table.d.ts +114 -61
- package/dist/data-table.js +1 -1
- package/dist/description-list.d.ts +43 -9
- package/dist/description-list.js +1 -1
- package/dist/{dialog-u8PtHYES.d.ts → dialog-B8YvfyIo.d.ts} +5 -3
- package/dist/{dialog-CnlaqHNh.js → dialog-CA-1Z0Np.js} +1 -1
- package/dist/{dialog-CEk0L7M7.d.ts → dialog-CtLI_uex.d.ts} +5 -3
- package/dist/dialog.d.ts +2 -2
- package/dist/dialog.js +1 -1
- package/dist/{dropdown-menu-CpsUJGbn.d.ts → dropdown-menu-BYapTV0f.d.ts} +8 -5
- package/dist/dropdown-menu-BkPBh_8y.d.ts +1 -0
- package/dist/{dropdown-menu-DJDrRzDU.js → dropdown-menu-lxHsgLiw.js} +1 -1
- package/dist/dropdown-menu.d.ts +2 -2
- package/dist/dropdown-menu.js +1 -1
- package/dist/empty.d.ts +4 -4
- package/dist/empty.js +1 -1
- package/dist/field.d.ts +91 -38
- package/dist/field.js +1 -1
- package/dist/flag.d.ts +9 -1
- package/dist/flag.js +1 -1
- package/dist/hooks.d.ts +28 -19
- package/dist/hooks.js +1 -1
- package/dist/hover-card.d.ts +11 -3
- package/dist/hover-card.js +1 -1
- package/dist/{icon-k4E9yNWD.d.ts → icon-BmJ57Tgh.d.ts} +10 -0
- package/dist/icon-CGKaq_tV.js +1 -0
- package/dist/icon-U24NfYv7.js +1 -0
- package/dist/icon-w0HUe7tr.d.ts +42 -0
- package/dist/icon.d.ts +2 -2
- package/dist/icon.js +1 -1
- package/dist/{icons-DEVx1oP9.js → icons-Cie4gcrm.js} +1 -1
- package/dist/icons.d.ts +7 -13
- package/dist/icons.js +1 -1
- package/dist/{in-view-gxyc9Q1_.d.ts → in-view-Ch5vJtWo.d.ts} +10 -5
- package/dist/input-BhykQSvJ.js +1 -0
- package/dist/input-DQyN6gN0.js +1 -0
- package/dist/input.d.ts +22 -10
- package/dist/input.js +1 -1
- package/dist/interactive-target-BXScNeOr.js +1 -0
- package/dist/{kbd-B9qmYaW8.js → kbd-4_0Y_8rx.js} +1 -1
- package/dist/kbd.d.ts +15 -9
- package/dist/kbd.js +1 -1
- package/dist/{label-C6YH9skg.d.ts → label-Bnfe9YJ6.d.ts} +3 -1
- package/dist/label-BqIp6kFx.js +1 -0
- package/dist/label.d.ts +1 -1
- package/dist/label.js +1 -1
- package/dist/layer-container-BTcQpd4K.js +1 -0
- package/dist/layer-container.js +1 -1
- package/dist/line-chart.js +1 -1
- package/dist/list-Bo1mExIg.js +1 -0
- package/dist/list.d.ts +37 -14
- package/dist/list.js +1 -1
- package/dist/live-region-CV7kykeo.js +1 -0
- package/dist/live-region.js +1 -1
- package/dist/llms.txt +1 -1
- package/dist/main.d.ts +4 -2
- package/dist/main.js +1 -1
- package/dist/media-object.d.ts +5 -12
- package/dist/media-object.js +1 -1
- package/dist/multi-select.d.ts +45 -13
- package/dist/multi-select.js +1 -1
- package/dist/otp-input.d.ts +9 -3
- package/dist/otp-input.js +1 -1
- package/dist/pagination.d.ts +165 -19
- package/dist/pagination.js +1 -1
- package/dist/{popover-D6x6Bq-G.js → popover-Bp-9B3GR.js} +1 -1
- package/dist/{popover-DDuw1UaJ.d.ts → popover-s2LhmzfQ.d.ts} +8 -4
- package/dist/popover.d.ts +1 -1
- package/dist/popover.js +1 -1
- package/dist/primitive-CejGAoGb.js +1 -0
- package/dist/progress.d.ts +65 -31
- package/dist/progress.js +1 -1
- package/dist/qr-code.d.ts +10 -4
- package/dist/qr-code.js +1 -1
- package/dist/radio-group-HDVxTNPi.js +1 -0
- package/dist/radio-group.d.ts +50 -25
- package/dist/radio-group.js +1 -1
- package/dist/sandbar.d.ts +1 -1
- package/dist/sandbar.js +1 -1
- package/dist/sandboxed-on-click-UagMFl_U.js +1 -0
- package/dist/sandboxed-on-click.d.ts +8 -0
- package/dist/sandboxed-on-click.js +1 -1
- package/dist/scatter-plot.js +1 -1
- package/dist/select-Dov9H2CX.js +1 -0
- package/dist/{select-DkFkSYBP.d.ts → select-ouAW88jx.d.ts} +30 -9
- package/dist/select.d.ts +1 -1
- package/dist/select.js +1 -1
- package/dist/selectable-list.d.ts +64 -20
- package/dist/selectable-list.js +1 -1
- package/dist/{separator-CNDs98Dv.d.ts → separator-Bo4nY_3M.d.ts} +13 -2
- package/dist/{separator-D0D6VyyM.js → separator-Da8lDnio.js} +1 -1
- package/dist/separator.d.ts +1 -1
- package/dist/separator.js +1 -1
- package/dist/{sheet-BcfnKUit.js → sheet-C6UGAvRk.js} +1 -1
- package/dist/sheet.d.ts +5 -5
- package/dist/sheet.js +1 -1
- package/dist/sidebar.d.ts +7 -6
- package/dist/sidebar.js +1 -1
- package/dist/skeleton-paJOgf-f.js +1 -0
- package/dist/skeleton.d.ts +5 -4
- package/dist/skeleton.js +1 -1
- package/dist/skip-to-main-link.d.ts +9 -6
- package/dist/skip-to-main-link.js +1 -1
- package/dist/slider.d.ts +7 -3
- package/dist/slider.js +1 -1
- package/dist/{slot-DpNWVci8.js → slot-C3gII_9c.js} +1 -1
- package/dist/slot.js +1 -1
- package/dist/split-button.d.ts +8 -3
- package/dist/split-button.js +1 -1
- package/dist/switch.js +1 -1
- package/dist/{table-D51ZtV4U.d.ts → table-DEI-qvSC.d.ts} +25 -12
- package/dist/table-EZNW3nFk.js +1 -0
- package/dist/table.d.ts +1 -1
- package/dist/table.js +1 -1
- package/dist/tabs.js +1 -1
- package/dist/text-area.js +1 -1
- package/dist/theme-DN-Et3A_.js +1 -0
- package/dist/theme-switcher.d.ts +24 -12
- package/dist/theme-switcher.js +1 -1
- package/dist/theme.d.ts +18 -4
- package/dist/theme.js +1 -1
- package/dist/toast.d.ts +8 -3
- package/dist/toast.js +1 -1
- package/dist/tooltip-CkAibjBb.js +1 -0
- package/dist/{tooltip-BKWK5c7_.d.ts → tooltip-DA41fxe5.d.ts} +7 -1
- package/dist/tooltip.d.ts +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/{use-breakpoint-Dqu12Szq.js → use-breakpoint-BhJ_3El2.js} +1 -1
- package/dist/use-is-apple-platform-CMPzIYjz.js +1 -0
- package/dist/use-matches-media-query-DCBT6iNA.js +1 -0
- package/dist/use-prefers-reduced-motion-DHYDQk1h.js +1 -0
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/dist/visually-hidden.js +1 -1
- package/dist/well.js +1 -1
- package/package.json +3 -3
- package/dist/alert-DDjzRuGa.js +0 -1
- package/dist/anchor-D2So_zuy.js +0 -1
- package/dist/button-CC10rP6X.js +0 -1
- package/dist/button-DiDlvAOp.js +0 -1
- package/dist/chart-BDxpXPfo.js +0 -2
- package/dist/checkbox-0EoxOyMA.js +0 -1
- package/dist/choice-CnwfjSEu.js +0 -1
- package/dist/compose-refs-BdBMM9ga.js +0 -1
- package/dist/dropdown-menu-CNaaABck.d.ts +0 -1
- package/dist/icon-CX_gj6sW.d.ts +0 -25
- package/dist/icon-d-nMCfAI.js +0 -1
- package/dist/icon-lZ48P8Nn.js +0 -1
- package/dist/input-BnlpQF0c.js +0 -1
- package/dist/input-CXmS0OFN.js +0 -1
- package/dist/label-D-D11mlp.js +0 -1
- package/dist/layer-container-CglTh9-6.js +0 -1
- package/dist/list-CwL23L_B.js +0 -1
- package/dist/primitive-BWyxJnXn.js +0 -1
- package/dist/select-BK6n6OIK.js +0 -1
- package/dist/skeleton-BhcJMpem.js +0 -1
- package/dist/table-C_Nm_RSV.js +0 -1
- package/dist/theme-CVfq037P.js +0 -1
- package/dist/tooltip-BZRRJgpm.js +0 -1
- package/dist/use-is-apple-platform-Cxwrb86L.js +0 -1
- package/dist/use-matches-media-query-Bd_GhhVd.js +0 -1
- package/dist/use-prefers-reduced-motion-Bk5zAfHY.js +0 -1
package/dist/flag.d.ts
CHANGED
|
@@ -6,7 +6,15 @@ import { ComponentProps } from "react";
|
|
|
6
6
|
declare const countryCodes: readonly ["004", "008", "010", "016", "016", "020", "024", "028", "031", "032", "040", "044", "048", "050", "051", "052", "056", "060", "064", "068", "070", "072", "074", "076", "084", "086", "090", "092", "096", "100", "104", "108", "112", "116", "120", "124", "132", "136", "140", "144", "148", "152", "156", "158", "162", "166", "170", "174", "178", "180", "184", "188", "191", "192", "196", "203", "204", "208", "212", "214", "218", "222", "226", "231", "232", "233", "234", "238", "239", "242", "246", "248", "250", "254", "258", "260", "262", "266", "268", "270", "275", "276", "288", "292", "296", "300", "304", "308", "312", "316", "320", "324", "328", "332", "334", "336", "340", "344", "348", "352", "356", "360", "364", "368", "372", "376", "380", "384", "388", "392", "398", "400", "404", "408", "410", "414", "417", "418", "422", "426", "428", "430", "434", "438", "440", "442", "446", "450", "454", "458", "462", "466", "470", "474", "478", "480", "484", "492", "496", "498", "499", "500", "504", "508", "512", "516", "520", "524", "528", "531", "533", "534", "540", "548", "554", "558", "562", "566", "570", "574", "578", "580", "581", "583", "584", "585", "586", "591", "598", "600", "604", "608", "612", "616", "620", "624", "626", "630", "634", "638", "642", "643", "646", "652", "654", "659", "660", "662", "663", "666", "670", "674", "678", "682", "686", "688", "690", "694", "702", "703", "704", "705", "706", "710", "716", "724", "728", "729", "732", "740", "744", "748", "752", "756", "760", "762", "764", "768", "772", "776", "780", "784", "788", "792", "795", "796", "798", "800", "804", "807", "818", "831", "832", "833", "834", "836", "840", "850", "854", "858", "860", "862", "876", "882", "887", "894", "ABW", "AD", "AE", "AF", "AFG", "AFRUN", "AG", "AGO", "AI", "AIA", "AL", "ALA", "ALB", "AM", "AMS", "AND", "AO", "AQ", "AR", "ARE", "ARG", "ARM", "AS", "ASM", "AT", "ATA", "ATF", "ATG", "AU", "AUS", "AUT", "AW", "AX", "AZ", "AZE", "BA", "BB", "BD", "BDI", "BE", "BEL", "BEN", "BF", "BFA", "BG", "BGD", "BGR", "BH", "BHR", "BHS", "BI", "BIH", "BJ", "BL", "BLM", "BLR", "BLZ", "BM", "BMU", "BN", "BO", "BOL", "BQ-BO", "BQ-SA", "BQ-SE", "BR", "BRA", "BRB", "BRN", "BS", "BT", "BTN", "BV", "BVT", "BW", "BWA", "BY", "BZ", "CA", "CAF", "CAN", "CC", "CCK", "CD", "CF", "CG", "CH", "CHE", "CHL", "CHN", "CI", "CIV", "CK", "CL", "CM", "CMR", "CN", "CO", "COD", "COG", "COK", "COL", "COM", "CPV", "CR", "CRI", "CU", "CUB", "CUW", "CV", "CW", "CX", "CXR", "CY", "CYM", "CYP", "CZ", "CZE", "DE", "DEU", "DJ", "DJI", "DK", "DM", "DMA", "DNK", "DO", "DOM", "EC", "ECU", "EE", "EG", "EGY", "EH", "ER", "ERI", "ES", "ESH", "ESP", "EST", "ET", "ETH", "EU", "FI", "FIN", "FJ", "FJI", "FK", "FLK", "FM", "FO", "FR", "FRA", "FRO", "FSM", "GA", "GAB", "GB-ENG", "GB-NIR", "GB-SCT", "GB-UKM", "GB-WLS", "GB", "GBR", "GD", "GE", "GEO", "GF", "GG", "GGY", "GH", "GHA", "GI", "GIB", "GIN", "GL", "GLP", "GM", "GMB", "GN", "GNB", "GNQ", "GP", "GQ", "GR", "GRC", "GRD", "GRL", "GS", "GT", "GTM", "GU", "GUF", "GUM", "GUY", "GW", "GY", "HK", "HKG", "HM", "HMD", "HN", "HND", "HR", "HRV", "HT", "HTI", "HU", "HUN", "ID", "IDN", "IE", "IL", "IM", "IMN", "IN", "IND", "IO", "IOT", "IQ", "IR", "IRL", "IRN", "IRQ", "IS", "ISL", "ISR", "IT", "ITA", "JAM", "JE", "JEY", "JM", "JO", "JOR", "JP", "JPN", "KAZ", "KE", "KEN", "KG", "KGZ", "KH", "KHM", "KI", "KIR", "KM", "KN-SK", "KNA", "KOR", "KP", "KR", "KW", "KWT", "KY", "KZ", "LA", "LAO", "LB", "LBN", "LBR", "LBY", "LC", "LCA", "LI", "LIE", "LK", "LKA", "LR", "LS", "LSO", "LT", "LTU", "LU", "LUX", "LV", "LVA", "LY", "MA", "MAC", "MAF", "MAR", "MC", "MCO", "MD", "MDA", "MDG", "MDV", "ME", "MEX", "MF", "MG", "MH", "MHL", "MK", "MKD", "ML", "MLI", "MLT", "MM", "MMR", "MN", "MNE", "MNG", "MNP", "MO", "MOZ", "MP", "MQ", "MR", "MRT", "MS", "MSR", "MT", "MTQ", "MU", "MUS", "MV", "MW", "MWI", "MX", "MY", "MYS", "MZ", "NA", "NAM", "NC", "NCL", "NE", "NER", "NF", "NFK", "NG", "NGA", "NI", "NIC", "NIU", "NL", "NLD", "NO", "NOR", "NP", "NPL", "NR", "NRU", "NU", "NZ", "NZL", "OM", "OMN", "PA", "PAK", "PAN", "PCN", "PE", "PER", "PF", "PG", "PH", "PHL", "PK", "PL", "PLW", "PM", "PN", "PNG", "POL", "PR", "PRI", "PRK", "PRT", "PRY", "PS", "PSE", "PT", "PW", "PY", "PYF", "QA", "QAT", "RAINBOW", "RE", "REU", "RO", "ROU", "RS", "RU", "RUS", "RW", "RWA", "SA", "SAU", "SB", "SC", "SD", "SDN", "SE", "SEN", "SG", "SGP", "SGS", "SH", "SHN", "SI", "SJ", "SJM", "SK", "SL", "SLB", "SLE", "SLV", "SM", "SMR", "SN", "SO", "SOM", "SPM", "SR", "SRB", "SS", "SSD", "ST", "STP", "SUR", "SV", "SVK", "SVN", "SWE", "SWZ", "SX", "SXM", "SY", "SYC", "SYR", "SZ", "TC", "TCA", "TCD", "TD", "TF", "TG", "TGO", "TH", "THA", "TJ", "TJK", "TK", "TKL", "TKM", "TL", "TLS", "TM", "TN", "TO", "TON", "TR", "TT", "TTO", "TUN", "TUR", "TUV", "TV", "TW", "TWN", "TZ", "TZA", "UA", "UG", "UGA", "UKR", "UM", "UMI", "UNASUR", "URY", "US", "USA", "UY", "UZ", "UZB", "VA", "VAT", "VC", "VCT", "VE", "VEN", "VG", "VGB", "VI", "VIR", "VN", "VNM", "VU", "VUT", "WF", "WLF", "WS", "WSM", "YE", "YEM", "ZA", "ZAF", "ZM", "ZMB", "ZW", "ZWE"];
|
|
7
7
|
type CountryCode = (typeof countryCodes)[number];
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Narrows an unknown value to a `CountryCode`. Only an exact, case-sensitive
|
|
10
|
+
* entry of `countryCodes` passes; any non-string returns `false`.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```ts
|
|
14
|
+
* isCountryCode("GB-ENG"); // true
|
|
15
|
+
* isCountryCode("us"); // false, codes are upper-case
|
|
16
|
+
* isCountryCode(16); // false
|
|
17
|
+
* ```
|
|
10
18
|
*/
|
|
11
19
|
declare function isCountryCode(value: unknown): value is CountryCode;
|
|
12
20
|
//#endregion
|
package/dist/flag.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(``,{variants:{size:{s:`rounded-[0.0625rem]`,m:`rounded-[0.09375rem]`,l:`rounded-xs`}}}),a=r(``,{variants:{size:{s:`w-4 h-3`,m:`w-5 h-3.75`,l:`w-8 h-6`}}});function o({className:r,code:o,size:s=`l`,loading:c=`lazy`,...l}){let u=i({size:s}),d=a({size:s});return n(`div`,{"data-slot":`flag`,className:e(`flag relative overflow-hidden`,u,d,r),...l,children:[t(`div`,{"aria-hidden":!0,className:e(`absolute inset-0 border border-[#000]/10`,u)}),t(`img`,{className:`h-full w-full block object-cover`,src:`https://assets.ngrok.com/flags/${s}/${o}.svg`,alt:`flag for ${o}`,loading:c})]})}const s=`004.008.010.016.016.020.024.028.031.032.040.044.048.050.051.052.056.060.064.068.070.072.074.076.084.086.090.092.096.100.104.108.112.116.120.124.132.136.140.144.148.152.156.158.162.166.170.174.178.180.184.188.191.192.196.203.204.208.212.214.218.222.226.231.232.233.234.238.239.242.246.248.250.254.258.260.262.266.268.270.275.276.288.292.296.300.304.308.312.316.320.324.328.332.334.336.340.344.348.352.356.360.364.368.372.376.380.384.388.392.398.400.404.408.410.414.417.418.422.426.428.430.434.438.440.442.446.450.454.458.462.466.470.474.478.480.484.492.496.498.499.500.504.508.512.516.520.524.528.531.533.534.540.548.554.558.562.566.570.574.578.580.581.583.584.585.586.591.598.600.604.608.612.616.620.624.626.630.634.638.642.643.646.652.654.659.660.662.663.666.670.674.678.682.686.688.690.694.702.703.704.705.706.710.716.724.728.729.732.740.744.748.752.756.760.762.764.768.772.776.780.784.788.792.795.796.798.800.804.807.818.831.832.833.834.836.840.850.854.858.860.862.876.882.887.894.ABW.AD.AE.AF.AFG.AFRUN.AG.AGO.AI.AIA.AL.ALA.ALB.AM.AMS.AND.AO.AQ.AR.ARE.ARG.ARM.AS.ASM.AT.ATA.ATF.ATG.AU.AUS.AUT.AW.AX.AZ.AZE.BA.BB.BD.BDI.BE.BEL.BEN.BF.BFA.BG.BGD.BGR.BH.BHR.BHS.BI.BIH.BJ.BL.BLM.BLR.BLZ.BM.BMU.BN.BO.BOL.BQ-BO.BQ-SA.BQ-SE.BR.BRA.BRB.BRN.BS.BT.BTN.BV.BVT.BW.BWA.BY.BZ.CA.CAF.CAN.CC.CCK.CD.CF.CG.CH.CHE.CHL.CHN.CI.CIV.CK.CL.CM.CMR.CN.CO.COD.COG.COK.COL.COM.CPV.CR.CRI.CU.CUB.CUW.CV.CW.CX.CXR.CY.CYM.CYP.CZ.CZE.DE.DEU.DJ.DJI.DK.DM.DMA.DNK.DO.DOM.EC.ECU.EE.EG.EGY.EH.ER.ERI.ES.ESH.ESP.EST.ET.ETH.EU.FI.FIN.FJ.FJI.FK.FLK.FM.FO.FR.FRA.FRO.FSM.GA.GAB.GB-ENG.GB-NIR.GB-SCT.GB-UKM.GB-WLS.GB.GBR.GD.GE.GEO.GF.GG.GGY.GH.GHA.GI.GIB.GIN.GL.GLP.GM.GMB.GN.GNB.GNQ.GP.GQ.GR.GRC.GRD.GRL.GS.GT.GTM.GU.GUF.GUM.GUY.GW.GY.HK.HKG.HM.HMD.HN.HND.HR.HRV.HT.HTI.HU.HUN.ID.IDN.IE.IL.IM.IMN.IN.IND.IO.IOT.IQ.IR.IRL.IRN.IRQ.IS.ISL.ISR.IT.ITA.JAM.JE.JEY.JM.JO.JOR.JP.JPN.KAZ.KE.KEN.KG.KGZ.KH.KHM.KI.KIR.KM.KN-SK.KNA.KOR.KP.KR.KW.KWT.KY.KZ.LA.LAO.LB.LBN.LBR.LBY.LC.LCA.LI.LIE.LK.LKA.LR.LS.LSO.LT.LTU.LU.LUX.LV.LVA.LY.MA.MAC.MAF.MAR.MC.MCO.MD.MDA.MDG.MDV.ME.MEX.MF.MG.MH.MHL.MK.MKD.ML.MLI.MLT.MM.MMR.MN.MNE.MNG.MNP.MO.MOZ.MP.MQ.MR.MRT.MS.MSR.MT.MTQ.MU.MUS.MV.MW.MWI.MX.MY.MYS.MZ.NA.NAM.NC.NCL.NE.NER.NF.NFK.NG.NGA.NI.NIC.NIU.NL.NLD.NO.NOR.NP.NPL.NR.NRU.NU.NZ.NZL.OM.OMN.PA.PAK.PAN.PCN.PE.PER.PF.PG.PH.PHL.PK.PL.PLW.PM.PN.PNG.POL.PR.PRI.PRK.PRT.PRY.PS.PSE.PT.PW.PY.PYF.QA.QAT.RAINBOW.RE.REU.RO.ROU.RS.RU.RUS.RW.RWA.SA.SAU.SB.SC.SD.SDN.SE.SEN.SG.SGP.SGS.SH.SHN.SI.SJ.SJM.SK.SL.SLB.SLE.SLV.SM.SMR.SN.SO.SOM.SPM.SR.SRB.SS.SSD.ST.STP.SUR.SV.SVK.SVN.SWE.SWZ.SX.SXM.SY.SYC.SYR.SZ.TC.TCA.TCD.TD.TF.TG.TGO.TH.THA.TJ.TJK.TK.TKL.TKM.TL.TLS.TM.TN.TO.TON.TR.TT.TTO.TUN.TUR.TUV.TV.TW.TWN.TZ.TZA.UA.UG.UGA.UKR.UM.UMI.UNASUR.URY.US.USA.UY.UZ.UZB.VA.VAT.VC.VCT.VE.VEN.VG.VGB.VI.VIR.VN.VNM.VU.VUT.WF.WLF.WS.WSM.YE.YEM.ZA.ZAF.ZM.ZMB.ZW.ZWE`.split(`.`),c=new Set(s);function l(e){return typeof e==`string`&&c.has(e)}export{o as Flag,s as countryCodes,l as isCountryCode};
|
package/dist/hooks.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as MarginType, o as useComposedRefs, s as copyToClipboard } from "./in-view-
|
|
1
|
+
import { n as MarginType, o as useComposedRefs, s as copyToClipboard } from "./in-view-Ch5vJtWo.js";
|
|
2
2
|
import { RefObject, useLayoutEffect } from "react";
|
|
3
3
|
//#region src/hooks/use-breakpoint.d.ts
|
|
4
4
|
/**
|
|
@@ -132,7 +132,7 @@ declare function useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean;
|
|
|
132
132
|
*
|
|
133
133
|
* return <MemoizedList onSelect={onSelect} />;
|
|
134
134
|
*/
|
|
135
|
-
declare function useCallbackRef<T extends (...args:
|
|
135
|
+
declare function useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T;
|
|
136
136
|
//#endregion
|
|
137
137
|
//#region src/hooks/use-copy-to-clipboard.d.ts
|
|
138
138
|
/**
|
|
@@ -312,7 +312,7 @@ declare function useIsHydrated(): boolean;
|
|
|
312
312
|
*
|
|
313
313
|
* return <div ref={ref}>Width: {width}</div>;
|
|
314
314
|
*/
|
|
315
|
-
declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
|
|
315
|
+
export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
|
|
316
316
|
//#endregion
|
|
317
317
|
//#region src/hooks/use-local-storage.d.ts
|
|
318
318
|
/**
|
|
@@ -321,7 +321,7 @@ declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
|
|
|
321
321
|
* Contract:
|
|
322
322
|
*
|
|
323
323
|
* - Server rendering returns `defaultValue` and never touches localStorage.
|
|
324
|
-
* - Values are JSON-encoded on write and JSON-decoded on read
|
|
324
|
+
* - Values are JSON-encoded on write and JSON-decoded on read: the same
|
|
325
325
|
* wire format popular hooks libraries (e.g. `@uidotdev/usehooks`) use,
|
|
326
326
|
* so existing stored entries remain readable.
|
|
327
327
|
* - The setter dispatches a synthetic `storage` event (tagged with its
|
|
@@ -332,6 +332,12 @@ declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
|
|
|
332
332
|
* - Missing, corrupt, or non-string entries resolve to `defaultValue`; the
|
|
333
333
|
* hook never seeds `defaultValue` into storage on its own (reading is
|
|
334
334
|
* side-effect free).
|
|
335
|
+
* - Reads and writes never throw. If the browser denies storage access,
|
|
336
|
+
* the value resolves to `defaultValue`. If `setItem` throws (a full
|
|
337
|
+
* origin, Safari private browsing, blocked site data), the hook keeps
|
|
338
|
+
* the value in memory, so every same-key instance still advances until
|
|
339
|
+
* the page reloads. A later write that succeeds, or a `storage` event
|
|
340
|
+
* from another document, restores storage as the source of truth.
|
|
335
341
|
*
|
|
336
342
|
* @param key - The localStorage key to read and write.
|
|
337
343
|
* @param defaultValue - Returned when no valid entry exists for `key` and
|
|
@@ -377,7 +383,7 @@ declare function useLocalStorage(key: string, defaultValue: string): readonly [v
|
|
|
377
383
|
*
|
|
378
384
|
* return isPortrait ? <PortraitLayout /> : <LandscapeLayout />;
|
|
379
385
|
*/
|
|
380
|
-
declare function useMatchesMediaQuery(query: string): boolean;
|
|
386
|
+
export declare function useMatchesMediaQuery(query: string): boolean;
|
|
381
387
|
//#endregion
|
|
382
388
|
//#region src/hooks/use-session-storage.d.ts
|
|
383
389
|
/**
|
|
@@ -393,6 +399,12 @@ declare function useMatchesMediaQuery(query: string): boolean;
|
|
|
393
399
|
* - Missing, corrupt, or non-string entries resolve to `defaultValue`; the
|
|
394
400
|
* hook never seeds `defaultValue` into storage on its own (reading is
|
|
395
401
|
* side-effect free).
|
|
402
|
+
* - Reads and writes never throw. If the browser denies storage access,
|
|
403
|
+
* the value resolves to `defaultValue`. If `setItem` throws (a full
|
|
404
|
+
* origin, Safari private browsing, blocked site data), the hook keeps
|
|
405
|
+
* the value in memory, so every same-key instance still advances until
|
|
406
|
+
* the page reloads. A later write that succeeds, or a `storage` event
|
|
407
|
+
* from another document, restores storage as the source of truth.
|
|
396
408
|
*
|
|
397
409
|
* @param key - The sessionStorage key to read and write.
|
|
398
410
|
* @param defaultValue - Returned when no valid entry exists for `key` and
|
|
@@ -436,25 +448,22 @@ declare function useSessionStorage(key: string, defaultValue: string): readonly
|
|
|
436
448
|
* element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });
|
|
437
449
|
* }
|
|
438
450
|
*/
|
|
439
|
-
declare function getPrefersReducedMotion(): boolean;
|
|
451
|
+
export declare function getPrefersReducedMotion(): boolean;
|
|
440
452
|
/**
|
|
441
453
|
* React hook that subscribes to the user's `prefers-reduced-motion` media
|
|
442
454
|
* query and re-renders when it changes.
|
|
443
455
|
*
|
|
444
|
-
*
|
|
445
|
-
*
|
|
446
|
-
*
|
|
447
|
-
*
|
|
448
|
-
*
|
|
456
|
+
* Returns `true` (reduce motion) on the server and during the hydration
|
|
457
|
+
* render, so nothing animates before hydration. React then re-renders once
|
|
458
|
+
* with the real preference. A client mount after hydration reads the real
|
|
459
|
+
* preference in its first render, so a dialog or carousel that opens later
|
|
460
|
+
* starts with the right duration. The underlying media query is
|
|
461
|
+
* `(prefers-reduced-motion: no-preference)` inverted: if the system has not
|
|
462
|
+
* opted out, animations are allowed.
|
|
449
463
|
*
|
|
450
464
|
* @returns `true` when the user prefers reduced motion (animations should be
|
|
451
465
|
* shortened or skipped), `false` when full motion is acceptable.
|
|
452
466
|
*
|
|
453
|
-
* @remarks
|
|
454
|
-
* If you need to support very old browsers that lack
|
|
455
|
-
* `MediaQueryList.addEventListener`, consider falling back to
|
|
456
|
-
* `addListener` / `removeListener`.
|
|
457
|
-
*
|
|
458
467
|
* @example
|
|
459
468
|
* // Conditionally shorten or skip transitions
|
|
460
469
|
* const prefersReducedMotion = usePrefersReducedMotion();
|
|
@@ -468,7 +477,7 @@ declare function getPrefersReducedMotion(): boolean;
|
|
|
468
477
|
*
|
|
469
478
|
* return <Carousel autoplay={!prefersReducedMotion} />;
|
|
470
479
|
*/
|
|
471
|
-
declare function usePrefersReducedMotion(): boolean;
|
|
480
|
+
export declare function usePrefersReducedMotion(): boolean;
|
|
472
481
|
//#endregion
|
|
473
482
|
//#region src/hooks/use-scroll-behavior.d.ts
|
|
474
483
|
/**
|
|
@@ -517,7 +526,7 @@ type ScrollBehavior = "auto" | "smooth";
|
|
|
517
526
|
* @see {@link usePrefersReducedMotion}
|
|
518
527
|
* @see CSS `scroll-behavior` property (values: `"auto"`, `"smooth"`).
|
|
519
528
|
*/
|
|
520
|
-
declare function useScrollBehavior(): ScrollBehavior;
|
|
529
|
+
export declare function useScrollBehavior(): ScrollBehavior;
|
|
521
530
|
//#endregion
|
|
522
531
|
//#region src/hooks/use-in-view.d.ts
|
|
523
532
|
/**
|
|
@@ -671,4 +680,4 @@ type UseUndoRedoReturn<T> = {
|
|
|
671
680
|
*/
|
|
672
681
|
declare function useUndoRedo<T extends NonNullable<unknown>>(): UseUndoRedoReturn<T>;
|
|
673
682
|
//#endregion
|
|
674
|
-
export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, type UseUndoRedoReturn, breakpoints,
|
|
683
|
+
export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, type UseUndoRedoReturn, breakpoints, useBreakpoint, useCallbackRef, useComposedRefs, useCopyToClipboard, useDebounce, useDebouncedCallback, useInView, useIsBelowBreakpoint, useIsHydrated, useLocalStorage, useSessionStorage, useUndoRedo };
|
package/dist/hooks.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-
|
|
1
|
+
import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-DdUwopIY.js";import{t as n}from"./use-is-hydrated-DDCqXmju.js";import{t as r}from"./use-copy-to-clipboard-CSyp4Zk0.js";import{t as i}from"./use-callback-ref-IYti9y7x.js";import{t as a}from"./use-matches-media-query-DCBT6iNA.js";import{n as o,t as s}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{n as c,r as l,t as u}from"./use-breakpoint-BhJ_3El2.js";import{t as d}from"./in-view-T_AAYaaF.js";import{useCallback as f,useEffect as p,useMemo as m,useRef as h,useState as g,useSyncExternalStore as _}from"react";function v(e,t){let[n,r]=g(e);return p(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function y(e,t){let n=i(e),r=h(0);return p(()=>()=>window.clearTimeout(r.current),[]),f((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}const b=new Map;function x(e){if(e.key==null){b.clear();return}b.has(e.key)&&(e.newValue==null?b.delete(e.key):b.set(e.key,e.newValue))}function S(){try{return window.localStorage}catch{return null}}function C(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===S(),i=n.key==null||n.key===e;r&&i&&(x(n),t())}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function w(){return null}function T(e){let t=b.get(e);if(t!=null)return t;try{return window.localStorage.getItem(e)}catch{return null}}function E(e,t){try{window.localStorage.setItem(e,t),b.delete(e)}catch{b.set(e,t)}}function D(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function O(e,t){let n=m(()=>C(e),[e]),r=_(n,()=>T(e),w);return[r==null?t:D(r,t),f(t=>{let n=JSON.stringify(t);E(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:S()}))},[e])]}const k=new Map;function A(e){if(e.key==null){k.clear();return}k.has(e.key)&&(e.newValue==null?k.delete(e.key):k.set(e.key,e.newValue))}function j(){try{return window.sessionStorage}catch{return null}}function M(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===j(),i=n.key==null||n.key===e;r&&i&&(A(n),t())}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function N(){return null}function P(e){let t=k.get(e);if(t!=null)return t;try{return window.sessionStorage.getItem(e)}catch{return null}}function F(e,t){try{window.sessionStorage.setItem(e,t),k.delete(e)}catch{k.set(e,t)}}function I(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function L(e,t){let n=m(()=>M(e),[e]),r=_(n,()=>P(e),N);return[r==null?t:I(r,t),f(t=>{let n=JSON.stringify(t);F(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:j()}))},[e])]}function R(){let e=o();return m(()=>e?`auto`:`smooth`,[e])}function z(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,s]=g(a);return p(()=>{if(!e.current||i&&o)return;function a(){return s(!0),i?void 0:()=>s(!1)}let c={root:t&&t.current||void 0,margin:n,amount:r};return d(e.current,a,c)},[t,e,n,i,r]),o}function B(){let e=h([]),t=h([]),[n,r]=g({undo:0,redo:0}),i=f(n=>{e.current.push(n),t.current=[],r({undo:e.current.length,redo:0})},[]),a=f(n=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(n),r({undo:e.current.length,redo:t.current.length}),i},[]),o=f(n=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(n),r({undo:e.current.length,redo:t.current.length}),i},[]),s=n.undo>0,c=n.redo>0;return m(()=>({canUndo:s,canRedo:c,push:i,undo:a,redo:o}),[s,c,i,a,o])}export{u as breakpoints,s as getPrefersReducedMotion,c as useBreakpoint,i as useCallbackRef,t as useComposedRefs,r as useCopyToClipboard,v as useDebounce,y as useDebouncedCallback,z as useInView,l as useIsBelowBreakpoint,n as useIsHydrated,e as useIsomorphicLayoutEffect,O as useLocalStorage,a as useMatchesMediaQuery,o as usePrefersReducedMotion,R as useScrollBehavior,L as useSessionStorage,B as useUndoRedo};
|
package/dist/hover-card.d.ts
CHANGED
|
@@ -56,7 +56,7 @@ declare const Trigger: (props: ComponentProps<typeof HoverCardPrimitive.Trigger>
|
|
|
56
56
|
* customize portal placement (e.g., pass a `container` prop) or wrap multiple
|
|
57
57
|
* `HoverCard.Content` instances in a shared portal.
|
|
58
58
|
*
|
|
59
|
-
* When `container` is omitted, content mounts into the nearest layer container
|
|
59
|
+
* When `container` is omitted, content mounts into the nearest layer container:
|
|
60
60
|
* an enclosing overlay's positioner when one is open, else `document.body`.
|
|
61
61
|
*
|
|
62
62
|
* @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardportal
|
|
@@ -230,7 +230,7 @@ declare const HoverCard: {
|
|
|
230
230
|
*/
|
|
231
231
|
readonly Arrow: typeof Arrow;
|
|
232
232
|
/**
|
|
233
|
-
* The content to render inside the hover card.
|
|
233
|
+
* The content to render inside the hover card.
|
|
234
234
|
*
|
|
235
235
|
* `HoverCard.Content` renders at Tailwind `z-50`, Mantle's float tier. When
|
|
236
236
|
* composed inside an open `Dialog`, `AlertDialog`, or `Sheet`, it portals into
|
|
@@ -239,6 +239,10 @@ declare const HoverCard: {
|
|
|
239
239
|
* (`z-60`). When sibling floats share a container, the most recently mounted
|
|
240
240
|
* float paints on top.
|
|
241
241
|
*
|
|
242
|
+
* It sets `position: relative`, so `HoverCard.Arrow`'s absolutely-positioned
|
|
243
|
+
* wrapper keeps one containing block through the open animation. An
|
|
244
|
+
* absolutely-positioned child of the content therefore anchors to the content.
|
|
245
|
+
*
|
|
242
246
|
* @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardcontent
|
|
243
247
|
*
|
|
244
248
|
* @example
|
|
@@ -262,7 +266,11 @@ declare const HoverCard: {
|
|
|
262
266
|
* The portal container for rendering hover card content outside the normal DOM tree.
|
|
263
267
|
* `HoverCard.Content` already renders inside this portal internally, so you typically
|
|
264
268
|
* do not need to use `HoverCard.Portal` directly. Use it only when you need to
|
|
265
|
-
* customize portal placement
|
|
269
|
+
* customize portal placement (e.g., pass a `container` prop) or wrap multiple
|
|
270
|
+
* `HoverCard.Content` instances in a shared portal.
|
|
271
|
+
*
|
|
272
|
+
* When `container` is omitted, content mounts into the nearest layer container:
|
|
273
|
+
* an enclosing overlay's positioner when one is open, else `document.body`.
|
|
266
274
|
*
|
|
267
275
|
* @see https://mantle.ngrok.com/components/overlays/hover-card#hovercardportal
|
|
268
276
|
*
|
package/dist/hover-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{n as t,r as n}from"./layer-container-BTcQpd4K.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import*as a from"@radix-ui/react-hover-card";const o=({closeDelay:e=300,openDelay:t=100,...n})=>r(a.Root,{closeDelay:e,openDelay:t,...n}),s=e=>r(a.Trigger,{"data-slot":`hover-card-trigger`,...e}),c=({container:e,...i})=>{let o=n(),s=e??o;return r(t.Provider,{value:s,children:r(a.Portal,{container:s,...i})})},l={Root:o,Arrow:({className:t,height:n=7,width:o=14,...s})=>r(a.Arrow,{"aria-hidden":`true`,asChild:!0,"data-slot":`hover-card-arrow`,height:n,width:o,...s,children:i(`svg`,{className:e(`fill-[var(--background-color-popover)]`,`[clip-path:inset(0_-200%_-200%_-200%)]`,`[filter:drop-shadow(0_0_4px_color-mix(in_oklab,var(--shadow-color)_var(--shadow-first-opacity),transparent))]`,t),children:[r(`polygon`,{points:`0,0 30,0 15,10`}),r(`polyline`,{className:`stroke-[color:var(--border-color-popover)]`,fill:`none`,points:`0,0 15,10 30,0`,strokeWidth:1.5,vectorEffect:`non-scaling-stroke`})]})}),Content:({className:t,onClick:n,align:i=`center`,sideOffset:o=4,...s})=>r(c,{children:r(a.Content,{"data-slot":`hover-card-content`,align:i,sideOffset:o,className:e(`relative`,`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 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`,t),onClick:e=>{e.stopPropagation(),n?.(e)},...s})}),Portal:c,Trigger:s};export{l as HoverCard};
|
|
@@ -10,13 +10,23 @@ type IconProps = Omit<SvgAttributes, "children"> & {
|
|
|
10
10
|
/**
|
|
11
11
|
* Decorates an svg icon with automatic sizing styles and a `shrink-0` class.
|
|
12
12
|
*
|
|
13
|
+
* The icon is decorative by default: it renders `aria-hidden="true"` unless
|
|
14
|
+
* the props or the svg element carry a name (`aria-label`, `aria-labelledby`,
|
|
15
|
+
* a `<title>` child, or Phosphor's `alt`), a `role`, or an explicit
|
|
16
|
+
* `aria-hidden`. Pass `role="img"` and `aria-label` when the icon is the only
|
|
17
|
+
* thing that conveys its meaning.
|
|
18
|
+
*
|
|
13
19
|
* @see https://mantle.ngrok.com/components/data-display/icon
|
|
14
20
|
*
|
|
15
21
|
* @example
|
|
16
22
|
* ```tsx
|
|
17
23
|
* import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";
|
|
18
24
|
*
|
|
25
|
+
* // Decorative: renders aria-hidden="true".
|
|
19
26
|
* <Icon svg={<ShrimpIcon />} />
|
|
27
|
+
*
|
|
28
|
+
* // Meaningful: the name keeps it exposed.
|
|
29
|
+
* <Icon svg={<ShrimpIcon />} role="img" aria-label="Shrimp" />
|
|
20
30
|
* ```
|
|
21
31
|
*/
|
|
22
32
|
declare const Icon: ({ className, style, svg, ref, ...props }: IconProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./icon-U24NfYv7.js";import{jsx as n}from"react/jsx-runtime";const r=({className:r,style:i,svg:a,ref:o,...s})=>n(t,{ref:o,"data-slot":`icon`,className:e(`size-5`,r),style:i,svg:a,...s});export{r as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{Children as t,cloneElement as n,isValidElement as r}from"react";import i from"tiny-invariant";const a=e=>e!=null&&t.toArray(e).some(e=>r(e)&&e.type===`title`),o=e=>e[`aria-label`]!=null||e[`aria-labelledby`]!=null||e[`aria-hidden`]!=null||e.role!=null||e.alt!=null||a(e.children),s=({className:a,style:s,svg:c,ref:l,...u})=>{i(r(c)&&t.only(c),`SvgOnly must be passed a single SVG icon as a JSX tag.`);let d=!o(u)&&!o(c.props);return n(c,{"data-slot":`svg-only`,...d&&{"aria-hidden":!0},...u,className:e(`shrink-0`,a,c.props.className),style:{...s,...c.props.style},ref:l})};export{s as t};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/components/icon/svg-only.d.ts
|
|
4
|
+
type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
|
|
5
|
+
/**
|
|
6
|
+
* A single SVG icon element.
|
|
7
|
+
*/
|
|
8
|
+
svg: ReactNode;
|
|
9
|
+
};
|
|
10
|
+
type NamedSvgProps = SvgAttributes & {
|
|
11
|
+
/**
|
|
12
|
+
* Phosphor's `alt` prop. `IconBase` renders it as a `<title>` child, so it
|
|
13
|
+
* names the svg the same way an authored `<title>` does.
|
|
14
|
+
*/
|
|
15
|
+
alt?: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Accepts a single SVG icon element and decorates it with `shrink-0` class.
|
|
19
|
+
* You probably want to use the `Icon` component instead.
|
|
20
|
+
*
|
|
21
|
+
* The icon is decorative by default: it renders `aria-hidden="true"` unless
|
|
22
|
+
* the props or the svg element carry a name (`aria-label`, `aria-labelledby`,
|
|
23
|
+
* a `<title>` child, or Phosphor's `alt`), a `role`, or an explicit
|
|
24
|
+
* `aria-hidden`. A bare Phosphor icon sets none of these, so it is hidden from
|
|
25
|
+
* assistive technology.
|
|
26
|
+
*
|
|
27
|
+
* @see https://mantle.ngrok.com/components/data-display/icon
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```tsx
|
|
31
|
+
* import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";
|
|
32
|
+
*
|
|
33
|
+
* // Decorative: renders aria-hidden="true".
|
|
34
|
+
* <SvgOnly svg={<ShrimpIcon />} />
|
|
35
|
+
*
|
|
36
|
+
* // Meaningful: the name keeps it exposed.
|
|
37
|
+
* <SvgOnly svg={<ShrimpIcon />} role="img" aria-label="Shrimp" />
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
declare const SvgOnly: ({ className, style, svg, ref, ...props }: SvgOnlyProps) => import("react").ReactElement<NamedSvgProps, string | import("react").JSXElementConstructor<any>>;
|
|
41
|
+
//#endregion
|
|
42
|
+
export { SvgOnlyProps as n, SvgOnly as t };
|
package/dist/icon.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
|
|
2
|
-
import { n as IconProps, t as Icon } from "./icon-
|
|
3
|
-
import { n as SvgOnlyProps, t as SvgOnly } from "./icon-
|
|
2
|
+
import { n as IconProps, t as Icon } from "./icon-BmJ57Tgh.js";
|
|
3
|
+
import { n as SvgOnlyProps, t as SvgOnly } from "./icon-w0HUe7tr.js";
|
|
4
4
|
export { Icon, type IconProps, type SvgAttributes, SvgOnly, type SvgOnlyProps };
|
package/dist/icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./icon-
|
|
1
|
+
import{t as e}from"./icon-U24NfYv7.js";import{t}from"./icon-CGKaq_tV.js";export{t as Icon,e as SvgOnly};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{s as e}from"./theme-
|
|
1
|
+
import{s as e}from"./theme-DN-Et3A_.js";import{jsx as t}from"react/jsx-runtime";import{DesktopIcon as n}from"@phosphor-icons/react/Desktop";import{MoonIcon as r}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";function a(n){let r=e();return t(o,{theme:r,...n})}function o({theme:e,...a}){switch(e){case`system`:return t(n,{...a});case`light`:return t(i,{...a});case`dark`:return t(r,{...a});case`light-high-contrast`:return t(i,{...a,weight:`fill`});case`dark-high-contrast`:return t(r,{...a,weight:`fill`})}}export{o as n,a as t};
|
package/dist/icons.d.ts
CHANGED
|
@@ -86,26 +86,20 @@ declare function ThemeIcon({ theme, ...props }: ThemeIconProps): import("react")
|
|
|
86
86
|
//#endregion
|
|
87
87
|
//#region src/components/icons/types.d.ts
|
|
88
88
|
/**
|
|
89
|
-
* Props for an inline svg icon.
|
|
89
|
+
* Props for an inline svg icon. The icon owns its `viewBox`, `fill`, and
|
|
90
|
+
* paths, and fills with `currentColor`, so the `color` CSS property sets the
|
|
91
|
+
* fill.
|
|
90
92
|
*
|
|
91
93
|
* @see https://mantle.ngrok.com/components/data-display/icons
|
|
92
94
|
*
|
|
93
95
|
* @example
|
|
94
96
|
* ```tsx
|
|
95
97
|
* function BrandIcon(props: InlineIconProps) {
|
|
96
|
-
* return <svg {...props} />;
|
|
98
|
+
* return <svg fill="currentColor" viewBox="0 0 24 24" {...props} />;
|
|
97
99
|
* }
|
|
98
100
|
* ```
|
|
99
101
|
*/
|
|
100
|
-
type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox" | "color" | "children"
|
|
101
|
-
/**
|
|
102
|
-
* The fill color mode of the svg icon.
|
|
103
|
-
* If set to `"inherit"`, the icon will inherit the color of its parent using `currentColor`
|
|
104
|
-
* If set to `"auto"`, the icon will use "branded" fill color(s) that are not inherited.
|
|
105
|
-
* @default "auto"
|
|
106
|
-
*/
|
|
107
|
-
color?: "inherit" | "auto";
|
|
108
|
-
};
|
|
102
|
+
type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox" | "color" | "children">;
|
|
109
103
|
//#endregion
|
|
110
104
|
//#region src/components/icons/ngrok.d.ts
|
|
111
105
|
/**
|
|
@@ -118,7 +112,7 @@ type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox"
|
|
|
118
112
|
* <NgrokWordmarkIcon />
|
|
119
113
|
* ```
|
|
120
114
|
*/
|
|
121
|
-
declare function NgrokWordmarkIcon(props:
|
|
115
|
+
declare function NgrokWordmarkIcon(props: InlineIconProps): import("react").JSX.Element;
|
|
122
116
|
/**
|
|
123
117
|
* An inline svg icon that renders the ngrok lettermark "n" logo. The `color` CSS property sets the fill.
|
|
124
118
|
*
|
|
@@ -129,6 +123,6 @@ declare function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">): impor
|
|
|
129
123
|
* <NgrokLettermarkIcon />
|
|
130
124
|
* ```
|
|
131
125
|
*/
|
|
132
|
-
declare function NgrokLettermarkIcon(props:
|
|
126
|
+
declare function NgrokLettermarkIcon(props: InlineIconProps): import("react").JSX.Element;
|
|
133
127
|
//#endregion
|
|
134
128
|
export { AutoThemeIcon, type InlineIconProps, NgrokLettermarkIcon, NgrokWordmarkIcon, SortIcon, ThemeIcon, TrafficPolicyFileIcon };
|
package/dist/icons.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./icons-CF1lbWtp.js";import{t}from"./icons-B_DDQcVD.js";import{n,t as r}from"./icons-
|
|
1
|
+
import{t as e}from"./icons-CF1lbWtp.js";import{t}from"./icons-B_DDQcVD.js";import{n,t as r}from"./icons-Cie4gcrm.js";import{jsx as i}from"react/jsx-runtime";function a(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:i(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function o(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:i(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{r as AutoThemeIcon,o as NgrokLettermarkIcon,a as NgrokWordmarkIcon,t as SortIcon,n as ThemeIcon,e as TrafficPolicyFileIcon};
|
|
@@ -32,10 +32,15 @@ type PossibleRef<T> = Ref<T> | undefined;
|
|
|
32
32
|
*/
|
|
33
33
|
declare function composeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
|
|
34
34
|
/**
|
|
35
|
-
* A custom hook that composes
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
35
|
+
* A custom hook that composes up to three refs into a single callback ref.
|
|
36
|
+
* Accepts callback refs and RefObject(s). The callback keeps one identity
|
|
37
|
+
* while the refs it composes keep theirs, so React attaches it once per
|
|
38
|
+
* mount. If you pass a new ref on a later render, React detaches the old
|
|
39
|
+
* callback and attaches the new one, so the new ref receives the node at
|
|
40
|
+
* once. A consumer callback ref fires once per mount when the consumer
|
|
41
|
+
* passes the same function each render, and on every render when the
|
|
42
|
+
* consumer passes a new function, as it does on a plain element. Any
|
|
43
|
+
* cleanup the composed ref returns targets the refs it composed (see
|
|
39
44
|
* {@link composeRefs} for the cleanup propagation contract).
|
|
40
45
|
*
|
|
41
46
|
* @example
|
|
@@ -45,7 +50,7 @@ declare function composeRefs<T>(...refs: PossibleRef<T>[]): RefCallback<T>;
|
|
|
45
50
|
* return <input ref={composedRef} {...props} />;
|
|
46
51
|
* }
|
|
47
52
|
*/
|
|
48
|
-
declare function useComposedRefs<T>(
|
|
53
|
+
declare function useComposedRefs<T>(firstRef: PossibleRef<T>, secondRef: PossibleRef<T>, thirdRef?: PossibleRef<T>): RefCallback<T>;
|
|
49
54
|
//#endregion
|
|
50
55
|
//#region src/utils/in-view.d.ts
|
|
51
56
|
type MarginValue = `${number}${"px" | "%"}`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e}from"./compose-refs-DdUwopIY.js";import{t}from"./cx-0HCjnNv1.js";import{t as n}from"./icon-CGKaq_tV.js";import{t as r}from"./booleanish-BfvnW6vy.js";import{t as i}from"./clsx-DUGZgXfJ.js";import{a,r as o}from"./field-Bpptk_9t.js";import{createContext as s,useContext as c,useMemo as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{CheckCircleIcon as p}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";const g=({children:e,className:t,ref:n,...r})=>{let i=!!e,a=u(null);return i?d(y,{className:t,forwardedRef:n,innerRef:a,...r,children:e}):d(y,{...r,className:t,forwardedRef:n,innerRef:a,children:d(_,{...r})})},_=({"aria-invalid":n,className:r,ref:i,validation:s,...l})=>{let{"aria-invalid":u,forwardedRef:f,innerRef:p,validation:m,...h}=c(v),g=a(),{ariaInvalid:_,validation:y}=o({"aria-invalid":u??n,validation:m??s??g}),b={...h,...l,type:l.type??h.type??`text`},x=e(i,f,p);return d(`input`,{"aria-invalid":_,"data-slot":`input-capture`,"data-validation":y,className:t(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:x,...b})},v=s({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,"data-slot":i=`input`,children:s,className:c,disabled:u,forwardedRef:p,innerRef:m,style:h,type:g,validation:_,...y})=>{let x=a(),{validation:S}=o({"aria-invalid":e,validation:_??x}),C=l(()=>({"aria-invalid":e,"aria-disabled":n,disabled:u,type:g,validation:_,...y,forwardedRef:p,innerRef:m}),[e,n,u,g,_,y,p,m]);return d(v.Provider,{value:C,children:f(`div`,{role:`none`,"data-slot":i,"data-disabled":r(u??n)||void 0,"data-validation":S||void 0,className:t(`pointer-coarse:text-base h-9 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-hidden focus-within:ring-4`,`data-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-5`,`border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent`,`data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,c),onMouseDown:e=>{e.target!==m?.current&&e.preventDefault()},onClick:e=>{let t=m.current;t!=null&&e.detail!==0&&t.focus()},style:h,children:[s,d(b,{name:y.name,validation:S})]})})},b=({name:e,validation:t})=>{switch(t){case`error`:return f(`div`,{className:`text-danger-600 order-last select-none`,children:[d(`span`,{className:`sr-only`,children:i(`The value entered for the`,e,`input has failed validation.`)}),d(n,{svg:d(m,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return d(`div`,{className:`text-success-600 order-last select-none`,children:d(n,{svg:d(p,{weight:`fill`})})});case`warning`:return d(`div`,{className:`text-warning-600 order-last select-none`,children:d(n,{svg:d(h,{weight:`fill`})})});default:return null}};export{_ as n,g as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function e(e){return typeof HTMLInputElement<`u`&&e instanceof HTMLInputElement}export{e as t};
|
package/dist/input.d.ts
CHANGED
|
@@ -4,12 +4,14 @@ import { ComponentProps } from "react";
|
|
|
4
4
|
//#region src/components/input/password-input.d.ts
|
|
5
5
|
type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Called with the next visibility when the user clicks the toggle. In
|
|
8
|
+
* controlled mode, write the value back into `showValue`.
|
|
8
9
|
*/
|
|
9
10
|
onValueVisibilityChange?: (visible: boolean) => void;
|
|
10
11
|
/**
|
|
11
|
-
*
|
|
12
|
-
*
|
|
12
|
+
* The controlled visibility of the value. When set, the input follows this
|
|
13
|
+
* prop; a click on the toggle only calls `onValueVisibilityChange` with the
|
|
14
|
+
* next value. When omitted, the toggle owns the visibility and starts hidden.
|
|
13
15
|
*/
|
|
14
16
|
showValue?: boolean;
|
|
15
17
|
};
|
|
@@ -34,9 +36,18 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
|
|
|
34
36
|
* to be notified when the user toggles via the built-in button.
|
|
35
37
|
*
|
|
36
38
|
* **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/forms/label Label}.
|
|
37
|
-
* The toggle
|
|
38
|
-
* state
|
|
39
|
-
*
|
|
39
|
+
* The toggle is a focusable `aria-pressed` button named "Show value". Its
|
|
40
|
+
* name does not change with state, and it does not contain the word
|
|
41
|
+
* "password", so a label query for the input matches one element. Its
|
|
42
|
+
* `aria-controls` points at the input's `id`: the `id` you pass, else a
|
|
43
|
+
* generated one. When `disabled` is set, the toggle is disabled too, so Tab
|
|
44
|
+
* skips the component. The input keeps `autocomplete="current-password"` /
|
|
45
|
+
* `"new-password"` semantics. Set `autoComplete` explicitly per flow.
|
|
46
|
+
*
|
|
47
|
+
* | Data Attribute | Value | Description |
|
|
48
|
+
* | --- | --- | --- |
|
|
49
|
+
* | `data-slot` | `"password-input"` | The chrome around the input. |
|
|
50
|
+
* | `data-slot` | `"password-input-toggle"` | The visibility toggle button. |
|
|
40
51
|
*
|
|
41
52
|
* **Browser password managers.** When revealed, the input switches to
|
|
42
53
|
* `type="text"` — some password managers may pause autofill in this state,
|
|
@@ -71,11 +82,12 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
|
|
|
71
82
|
* }
|
|
72
83
|
* ```
|
|
73
84
|
*/
|
|
74
|
-
declare const PasswordInput: ({ onValueVisibilityChange, ref, showValue, ...props }: PasswordInputProps) => import("react").JSX.Element;
|
|
85
|
+
declare const PasswordInput: ({ disabled, id: idProp, onValueVisibilityChange, ref, showValue, ...props }: PasswordInputProps) => import("react").JSX.Element;
|
|
75
86
|
//#endregion
|
|
76
87
|
//#region src/components/input/is-input.d.ts
|
|
77
88
|
/**
|
|
78
|
-
* Type guard for an HTMLInputElement
|
|
89
|
+
* Type guard for an `HTMLInputElement`. On the server, where `HTMLInputElement`
|
|
90
|
+
* is not defined, it returns `false`.
|
|
79
91
|
*
|
|
80
92
|
* @example
|
|
81
93
|
* ```tsx
|
|
@@ -88,6 +100,6 @@ declare const PasswordInput: ({ onValueVisibilityChange, ref, showValue, ...prop
|
|
|
88
100
|
* }
|
|
89
101
|
* ```
|
|
90
102
|
*/
|
|
91
|
-
declare function isInput(value: unknown): value is HTMLInputElement;
|
|
103
|
+
export declare function isInput(value: unknown): value is HTMLInputElement;
|
|
92
104
|
//#endregion
|
|
93
|
-
export { type AutoComplete, Input, InputCapture, type InputCaptureProps, type InputProps, type InputType, PasswordInput, type PasswordInputProps, type Validation, type WithAutoComplete, type WithInputType, type WithValidation
|
|
105
|
+
export { type AutoComplete, Input, InputCapture, type InputCaptureProps, type InputProps, type InputType, PasswordInput, type PasswordInputProps, type Validation, type WithAutoComplete, type WithInputType, type WithValidation };
|
package/dist/input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./icon-
|
|
1
|
+
import{t as e}from"./icon-CGKaq_tV.js";import{n as t,t as n}from"./input-BhykQSvJ.js";import{t as r}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{t as i}from"./input-DQyN6gN0.js";import{useId as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{flushSync as u}from"react-dom";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";const p=({disabled:i,id:p,onValueVisibilityChange:m,ref:h,showValue:g,..._})=>{let v=a(),y=p??v,b=g!=null,[x,S]=s(!1),C=b?g:x,w=C?`text`:`password`,T=C?d:f,E=o(null),D=o(null);return l(n,{"data-slot":`password-input`,disabled:i,id:y,type:w,ref:h,..._,children:[c(t,{}),c(`button`,{type:`button`,disabled:i,"data-slot":`password-input-toggle`,"aria-label":`Show value`,"aria-pressed":C,"aria-controls":y,className:`text-body hover:text-strong focus-visible:ring-focus-accent ml-1 cursor-pointer rounded-xs bg-inherit p-0 focus-visible:ring-2 focus-visible:outline-hidden`,onClick:()=>{D.current&&=(D.current.cancel(),null);let e=!C;u(()=>{b||S(e),m?.(e)});let t=E.current;t&&!r()&&(D.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),D.current.onfinish=()=>{D.current=null},D.current.finished.catch(()=>{}))},children:c(e,{ref:E,svg:c(T,{"aria-hidden":!0})})})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function e(e,t){if(!(e instanceof Element))return!1;let n=e.closest(`a[href], button, details, input, select, textarea, label, [role="button"], [role="link"], [role="menuitem"], [contenteditable="true"]`);return n!=null&&t.contains(n)}export{e as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-
|
|
1
|
+
import{t as e}from"./cx-0HCjnNv1.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{"data-slot":`kbd`,className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,translate:`no`,children:n})}export{n as t};
|
package/dist/kbd.d.ts
CHANGED
|
@@ -17,9 +17,10 @@ import { ComponentProps } from "react";
|
|
|
17
17
|
* `<Kbd>` elements separated by `+` text instead.
|
|
18
18
|
*
|
|
19
19
|
* **Accessibility.** Symbol-only glyphs (`⌘`, `⌃`, `↵`) are not announced
|
|
20
|
-
* meaningfully by screen readers.
|
|
21
|
-
*
|
|
22
|
-
*
|
|
20
|
+
* meaningfully by screen readers. Put a visually hidden label inside the
|
|
21
|
+
* `<Kbd>` and mark the visible glyph `aria-hidden`. Do not set `aria-label`
|
|
22
|
+
* on the `<Kbd>`: `<kbd>` has the `generic` role, which prohibits naming, so
|
|
23
|
+
* a screen reader does not read the label reliably.
|
|
23
24
|
*
|
|
24
25
|
* **Translation.** The `<kbd>` element always carries `translate="no"`, so a
|
|
25
26
|
* browser translation engine skips the subtree. A translated shortcut names a
|
|
@@ -36,16 +37,21 @@ import { ComponentProps } from "react";
|
|
|
36
37
|
* // Letter key.
|
|
37
38
|
* <Kbd>K</Kbd>
|
|
38
39
|
*
|
|
39
|
-
* //
|
|
40
|
-
* <span>
|
|
41
|
-
* <Kbd aria-label="Command">⌘</Kbd> + <Kbd>K</Kbd>
|
|
42
|
-
* </span>
|
|
43
|
-
*
|
|
44
|
-
* // Symbol with sr-only label.
|
|
40
|
+
* // Symbol: a visually hidden label names the key, and the glyph is hidden.
|
|
45
41
|
* <Kbd>
|
|
46
42
|
* <span className="sr-only">Enter</span>
|
|
47
43
|
* <span aria-hidden>↵</span>
|
|
48
44
|
* </Kbd>
|
|
45
|
+
*
|
|
46
|
+
* // Chord — render each key separately.
|
|
47
|
+
* <span className="inline-flex items-center gap-1">
|
|
48
|
+
* <Kbd>
|
|
49
|
+
* <span className="sr-only">Command</span>
|
|
50
|
+
* <span aria-hidden>⌘</span>
|
|
51
|
+
* </Kbd>
|
|
52
|
+
* <span>+</span>
|
|
53
|
+
* <Kbd>K</Kbd>
|
|
54
|
+
* </span>
|
|
49
55
|
* ```
|
|
50
56
|
*/
|
|
51
57
|
declare function Kbd({ children, className, ...props }: Omit<ComponentProps<"kbd">, "translate">): import("react").JSX.Element;
|
package/dist/kbd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./kbd-
|
|
1
|
+
import{t as e}from"./kbd-4_0Y_8rx.js";export{e as Kbd};
|
|
@@ -29,7 +29,9 @@ type LabelProps = ComponentProps<"label"> & {
|
|
|
29
29
|
*
|
|
30
30
|
* **Disabled state.** Pass `disabled` to render the label in a disabled
|
|
31
31
|
* style. Typically you'll want this to mirror the underlying control's
|
|
32
|
-
* disabled state so the visual treatment stays consistent.
|
|
32
|
+
* disabled state so the visual treatment stays consistent. The label stamps
|
|
33
|
+
* `data-disabled` for that style; it never sets `aria-disabled`, because a
|
|
34
|
+
* `<label>` has no role that supports it.
|
|
33
35
|
*
|
|
34
36
|
* **Font weight.** A `Label` automatically gets `font-medium` when it does
|
|
35
37
|
* **not** contain a nested form control (`<input>`, `<textarea>`, `<select>`,
|