{
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
+ <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
<div>
<Label
size="md"
diff --git a/src/templates/onboarding-done/onboarding-done.stories.jsx b/src/templates/onboarding-done/onboarding-done.stories.jsx
index 64114fc6..128c04be 100644
--- a/src/templates/onboarding-done/onboarding-done.stories.jsx
+++ b/src/templates/onboarding-done/onboarding-done.stories.jsx
@@ -38,7 +38,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm ">
+ <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs ">
<div>
<Label
size="md"
diff --git a/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx b/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx
index 615f5821..eeb5bd88 100644
--- a/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx
+++ b/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx
@@ -56,7 +56,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
+ <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-import/onboarding-import.stories.jsx b/src/templates/onboarding-import/onboarding-import.stories.jsx
index 314ccc13..c80ceff9 100644
--- a/src/templates/onboarding-import/onboarding-import.stories.jsx
+++ b/src/templates/onboarding-import/onboarding-import.stories.jsx
@@ -45,7 +45,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
+ <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-profile/onboarding-profile.stories.jsx b/src/templates/onboarding-profile/onboarding-profile.stories.jsx
index 872cf9b8..3a69e537 100644
--- a/src/templates/onboarding-profile/onboarding-profile.stories.jsx
+++ b/src/templates/onboarding-profile/onboarding-profile.stories.jsx
@@ -47,7 +47,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
+ <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx b/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx
index d640c14b..902fea85 100644
--- a/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx
+++ b/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx
@@ -46,7 +46,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm space-y-4">
+ <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs space-y-4">
<div className="flex justify-between gap-4">
<div>
<Title
diff --git a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx
index eae2107d..dcd1383d 100644
--- a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx
+++ b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx
@@ -55,7 +55,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm space-y-4">
+ <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs space-y-4">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-social/onboarding-social.stories.jsx b/src/templates/onboarding-social/onboarding-social.stories.jsx
index 6e7a5224..40c55b97 100644
--- a/src/templates/onboarding-social/onboarding-social.stories.jsx
+++ b/src/templates/onboarding-social/onboarding-social.stories.jsx
@@ -46,7 +46,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form>
- <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
+ <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-spam/onboarding-spam.stories.jsx b/src/templates/onboarding-spam/onboarding-spam.stories.jsx
index 0811d346..9bbc5b2b 100644
--- a/src/templates/onboarding-spam/onboarding-spam.stories.jsx
+++ b/src/templates/onboarding-spam/onboarding-spam.stories.jsx
@@ -55,7 +55,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
+ <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx b/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx
index da0389a1..79966d8e 100644
--- a/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx
+++ b/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx
@@ -46,7 +46,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm space-y-6">
+ <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs space-y-6">
<div>
<Label
size="md"
diff --git a/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx b/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx
index e9163280..58edd674 100644
--- a/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx
+++ b/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx
@@ -203,7 +203,7 @@ export const SureFormsDashboard = ( args ) => {
{ /* Main Navigation */ }
<Topbar
gap="0"
- className="h-14 p-0 shadow-sm bg-background-primary border-b border-border-subtle min-h-14"
+ className="h-14 p-0 shadow-xs bg-background-primary border-b border-border-subtle min-h-14"
>
<Topbar.Left className="p-4">
<SureFormsLogo />
@@ -287,7 +287,7 @@ export const SureFormsDashboard = ( args ) => {
className="space-y-8 order-1"
>
{ /* Welcome Banner */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-6">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-6">
<Container
containerType="grid"
cols={ { sm: 1, md: 12, lg: 12 } }
@@ -357,7 +357,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
{ /* Forms Overview */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-4 px-1 gap-4">
<Text
as="h4"
@@ -480,7 +480,7 @@ export const SureFormsDashboard = ( args ) => {
<div className="flex items-center justify-end gap-6">
<div className="flex items-center gap-2">
<div
- className="w-2 h-2 rounded-sm"
+ className="w-2 h-2 rounded-xs"
style={ {
backgroundColor:
'#0EA5E9',
@@ -495,7 +495,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
<div className="flex items-center gap-2">
<div
- className="w-2 h-2 rounded-sm"
+ className="w-2 h-2 rounded-xs"
style={ {
backgroundColor:
'#A855F7',
@@ -551,7 +551,7 @@ export const SureFormsDashboard = ( args ) => {
className="space-y-6 order-2"
>
{ /* Extend Your Website - SureRank */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-3">
<div className="flex items-center justify-between mb-2 px-1">
<Text
as="h4"
@@ -564,7 +564,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
<div className="bg-field-primary-background rounded-lg p-1">
- <div className="bg-background-primary border border-border-subtle rounded-md p-3 shadow-sm">
+ <div className="bg-background-primary border border-border-subtle rounded-md p-3 shadow-xs">
<div className="flex items-start justify-between mb-3">
<img
src={ sureRankLogo }
@@ -607,7 +607,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
{ /* Quick Access */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-3">
<div className="mb-2 px-1">
<Text
as="h4"
@@ -623,7 +623,7 @@ export const SureFormsDashboard = ( args ) => {
{ quickAccessItems.map( ( item ) => (
<div
key={ item.id }
- className="bg-background-primary rounded shadow-sm p-3"
+ className="bg-background-primary rounded-sm shadow-xs p-3"
>
<div className="flex items-center gap-3">
{ item.icon }
@@ -649,7 +649,7 @@ export const SureFormsDashboard = ( args ) => {
colSpan={ 12 }
className="order-3 lg:order-2 lg:col-span-8 lg:col-start-1"
>
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-6">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-6">
<Container
containerType="grid"
align="center"
diff --git a/src/templates/uae-dashboard/uae-dashboard.stories.jsx b/src/templates/uae-dashboard/uae-dashboard.stories.jsx
index 8df228ce..c1818aeb 100644
--- a/src/templates/uae-dashboard/uae-dashboard.stories.jsx
+++ b/src/templates/uae-dashboard/uae-dashboard.stories.jsx
@@ -128,7 +128,7 @@ export const UAEDashboard = ( args ) => {
{ /* Navigation Topbar */ }
<Topbar
gap="0"
- className="h-14 p-0 shadow-sm bg-background-primary border-b border-border-subtle min-h-14"
+ className="h-14 p-0 shadow-xs bg-background-primary border-b border-border-subtle min-h-14"
>
<Topbar.Left className="p-3">
<Topbar.Item>
@@ -207,7 +207,7 @@ export const UAEDashboard = ( args ) => {
{ /* Main Content Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 8 } } className="space-y-8">
{ /* Welcome Banner */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
<div className="flex items-center flex-col md:flex-row gap-8">
<div className="flex-1 space-y-4 order-2 md:order-1">
<Text
@@ -244,11 +244,11 @@ export const UAEDashboard = ( args ) => {
</Button>
</div>
</div>
- <div className="w-full md:w-72 h-auto md:h-40 bg-field-primary-background rounded border border-border-subtle flex items-center justify-center relative overflow-hidden order-1 md:order-2">
+ <div className="w-full md:w-72 h-auto md:h-40 bg-field-primary-background rounded-sm border border-border-subtle flex items-center justify-center relative overflow-hidden order-1 md:order-2">
<img
src={ videoBackground }
alt="Getting Started Video"
- className="w-full h-full object-cover rounded"
+ className="w-full h-full object-cover rounded-sm"
/>
<Button
variant="ghost"
@@ -264,7 +264,7 @@ export const UAEDashboard = ( args ) => {
</div>
{ /* Widgets & Features */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
<Text
as="h4"
size={ 14 }
@@ -284,7 +284,7 @@ export const UAEDashboard = ( args ) => {
{ switchState.map( ( widget ) => (
<div
key={ widget.id }
- className="bg-background-primary rounded p-3 shadow-sm"
+ className="bg-background-primary rounded-sm p-3 shadow-xs"
>
<div className="flex items-center justify-between mb-4">
<widget.icon className="w-5 h-5 text-icon-primary" />
@@ -355,7 +355,7 @@ export const UAEDashboard = ( args ) => {
</div>
{ /* Super Charge Your Workflow */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-3">
<Text
as="h4"
size={ 14 }
@@ -367,7 +367,7 @@ export const UAEDashboard = ( args ) => {
</Text>
<div className="bg-field-primary-background rounded-lg border border-border-subtle-lg p-1">
- <div className="bg-background-primary rounded p-4 border border-border-subtle">
+ <div className="bg-background-primary rounded-sm p-4 border border-border-subtle">
<div className="flex flex-col items-start gap-4">
<img
src={ sureRankLogo }
@@ -417,7 +417,7 @@ export const UAEDashboard = ( args ) => {
{ /* Sidebar Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 4 } } className="space-y-6">
{ /* Upgrade to Pro */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle overflow-hidden">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle overflow-hidden">
<img
src={ upgradeBanner }
alt="Upgrade to Pro"
@@ -474,7 +474,7 @@ export const UAEDashboard = ( args ) => {
</div>
{ /* Quick Access */ }
- <div className="bg-background-primary rounded-xl space-y-2 shadow-sm border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl space-y-2 shadow-xs border-0.5 border-solid border-border-subtle p-3">
<Text
as="h4"
size={ 14 }
@@ -486,7 +486,7 @@ export const UAEDashboard = ( args ) => {
</Text>
<div className="space-y-1 p-1 bg-field-primary-background rounded-lg">
- <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-3">
<Headphones className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -501,7 +501,7 @@ export const UAEDashboard = ( args ) => {
/>
</div>
- <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-3">
<BookOpen className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -510,7 +510,7 @@ export const UAEDashboard = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-2">
<CircleHelp className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -519,7 +519,7 @@ export const UAEDashboard = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-2">
<MessageSquare className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
diff --git a/src/templates/uae-widgets/uae-widgets.stories.jsx b/src/templates/uae-widgets/uae-widgets.stories.jsx
index 4273d894..f2f7c57c 100644
--- a/src/templates/uae-widgets/uae-widgets.stories.jsx
+++ b/src/templates/uae-widgets/uae-widgets.stories.jsx
@@ -205,7 +205,7 @@ export const UAEWidgets = ( args ) => {
{ /* Navigation Topbar */ }
<Topbar
gap="0"
- className="h-14 p-0 shadow-sm bg-background-primary border-b border-border-subtle min-h-14"
+ className="h-14 p-0 shadow-xs bg-background-primary border-b border-border-subtle min-h-14"
>
<Topbar.Left className="p-3">
<Topbar.Item>
@@ -287,7 +287,7 @@ export const UAEWidgets = ( args ) => {
{ /* Main Content Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 8 } } className="space-y-8">
{ /* Widgets Section */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
{ /* Header */ }
<div className="flex items-center justify-between mb-6 p-1">
<Text
@@ -353,7 +353,7 @@ export const UAEWidgets = ( args ) => {
{ filteredWidgets.map( ( widget ) => (
<div
key={ widget.id }
- className="flex flex-col justify-start bg-background-primary rounded p-3 shadow-sm"
+ className="flex flex-col justify-start bg-background-primary rounded-sm p-3 shadow-xs"
>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-center">
@@ -419,7 +419,7 @@ export const UAEWidgets = ( args ) => {
{ /* Sidebar Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 4 } } className="space-y-6">
{ /* Upgrade to Pro */ }
- <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle overflow-hidden">
+ <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle overflow-hidden">
<div className="p-3">
<img
src={ upgradeBanner }
@@ -478,7 +478,7 @@ export const UAEWidgets = ( args ) => {
</div>
{ /* Quick Access */ }
- <div className="bg-background-primary rounded-xl space-y-2 shadow-sm border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl space-y-2 shadow-xs border-0.5 border-solid border-border-subtle p-3">
<Text
as="h4"
size={ 14 }
@@ -490,7 +490,7 @@ export const UAEWidgets = ( args ) => {
</Text>
<div className="space-y-1 p-1 bg-field-primary-background rounded-lg">
- <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-3">
<Headphones className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -505,7 +505,7 @@ export const UAEWidgets = ( args ) => {
/>
</div>
- <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-3">
<BookOpen className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -514,7 +514,7 @@ export const UAEWidgets = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-2">
<CircleHelp className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -523,7 +523,7 @@ export const UAEWidgets = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
<div className="flex items-center gap-2">
<MessageSquare className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
diff --git a/src/theme/theme.css b/src/theme/theme.css
new file mode 100644
index 00000000..81c54ddc
--- /dev/null
+++ b/src/theme/theme.css
@@ -0,0 +1,235 @@
+/**
+ * Force UI design tokens for Tailwind CSS v4 (CSS-first).
+ *
+ * Import-agnostic on purpose: this file declares only `@theme` tokens, custom
+ * utilities and variants. It intentionally does NOT `@import "tailwindcss"` and
+ * does NOT emit preflight, so consumers keep full control of the base layer
+ * (mirrors the v3 `corePlugins.preflight: false` behavior).
+ *
+ * Consumer usage:
+ * @import "tailwindcss";
+ * @import "@bsf/force-ui/theme.css";
+ * @theme { ...overrides... }
+ *
+ * @since x.x.x
+ */
+
+@theme {
+ /* brand */
+ --color-brand-background-50: #EFF6FF;
+ --color-brand-background-hover-100: #DBEAFE;
+ --color-brand-200: #BFDBFE;
+ --color-brand-border-300: #93C5FD;
+ --color-brand-400: #60A5FA;
+ --color-brand-500: #3B82F6;
+ --color-brand-primary-600: #2563EB;
+ --color-brand-hover-700: #1D4ED8;
+ --color-brand-800: #1E40AF;
+ --color-brand-900: #1E3A8A;
+ --color-brand-text-950: #172554;
+
+ /* background */
+ --color-background-primary: #FFFFFF;
+ --color-background-secondary: #F3F4F6;
+ --color-background-inverse: #111827;
+ --color-background-brand: #2563EB;
+ --color-background-important: #DC2626;
+
+ /* field */
+ --color-field-primary-background: #F9FAFB;
+ --color-field-secondary-background: #FFFFFF;
+ --color-field-primary-hover: #F3F4F6;
+ --color-field-secondary-hover: #F3F4F6;
+ --color-field-dropzone-background: #FFFFFF;
+ --color-field-border: #E5E7EB;
+ --color-field-dropzone-background-hover: #F9FAFB;
+ --color-field-dropzone-color: #2563EB;
+ --color-field-label: #111827;
+ --color-field-input: #111827;
+ --color-field-helper: #6B7280;
+ --color-field-background-disabled: #F9FAFB;
+ --color-field-color-disabled: #BDC1C7;
+ --color-field-placeholder: #6B7280;
+ --color-field-border-disabled: #F3F4F6;
+ --color-field-color-error: #DC2626;
+ --color-field-border-error: #FECACA;
+ --color-field-background-error: #FEF2F2;
+ --color-field-required: #DC2626;
+
+ /* border */
+ --color-border-interactive: #2563EB;
+ --color-border-subtle: #E5E7EB;
+ --color-border-strong: #6B7280;
+ --color-border-inverse: #374151;
+ --color-border-disabled: #E5E7EB;
+ --color-border-muted: #E5E7EB;
+ --color-border-error: #DC2626;
+ --color-border-transparent-subtle: #37415114;
+ --color-border-white: #FFFFFF;
+
+ /* text */
+ --color-text-primary: #111827;
+ --color-text-secondary: #4B5563;
+ --color-text-tertiary: #6B7280;
+ --color-text-on-color: #FFFFFF;
+ --color-text-error: #DC2626;
+ --color-text-error-inverse: #F87171;
+ --color-text-inverse: #FFFFFF;
+ --color-text-disabled: #BDC1C7;
+ --color-text-on-button-disabled: #9CA3AF;
+
+ /* link */
+ --color-link-primary: #2563EB;
+ --color-link-primary-hover: #1D4ED8;
+ --color-link-inverse: #38BDF8;
+ --color-link-visited: #7C3AED;
+ --color-link-visited-inverse: #A78BFA;
+ --color-link-inverse-hover: #7DD3FC;
+
+ /* icon */
+ --color-icon-primary: #111827;
+ --color-icon-secondary: #4B5563;
+ --color-icon-on-color: #FFFFFF;
+ --color-icon-inverse: #FFFFFF;
+ --color-icon-interactive: #2563EB;
+ --color-icon-on-color-disabled: #9CA3AF;
+ --color-icon-disabled: #BDC1C7;
+
+ /* support */
+ --color-support-error: #DC2626;
+ --color-support-success: #16A34A;
+ --color-support-warning: #EAB308;
+ --color-support-info: #0284C7;
+ --color-support-error-inverse: #F87171;
+ --color-support-success-inverse: #4ADE80;
+ --color-support-warning-inverse: #FDE047;
+ --color-support-info-inverse: #38BDF8;
+
+ /* button */
+ --color-button-primary: #2563EB;
+ --color-button-primary-hover: #1D4ED8;
+ --color-button-secondary: #1F2937;
+ --color-button-secondary-hover: #374151;
+ --color-button-tertiary: #FFFFFF;
+ --color-button-tertiary-hover: #F9FAFB;
+ --color-button-danger: #DC2626;
+ --color-button-danger-secondary: #DC2626;
+ --color-button-danger-hover: #B91C1C;
+ --color-button-disabled: #F3F4F6;
+ --color-button-tertiary-border: #E5E7EB;
+ --color-button-tertiary-color: #111827;
+
+ /* focus */
+ --color-focus: #2563EB;
+ --color-focus-inset: #FFFFFF;
+ --color-focus-inverse: #38BDF8;
+ --color-focus-inverse-inset: #111827;
+ --color-focus-error: #DC2626;
+ --color-focus-border: #BFDBFE;
+ --color-focus-error-border: #FECACA;
+
+ /* misc */
+ --color-misc-highlight: #BFDBFE;
+ --color-misc-overlay: #11182780;
+ --color-misc-skeleton-background: #F3F4F6;
+ --color-misc-skeleton-element: #BDC1C7;
+ --color-misc-popup-button-hover: #1118270D;
+ --color-misc-tab-item-hover: #E5E7EB;
+ --color-misc-dropdown-hover: #F3F4F6;
+ --color-misc-loader-base: #1118270D;
+ --color-misc-loader-color: #2563EB;
+ --color-misc-progress-background: #E5E7EB;
+
+ /* badge */
+ --color-badge-background-gray: #F9FAFB;
+ --color-badge-color-gray: #1F2937;
+ --color-badge-hover-gray: #F3F4F6;
+ --color-badge-border-gray: #E5E7EB;
+ --color-badge-background-red: #FEF2F2;
+ --color-badge-color-red: #B91C1C;
+ --color-badge-hover-red: #FEE2E2;
+ --color-badge-border-red: #FECACA;
+ --color-badge-background-yellow: #FEFCE8;
+ --color-badge-color-yellow: #A16207;
+ --color-badge-hover-yellow: #FEF9C3;
+ --color-badge-border-yellow: #FEF08A;
+ --color-badge-hover-green: #DCFCE7;
+ --color-badge-border-green: #BBF7D0;
+ --color-badge-background-green: #F0FDF4;
+ --color-badge-color-green: #15803D;
+ --color-badge-background-sky: #F0F9FF;
+ --color-badge-color-sky: #0369A1;
+ --color-badge-hover-sky: #E0F2FE;
+ --color-badge-border-sky: #BAE6FD;
+ --color-badge-background-disabled: #F3F4F6;
+ --color-badge-color-disabled: #BDC1C7;
+ --color-badge-hover-disabled: #F3F4F6;
+ --color-badge-border-disabled: #E5E7EB;
+ --color-badge-background-important: #DC2626;
+
+ /* alert */
+ --color-alert-background-neutral: #FFFFFF;
+ --color-alert-border-neutral: #E5E7EB;
+ --color-alert-background-danger: #FEF2F2;
+ --color-alert-border-danger: #FECACA;
+ --color-alert-background-warning: #FEFCE8;
+ --color-alert-border-warning: #FEF08A;
+ --color-alert-background-green: #F0FDF4;
+ --color-alert-border-green: #BBF7D0;
+ --color-alert-background-info: #F0F9FF;
+ --color-alert-border-info: #BAE6FD;
+
+ /* tab */
+ --color-tab-background: #F3F4F6;
+ --color-tab-border: #E5E7EB;
+
+ /* tooltip */
+ --color-tooltip-background-light: #FFFFFF;
+ --color-tooltip-background-dark: #111827;
+
+ /* toggle */
+ --color-toggle-off: #E5E7EB;
+ --color-toggle-on: #2563EB;
+ --color-toggle-dial-background: #FFFFFF;
+ --color-toggle-off-hover: #BDC1C7;
+ --color-toggle-off-border: #BDC1C7;
+ --color-toggle-on-hover: #3B82F6;
+ --color-toggle-on-border: #60A5FA;
+ --color-toggle-on-disabled: #EFF6FF;
+ --color-toggle-off-disabled: #F3F4F6;
+
+ /* box-shadow — overrides v4 default --shadow-xs and adds custom scale */
+ --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+ --shadow-soft-shadow-sm: 0px 6px 32px -12px rgba(149, 160, 178, 0.12);
+ --shadow-soft-shadow: 0px 8px 32px -12px rgba(149, 160, 178, 0.16);
+ --shadow-soft-shadow-md: 0px 10px 32px -12px rgba(149, 160, 178, 0.2);
+ --shadow-soft-shadow-lg: 0px 12px 32px -12px rgba(149, 160, 178, 0.24);
+ --shadow-soft-shadow-xl: 0px 16px 32px -12px rgba(149, 160, 178, 0.32);
+ --shadow-soft-shadow-2xl: 0px 24px 64px -12px rgba(149, 160, 178, 0.32);
+ --shadow-soft-shadow-inner: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
+ --shadow-toggle-disabled: 1px 1px 2px 0px rgba(0, 0, 0, 0.1) inset;
+
+ /* font-size */
+ --text-tiny: 0.625rem;
+
+ /* letter-spacing */
+ --tracking-2: 0.125em;
+}
+
+/**
+ * Custom RTL-aware variant (was defined via tailwindcss/plugin in v3).
+ * @since x.x.x
+ */
+@custom-variant not-rtl (&:not([dir="rtl"], [dir="rtl"] *));
+
+/*
+ * Note: v3 `theme.extend` entries for spacing, size, translate, lineHeight,
+ * zIndex and fraction widths (e.g. w-1/7) are intentionally omitted — Tailwind
+ * v4 reproduces them exactly via its dynamic utility scale
+ * (n × 0.25rem) and dynamic fraction widths (calc(a / b * 100%)).
+ */
+
+/* Hairline border width (v3 borderWidth 0.5) — v4 has no dynamic border-<n>. */
+@utility border-0\.5 {
+ border-width: 0.5px;
+}
diff --git a/src/utilities/withTW.js b/src/utilities/withTW.js
index fec63674..5a7e5a8e 100644
--- a/src/utilities/withTW.js
+++ b/src/utilities/withTW.js
@@ -1,6 +1,19 @@
import deepmerge from 'deepmerge';
import libraryConfig from '../theme/default-config';
+/**
+ * Deep-merges the Force UI theme into a consumer Tailwind config.
+ *
+ * @deprecated since 2.0.0. Force UI is now CSS-first for Tailwind v4. Instead of
+ * merging a JS config, import the shipped tokens in your CSS entry with
+ * `"tailwindcss"` followed by `"@bsf/force-ui/theme.css"`. This helper is
+ * retained only for consumers still on Tailwind v4's legacy JS-config path
+ * (loaded via the CSS `@config` directive) and will be removed in 3.0.0.
+ *
+ * @since x.x.x
+ * @param {Object} tailwindConfig Consumer Tailwind config object.
+ * @return {Object} Config merged with the Force UI theme.
+ */
const withTW = ( tailwindConfig ) => {
return deepmerge( libraryConfig, { ...tailwindConfig } );
};
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index c3ccfbb8..00000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const withTW = require('./src/utilities/withTW');
-
-module.exports = withTW({
- content: ['./src/**/*.{ts,tsx,js,jsx}'],
- plugins: [require('@tailwindcss/container-queries')],
-});
diff --git a/vite.config.ts b/vite.config.ts
index d86d867f..45f32e7c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,9 +2,22 @@ import preserveDirectives from 'rollup-preserve-directives';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
+import { copyFileSync } from 'fs';
import dts from 'vite-plugin-dts';
import pkg from './package.json';
+// Ship the CSS-first design tokens as a raw asset (@bsf/force-ui/theme.css).
+// Runs on closeBundle so it lands after Vite clears dist (emptyOutDir).
+const copyThemeCss = () => ( {
+ name: 'force-ui-copy-theme-css',
+ closeBundle() {
+ copyFileSync(
+ resolve(process.cwd(), 'src/theme/theme.css'),
+ resolve(process.cwd(), 'dist/theme.css')
+ );
+ },
+} );
+
// https://vitejs.dev/config/
export default defineConfig({
build: {
@@ -78,6 +91,7 @@ export default defineConfig({
exclude: ['**/node_modules/**', '**/_virtual/**'],
}),
preserveDirectives(),
+ copyThemeCss(),
],
esbuild: {
treeShaking: true,
From bc8df022b7e8d3c976981dbf56490855e211d3da Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Wed, 1 Jul 2026 21:04:08 +0600
Subject: [PATCH 02/14] docs: add complete Theme Tokens Reference to README
List every @theme token shipped in theme.css (162 tokens across colors,
shadows, font-size and letter-spacing), grouped by category in a
collapsible section, so developers can see exactly which variables to
override. Generated from src/theme/theme.css.
Refs #1830 / SUR-397
---
README.md | 196 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 196 insertions(+)
diff --git a/README.md b/README.md
index 6f2dac88..64df491e 100644
--- a/README.md
+++ b/README.md
@@ -169,6 +169,202 @@ export default function Example() {
<br />
+## Theme Tokens Reference
+
+Force UI ships all its design tokens as Tailwind v4 `@theme` variables in `@bsf/force-ui/theme.css`. The variable name **is** the utility name — e.g. `--color-brand-primary-600` powers `bg-brand-primary-600`, `text-brand-primary-600`, `border-brand-primary-600`, and so on.
+
+To customize, copy the block below into your CSS entry (after the imports) and change the values you need — you only have to keep the lines you actually override:
+
+<details>
+<summary><strong>Show all tokens (copy & modify)</strong></summary>
+
+```css
+@theme {
+ /* brand */
+ --color-brand-background-50: #EFF6FF;
+ --color-brand-background-hover-100: #DBEAFE;
+ --color-brand-200: #BFDBFE;
+ --color-brand-border-300: #93C5FD;
+ --color-brand-400: #60A5FA;
+ --color-brand-500: #3B82F6;
+ --color-brand-primary-600: #2563EB;
+ --color-brand-hover-700: #1D4ED8;
+ --color-brand-800: #1E40AF;
+ --color-brand-900: #1E3A8A;
+ --color-brand-text-950: #172554;
+ /* background */
+ --color-background-primary: #FFFFFF;
+ --color-background-secondary: #F3F4F6;
+ --color-background-inverse: #111827;
+ --color-background-brand: #2563EB;
+ --color-background-important: #DC2626;
+ /* field */
+ --color-field-primary-background: #F9FAFB;
+ --color-field-secondary-background: #FFFFFF;
+ --color-field-primary-hover: #F3F4F6;
+ --color-field-secondary-hover: #F3F4F6;
+ --color-field-dropzone-background: #FFFFFF;
+ --color-field-border: #E5E7EB;
+ --color-field-dropzone-background-hover: #F9FAFB;
+ --color-field-dropzone-color: #2563EB;
+ --color-field-label: #111827;
+ --color-field-input: #111827;
+ --color-field-helper: #6B7280;
+ --color-field-background-disabled: #F9FAFB;
+ --color-field-color-disabled: #BDC1C7;
+ --color-field-placeholder: #6B7280;
+ --color-field-border-disabled: #F3F4F6;
+ --color-field-color-error: #DC2626;
+ --color-field-border-error: #FECACA;
+ --color-field-background-error: #FEF2F2;
+ --color-field-required: #DC2626;
+ /* border */
+ --color-border-interactive: #2563EB;
+ --color-border-subtle: #E5E7EB;
+ --color-border-strong: #6B7280;
+ --color-border-inverse: #374151;
+ --color-border-disabled: #E5E7EB;
+ --color-border-muted: #E5E7EB;
+ --color-border-error: #DC2626;
+ --color-border-transparent-subtle: #37415114;
+ --color-border-white: #FFFFFF;
+ /* text */
+ --color-text-primary: #111827;
+ --color-text-secondary: #4B5563;
+ --color-text-tertiary: #6B7280;
+ --color-text-on-color: #FFFFFF;
+ --color-text-error: #DC2626;
+ --color-text-error-inverse: #F87171;
+ --color-text-inverse: #FFFFFF;
+ --color-text-disabled: #BDC1C7;
+ --color-text-on-button-disabled: #9CA3AF;
+ /* link */
+ --color-link-primary: #2563EB;
+ --color-link-primary-hover: #1D4ED8;
+ --color-link-inverse: #38BDF8;
+ --color-link-visited: #7C3AED;
+ --color-link-visited-inverse: #A78BFA;
+ --color-link-inverse-hover: #7DD3FC;
+ /* icon */
+ --color-icon-primary: #111827;
+ --color-icon-secondary: #4B5563;
+ --color-icon-on-color: #FFFFFF;
+ --color-icon-inverse: #FFFFFF;
+ --color-icon-interactive: #2563EB;
+ --color-icon-on-color-disabled: #9CA3AF;
+ --color-icon-disabled: #BDC1C7;
+ /* support */
+ --color-support-error: #DC2626;
+ --color-support-success: #16A34A;
+ --color-support-warning: #EAB308;
+ --color-support-info: #0284C7;
+ --color-support-error-inverse: #F87171;
+ --color-support-success-inverse: #4ADE80;
+ --color-support-warning-inverse: #FDE047;
+ --color-support-info-inverse: #38BDF8;
+ /* button */
+ --color-button-primary: #2563EB;
+ --color-button-primary-hover: #1D4ED8;
+ --color-button-secondary: #1F2937;
+ --color-button-secondary-hover: #374151;
+ --color-button-tertiary: #FFFFFF;
+ --color-button-tertiary-hover: #F9FAFB;
+ --color-button-danger: #DC2626;
+ --color-button-danger-secondary: #DC2626;
+ --color-button-danger-hover: #B91C1C;
+ --color-button-disabled: #F3F4F6;
+ --color-button-tertiary-border: #E5E7EB;
+ --color-button-tertiary-color: #111827;
+ /* focus */
+ --color-focus: #2563EB;
+ --color-focus-inset: #FFFFFF;
+ --color-focus-inverse: #38BDF8;
+ --color-focus-inverse-inset: #111827;
+ --color-focus-error: #DC2626;
+ --color-focus-border: #BFDBFE;
+ --color-focus-error-border: #FECACA;
+ /* misc */
+ --color-misc-highlight: #BFDBFE;
+ --color-misc-overlay: #11182780;
+ --color-misc-skeleton-background: #F3F4F6;
+ --color-misc-skeleton-element: #BDC1C7;
+ --color-misc-popup-button-hover: #1118270D;
+ --color-misc-tab-item-hover: #E5E7EB;
+ --color-misc-dropdown-hover: #F3F4F6;
+ --color-misc-loader-base: #1118270D;
+ --color-misc-loader-color: #2563EB;
+ --color-misc-progress-background: #E5E7EB;
+ /* badge */
+ --color-badge-background-gray: #F9FAFB;
+ --color-badge-color-gray: #1F2937;
+ --color-badge-hover-gray: #F3F4F6;
+ --color-badge-border-gray: #E5E7EB;
+ --color-badge-background-red: #FEF2F2;
+ --color-badge-color-red: #B91C1C;
+ --color-badge-hover-red: #FEE2E2;
+ --color-badge-border-red: #FECACA;
+ --color-badge-background-yellow: #FEFCE8;
+ --color-badge-color-yellow: #A16207;
+ --color-badge-hover-yellow: #FEF9C3;
+ --color-badge-border-yellow: #FEF08A;
+ --color-badge-hover-green: #DCFCE7;
+ --color-badge-border-green: #BBF7D0;
+ --color-badge-background-green: #F0FDF4;
+ --color-badge-color-green: #15803D;
+ --color-badge-background-sky: #F0F9FF;
+ --color-badge-color-sky: #0369A1;
+ --color-badge-hover-sky: #E0F2FE;
+ --color-badge-border-sky: #BAE6FD;
+ --color-badge-background-disabled: #F3F4F6;
+ --color-badge-color-disabled: #BDC1C7;
+ --color-badge-hover-disabled: #F3F4F6;
+ --color-badge-border-disabled: #E5E7EB;
+ --color-badge-background-important: #DC2626;
+ /* alert */
+ --color-alert-background-neutral: #FFFFFF;
+ --color-alert-border-neutral: #E5E7EB;
+ --color-alert-background-danger: #FEF2F2;
+ --color-alert-border-danger: #FECACA;
+ --color-alert-background-warning: #FEFCE8;
+ --color-alert-border-warning: #FEF08A;
+ --color-alert-background-green: #F0FDF4;
+ --color-alert-border-green: #BBF7D0;
+ --color-alert-background-info: #F0F9FF;
+ --color-alert-border-info: #BAE6FD;
+ /* tab */
+ --color-tab-background: #F3F4F6;
+ --color-tab-border: #E5E7EB;
+ /* tooltip */
+ --color-tooltip-background-light: #FFFFFF;
+ --color-tooltip-background-dark: #111827;
+ /* toggle */
+ --color-toggle-off: #E5E7EB;
+ --color-toggle-on: #2563EB;
+ --color-toggle-dial-background: #FFFFFF;
+ --color-toggle-off-hover: #BDC1C7;
+ --color-toggle-off-border: #BDC1C7;
+ --color-toggle-on-hover: #3B82F6;
+ --color-toggle-on-border: #60A5FA;
+ --color-toggle-on-disabled: #EFF6FF;
+ --color-toggle-off-disabled: #F3F4F6;
+ /* box-shadow — overrides v4 default --shadow-xs and adds custom scale */
+ --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+ --shadow-soft-shadow-sm: 0px 6px 32px -12px rgba(149, 160, 178, 0.12);
+ --shadow-soft-shadow: 0px 8px 32px -12px rgba(149, 160, 178, 0.16);
+ --shadow-soft-shadow-md: 0px 10px 32px -12px rgba(149, 160, 178, 0.2);
+ --shadow-soft-shadow-lg: 0px 12px 32px -12px rgba(149, 160, 178, 0.24);
+ --shadow-soft-shadow-xl: 0px 16px 32px -12px rgba(149, 160, 178, 0.32);
+ --shadow-soft-shadow-2xl: 0px 24px 64px -12px rgba(149, 160, 178, 0.32);
+ --shadow-soft-shadow-inner: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
+ --shadow-toggle-disabled: 1px 1px 2px 0px rgba(0, 0, 0, 0.1) inset;
+ /* font-size */
+ --text-tiny: 0.625rem;
+ /* letter-spacing */
+ --tracking-2: 0.125em;
+}
+```
+</details>
+
## MCP Setup
Force UI provides an MCP server that gives AI assistants accurate component usage context correct props, patterns, and examples. So you get reliable implementations without guesswork.
From acd94ae37a12992bdb4ff37749ca4246834eb10e Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 2 Jul 2026 16:05:43 +0600
Subject: [PATCH 03/14] fix: v4 follow-ups from consumer integration testing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Issues found while migrating SureRank/SureRank Pro onto 2.0.0:
- theme.css: add per-side border-*-0.5 and divide-{x,y}-0.5 utilities
(v3's borderWidth {0.5} theme key generated these variants; without
them, border-style falls back to the browser 'medium' width because
preflight is excluded).
- Move the v3 important prefix to the v4 suffix in remaining component
and story classes (!x -> x!); v4 does not recognize the prefix form.
- Bump tailwind-merge to ^3 — v2 predates the v4 trailing-! syntax and
can drop such classes when merging.
- README: add consumer upgrade checklist and WordPress/webpack notes
(standalone PostCSS pass for the Tailwind entry, no @layer inside
wp-admin, preflight-off border compat, space-* selector change).
Refs #1830 / SUR-397
---
README.md | 26 ++++++++
package-lock.json | 8 +--
package.json | 2 +-
src/components/checkbox/checkbox.tsx | 2 +-
src/components/radio-button/radio-button.tsx | 2 +-
.../admin-settings-Spectra.stories.jsx | 2 +-
.../admin-settings-SureCart.stories.jsx | 2 +-
.../admin-settings-SureRank.stories.jsx | 4 +-
src/theme/theme.css | 65 ++++++++++++-------
9 files changed, 79 insertions(+), 34 deletions(-)
diff --git a/README.md b/README.md
index 64df491e..23865c36 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,32 @@ module.exports = { plugins: { '@tailwindcss/postcss': {} } };
You can usually **delete `tailwind.config.js`** (Tailwind v4 auto-detects sources). If you must keep a JS config, load it explicitly with `@config "./tailwind.config.js";` in your CSS — but note the keys below are gone.
+### Upgrade checklist
+
+1. **Dependencies**: `@bsf/force-ui@^2`, `tailwindcss@^4`, add `@tailwindcss/postcss`; remove `autoprefixer` and `@tailwindcss/container-queries` (both built in). If you depend on `tailwind-merge` directly, bump it to `^3` — v2 doesn't understand v4's trailing-`!` syntax and can drop classes at runtime.
+2. **CSS entry + PostCSS**: as shown above. Delete `tailwind.config.js`; move theme overrides into `@theme`.
+3. **Templates**: run `npx @tailwindcss/upgrade`, or manually rename `shadow-sm→shadow-xs`, `shadow→shadow-sm`, `rounded-sm→rounded-xs`, `rounded→rounded-sm`, `outline-none→outline-hidden`, and move the important modifier from prefix to suffix (`!p-0` → `p-0!`).
+4. **`@apply` outside the entry**: any other stylesheet using `@apply` needs `@reference "<path-to-your-entry>.css";` at the top (registers utilities, emits nothing).
+5. **`safelist`** → `@source inline("class-a class-b …")` in the entry.
+
+### WordPress / webpack consumers (wp-scripts)
+
+Hard-won gotchas if your build is `@wordpress/scripts` (webpack) inside wp-admin:
+
+- **Build the Tailwind entry in a standalone PostCSS pass, not through webpack.** css-loader splits v4's single-pass compilation (the `@theme` gets separated from utility generation), so classes silently fail to generate. One extra line in your build script fixes it: `postcss src/tailwind.css -o build/tailwind.css`, enqueued once.
+- **Never put your CSS in `@layer` inside wp-admin.** WP core's CSS is unlayered, and unlayered always beats layered regardless of specificity — responsive utilities and resets will silently lose.
+- **Preflight off means browser defaults leak.** Add this once in your entry (scoped to your app root):
+
+```css
+:where(#your-root) *, :where(#your-root) ::before, :where(#your-root) ::after {
+ border-width: 0;
+ border-style: solid;
+ border-color: var(--color-border-subtle, #E5E7EB); /* v4 default is currentColor */
+}
+```
+
+- **`space-x/y-*` changed in v4** (zero-specificity selector, margins on first child): legacy element resets like `#root h1–h6 { margin: 0 }` now override them, and first-child margins get trampled. Prefer `flex flex-col gap-*`; for a drop-in compat shim that restores the v3 selector shape, see the `postcss-v3-space` plugin in SureRank's `postcss.config.js`.
+
**Config keys removed in Tailwind v4** (drop or replace them):
| v3 key | v4 replacement |
diff --git a/package-lock.json b/package-lock.json
index ee9900c9..9ecdcc6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
"react-day-picker": "^9.1.3",
"recharts": "^2.13.0",
"styled-components": "^6.1.12",
- "tailwind-merge": "^2.4.0"
+ "tailwind-merge": "^3.5.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^5.0.2",
@@ -21107,9 +21107,9 @@
}
},
"node_modules/tailwind-merge": {
- "version": "2.6.1",
- "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
- "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+ "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
"license": "MIT",
"funding": {
"type": "github",
diff --git a/package.json b/package.json
index affa9f95..a8453ef5 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
"react-day-picker": "^9.1.3",
"recharts": "^2.13.0",
"styled-components": "^6.1.12",
- "tailwind-merge": "^2.4.0"
+ "tailwind-merge": "^3.5.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^5.0.2",
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index 26e1ca0d..1dc0d928 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -169,7 +169,7 @@ export const CheckboxComponent = (
{ ...( indeterminate && { 'aria-checked': 'mixed' as const } ) }
{ ...( label?.description && { 'aria-describedby': descriptionId } ) }
className={ cn(
- "peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid focus:outline-hidden",
+ "peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden border-1.5! border-solid focus:outline-hidden",
colorClassNames[ color ].checkbox,
sizeClassNames[ size ].checkbox,
disabled && disabledClassNames.checkbox,
diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx
index 5afcffb5..02ec3acd 100644
--- a/src/components/radio-button/radio-button.tsx
+++ b/src/components/radio-button/radio-button.tsx
@@ -492,7 +492,7 @@ export const RadioButtonComponent = (
id={ radioButtonId }
type={ multiSelection ? 'checkbox' : 'radio' }
className={ cn(
- "peer flex relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid focus-within:outline-hidden",
+ "peer flex relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden border-1.5! border-solid focus-within:outline-hidden",
! multiSelection && 'rounded-full',
colorClassNames[ color ].checkbox,
sizeClassNames[ size ].checkbox,
diff --git a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
index e5d4c05b..954a1e85 100644
--- a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
+++ b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
@@ -176,7 +176,7 @@ const Template = ( args ) => {
borderOn
collapsible={ false }
screenHeight={ false }
- className="!h-full w-64"
+ className="h-full! w-64"
>
<Sidebar.Body>
<Sidebar.Item>
diff --git a/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx b/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx
index cfb9aee1..9ce015dd 100644
--- a/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx
+++ b/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx
@@ -293,7 +293,7 @@ const Template = ( args ) => {
borderOn
collapsible={ false }
screenHeight={ false }
- className="!h-full w-64"
+ className="h-full! w-64"
>
<Sidebar.Body>
<Sidebar.Item>
diff --git a/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx b/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx
index a93f5122..9ee580e5 100644
--- a/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx
+++ b/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx
@@ -280,7 +280,7 @@ const Template = ( args ) => {
borderOn
collapsible={ false }
screenHeight={ false }
- className="!h-full w-64"
+ className="h-full! w-64"
>
<Sidebar.Body>
<Sidebar.Item>
@@ -523,7 +523,7 @@ const Template = ( args ) => {
</Container.Item>
<EditorInput
by="label"
- className="!min-h-32 [&+div]:items-start [&+div]:pt-1"
+ className="min-h-32! [&+div]:items-start [&+div]:pt-1"
placeholder=""
options={ INPUT_SUGGESTIONS }
trigger="#"
diff --git a/src/theme/theme.css b/src/theme/theme.css
index 81c54ddc..a75a472b 100644
--- a/src/theme/theme.css
+++ b/src/theme/theme.css
@@ -1,15 +1,7 @@
/**
- * Force UI design tokens for Tailwind CSS v4 (CSS-first).
- *
- * Import-agnostic on purpose: this file declares only `@theme` tokens, custom
- * utilities and variants. It intentionally does NOT `@import "tailwindcss"` and
- * does NOT emit preflight, so consumers keep full control of the base layer
- * (mirrors the v3 `corePlugins.preflight: false` behavior).
- *
- * Consumer usage:
- * @import "tailwindcss";
- * @import "@bsf/force-ui/theme.css";
- * @theme { ...overrides... }
+ * Force UI design tokens for Tailwind CSS v4. Import-agnostic: declares only
+ * tokens, utilities and variants — no preflight, so consumers keep control of
+ * the base layer. Consumers: @import "tailwindcss"; @import "@bsf/force-ui/theme.css";
*
* @since x.x.x
*/
@@ -216,20 +208,47 @@
--tracking-2: 0.125em;
}
-/**
- * Custom RTL-aware variant (was defined via tailwindcss/plugin in v3).
- * @since x.x.x
- */
+/* RTL-aware variant (was a tailwindcss/plugin addVariant in v3). */
@custom-variant not-rtl (&:not([dir="rtl"], [dir="rtl"] *));
-/*
- * Note: v3 `theme.extend` entries for spacing, size, translate, lineHeight,
- * zIndex and fraction widths (e.g. w-1/7) are intentionally omitted — Tailwind
- * v4 reproduces them exactly via its dynamic utility scale
- * (n × 0.25rem) and dynamic fraction widths (calc(a / b * 100%)).
- */
-
-/* Hairline border width (v3 borderWidth 0.5) — v4 has no dynamic border-<n>. */
+/* v3 borderWidth {0.5} parity, incl. per-side variants. */
@utility border-0\.5 {
border-width: 0.5px;
}
+@utility border-t-0\.5 {
+ border-top-width: 0.5px;
+}
+@utility border-b-0\.5 {
+ border-bottom-width: 0.5px;
+}
+@utility border-l-0\.5 {
+ border-left-width: 0.5px;
+}
+@utility border-r-0\.5 {
+ border-right-width: 0.5px;
+}
+@utility border-x-0\.5 {
+ border-inline-width: 0.5px;
+}
+@utility border-y-0\.5 {
+ border-block-width: 0.5px;
+}
+
+/* v3 divide 0.5 parity; shapes mirror v4 divide-* emission. */
+@utility divide-y-0\.5 {
+ :where(& > :not(:last-child)) {
+ --tw-divide-y-reverse: 0;
+ border-bottom-style: var(--tw-border-style);
+ border-top-style: var(--tw-border-style);
+ border-top-width: calc(0.5px * var(--tw-divide-y-reverse));
+ border-bottom-width: calc(0.5px * calc(1 - var(--tw-divide-y-reverse)));
+ }
+}
+@utility divide-x-0\.5 {
+ :where(& > :not(:last-child)) {
+ --tw-divide-x-reverse: 0;
+ border-inline-style: var(--tw-border-style);
+ border-inline-start-width: calc(0.5px * var(--tw-divide-x-reverse));
+ border-inline-end-width: calc(0.5px * calc(1 - var(--tw-divide-x-reverse)));
+ }
+}
From 5dd168e47633438f88d64630ebca0a7630d92f0b Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 2 Jul 2026 16:18:26 +0600
Subject: [PATCH 04/14] docs: add 2.0.0 changelog entry
---
changelog.txt | 3 +++
1 file changed, 3 insertions(+)
diff --git a/changelog.txt b/changelog.txt
index 9570429d..c334bf60 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,3 +1,6 @@
+Version 2.0.0 - 2nd July, 2026
+- New: Migrated to TailwindCSS v4 (CSS-first) — the theme now ships as `@bsf/force-ui/theme.css` and the `withTW()` helper is deprecated; see the README migration guide for consumer upgrade steps (breaking).
+
Version 1.7.13 - 11th June, 2026
- Fix: Resolved `patch-package: command not found` install failure when the library is consumed as a git dependency. `patch-package` is now a runtime dependency so the bundled Lexical Shadow DOM patches are applied in consumer projects, which is required for the Editor Input mention menu Shadow DOM fix to work.
From 31499bf8282b38f030552754f32489d7a2701548 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 2 Jul 2026 16:21:25 +0600
Subject: [PATCH 05/14] Update version.json
---
version.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/version.json b/version.json
index 017ed758..fdc981e4 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
{
- "force-ui": "1.7.13"
+ "force-ui": "2.0.0"
}
From 8d9708ef29ee0bf3bbf9a61f410efa3fc4afa27d Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 16 Jul 2026 11:56:56 +0600
Subject: [PATCH 06/14] fix: resolve stylelint errors in theme.css
---
src/theme/theme.css | 321 +++++++++++++++++++++++---------------------
1 file changed, 165 insertions(+), 156 deletions(-)
diff --git a/src/theme/theme.css b/src/theme/theme.css
index a75a472b..9aa06505 100644
--- a/src/theme/theme.css
+++ b/src/theme/theme.css
@@ -8,198 +8,198 @@
@theme {
/* brand */
- --color-brand-background-50: #EFF6FF;
- --color-brand-background-hover-100: #DBEAFE;
- --color-brand-200: #BFDBFE;
- --color-brand-border-300: #93C5FD;
- --color-brand-400: #60A5FA;
- --color-brand-500: #3B82F6;
- --color-brand-primary-600: #2563EB;
- --color-brand-hover-700: #1D4ED8;
- --color-brand-800: #1E40AF;
- --color-brand-900: #1E3A8A;
+ --color-brand-background-50: #eff6ff;
+ --color-brand-background-hover-100: #dbeafe;
+ --color-brand-200: #bfdbfe;
+ --color-brand-border-300: #93c5fd;
+ --color-brand-400: #60a5fa;
+ --color-brand-500: #3b82f6;
+ --color-brand-primary-600: #2563eb;
+ --color-brand-hover-700: #1d4ed8;
+ --color-brand-800: #1e40af;
+ --color-brand-900: #1e3a8a;
--color-brand-text-950: #172554;
/* background */
- --color-background-primary: #FFFFFF;
- --color-background-secondary: #F3F4F6;
+ --color-background-primary: #fff;
+ --color-background-secondary: #f3f4f6;
--color-background-inverse: #111827;
- --color-background-brand: #2563EB;
- --color-background-important: #DC2626;
+ --color-background-brand: #2563eb;
+ --color-background-important: #dc2626;
/* field */
- --color-field-primary-background: #F9FAFB;
- --color-field-secondary-background: #FFFFFF;
- --color-field-primary-hover: #F3F4F6;
- --color-field-secondary-hover: #F3F4F6;
- --color-field-dropzone-background: #FFFFFF;
- --color-field-border: #E5E7EB;
- --color-field-dropzone-background-hover: #F9FAFB;
- --color-field-dropzone-color: #2563EB;
+ --color-field-primary-background: #f9fafb;
+ --color-field-secondary-background: #fff;
+ --color-field-primary-hover: #f3f4f6;
+ --color-field-secondary-hover: #f3f4f6;
+ --color-field-dropzone-background: #fff;
+ --color-field-border: #e5e7eb;
+ --color-field-dropzone-background-hover: #f9fafb;
+ --color-field-dropzone-color: #2563eb;
--color-field-label: #111827;
--color-field-input: #111827;
- --color-field-helper: #6B7280;
- --color-field-background-disabled: #F9FAFB;
- --color-field-color-disabled: #BDC1C7;
- --color-field-placeholder: #6B7280;
- --color-field-border-disabled: #F3F4F6;
- --color-field-color-error: #DC2626;
- --color-field-border-error: #FECACA;
- --color-field-background-error: #FEF2F2;
- --color-field-required: #DC2626;
+ --color-field-helper: #6b7280;
+ --color-field-background-disabled: #f9fafb;
+ --color-field-color-disabled: #bdc1c7;
+ --color-field-placeholder: #6b7280;
+ --color-field-border-disabled: #f3f4f6;
+ --color-field-color-error: #dc2626;
+ --color-field-border-error: #fecaca;
+ --color-field-background-error: #fef2f2;
+ --color-field-required: #dc2626;
/* border */
- --color-border-interactive: #2563EB;
- --color-border-subtle: #E5E7EB;
- --color-border-strong: #6B7280;
+ --color-border-interactive: #2563eb;
+ --color-border-subtle: #e5e7eb;
+ --color-border-strong: #6b7280;
--color-border-inverse: #374151;
- --color-border-disabled: #E5E7EB;
- --color-border-muted: #E5E7EB;
- --color-border-error: #DC2626;
+ --color-border-disabled: #e5e7eb;
+ --color-border-muted: #e5e7eb;
+ --color-border-error: #dc2626;
--color-border-transparent-subtle: #37415114;
- --color-border-white: #FFFFFF;
+ --color-border-white: #fff;
/* text */
--color-text-primary: #111827;
- --color-text-secondary: #4B5563;
- --color-text-tertiary: #6B7280;
- --color-text-on-color: #FFFFFF;
- --color-text-error: #DC2626;
- --color-text-error-inverse: #F87171;
- --color-text-inverse: #FFFFFF;
- --color-text-disabled: #BDC1C7;
- --color-text-on-button-disabled: #9CA3AF;
+ --color-text-secondary: #4b5563;
+ --color-text-tertiary: #6b7280;
+ --color-text-on-color: #fff;
+ --color-text-error: #dc2626;
+ --color-text-error-inverse: #f87171;
+ --color-text-inverse: #fff;
+ --color-text-disabled: #bdc1c7;
+ --color-text-on-button-disabled: #9ca3af;
/* link */
- --color-link-primary: #2563EB;
- --color-link-primary-hover: #1D4ED8;
- --color-link-inverse: #38BDF8;
- --color-link-visited: #7C3AED;
- --color-link-visited-inverse: #A78BFA;
- --color-link-inverse-hover: #7DD3FC;
+ --color-link-primary: #2563eb;
+ --color-link-primary-hover: #1d4ed8;
+ --color-link-inverse: #38bdf8;
+ --color-link-visited: #7c3aed;
+ --color-link-visited-inverse: #a78bfa;
+ --color-link-inverse-hover: #7dd3fc;
/* icon */
--color-icon-primary: #111827;
- --color-icon-secondary: #4B5563;
- --color-icon-on-color: #FFFFFF;
- --color-icon-inverse: #FFFFFF;
- --color-icon-interactive: #2563EB;
- --color-icon-on-color-disabled: #9CA3AF;
- --color-icon-disabled: #BDC1C7;
+ --color-icon-secondary: #4b5563;
+ --color-icon-on-color: #fff;
+ --color-icon-inverse: #fff;
+ --color-icon-interactive: #2563eb;
+ --color-icon-on-color-disabled: #9ca3af;
+ --color-icon-disabled: #bdc1c7;
/* support */
- --color-support-error: #DC2626;
- --color-support-success: #16A34A;
- --color-support-warning: #EAB308;
- --color-support-info: #0284C7;
- --color-support-error-inverse: #F87171;
- --color-support-success-inverse: #4ADE80;
- --color-support-warning-inverse: #FDE047;
- --color-support-info-inverse: #38BDF8;
+ --color-support-error: #dc2626;
+ --color-support-success: #16a34a;
+ --color-support-warning: #eab308;
+ --color-support-info: #0284c7;
+ --color-support-error-inverse: #f87171;
+ --color-support-success-inverse: #4ade80;
+ --color-support-warning-inverse: #fde047;
+ --color-support-info-inverse: #38bdf8;
/* button */
- --color-button-primary: #2563EB;
- --color-button-primary-hover: #1D4ED8;
- --color-button-secondary: #1F2937;
+ --color-button-primary: #2563eb;
+ --color-button-primary-hover: #1d4ed8;
+ --color-button-secondary: #1f2937;
--color-button-secondary-hover: #374151;
- --color-button-tertiary: #FFFFFF;
- --color-button-tertiary-hover: #F9FAFB;
- --color-button-danger: #DC2626;
- --color-button-danger-secondary: #DC2626;
- --color-button-danger-hover: #B91C1C;
- --color-button-disabled: #F3F4F6;
- --color-button-tertiary-border: #E5E7EB;
+ --color-button-tertiary: #fff;
+ --color-button-tertiary-hover: #f9fafb;
+ --color-button-danger: #dc2626;
+ --color-button-danger-secondary: #dc2626;
+ --color-button-danger-hover: #b91c1c;
+ --color-button-disabled: #f3f4f6;
+ --color-button-tertiary-border: #e5e7eb;
--color-button-tertiary-color: #111827;
/* focus */
- --color-focus: #2563EB;
- --color-focus-inset: #FFFFFF;
- --color-focus-inverse: #38BDF8;
+ --color-focus: #2563eb;
+ --color-focus-inset: #fff;
+ --color-focus-inverse: #38bdf8;
--color-focus-inverse-inset: #111827;
- --color-focus-error: #DC2626;
- --color-focus-border: #BFDBFE;
- --color-focus-error-border: #FECACA;
+ --color-focus-error: #dc2626;
+ --color-focus-border: #bfdbfe;
+ --color-focus-error-border: #fecaca;
/* misc */
- --color-misc-highlight: #BFDBFE;
+ --color-misc-highlight: #bfdbfe;
--color-misc-overlay: #11182780;
- --color-misc-skeleton-background: #F3F4F6;
- --color-misc-skeleton-element: #BDC1C7;
- --color-misc-popup-button-hover: #1118270D;
- --color-misc-tab-item-hover: #E5E7EB;
- --color-misc-dropdown-hover: #F3F4F6;
- --color-misc-loader-base: #1118270D;
- --color-misc-loader-color: #2563EB;
- --color-misc-progress-background: #E5E7EB;
+ --color-misc-skeleton-background: #f3f4f6;
+ --color-misc-skeleton-element: #bdc1c7;
+ --color-misc-popup-button-hover: #1118270d;
+ --color-misc-tab-item-hover: #e5e7eb;
+ --color-misc-dropdown-hover: #f3f4f6;
+ --color-misc-loader-base: #1118270d;
+ --color-misc-loader-color: #2563eb;
+ --color-misc-progress-background: #e5e7eb;
/* badge */
- --color-badge-background-gray: #F9FAFB;
- --color-badge-color-gray: #1F2937;
- --color-badge-hover-gray: #F3F4F6;
- --color-badge-border-gray: #E5E7EB;
- --color-badge-background-red: #FEF2F2;
- --color-badge-color-red: #B91C1C;
- --color-badge-hover-red: #FEE2E2;
- --color-badge-border-red: #FECACA;
- --color-badge-background-yellow: #FEFCE8;
- --color-badge-color-yellow: #A16207;
- --color-badge-hover-yellow: #FEF9C3;
- --color-badge-border-yellow: #FEF08A;
- --color-badge-hover-green: #DCFCE7;
- --color-badge-border-green: #BBF7D0;
- --color-badge-background-green: #F0FDF4;
- --color-badge-color-green: #15803D;
- --color-badge-background-sky: #F0F9FF;
- --color-badge-color-sky: #0369A1;
- --color-badge-hover-sky: #E0F2FE;
- --color-badge-border-sky: #BAE6FD;
- --color-badge-background-disabled: #F3F4F6;
- --color-badge-color-disabled: #BDC1C7;
- --color-badge-hover-disabled: #F3F4F6;
- --color-badge-border-disabled: #E5E7EB;
- --color-badge-background-important: #DC2626;
+ --color-badge-background-gray: #f9fafb;
+ --color-badge-color-gray: #1f2937;
+ --color-badge-hover-gray: #f3f4f6;
+ --color-badge-border-gray: #e5e7eb;
+ --color-badge-background-red: #fef2f2;
+ --color-badge-color-red: #b91c1c;
+ --color-badge-hover-red: #fee2e2;
+ --color-badge-border-red: #fecaca;
+ --color-badge-background-yellow: #fefce8;
+ --color-badge-color-yellow: #a16207;
+ --color-badge-hover-yellow: #fef9c3;
+ --color-badge-border-yellow: #fef08a;
+ --color-badge-hover-green: #dcfce7;
+ --color-badge-border-green: #bbf7d0;
+ --color-badge-background-green: #f0fdf4;
+ --color-badge-color-green: #15803d;
+ --color-badge-background-sky: #f0f9ff;
+ --color-badge-color-sky: #0369a1;
+ --color-badge-hover-sky: #e0f2fe;
+ --color-badge-border-sky: #bae6fd;
+ --color-badge-background-disabled: #f3f4f6;
+ --color-badge-color-disabled: #bdc1c7;
+ --color-badge-hover-disabled: #f3f4f6;
+ --color-badge-border-disabled: #e5e7eb;
+ --color-badge-background-important: #dc2626;
/* alert */
- --color-alert-background-neutral: #FFFFFF;
- --color-alert-border-neutral: #E5E7EB;
- --color-alert-background-danger: #FEF2F2;
- --color-alert-border-danger: #FECACA;
- --color-alert-background-warning: #FEFCE8;
- --color-alert-border-warning: #FEF08A;
- --color-alert-background-green: #F0FDF4;
- --color-alert-border-green: #BBF7D0;
- --color-alert-background-info: #F0F9FF;
- --color-alert-border-info: #BAE6FD;
+ --color-alert-background-neutral: #fff;
+ --color-alert-border-neutral: #e5e7eb;
+ --color-alert-background-danger: #fef2f2;
+ --color-alert-border-danger: #fecaca;
+ --color-alert-background-warning: #fefce8;
+ --color-alert-border-warning: #fef08a;
+ --color-alert-background-green: #f0fdf4;
+ --color-alert-border-green: #bbf7d0;
+ --color-alert-background-info: #f0f9ff;
+ --color-alert-border-info: #bae6fd;
/* tab */
- --color-tab-background: #F3F4F6;
- --color-tab-border: #E5E7EB;
+ --color-tab-background: #f3f4f6;
+ --color-tab-border: #e5e7eb;
/* tooltip */
- --color-tooltip-background-light: #FFFFFF;
+ --color-tooltip-background-light: #fff;
--color-tooltip-background-dark: #111827;
/* toggle */
- --color-toggle-off: #E5E7EB;
- --color-toggle-on: #2563EB;
- --color-toggle-dial-background: #FFFFFF;
- --color-toggle-off-hover: #BDC1C7;
- --color-toggle-off-border: #BDC1C7;
- --color-toggle-on-hover: #3B82F6;
- --color-toggle-on-border: #60A5FA;
- --color-toggle-on-disabled: #EFF6FF;
- --color-toggle-off-disabled: #F3F4F6;
+ --color-toggle-off: #e5e7eb;
+ --color-toggle-on: #2563eb;
+ --color-toggle-dial-background: #fff;
+ --color-toggle-off-hover: #bdc1c7;
+ --color-toggle-off-border: #bdc1c7;
+ --color-toggle-on-hover: #3b82f6;
+ --color-toggle-on-border: #60a5fa;
+ --color-toggle-on-disabled: #eff6ff;
+ --color-toggle-off-disabled: #f3f4f6;
/* box-shadow — overrides v4 default --shadow-xs and adds custom scale */
- --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
- --shadow-soft-shadow-sm: 0px 6px 32px -12px rgba(149, 160, 178, 0.12);
- --shadow-soft-shadow: 0px 8px 32px -12px rgba(149, 160, 178, 0.16);
- --shadow-soft-shadow-md: 0px 10px 32px -12px rgba(149, 160, 178, 0.2);
- --shadow-soft-shadow-lg: 0px 12px 32px -12px rgba(149, 160, 178, 0.24);
- --shadow-soft-shadow-xl: 0px 16px 32px -12px rgba(149, 160, 178, 0.32);
- --shadow-soft-shadow-2xl: 0px 24px 64px -12px rgba(149, 160, 178, 0.32);
- --shadow-soft-shadow-inner: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
- --shadow-toggle-disabled: 1px 1px 2px 0px rgba(0, 0, 0, 0.1) inset;
+ --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+ --shadow-soft-shadow-sm: 0 6px 32px -12px rgba(149, 160, 178, 0.12);
+ --shadow-soft-shadow: 0 8px 32px -12px rgba(149, 160, 178, 0.16);
+ --shadow-soft-shadow-md: 0 10px 32px -12px rgba(149, 160, 178, 0.2);
+ --shadow-soft-shadow-lg: 0 12px 32px -12px rgba(149, 160, 178, 0.24);
+ --shadow-soft-shadow-xl: 0 16px 32px -12px rgba(149, 160, 178, 0.32);
+ --shadow-soft-shadow-2xl: 0 24px 64px -12px rgba(149, 160, 178, 0.32);
+ --shadow-soft-shadow-inner: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+ --shadow-toggle-disabled: 1px 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
/* font-size */
--text-tiny: 0.625rem;
@@ -212,41 +212,50 @@
@custom-variant not-rtl (&:not([dir="rtl"], [dir="rtl"] *));
/* v3 borderWidth {0.5} parity, incl. per-side variants. */
-@utility border-0\.5 {
+@utility border-0\0.5 {
border-width: 0.5px;
}
-@utility border-t-0\.5 {
+
+@utility border-t-0\0.5 {
border-top-width: 0.5px;
}
-@utility border-b-0\.5 {
+
+@utility border-b-0\0.5 {
border-bottom-width: 0.5px;
}
-@utility border-l-0\.5 {
+
+@utility border-l-0\0.5 {
border-left-width: 0.5px;
}
-@utility border-r-0\.5 {
+
+@utility border-r-0\0.5 {
border-right-width: 0.5px;
}
-@utility border-x-0\.5 {
+
+@utility border-x-0\0.5 {
border-inline-width: 0.5px;
}
-@utility border-y-0\.5 {
+
+@utility border-y-0\0.5 {
border-block-width: 0.5px;
}
/* v3 divide 0.5 parity; shapes mirror v4 divide-* emission. */
-@utility divide-y-0\.5 {
+@utility divide-y-0\0.5 {
:where(& > :not(:last-child)) {
--tw-divide-y-reverse: 0;
+
border-bottom-style: var(--tw-border-style);
border-top-style: var(--tw-border-style);
border-top-width: calc(0.5px * var(--tw-divide-y-reverse));
border-bottom-width: calc(0.5px * calc(1 - var(--tw-divide-y-reverse)));
}
}
-@utility divide-x-0\.5 {
+
+@utility divide-x-0\0.5 {
:where(& > :not(:last-child)) {
--tw-divide-x-reverse: 0;
+
border-inline-style: var(--tw-border-style);
border-inline-start-width: calc(0.5px * var(--tw-divide-x-reverse));
border-inline-end-width: calc(0.5px * calc(1 - var(--tw-divide-x-reverse)));
From f76013ad97ef53b66a79f4b4d0c903cff16e59f5 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 3 Aug 2026 13:04:25 +0600
Subject: [PATCH 07/14] Revert TailwindCSS v4 migration (PR #470)
This reverts merge commit 5e8cd34c (-m 1) so the upcoming EditorInput
release ships without the breaking Tailwind v4 changes. Re-apply after
release by reverting this commit.
---
README.md | 585 ++++++--------
changelog.txt | 3 -
package-lock.json | 740 +++++++++---------
package.json | 11 +-
postcss.config.cjs | 3 +-
src/components/alert/alert.tsx | 4 +-
.../area-chart/area-chart.stories.tsx | 4 +-
.../area-chart/chart-legend-content.tsx | 2 +-
.../bar-chart/bar-chart.stories.tsx | 10 +-
.../bar-chart/chart-legend-content.tsx | 2 +-
src/components/breadcrumb/breadcrumb.tsx | 2 +-
src/components/button-group/button-group.tsx | 4 +-
src/components/button/button.tsx | 8 +-
src/components/checkbox/checkbox.tsx | 6 +-
.../datepicker/datepicker-component.tsx | 4 +-
src/components/dialog/dialog.tsx | 2 +-
src/components/drawer/drawer-close-button.tsx | 2 +-
src/components/dropzone/dropzone.tsx | 8 +-
.../editor-input/editor-input-style.ts | 4 +-
src/components/editor-input/editor-input.tsx | 2 +-
src/components/file-preview/file-preview.tsx | 8 +-
.../hamburger-menu/hamburger-menu.tsx | 4 +-
src/components/input/input.tsx | 4 +-
src/components/menu-item/menu-item.tsx | 4 +-
src/components/pagination/pagination.tsx | 2 +-
.../pie-chart/chart-legend-content.tsx | 2 +-
.../pie-chart/pie-chart.stories.tsx | 4 +-
src/components/radio-button/radio-button.tsx | 6 +-
src/components/radio-button/styles.ts | 2 +-
src/components/search/search.tsx | 6 +-
src/components/search/styles.ts | 6 +-
src/components/select/component-style.ts | 2 +-
src/components/select/select.tsx | 2 +-
src/components/switch/switch.tsx | 2 +-
src/components/tabs/tabs.tsx | 4 +-
src/components/textarea/textarea.tsx | 4 +-
src/components/toaster/toaster.tsx | 4 +-
src/components/toaster/utils.tsx | 4 +-
src/tailwind.css | 5 +-
.../admin-settings-Spectra.stories.jsx | 24 +-
.../admin-settings-SureCart.stories.jsx | 18 +-
.../admin-settings-SureRank.stories.jsx | 18 +-
.../dashboard-astra.stories.jsx | 22 +-
.../dashboard-spectra.stories.jsx | 24 +-
.../onboarding-backup.stories.jsx | 2 +-
.../onboarding-connect.stories.jsx | 2 +-
.../onboarding-done.stories.jsx | 2 +-
.../onboarding-smtp-connect.stories.jsx | 2 +-
.../onboarding-import.stories.jsx | 2 +-
.../onboarding-profile.stories.jsx | 2 +-
.../onboarding-setup-done.stories.jsx | 2 +-
.../onboarding-setup-tools.stories.jsx | 2 +-
.../onboarding-social.stories.jsx | 2 +-
.../onboarding-spam.stories.jsx | 2 +-
.../onboarding-welcome.stories.jsx | 2 +-
.../sureforms-dashboard.stories.jsx | 20 +-
.../uae-dashboard/uae-dashboard.stories.jsx | 28 +-
.../uae-widgets/uae-widgets.stories.jsx | 18 +-
src/theme/theme.css | 263 -------
src/utilities/withTW.js | 13 -
tailwind.config.js | 6 +
version.json | 2 +-
vite.config.ts | 14 -
63 files changed, 814 insertions(+), 1159 deletions(-)
delete mode 100644 src/theme/theme.css
create mode 100644 tailwind.config.js
diff --git a/README.md b/README.md
index 23865c36..3c85c599 100644
--- a/README.md
+++ b/README.md
@@ -6,99 +6,6 @@ Learn how to use @bsf/force-ui components to quickly and easily create elegant a
<br />
-## Migrating to v2.0.0 (Tailwind CSS v4)
-
-> **Breaking change.** `@bsf/force-ui@2.0.0` targets **Tailwind CSS v4**, which is CSS-first. The JS `withTW()` helper is **deprecated** in favor of a shipped CSS theme, and every consumer must update its CSS entry and PostCSS setup. `withTW()` still works via Tailwind's legacy `@config` path but will be removed in `3.0.0`.
->
-> _@since x.x.x_
-
-**Before (v1.x / Tailwind v3):**
-
-```js
-// tailwind.config.js
-const withTW = require( '@bsf/force-ui/withTW' );
-
-module.exports = withTW( {
- content: [ './src/**/*.{js,jsx}' ],
- theme: { extend: { colors: { 'button-primary': '#6B21A8' } } },
-} );
-```
-
-```css
-/* your CSS entry */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-```js
-// postcss.config.js
-module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };
-```
-
-**After (v2.x / Tailwind v4):**
-
-```css
-/* your CSS entry — theme.css carries the Force UI design tokens */
-@import "tailwindcss";
-@import "@bsf/force-ui/theme.css";
-
-/* Scan Force UI's shipped components + your own source */
-@source "../node_modules/@bsf/force-ui/dist";
-
-/* Override any Force UI token by redeclaring it */
-@theme {
- --color-button-primary: #6B21A8;
-}
-```
-
-```js
-// postcss.config.js — autoprefixer is built in; nesting/import are built in
-module.exports = { plugins: { '@tailwindcss/postcss': {} } };
-```
-
-You can usually **delete `tailwind.config.js`** (Tailwind v4 auto-detects sources). If you must keep a JS config, load it explicitly with `@config "./tailwind.config.js";` in your CSS — but note the keys below are gone.
-
-### Upgrade checklist
-
-1. **Dependencies**: `@bsf/force-ui@^2`, `tailwindcss@^4`, add `@tailwindcss/postcss`; remove `autoprefixer` and `@tailwindcss/container-queries` (both built in). If you depend on `tailwind-merge` directly, bump it to `^3` — v2 doesn't understand v4's trailing-`!` syntax and can drop classes at runtime.
-2. **CSS entry + PostCSS**: as shown above. Delete `tailwind.config.js`; move theme overrides into `@theme`.
-3. **Templates**: run `npx @tailwindcss/upgrade`, or manually rename `shadow-sm→shadow-xs`, `shadow→shadow-sm`, `rounded-sm→rounded-xs`, `rounded→rounded-sm`, `outline-none→outline-hidden`, and move the important modifier from prefix to suffix (`!p-0` → `p-0!`).
-4. **`@apply` outside the entry**: any other stylesheet using `@apply` needs `@reference "<path-to-your-entry>.css";` at the top (registers utilities, emits nothing).
-5. **`safelist`** → `@source inline("class-a class-b …")` in the entry.
-
-### WordPress / webpack consumers (wp-scripts)
-
-Hard-won gotchas if your build is `@wordpress/scripts` (webpack) inside wp-admin:
-
-- **Build the Tailwind entry in a standalone PostCSS pass, not through webpack.** css-loader splits v4's single-pass compilation (the `@theme` gets separated from utility generation), so classes silently fail to generate. One extra line in your build script fixes it: `postcss src/tailwind.css -o build/tailwind.css`, enqueued once.
-- **Never put your CSS in `@layer` inside wp-admin.** WP core's CSS is unlayered, and unlayered always beats layered regardless of specificity — responsive utilities and resets will silently lose.
-- **Preflight off means browser defaults leak.** Add this once in your entry (scoped to your app root):
-
-```css
-:where(#your-root) *, :where(#your-root) ::before, :where(#your-root) ::after {
- border-width: 0;
- border-style: solid;
- border-color: var(--color-border-subtle, #E5E7EB); /* v4 default is currentColor */
-}
-```
-
-- **`space-x/y-*` changed in v4** (zero-specificity selector, margins on first child): legacy element resets like `#root h1–h6 { margin: 0 }` now override them, and first-child margins get trampled. Prefer `flex flex-col gap-*`; for a drop-in compat shim that restores the v3 selector shape, see the `postcss-v3-space` plugin in SureRank's `postcss.config.js`.
-
-**Config keys removed in Tailwind v4** (drop or replace them):
-
-| v3 key | v4 replacement |
-| --- | --- |
-| `corePlugins: { preflight: false }` | Import layers selectively, or don't rely on Force UI to toggle preflight. `theme.css` emits no preflight. |
-| `important: '<selector>'` | Selector-scoped important is gone. Scope via a wrapper element/prefix or `@custom-variant`. |
-| `variants: { extend: {} }` | All variants are always available; remove the block. |
-| `safelist: [...]` | Use `@source inline("...")` in CSS. |
-| `plugins: [require('@tailwindcss/container-queries')]` | Container queries are built into v4 core; drop the plugin. |
-
-The `not-rtl` variant ships inside `theme.css` (`@custom-variant not-rtl`), so it keeps working unchanged.
-
-<br />
-
1. Install `@bsf/force-ui`.
Force UI library can be installed using npm package manager. Since this library is still in it's alpha phase, we need to use the staging branch.
@@ -107,7 +14,7 @@ Using Force UI as a dependency in package.json -
```json
"dependencies": {
- "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#2.0.0"
+ "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.8.0"
}
```
@@ -121,65 +28,265 @@ npm install
Or you can directly run the following command to install the package -
```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#2.0.0
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.8.0
```
<br />
-2. Wire up Tailwind CSS v4 (CSS-first). Import Tailwind and the Force UI theme in your CSS entry, and point Tailwind's source scanning at the shipped components:
-
-```css
-/* your CSS entry (e.g. src/index.css) */
-@import "tailwindcss";
-@import "@bsf/force-ui/theme.css";
-
-/* Scan Force UI's shipped components so their classes are generated */
-@source "../node_modules/@bsf/force-ui/dist";
-```
-
-Use the Tailwind v4 PostCSS plugin (autoprefixer, nesting and import are all built in now, so you no longer need them):
+2. Once you install @bsf/force-ui you need to wrap your tailwind css configurations with the `withTW()` function coming from @bsf/force-ui/withTW.
```js
-// postcss.config.js
-module.exports = { plugins: { '@tailwindcss/postcss': {} } };
-```
+const withTW = require( '@bsf/force-ui/withTW' );
-> Tailwind v4 auto-detects sources, so a `tailwind.config.js` is no longer required. If you still need a JS config (e.g. custom plugins), load it explicitly with `@config "./tailwind.config.js";` in your CSS — but note that `corePlugins`, selector-string `important`, `variants` and `safelist` were removed in v4 (see the migration table above). The deprecated `withTW()` helper remains available for that legacy path only.
+module.exports = withTW( {
+ content: [ './src/**/*.{js, jsx}' ],
+ theme: {
+ extend: {
+ colors: {
+ 'button-primary': '#6B21A8',
+ 'button-primary-hover': '#7E22CE',
+ 'brand-800': '#6B21A8',
+ 'brand-50': '#FAF5FF',
+ 'border-interactive': '#6B21A8',
+ focus: '#9333EA',
+ 'focus-border': '#D8B4FE',
+ 'toggle-on': '#6B21A8',
+ 'toggle-on-border': '#C084FC',
+ 'toggle-on-hover': '#A855F7',
+ },
+ fontSize: {
+ xxs: '0.6875rem', // 11px
+ },
+ lineHeight: {
+ 2.6: '0.6875rem', // 11px
+ },
+ boxShadow: {
+ 'content-wrapper':
+ '0px 1px 1px 0px #0000000F, 0px 1px 2px 0px #0000001A',
+ },
+ },
+ },
+ plugins: [],
+ corePlugins: {
+ preflight: false,
+ },
+ important: '.surerank-styles',
+} );
+```
<br />
-3. Override the theme (optional). Force UI ships its design tokens as Tailwind v4 `@theme` variables in `@bsf/force-ui/theme.css`. Override any token by redeclaring it in your own `@theme` block after the import:
-
-```css
-@import "tailwindcss";
-@import "@bsf/force-ui/theme.css";
-
-@theme {
- /* Recolor the brand — every button/toggle/focus token derives from these */
- --color-button-primary: #6B21A8;
- --color-button-primary-hover: #7E22CE;
- --color-brand-primary-600: #6B21A8;
- --color-border-interactive: #6B21A8;
- --color-focus: #9333EA;
- --color-focus-border: #D8B4FE;
- --color-toggle-on: #6B21A8;
-
- /* Add your own tokens too */
- --text-xxs: 0.6875rem; /* 11px */
- --shadow-content-wrapper: 0px 1px 1px 0px #0000000F, 0px 1px 2px 0px #0000001A;
-}
-```
-
-Token names map to CSS variables by namespace:
+3. @bsf/force-ui comes with a default tailwind theme settings that set's the default theme/styles for components or to provide your own theme/styles to your components. You can override these give below variables in your tailwind.config.js file.
-| Token type | Variable prefix | Example |
-| --- | --- | --- |
-| Colors | `--color-*` | `--color-brand-primary-600` |
-| Box shadows | `--shadow-*` | `--shadow-soft-shadow` |
-| Font sizes | `--text-*` | `--text-tiny` |
-| Letter spacing | `--tracking-*` | `--tracking-2` |
+```jsx
+theme: {
+ extend: {
+ colors: {
+ // brand
+ 'brand-background-50': '#EFF6FF',
+ 'brand-background-hover-100': '#DBEAFE',
+ 'brand-200': '#BFDBFE',
+ 'brand-border-300': '#93C5FD',
+ 'brand-400': '#60A5FA',
+ 'brand-500': '#3B82F6',
+ 'brand-primary-600': '#2563EB',
+ 'brand-hover-700': '#1D4ED8',
+ 'brand-800': '#1E40AF',
+ 'brand-900': '#1E3A8A',
+ 'brand-text-950': '#172554',
+ // background
+ 'background-primary': '#FFFFFF',
+ 'background-secondary': '#F3F4F6',
+ 'background-inverse': '#111827',
+ 'background-brand': '#2563EB',
+ 'background-important': '#DC2626',
+ // field
+ 'field-primary-background': '#F9FAFB',
+ 'field-secondary-background': '#FFFFFF',
+ 'field-primary-hover': '#F3F4F6',
+ 'field-secondary-hover': '#F3F4F6',
+ 'field-dropzone-background': '#FFFFFF',
+ 'field-border': '#E5E7EB',
+ 'field-dropzone-background-hover': '#F9FAFB',
+ 'field-dropzone-color': '#2563EB',
+ 'field-label': '#111827',
+ 'field-input': '#111827',
+ 'field-helper': '#9CA3AF',
+ 'field-background-disabled': '#F9FAFB',
+ 'field-color-disabled': '#D1D5DB',
+ 'field-placeholder': '#6B7280',
+ 'field-border-disabled': '#F3F4F6',
+ 'field-color-error': '#DC2626',
+ 'field-border-error': '#FECACA',
+ 'field-background-error': '#FEF2F2',
+ 'field-required': '#DC2626',
+ // border
+ 'border-interactive': '#2563EB',
+ 'border-subtle': '#E5E7EB',
+ 'border-strong': '#6B7280',
+ 'border-inverse': '#374151',
+ 'border-disabled': '#E5E7EB',
+ 'border-muted': '#E5E7EB',
+ 'border-error': '#DC2626',
+ 'border-transparent-subtle': '#37415114',
+ 'border-white': '#FFFFFF',
+ // text
+ 'text-primary': '#111827',
+ 'text-secondary': '#4B5563',
+ 'text-tertiary': '#9CA3AF',
+ 'text-on-color': '#FFFFFF',
+ 'text-error': '#DC2626',
+ 'text-error-inverse': '#F87171',
+ 'text-inverse': '#FFFFFF',
+ 'text-disabled': '#D1D5DB',
+ 'text-on-button-disabled': '#9CA3AF',
+ // link
+ 'link-primary': '#2563EB',
+ 'link-primary-hover': '#1D4ED8',
+ 'link-inverse': '#38BDF8',
+ 'link-visited': '#7C3AED',
+ 'link-visited-inverse': '#A78BFA',
+ 'link-inverse-hover': '#7DD3FC',
+ // icon
+ 'icon-primary': '#111827',
+ 'icon-secondary': '#4B5563',
+ 'icon-on-color': '#FFFFFF',
+ 'icon-inverse': '#FFFFFF',
+ 'icon-interactive': '#2563EB',
+ 'icon-on-color-disabled': '#9CA3AF',
+ 'icon-disabled': '#D1D5DB',
+ // support
+ 'support-error': '#DC2626',
+ 'support-success': '#16A34A',
+ 'support-warning': '#EAB308',
+ 'support-info': '#0284C7',
+ 'support-error-inverse': '#F87171',
+ 'support-success-inverse': '#4ADE80',
+ 'support-warning-inverse': '#FDE047',
+ 'support-info-inverse': '#38BDF8',
+ // button
+ 'button-primary': '#2563EB',
+ 'button-primary-hover': '#1D4ED8',
+ 'button-secondary': '#1F2937',
+ 'button-secondary-hover': '#374151',
+ 'button-tertiary': '#FFFFFF',
+ 'button-tertiary-hover': '#F9FAFB',
+ 'button-danger': '#DC2626',
+ 'button-danger-secondary': '#DC2626',
+ 'button-danger-hover': '#B91C1C',
+ 'button-disabled': '#F3F4F6',
+ 'button-tertiary-border': '#E5E7EB',
+ 'button-tertiary-color': '#111827',
+ // focus
+ focus: '#2563EB',
+ 'focus-inset': '#FFFFFF',
+ 'focus-inverse': '#38BDF8',
+ 'focus-inverse-inset': '#111827',
+ 'focus-error': '#DC2626',
+ 'focus-border': '#BFDBFE',
+ 'focus-error-border': '#FECACA',
+ // misc
+ 'misc-highlight': '#BFDBFE',
+ 'misc-overlay': '#11182780',
+ 'misc-skeleton-background': '#F3F4F6',
+ 'misc-skeleton-element': '#D1D5DB',
+ 'misc-popup-button-hover': '#1118270D',
+ 'misc-tab-item-hover': '#E5E7EB',
+ 'misc-dropdown-hover': '#F3F4F6',
+ 'misc-loader-base': '#1118270D',
+ 'misc-loader-color': '#2563EB',
+ 'misc-progress-background': '#E5E7EB',
+ // badge
+ 'badge-background-gray': '#F9FAFB',
+ 'badge-color-gray': '#1F2937',
+ 'badge-hover-gray': '#F3F4F6',
+ 'badge-border-gray': '#E5E7EB',
+ 'badge-background-red': '#FEF2F2',
+ 'badge-color-red': '#B91C1C',
+ 'badge-hover-red': '#FEE2E2',
+ 'badge-border-red': '#FECACA',
+ 'badge-background-yellow': '#FEFCE8',
+ 'badge-color-yellow': '#A16207',
+ 'badge-hover-yellow': '#FEF9C3',
+ 'badge-border-yellow': '#FEF08A',
+ 'badge-hover-green': '#DCFCE7',
+ 'badge-border-green': '#BBF7D0',
+ 'badge-background-green': '#F0FDF4',
+ 'badge-color-green': '#15803D',
+ 'badge-background-sky': '#F0F9FF',
+ 'badge-color-sky': '#0369A1',
+ 'badge-hover-sky': '#E0F2FE',
+ 'badge-border-sky': '#BAE6FD',
+ 'badge-background-disabled': '#F3F4F6',
+ 'badge-color-disabled': '#D1D5DB',
+ 'badge-hover-disabled': '#F3F4F6',
+ 'badge-border-disabled': '#E5E7EB',
+ 'badge-background-important': '#DC2626',
+ // alert
+ 'alert-background-neutral': '#FFFFFF',
+ 'alert-border-neutral': '#E5E7EB',
+ 'alert-background-danger': '#FEF2F2',
+ 'alert-border-danger': '#FECACA',
+ 'alert-background-warning': '#FEFCE8',
+ 'alert-border-warning': '#FEF08A',
+ 'alert-background-green': '#F0FDF4',
+ 'alert-border-green': '#BBF7D0',
+ 'alert-background-info': '#F0F9FF',
+ 'alert-border-info': '#BAE6FD',
+ // tab
+ 'tab-background': '#F3F4F6',
+ 'tab-border': '#E5E7EB',
+ // tooltip
+ 'tooltip-background-light': '#FFFFFF',
+ 'tooltip-background-dark': '#111827',
+ // toggle
+ 'toggle-off': '#E5E7EB',
+ 'toggle-on': '#2563EB',
+ 'toggle-dial-background': '#FFFFFF',
+ 'toggle-off-hover': '#D1D5DB',
+ 'toggle-off-border': '#D1D5DB',
+ 'toggle-on-hover': '#3B82F6',
+ 'toggle-on-border': '#60A5FA',
+ 'toggle-off-disabled': '#F3F4F6',
+ },
+ width: {
+ '1/7': '14.2857143%',
+ '1/8': '12.5%',
+ '1/9': '11.1111111%',
+ '1/10': '10%',
+ '1/11': '9.0909091%',
+ '1/12': '8.3333333%',
+ },
+ boxShadow: {
+ 'soft-shadow-sm':
+ '0px 6px 32px -12px rgba(149, 160, 178, 0.12)',
+ 'soft-shadow': '0px 8px 32px -12px rgba(149, 160, 178, 0.16)',
+ 'soft-shadow-md':
+ '0px 10px 32px -12px rgba(149, 160, 178, 0.2)',
+ 'soft-shadow-lg':
+ '0px 12px 32px -12px rgba(149, 160, 178, 0.24)',
+ 'soft-shadow-xl':
+ '0px 16px 32px -12px rgba(149, 160, 178, 0.32)',
+ 'soft-shadow-2xl':
+ '0px 24px 64px -12px rgba(149, 160, 178, 0.32)',
+ 'soft-shadow-inner': '0px 1px 1px 0px rgba(0, 0, 0, 0.05)',
+ },
+ fontSize: {
+ tiny: '0.625rem',
+ },
+ spacing: {
+ 120: '30rem', // 480px
+ 95: '23.75rem', // 380px
+ 141.5: '35.375rem', // 566px
+ 188: '47rem', // 752px
+ },
+ zIndex: {
+ 999999: '999999',
+ },
+ },
+}
-The complete list of shipped tokens lives in [`@bsf/force-ui/theme.css`](./src/theme/theme.css). Spacing, sizing, line-height, z-index and fraction-width utilities are not declared as tokens — Tailwind v4 generates them dynamically (e.g. `p-4.5`, `w-1/7`, `leading-9.5`) at the same values as before. The `not-rtl` variant ships in `theme.css` and works out of the box.
+```
<br />
@@ -195,202 +302,6 @@ export default function Example() {
<br />
-## Theme Tokens Reference
-
-Force UI ships all its design tokens as Tailwind v4 `@theme` variables in `@bsf/force-ui/theme.css`. The variable name **is** the utility name — e.g. `--color-brand-primary-600` powers `bg-brand-primary-600`, `text-brand-primary-600`, `border-brand-primary-600`, and so on.
-
-To customize, copy the block below into your CSS entry (after the imports) and change the values you need — you only have to keep the lines you actually override:
-
-<details>
-<summary><strong>Show all tokens (copy & modify)</strong></summary>
-
-```css
-@theme {
- /* brand */
- --color-brand-background-50: #EFF6FF;
- --color-brand-background-hover-100: #DBEAFE;
- --color-brand-200: #BFDBFE;
- --color-brand-border-300: #93C5FD;
- --color-brand-400: #60A5FA;
- --color-brand-500: #3B82F6;
- --color-brand-primary-600: #2563EB;
- --color-brand-hover-700: #1D4ED8;
- --color-brand-800: #1E40AF;
- --color-brand-900: #1E3A8A;
- --color-brand-text-950: #172554;
- /* background */
- --color-background-primary: #FFFFFF;
- --color-background-secondary: #F3F4F6;
- --color-background-inverse: #111827;
- --color-background-brand: #2563EB;
- --color-background-important: #DC2626;
- /* field */
- --color-field-primary-background: #F9FAFB;
- --color-field-secondary-background: #FFFFFF;
- --color-field-primary-hover: #F3F4F6;
- --color-field-secondary-hover: #F3F4F6;
- --color-field-dropzone-background: #FFFFFF;
- --color-field-border: #E5E7EB;
- --color-field-dropzone-background-hover: #F9FAFB;
- --color-field-dropzone-color: #2563EB;
- --color-field-label: #111827;
- --color-field-input: #111827;
- --color-field-helper: #6B7280;
- --color-field-background-disabled: #F9FAFB;
- --color-field-color-disabled: #BDC1C7;
- --color-field-placeholder: #6B7280;
- --color-field-border-disabled: #F3F4F6;
- --color-field-color-error: #DC2626;
- --color-field-border-error: #FECACA;
- --color-field-background-error: #FEF2F2;
- --color-field-required: #DC2626;
- /* border */
- --color-border-interactive: #2563EB;
- --color-border-subtle: #E5E7EB;
- --color-border-strong: #6B7280;
- --color-border-inverse: #374151;
- --color-border-disabled: #E5E7EB;
- --color-border-muted: #E5E7EB;
- --color-border-error: #DC2626;
- --color-border-transparent-subtle: #37415114;
- --color-border-white: #FFFFFF;
- /* text */
- --color-text-primary: #111827;
- --color-text-secondary: #4B5563;
- --color-text-tertiary: #6B7280;
- --color-text-on-color: #FFFFFF;
- --color-text-error: #DC2626;
- --color-text-error-inverse: #F87171;
- --color-text-inverse: #FFFFFF;
- --color-text-disabled: #BDC1C7;
- --color-text-on-button-disabled: #9CA3AF;
- /* link */
- --color-link-primary: #2563EB;
- --color-link-primary-hover: #1D4ED8;
- --color-link-inverse: #38BDF8;
- --color-link-visited: #7C3AED;
- --color-link-visited-inverse: #A78BFA;
- --color-link-inverse-hover: #7DD3FC;
- /* icon */
- --color-icon-primary: #111827;
- --color-icon-secondary: #4B5563;
- --color-icon-on-color: #FFFFFF;
- --color-icon-inverse: #FFFFFF;
- --color-icon-interactive: #2563EB;
- --color-icon-on-color-disabled: #9CA3AF;
- --color-icon-disabled: #BDC1C7;
- /* support */
- --color-support-error: #DC2626;
- --color-support-success: #16A34A;
- --color-support-warning: #EAB308;
- --color-support-info: #0284C7;
- --color-support-error-inverse: #F87171;
- --color-support-success-inverse: #4ADE80;
- --color-support-warning-inverse: #FDE047;
- --color-support-info-inverse: #38BDF8;
- /* button */
- --color-button-primary: #2563EB;
- --color-button-primary-hover: #1D4ED8;
- --color-button-secondary: #1F2937;
- --color-button-secondary-hover: #374151;
- --color-button-tertiary: #FFFFFF;
- --color-button-tertiary-hover: #F9FAFB;
- --color-button-danger: #DC2626;
- --color-button-danger-secondary: #DC2626;
- --color-button-danger-hover: #B91C1C;
- --color-button-disabled: #F3F4F6;
- --color-button-tertiary-border: #E5E7EB;
- --color-button-tertiary-color: #111827;
- /* focus */
- --color-focus: #2563EB;
- --color-focus-inset: #FFFFFF;
- --color-focus-inverse: #38BDF8;
- --color-focus-inverse-inset: #111827;
- --color-focus-error: #DC2626;
- --color-focus-border: #BFDBFE;
- --color-focus-error-border: #FECACA;
- /* misc */
- --color-misc-highlight: #BFDBFE;
- --color-misc-overlay: #11182780;
- --color-misc-skeleton-background: #F3F4F6;
- --color-misc-skeleton-element: #BDC1C7;
- --color-misc-popup-button-hover: #1118270D;
- --color-misc-tab-item-hover: #E5E7EB;
- --color-misc-dropdown-hover: #F3F4F6;
- --color-misc-loader-base: #1118270D;
- --color-misc-loader-color: #2563EB;
- --color-misc-progress-background: #E5E7EB;
- /* badge */
- --color-badge-background-gray: #F9FAFB;
- --color-badge-color-gray: #1F2937;
- --color-badge-hover-gray: #F3F4F6;
- --color-badge-border-gray: #E5E7EB;
- --color-badge-background-red: #FEF2F2;
- --color-badge-color-red: #B91C1C;
- --color-badge-hover-red: #FEE2E2;
- --color-badge-border-red: #FECACA;
- --color-badge-background-yellow: #FEFCE8;
- --color-badge-color-yellow: #A16207;
- --color-badge-hover-yellow: #FEF9C3;
- --color-badge-border-yellow: #FEF08A;
- --color-badge-hover-green: #DCFCE7;
- --color-badge-border-green: #BBF7D0;
- --color-badge-background-green: #F0FDF4;
- --color-badge-color-green: #15803D;
- --color-badge-background-sky: #F0F9FF;
- --color-badge-color-sky: #0369A1;
- --color-badge-hover-sky: #E0F2FE;
- --color-badge-border-sky: #BAE6FD;
- --color-badge-background-disabled: #F3F4F6;
- --color-badge-color-disabled: #BDC1C7;
- --color-badge-hover-disabled: #F3F4F6;
- --color-badge-border-disabled: #E5E7EB;
- --color-badge-background-important: #DC2626;
- /* alert */
- --color-alert-background-neutral: #FFFFFF;
- --color-alert-border-neutral: #E5E7EB;
- --color-alert-background-danger: #FEF2F2;
- --color-alert-border-danger: #FECACA;
- --color-alert-background-warning: #FEFCE8;
- --color-alert-border-warning: #FEF08A;
- --color-alert-background-green: #F0FDF4;
- --color-alert-border-green: #BBF7D0;
- --color-alert-background-info: #F0F9FF;
- --color-alert-border-info: #BAE6FD;
- /* tab */
- --color-tab-background: #F3F4F6;
- --color-tab-border: #E5E7EB;
- /* tooltip */
- --color-tooltip-background-light: #FFFFFF;
- --color-tooltip-background-dark: #111827;
- /* toggle */
- --color-toggle-off: #E5E7EB;
- --color-toggle-on: #2563EB;
- --color-toggle-dial-background: #FFFFFF;
- --color-toggle-off-hover: #BDC1C7;
- --color-toggle-off-border: #BDC1C7;
- --color-toggle-on-hover: #3B82F6;
- --color-toggle-on-border: #60A5FA;
- --color-toggle-on-disabled: #EFF6FF;
- --color-toggle-off-disabled: #F3F4F6;
- /* box-shadow — overrides v4 default --shadow-xs and adds custom scale */
- --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
- --shadow-soft-shadow-sm: 0px 6px 32px -12px rgba(149, 160, 178, 0.12);
- --shadow-soft-shadow: 0px 8px 32px -12px rgba(149, 160, 178, 0.16);
- --shadow-soft-shadow-md: 0px 10px 32px -12px rgba(149, 160, 178, 0.2);
- --shadow-soft-shadow-lg: 0px 12px 32px -12px rgba(149, 160, 178, 0.24);
- --shadow-soft-shadow-xl: 0px 16px 32px -12px rgba(149, 160, 178, 0.32);
- --shadow-soft-shadow-2xl: 0px 24px 64px -12px rgba(149, 160, 178, 0.32);
- --shadow-soft-shadow-inner: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
- --shadow-toggle-disabled: 1px 1px 2px 0px rgba(0, 0, 0, 0.1) inset;
- /* font-size */
- --text-tiny: 0.625rem;
- /* letter-spacing */
- --tracking-2: 0.125em;
-}
-```
-</details>
-
## MCP Setup
Force UI provides an MCP server that gives AI assistants accurate component usage context correct props, patterns, and examples. So you get reliable implementations without guesswork.
diff --git a/changelog.txt b/changelog.txt
index 2d0057f9..28ed3f08 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,6 +1,3 @@
-Version 2.0.0 - 2nd July, 2026
-- New: Migrated to TailwindCSS v4 (CSS-first) — the theme now ships as `@bsf/force-ui/theme.css` and the `withTW()` helper is deprecated; see the README migration guide for consumer upgrade steps (breaking).
-
Version 1.8.0 - 17th July, 2026
- New: Atom - File Picker: Added a standalone file upload component that displays the selected file name and supports a controlled value and an optional clear action.
- New: Atom - Select: Added `inlineSearch` prop that renders the search input inside the trigger instead of the dropdown. Selected items render as badges (multiple) or as the input value (single). Mutually exclusive with `combobox`; `inlineSearch` wins when both are passed.
diff --git a/package-lock.json b/package-lock.json
index 9ecdcc6a..a172425f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@bsf/force-ui",
- "version": "2.0.0",
+ "version": "1.8.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@bsf/force-ui",
- "version": "2.0.0",
+ "version": "1.8.0",
"hasInstallScript": true,
"license": "ISC",
"dependencies": {
@@ -28,7 +28,8 @@
"react-day-picker": "^9.1.3",
"recharts": "^2.13.0",
"styled-components": "^6.1.12",
- "tailwind-merge": "^3.5.0"
+ "tailwind-merge": "^2.4.0",
+ "tailwindcss-scoped-preflight": "^3.4.3"
},
"devDependencies": {
"@chromatic-com/storybook": "^5.0.2",
@@ -44,7 +45,7 @@
"@storybook/react": "^10.3.3",
"@storybook/react-vite": "^10.3.3",
"@storybook/test-runner": "^0.24.3",
- "@tailwindcss/postcss": "^4.3.2",
+ "@tailwindcss/container-queries": "^0.1.1",
"@types/lodash": "^4.17.13",
"@types/node": "^22.7.6",
"@types/react": "^18.3.10",
@@ -56,6 +57,7 @@
"@wordpress/eslint-plugin": "^20.3.0",
"@wordpress/prettier-config": "^4.4.0",
"@wordpress/stylelint-config": "^23.2.0",
+ "autoprefixer": "^10.4.19",
"axe-playwright": "^2.0.3",
"chromatic": "^11.7.1",
"cross-env": "^7.0.3",
@@ -77,7 +79,7 @@
"storybook": "^10.3.3",
"storybook-addon-paddings": "^6.0.2",
"stylelint": "^16.8.2",
- "tailwindcss": "^4.3.2",
+ "tailwindcss": "^3.4.10",
"typescript": "5.4.2",
"typescript-eslint": "^8.7.0",
"vite": "^5.4.21",
@@ -100,7 +102,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
@@ -4013,7 +4014,6 @@
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -4035,7 +4035,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@@ -4045,14 +4044,12 @@
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
- "dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.31",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
@@ -4579,7 +4576,6 @@
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.stat": "2.0.5",
@@ -4593,7 +4589,6 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 8"
@@ -4603,7 +4598,6 @@
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.scandir": "2.1.5",
@@ -6193,275 +6187,14 @@
"@swc/counter": "^0.1.3"
}
},
- "node_modules/@tailwindcss/node": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.2.tgz",
- "integrity": "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@jridgewell/remapping": "^2.3.5",
- "enhanced-resolve": "5.21.6",
- "jiti": "^2.7.0",
- "lightningcss": "1.32.0",
- "magic-string": "^0.30.21",
- "source-map-js": "^1.2.1",
- "tailwindcss": "4.3.2"
- }
- },
- "node_modules/@tailwindcss/oxide": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.2.tgz",
- "integrity": "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">= 20"
- },
- "optionalDependencies": {
- "@tailwindcss/oxide-android-arm64": "4.3.2",
- "@tailwindcss/oxide-darwin-arm64": "4.3.2",
- "@tailwindcss/oxide-darwin-x64": "4.3.2",
- "@tailwindcss/oxide-freebsd-x64": "4.3.2",
- "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2",
- "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2",
- "@tailwindcss/oxide-linux-arm64-musl": "4.3.2",
- "@tailwindcss/oxide-linux-x64-gnu": "4.3.2",
- "@tailwindcss/oxide-linux-x64-musl": "4.3.2",
- "@tailwindcss/oxide-wasm32-wasi": "4.3.2",
- "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2",
- "@tailwindcss/oxide-win32-x64-msvc": "4.3.2"
- }
- },
- "node_modules/@tailwindcss/oxide-android-arm64": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz",
- "integrity": "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==",
- "cpu": [
- "arm64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "android"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-darwin-arm64": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz",
- "integrity": "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==",
- "cpu": [
- "arm64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "darwin"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-darwin-x64": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz",
- "integrity": "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==",
- "cpu": [
- "x64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "darwin"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-freebsd-x64": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz",
- "integrity": "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==",
- "cpu": [
- "x64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "freebsd"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz",
- "integrity": "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==",
- "cpu": [
- "arm"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "linux"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz",
- "integrity": "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==",
- "cpu": [
- "arm64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "linux"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz",
- "integrity": "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==",
- "cpu": [
- "arm64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "linux"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz",
- "integrity": "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==",
- "cpu": [
- "x64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "linux"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-linux-x64-musl": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz",
- "integrity": "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==",
- "cpu": [
- "x64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "linux"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-wasm32-wasi": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz",
- "integrity": "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==",
- "bundleDependencies": [
- "@napi-rs/wasm-runtime",
- "@emnapi/core",
- "@emnapi/runtime",
- "@tybys/wasm-util",
- "@emnapi/wasi-threads",
- "tslib"
- ],
- "cpu": [
- "wasm32"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "dependencies": {
- "@emnapi/core": "^1.11.1",
- "@emnapi/runtime": "^1.11.1",
- "@emnapi/wasi-threads": "^1.2.2",
- "@napi-rs/wasm-runtime": "^1.1.4",
- "@tybys/wasm-util": "^0.10.2",
- "tslib": "^2.8.1"
- },
- "engines": {
- "node": ">=14.0.0"
- }
- },
- "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz",
- "integrity": "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==",
- "cpu": [
- "arm64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "win32"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.2.tgz",
- "integrity": "sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==",
- "cpu": [
- "x64"
- ],
- "dev": true,
- "license": "MIT",
- "optional": true,
- "os": [
- "win32"
- ],
- "engines": {
- "node": ">= 20"
- }
- },
- "node_modules/@tailwindcss/postcss": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.2.tgz",
- "integrity": "sha512-rjVWYCa7Ngbi5AarT6k8TkxUG3Wl1QKzHdIZVsjZSzf36Jmo2IKZt/NHRAwly8oDkbBOH0YTu+CHuf9jPxMc+g==",
+ "node_modules/@tailwindcss/container-queries": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+ "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
"dev": true,
"license": "MIT",
- "dependencies": {
- "@alloc/quick-lru": "^5.2.0",
- "@tailwindcss/node": "4.3.2",
- "@tailwindcss/oxide": "4.3.2",
- "postcss": "^8.5.15",
- "tailwindcss": "4.3.2"
+ "peerDependencies": {
+ "tailwindcss": ">=3.2.0"
}
},
"node_modules/@testing-library/dom": {
@@ -8907,11 +8640,16 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
+ "node_modules/any-promise": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+ "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+ "license": "MIT"
+ },
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
- "dev": true,
"license": "ISC",
"dependencies": {
"normalize-path": "^3.0.0",
@@ -8925,7 +8663,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
@@ -8964,6 +8701,12 @@
"node": ">=14"
}
},
+ "node_modules/arg": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+ "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+ "license": "MIT"
+ },
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -9285,6 +9028,43 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/autoprefixer": {
+ "version": "10.4.27",
+ "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+ "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "browserslist": "^4.28.1",
+ "caniuse-lite": "^1.0.30001774",
+ "fraction.js": "^5.3.4",
+ "picocolors": "^1.1.1",
+ "postcss-value-parser": "^4.2.0"
+ },
+ "bin": {
+ "autoprefixer": "bin/autoprefixer"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ },
+ "peerDependencies": {
+ "postcss": "^8.1.0"
+ }
+ },
"node_modules/available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -9582,7 +9362,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -9898,6 +9677,15 @@
"node": ">=6"
}
},
+ "node_modules/camelcase-css": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+ "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/camelize": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -10025,7 +9813,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"anymatch": "~3.1.2",
@@ -10050,7 +9837,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
- "dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.1"
@@ -10474,7 +10260,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
- "dev": true,
"license": "MIT",
"bin": {
"cssesc": "bin/cssesc"
@@ -10927,6 +10712,12 @@
"node": ">=8"
}
},
+ "node_modules/didyoumean": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+ "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+ "license": "Apache-2.0"
+ },
"node_modules/diff": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
@@ -10960,6 +10751,12 @@
"node": ">=8"
}
},
+ "node_modules/dlv": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+ "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+ "license": "MIT"
+ },
"node_modules/doctrine": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -11146,20 +10943,6 @@
"once": "^1.4.0"
}
},
- "node_modules/enhanced-resolve": {
- "version": "5.21.6",
- "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
- "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "graceful-fs": "^4.2.4",
- "tapable": "^2.3.3"
- },
- "engines": {
- "node": ">=10.13.0"
- }
- },
"node_modules/entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
@@ -12310,7 +12093,6 @@
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.stat": "^2.0.2",
@@ -12327,7 +12109,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
- "dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.1"
@@ -12381,7 +12162,6 @@
"version": "1.20.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
"integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
- "dev": true,
"license": "ISC",
"dependencies": {
"reusify": "^1.0.4"
@@ -12401,7 +12181,6 @@
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=12.0.0"
@@ -12774,6 +12553,20 @@
"node": ">= 6"
}
},
+ "node_modules/fraction.js": {
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+ "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": "*"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/rawify"
+ }
+ },
"node_modules/framer-motion": {
"version": "12.34.3",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.34.3.tgz",
@@ -12872,7 +12665,6 @@
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
- "dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
@@ -13053,7 +12845,6 @@
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
- "dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.3"
@@ -13867,7 +13658,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"binary-extensions": "^2.0.0"
@@ -13926,7 +13716,6 @@
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
"integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
- "dev": true,
"license": "MIT",
"dependencies": {
"hasown": "^2.0.2"
@@ -13993,7 +13782,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -14059,7 +13847,6 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
- "dev": true,
"license": "MIT",
"dependencies": {
"is-extglob": "^2.1.1"
@@ -15912,13 +15699,12 @@
}
},
"node_modules/jiti": {
- "version": "2.7.0",
- "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
- "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
- "dev": true,
+ "version": "1.21.7",
+ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+ "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
"license": "MIT",
"bin": {
- "jiti": "lib/jiti-cli.mjs"
+ "jiti": "bin/jiti.js"
}
},
"node_modules/jju": {
@@ -16551,11 +16337,22 @@
"url": "https://opencollective.com/parcel"
}
},
+ "node_modules/lilconfig": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+ "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=14"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antonk52"
+ }
+ },
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
- "dev": true,
"license": "MIT"
},
"node_modules/local-pkg": {
@@ -16828,7 +16625,6 @@
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 8"
@@ -17048,6 +16844,17 @@
"node": "^18.17.0 || >=20.5.0"
}
},
+ "node_modules/mz": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+ "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+ "license": "MIT",
+ "dependencies": {
+ "any-promise": "^1.0.0",
+ "object-assign": "^4.0.1",
+ "thenify-all": "^1.0.0"
+ }
+ },
"node_modules/nanoid": {
"version": "5.1.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
@@ -17150,7 +16957,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -17451,6 +17257,15 @@
"node": ">=0.10.0"
}
},
+ "node_modules/object-hash": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+ "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/object-inspect": {
"version": "1.13.4",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -18039,7 +17854,6 @@
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
- "dev": true,
"license": "MIT"
},
"node_modules/path-root": {
@@ -18129,7 +17943,6 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
@@ -18145,11 +17958,19 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/pify": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+ "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/pirates": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
"integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@@ -18304,10 +18125,9 @@
}
},
"node_modules/postcss": {
- "version": "8.5.16",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
- "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
- "dev": true,
+ "version": "8.5.8",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+ "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
"funding": [
{
"type": "opencollective",
@@ -18324,7 +18144,7 @@
],
"license": "MIT",
"dependencies": {
- "nanoid": "^3.3.12",
+ "nanoid": "^3.3.11",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
@@ -18332,6 +18152,48 @@
"node": "^10 || ^12 || >=14"
}
},
+ "node_modules/postcss-import": {
+ "version": "15.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+ "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+ "license": "MIT",
+ "dependencies": {
+ "postcss-value-parser": "^4.0.0",
+ "read-cache": "^1.0.0",
+ "resolve": "^1.1.7"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "postcss": "^8.0.0"
+ }
+ },
+ "node_modules/postcss-js": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+ "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "camelcase-css": "^2.0.1"
+ },
+ "engines": {
+ "node": "^12 || ^14 || >= 16"
+ },
+ "peerDependencies": {
+ "postcss": "^8.4.21"
+ }
+ },
"node_modules/postcss-media-query-parser": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -18339,6 +18201,31 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/postcss-nested": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+ "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "postcss-selector-parser": "^6.1.1"
+ },
+ "engines": {
+ "node": ">=12.0"
+ },
+ "peerDependencies": {
+ "postcss": "^8.2.14"
+ }
+ },
"node_modules/postcss-resolve-nested-selector": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
@@ -18404,7 +18291,6 @@
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
- "dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
@@ -18421,10 +18307,9 @@
"license": "MIT"
},
"node_modules/postcss/node_modules/nanoid": {
- "version": "3.3.15",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
- "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
- "dev": true,
+ "version": "3.3.11",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+ "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"funding": [
{
"type": "github",
@@ -18636,7 +18521,6 @@
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -18789,6 +18673,15 @@
"react-dom": ">=16.6.0"
}
},
+ "node_modules/read-cache": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+ "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+ "license": "MIT",
+ "dependencies": {
+ "pify": "^2.3.0"
+ }
+ },
"node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -18808,7 +18701,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
@@ -18821,7 +18713,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
@@ -19170,7 +19061,6 @@
"version": "1.22.11",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
"integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"is-core-module": "^2.16.1",
@@ -19264,7 +19154,6 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
"integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
- "dev": true,
"license": "MIT",
"engines": {
"iojs": ">=1.0.0",
@@ -19436,7 +19325,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -20972,6 +20860,37 @@
"integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
"license": "MIT"
},
+ "node_modules/sucrase": {
+ "version": "3.35.1",
+ "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+ "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+ "license": "MIT",
+ "dependencies": {
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "commander": "^4.0.0",
+ "lines-and-columns": "^1.1.6",
+ "mz": "^2.7.0",
+ "pirates": "^4.0.1",
+ "tinyglobby": "^0.2.11",
+ "ts-interface-checker": "^0.1.9"
+ },
+ "bin": {
+ "sucrase": "bin/sucrase",
+ "sucrase-node": "bin/sucrase-node"
+ },
+ "engines": {
+ "node": ">=16 || 14 >=14.17"
+ }
+ },
+ "node_modules/sucrase/node_modules/commander": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+ "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -21005,7 +20924,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -21107,9 +21025,9 @@
}
},
"node_modules/tailwind-merge": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
- "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+ "version": "2.6.1",
+ "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
+ "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
"license": "MIT",
"funding": {
"type": "github",
@@ -21117,24 +21035,109 @@
}
},
"node_modules/tailwindcss": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.2.tgz",
- "integrity": "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==",
- "dev": true,
- "license": "MIT"
+ "version": "3.4.19",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+ "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@alloc/quick-lru": "^5.2.0",
+ "arg": "^5.0.2",
+ "chokidar": "^3.6.0",
+ "didyoumean": "^1.2.2",
+ "dlv": "^1.1.3",
+ "fast-glob": "^3.3.2",
+ "glob-parent": "^6.0.2",
+ "is-glob": "^4.0.3",
+ "jiti": "^1.21.7",
+ "lilconfig": "^3.1.3",
+ "micromatch": "^4.0.8",
+ "normalize-path": "^3.0.0",
+ "object-hash": "^3.0.0",
+ "picocolors": "^1.1.1",
+ "postcss": "^8.4.47",
+ "postcss-import": "^15.1.0",
+ "postcss-js": "^4.0.1",
+ "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+ "postcss-nested": "^6.2.0",
+ "postcss-selector-parser": "^6.1.2",
+ "resolve": "^1.22.8",
+ "sucrase": "^3.35.0"
+ },
+ "bin": {
+ "tailwind": "lib/cli.js",
+ "tailwindcss": "lib/cli.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
},
- "node_modules/tapable": {
- "version": "2.3.3",
- "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
- "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
- "dev": true,
+ "node_modules/tailwindcss-scoped-preflight": {
+ "version": "3.5.7",
+ "resolved": "https://registry.npmjs.org/tailwindcss-scoped-preflight/-/tailwindcss-scoped-preflight-3.5.7.tgz",
+ "integrity": "sha512-+TXhksi7Ac6aCH0w9fk5eEHRvAwOaVP57JwkMSvIhhxTggFu5rdMIy83xImJ+jQYPE9nbQQEl34G2Ka8g+zrDg==",
+ "license": "MIT",
+ "peerDependencies": {
+ "postcss": "^8",
+ "tailwindcss": "^3"
+ }
+ },
+ "node_modules/tailwindcss/node_modules/postcss-load-config": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+ "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
"license": "MIT",
+ "dependencies": {
+ "lilconfig": "^3.1.1"
+ },
"engines": {
- "node": ">=6"
+ "node": ">= 18"
+ },
+ "peerDependencies": {
+ "jiti": ">=1.21.0",
+ "postcss": ">=8.0.9",
+ "tsx": "^4.8.1",
+ "yaml": "^2.4.2"
+ },
+ "peerDependenciesMeta": {
+ "jiti": {
+ "optional": true
+ },
+ "postcss": {
+ "optional": true
+ },
+ "tsx": {
+ "optional": true
+ },
+ "yaml": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/tailwindcss/node_modules/yaml": {
+ "version": "2.8.3",
+ "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+ "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+ "license": "ISC",
+ "optional": true,
+ "peer": true,
+ "bin": {
+ "yaml": "bin.mjs"
+ },
+ "engines": {
+ "node": ">= 14.6"
},
"funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/webpack"
+ "url": "https://github.com/sponsors/eemeli"
}
},
"node_modules/teex": {
@@ -21229,6 +21232,27 @@
"url": "https://bevry.me/fund"
}
},
+ "node_modules/thenify": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+ "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+ "license": "MIT",
+ "dependencies": {
+ "any-promise": "^1.0.0"
+ }
+ },
+ "node_modules/thenify-all": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+ "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+ "license": "MIT",
+ "dependencies": {
+ "thenify": ">= 3.1.0 < 4"
+ },
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/tiny-invariant": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -21256,7 +21280,6 @@
"version": "0.2.15",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"fdir": "^6.5.0",
@@ -21377,6 +21400,12 @@
"node": ">=6.10"
}
},
+ "node_modules/ts-interface-checker": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+ "license": "Apache-2.0"
+ },
"node_modules/tsconfig-paths": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -21858,7 +21887,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
- "dev": true,
"license": "MIT"
},
"node_modules/v8-to-istanbul": {
diff --git a/package.json b/package.json
index a8453ef5..cb48168d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@bsf/force-ui",
- "version": "2.0.0",
+ "version": "1.8.0",
"description": "Library of components for the BSF project",
"main": "./dist/force-ui.cjs.js",
"module": "./dist/force-ui.es.js",
@@ -28,7 +28,6 @@
"import": "./dist/withTW.es.js",
"require": "./dist/withTW.cjs.js"
},
- "./theme.css": "./dist/theme.css",
"./dist/*": "./dist/*"
},
"scripts": {
@@ -87,7 +86,8 @@
"react-day-picker": "^9.1.3",
"recharts": "^2.13.0",
"styled-components": "^6.1.12",
- "tailwind-merge": "^3.5.0"
+ "tailwind-merge": "^2.4.0",
+ "tailwindcss-scoped-preflight": "^3.4.3"
},
"devDependencies": {
"@chromatic-com/storybook": "^5.0.2",
@@ -103,7 +103,7 @@
"@storybook/react": "^10.3.3",
"@storybook/react-vite": "^10.3.3",
"@storybook/test-runner": "^0.24.3",
- "@tailwindcss/postcss": "^4.3.2",
+ "@tailwindcss/container-queries": "^0.1.1",
"@types/lodash": "^4.17.13",
"@types/node": "^22.7.6",
"@types/react": "^18.3.10",
@@ -115,6 +115,7 @@
"@wordpress/eslint-plugin": "^20.3.0",
"@wordpress/prettier-config": "^4.4.0",
"@wordpress/stylelint-config": "^23.2.0",
+ "autoprefixer": "^10.4.19",
"axe-playwright": "^2.0.3",
"chromatic": "^11.7.1",
"cross-env": "^7.0.3",
@@ -136,7 +137,7 @@
"storybook": "^10.3.3",
"storybook-addon-paddings": "^6.0.2",
"stylelint": "^16.8.2",
- "tailwindcss": "^4.3.2",
+ "tailwindcss": "^3.4.10",
"typescript": "5.4.2",
"typescript-eslint": "^8.7.0",
"vite": "^5.4.21",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 52b9b4ba..33ad091d 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,5 +1,6 @@
module.exports = {
plugins: {
- '@tailwindcss/postcss': {},
+ tailwindcss: {},
+ autoprefixer: {},
},
}
diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
index f1c473bd..1e1a813a 100644
--- a/src/components/alert/alert.tsx
+++ b/src/components/alert/alert.tsx
@@ -107,7 +107,7 @@ const Alert = ( {
<div className="absolute right-4 top-4 [&_svg]:size-5">
<button
className={ cn(
- 'bg-transparent m-0 p-0 border-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer rounded-sm',
+ 'bg-transparent m-0 p-0 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer rounded',
closeIconClassNames[ theme ] ??
closeIconClassNames.light
) }
@@ -156,7 +156,7 @@ const Alert = ( {
{ typeof onClose === 'function' && (
<button
className={ cn(
- 'self-start bg-transparent m-0 border-none p-0.5 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer size-5 rounded-sm',
+ 'self-start bg-transparent m-0 border-none p-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer size-5 rounded',
closeIconClassNames[ theme ] ??
closeIconClassNames.light
) }
diff --git a/src/components/area-chart/area-chart.stories.tsx b/src/components/area-chart/area-chart.stories.tsx
index ac3cc73c..053f861b 100644
--- a/src/components/area-chart/area-chart.stories.tsx
+++ b/src/components/area-chart/area-chart.stories.tsx
@@ -308,7 +308,7 @@ export const AreaChartCard1: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
@@ -371,7 +371,7 @@ export const AreaChartCard2: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
diff --git a/src/components/area-chart/chart-legend-content.tsx b/src/components/area-chart/chart-legend-content.tsx
index f474f143..0d8405df 100644
--- a/src/components/area-chart/chart-legend-content.tsx
+++ b/src/components/area-chart/chart-legend-content.tsx
@@ -46,7 +46,7 @@ const ChartLegendContent = React.forwardRef<
<div key={ item.value } className="flex items-center gap-1.5">
{ ! hideIcon && (
<div
- className="size-2 shrink-0 rounded-xs"
+ className="size-2 shrink-0 rounded-sm"
style={ {
backgroundColor: item.color,
} }
diff --git a/src/components/bar-chart/bar-chart.stories.tsx b/src/components/bar-chart/bar-chart.stories.tsx
index 0af966ff..587c053c 100644
--- a/src/components/bar-chart/bar-chart.stories.tsx
+++ b/src/components/bar-chart/bar-chart.stories.tsx
@@ -250,7 +250,7 @@ export const BarChartCard1: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
@@ -312,7 +312,7 @@ export const BarChartCard2: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
@@ -377,7 +377,7 @@ export const BarChartCard3: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
@@ -443,7 +443,7 @@ export const BarChartCard4: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
@@ -508,7 +508,7 @@ export const AreaChartCard5: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
diff --git a/src/components/bar-chart/chart-legend-content.tsx b/src/components/bar-chart/chart-legend-content.tsx
index f474f143..0d8405df 100644
--- a/src/components/bar-chart/chart-legend-content.tsx
+++ b/src/components/bar-chart/chart-legend-content.tsx
@@ -46,7 +46,7 @@ const ChartLegendContent = React.forwardRef<
<div key={ item.value } className="flex items-center gap-1.5">
{ ! hideIcon && (
<div
- className="size-2 shrink-0 rounded-xs"
+ className="size-2 shrink-0 rounded-sm"
style={ {
backgroundColor: item.color,
} }
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index 1ff0402b..977d1ed3 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -92,7 +92,7 @@ export const BreadcrumbLink = ( {
className={ cn(
sizes.text,
'px-1 font-medium no-underline text-text-tertiary hover:text-text-primary hover:underline',
- 'focus:outline-hidden focus:ring-1 focus:ring-border-interactive focus:border-border-interactive focus:rounded-xs',
+ 'focus:outline-none focus:ring-1 focus:ring-border-interactive focus:border-border-interactive focus:rounded-sm',
'transition-all duration-200',
className
) }
diff --git a/src/components/button-group/button-group.tsx b/src/components/button-group/button-group.tsx
index 1eb2a87c..654d4438 100644
--- a/src/components/button-group/button-group.tsx
+++ b/src/components/button-group/button-group.tsx
@@ -70,7 +70,7 @@ export const ButtonGroup = ( {
);
const groupClassName = cn(
- 'box-border flex border border-border-subtle border-solid rounded-sm',
+ 'box-border flex border border-border-subtle border-solid rounded',
className
);
@@ -153,7 +153,7 @@ export const ButtonComponent = (
const hoverClasses = 'hover:bg-button-tertiary-hover';
// Button focus classes.
- const focusClasses = 'focus:outline-hidden';
+ const focusClasses = 'focus:outline-none';
// Button disabled classes.
const disabledClasses = disabled
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index cfd59d1f..5ed1b9f4 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -90,9 +90,9 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
secondary:
'text-text-on-color bg-button-secondary hover:bg-button-secondary-hover outline-button-secondary hover:outline-button-secondary-hover shadow-xs focus:shadow-none disabled:shadow-none disabled:bg-button-disabled disabled:outline-button-disabled',
outline:
- 'text-button-tertiary-color outline-border-subtle bg-button-tertiary shadow-xs focus:shadow-none hover:bg-button-tertiary-hover hover:outline-border-subtle disabled:bg-button-tertiary disabled:outline-border-disabled',
+ 'text-button-tertiary-color outline-border-subtle bg-button-tertiary shadow-sm focus:shadow-none hover:bg-button-tertiary-hover hover:outline-border-subtle disabled:bg-button-tertiary disabled:outline-border-disabled',
ghost: 'text-text-primary bg-transparent outline-transparent hover:bg-button-tertiary-hover',
- link: 'outline-hidden text-link-primary bg-transparent hover:text-link-primary-hover hover:underline p-0 border-0 leading-none',
+ link: 'outline-none text-link-primary bg-transparent hover:text-link-primary-hover hover:underline p-0 border-0 leading-none',
}?.[ variant ];
const destructiveClassNames =
@@ -110,8 +110,8 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
: '';
const sizeClassNames = {
- xs: 'p-1 rounded-sm [&>svg]:size-4',
- sm: 'p-2 rounded-sm [&>svg]:size-4 gap-0.5',
+ xs: 'p-1 rounded [&>svg]:size-4',
+ sm: 'p-2 rounded [&>svg]:size-4 gap-0.5',
md: 'p-2.5 rounded-md text-sm [&>svg]:size-5 gap-1',
lg: 'p-3 rounded-lg text-base [&>svg]:size-6 gap-1',
}?.[ size ];
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index 63858101..01a63942 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -59,14 +59,14 @@ export const CheckboxComponent = (
const sizeClassNames = {
sm: {
- checkbox: 'size-4 rounded-sm gap-1',
+ checkbox: 'size-4 rounded gap-1',
icon: 'size-3',
text: 'text-sm', // text class for sm
description: 'text-sm',
gap: 'gap-0.5',
},
md: {
- checkbox: 'size-5 rounded-sm gap-1',
+ checkbox: 'size-5 rounded gap-1',
icon: 'size-4',
text: 'text-base', // text class for md
description: 'text-sm',
@@ -170,7 +170,7 @@ export const CheckboxComponent = (
{ ...( indeterminate && { 'aria-checked': 'mixed' as const } ) }
{ ...( label?.description && { 'aria-describedby': descriptionId } ) }
className={ cn(
- "peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden border-1.5! border-solid focus:outline-hidden",
+ "peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid focus:outline-none",
colorClassNames[ color ].checkbox,
sizeClassNames[ size ].checkbox,
disabled && disabledClassNames.checkbox,
diff --git a/src/components/datepicker/datepicker-component.tsx b/src/components/datepicker/datepicker-component.tsx
index 8244c622..46c73a12 100644
--- a/src/components/datepicker/datepicker-component.tsx
+++ b/src/components/datepicker/datepicker-component.tsx
@@ -384,7 +384,7 @@ const DatePickerComponent = ( {
const buttonClasses = cn(
'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm',
- 'border-none rounded-sm',
+ 'border-none rounded',
( isSelected || isPartOfRange ) && ! isOutside
? 'bg-background-brand text-text-on-color'
: 'bg-transparent hover:bg-button-tertiary-hover',
@@ -629,7 +629,7 @@ const DatePickerComponent = ( {
<input
type="time"
className={ cn(
- 'w-full px-2 py-1 rounded-sm text-sm font-normal text-text-primary bg-field-secondary-background outline outline-1 outline-border-subtle border-none transition-[color,box-shadow,outline] duration-200',
+ 'w-full px-2 py-1 rounded text-sm font-normal text-text-primary bg-field-secondary-background outline outline-1 outline-border-subtle border-none transition-[color,box-shadow,outline] duration-200',
'focus:outline-focus-border focus:ring-2 focus:ring-toggle-on focus:ring-offset-2',
! date &&
'outline-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled'
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 50e72eea..db1f63c7 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -479,7 +479,7 @@ export const DefaultCloseButton = ( {
return (
<button
className={ cn(
- 'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-hidden shadow-none',
+ 'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-none shadow-none',
className
) }
aria-label="Close dialog"
diff --git a/src/components/drawer/drawer-close-button.tsx b/src/components/drawer/drawer-close-button.tsx
index bb896080..4412774b 100644
--- a/src/components/drawer/drawer-close-button.tsx
+++ b/src/components/drawer/drawer-close-button.tsx
@@ -37,7 +37,7 @@ const DefaultCloseButton = ( {
return (
<button
className={ cn(
- 'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-hidden shadow-none',
+ 'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-none shadow-none',
className
) }
aria-label="Close drawer"
diff --git a/src/components/dropzone/dropzone.tsx b/src/components/dropzone/dropzone.tsx
index 07d4b0dc..afabf649 100644
--- a/src/components/dropzone/dropzone.tsx
+++ b/src/components/dropzone/dropzone.tsx
@@ -63,7 +63,7 @@ export const FilePreview = () => {
return (
<div
className={ cn(
- 'border border-solid border-transparent flex items-start justify-between rounded-sm mt-2 bg-field-primary-background p-3 gap-3',
+ 'border border-solid border-transparent flex items-start justify-between rounded mt-2 bg-field-primary-background p-3 gap-3',
error && 'border-alert-border-danger bg-alert-background-danger'
) }
>
@@ -73,7 +73,7 @@ export const FilePreview = () => {
( file.type.startsWith( 'image/' ) ? (
<div
className={ cn(
- 'size-10 rounded-xs flex items-center justify-center shrink-0',
+ 'size-10 rounded-sm flex items-center justify-center shrink-0',
error && 'bg-gray-200 '
) }
>
@@ -115,7 +115,7 @@ export const FilePreview = () => {
<button
onClick={ removeFile }
aria-label="Remove file"
- className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 ring-0 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 rounded-sm self-start"
+ className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 rounded self-start"
>
<Trash className="size-4 text-support-error" aria-hidden="true" />
</button>
@@ -230,7 +230,7 @@ export const Dropzone = ( {
<label htmlFor={ uploadInputID.current }>
<div
className={ cn(
- 'min-w-80 cursor-pointer mx-auto border-dashed border rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus-within:outline-hidden focus-within:ring-2 focus-within:ring-toggle-on focus-within:ring-offset-2 transition duration-200 ease-in-out',
+ 'min-w-80 cursor-pointer mx-auto border-dashed border rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus-within:outline-none focus-within:ring-2 focus-within:ring-toggle-on focus-within:ring-offset-2 transition duration-200 ease-in-out',
isDragging
? 'border-field-dropzone-color bg-field-dropzone-background-hover'
: 'border-field-border',
diff --git a/src/components/editor-input/editor-input-style.ts b/src/components/editor-input/editor-input-style.ts
index 1d028ab4..ec5cd187 100644
--- a/src/components/editor-input/editor-input-style.ts
+++ b/src/components/editor-input/editor-input-style.ts
@@ -8,7 +8,7 @@ export const editorDisabledClassNames =
'bg-field-secondary-background outline-field-border-disabled hover:outline-field-border-disabled [&_p]:text-badge-color-disabled cursor-not-allowed';
export const editorInputClassNames = {
- sm: 'px-3 py-1.5 rounded-sm [&_.editor-content>p]:text-xs [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-xs [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-5',
+ sm: 'px-3 py-1.5 rounded [&_.editor-content>p]:text-xs [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-xs [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-5',
md: 'px-3.5 py-2 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-sm [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-6',
lg: 'px-4 py-2.5 rounded-md [&_.editor-content>p]:text-base [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-base [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-7',
};
@@ -26,7 +26,7 @@ export const comboboxItemCommonClassNames =
'm-0 text-text-primary cursor-pointer';
export const comboboxItemClassNames = {
- sm: 'p-1.5 rounded-sm text-xs leading-5 font-normal',
+ sm: 'p-1.5 rounded text-xs leading-5 font-normal',
md: 'p-2 rounded-md text-sm leading-6 font-normal',
lg: 'p-2 rounded-md text-base leading-6 font-normal',
};
diff --git a/src/components/editor-input/editor-input.tsx b/src/components/editor-input/editor-input.tsx
index 3d02be17..89571dc8 100644
--- a/src/components/editor-input/editor-input.tsx
+++ b/src/components/editor-input/editor-input.tsx
@@ -165,7 +165,7 @@ const EditorInput = forwardRef<LexicalEditor, EditorInputProps>(
<ContentEditable
aria-label={ placeholder || 'Text editor' }
className={ cn(
- 'editor-content focus-visible:outline-hidden outline-hidden',
+ 'editor-content focus-visible:outline-none outline-none',
editableContentAreaCommonClassNames,
className
) }
diff --git a/src/components/file-preview/file-preview.tsx b/src/components/file-preview/file-preview.tsx
index 8f22a660..921c7bae 100644
--- a/src/components/file-preview/file-preview.tsx
+++ b/src/components/file-preview/file-preview.tsx
@@ -65,7 +65,7 @@ export const FilePreview = ( {
return (
<div
className={ cn(
- 'w-full flex items-start justify-between rounded-sm mt-2 bg-field-primary-background p-2 gap-3',
+ 'w-full flex items-start justify-between rounded mt-2 bg-field-primary-background p-2 gap-3',
error && 'border-alert-border-danger bg-alert-background-danger'
) }
>
@@ -73,7 +73,7 @@ export const FilePreview = ( {
{ file.type.startsWith( 'image' ) ? (
<div
className={ cn(
- 'rounded-xs flex items-center justify-center shrink-0',
+ 'rounded-sm flex items-center justify-center shrink-0',
error && 'bg-gray-200'
) }
>
@@ -88,7 +88,7 @@ export const FilePreview = ( {
}
alt="Preview"
className={ cn(
- 'w-full object-contain rounded-xs',
+ 'w-full object-contain rounded-sm',
commonFilePreviewClasses[ size ].image
) }
/>
@@ -122,7 +122,7 @@ export const FilePreview = ( {
{ ! disabled && (
<button
onClick={ () => onRemove( file ) }
- className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-support-error focus-visible:ring-offset-1 rounded-sm self-start shadow-none"
+ className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-support-error focus-visible:ring-offset-1 rounded self-start shadow-none"
aria-label="Remove file"
>
<Trash className="size-4 text-support-error" />
diff --git a/src/components/hamburger-menu/hamburger-menu.tsx b/src/components/hamburger-menu/hamburger-menu.tsx
index db6b95e1..fd9d19c9 100644
--- a/src/components/hamburger-menu/hamburger-menu.tsx
+++ b/src/components/hamburger-menu/hamburger-menu.tsx
@@ -190,7 +190,7 @@ export const MenuToggle = ( { className }: MenuToggleProps ) => {
// @ts-expect-error Ref is not present in Button component type, but we need it for the hamburger menu
ref={ setTriggerRef }
className={ cn(
- 'relative z-[1] rounded-full hover:shadow-xs focus:[box-shadow:none] pointer-events-auto bg-background-primary',
+ 'relative z-[1] rounded-full hover:shadow-sm focus:[box-shadow:none] pointer-events-auto bg-background-primary',
className
) }
variant="ghost"
@@ -292,7 +292,7 @@ export const MenuOption: MenuOptionComponent = ( {
<MenuItem>
<Tag
className={ cn(
- 'w-full no-underline hover:no-underline text-text-primary text-lg font-medium flex items-center gap-2 px-2.5 py-1.5 rounded-md hover:bg-background-secondary hover:text-text-primary focus:outline-hidden focus:shadow-none transition ease-in-out duration-150',
+ 'w-full no-underline hover:no-underline text-text-primary text-lg font-medium flex items-center gap-2 px-2.5 py-1.5 rounded-md hover:bg-background-secondary hover:text-text-primary focus:outline-none focus:shadow-none transition ease-in-out duration-150',
active
? 'text-text-primary bg-background-secondary'
: 'text-text-secondary',
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index a53d89bf..e1ab2f89 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -134,8 +134,8 @@ export const InputComponent = (
const baseClasses =
'bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary w-full outline outline-1 outline-border-subtle border-none transition-[color,box-shadow,outline] duration-200';
const sizeClasses = {
- xs: 'px-2 py-1 rounded-sm',
- sm: 'p-3 py-2 rounded-sm',
+ xs: 'px-2 py-1 rounded',
+ sm: 'p-3 py-2 rounded',
md: 'p-3.5 py-2.5 rounded-md',
lg: 'p-4 py-3 rounded-lg',
};
diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx
index 831843e9..ed48eec7 100644
--- a/src/components/menu-item/menu-item.tsx
+++ b/src/components/menu-item/menu-item.tsx
@@ -154,7 +154,7 @@ export const MenuList = ( {
animate="open"
exit="closed"
transition={ { duration: 0.3, ease: 'easeInOut' } }
- className="overflow flex gap-0.5 flex-col m-0 bg-white rounded-sm p-0"
+ className="overflow flex gap-0.5 flex-col m-0 bg-white rounded p-0"
>
{ children }
</motion.ul>
@@ -188,7 +188,7 @@ export const MenuItem = ( {
const { size } = useMenuContext();
const baseClasses =
- 'flex p-1 gap-1 items-center bg-transparent border-none rounded-sm text-text-secondary cursor-pointer m-0';
+ 'flex p-1 gap-1 items-center bg-transparent border-none rounded text-text-secondary cursor-pointer m-0';
const sizeClasses = {
sm: '[&>svg]:size-4 [&>svg]:m-1 [&>*:not(svg)]:mx-1 [&>*:not(svg)]:my-0.5 text-sm',
md: '[&>svg]:size-5 [&>svg]:m-1.5 [&>*:not(svg)]:m-1 text-base',
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index 43f1e4b7..cdb01ff6 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -143,7 +143,7 @@ export const PaginationButton = ( {
variant={ 'ghost' }
className={ cn(
'no-underline bg-transparent p-0 m-0 border-none',
- 'flex justify-center items-center rounded-sm text-button-secondary',
+ 'flex justify-center items-center rounded text-button-secondary',
'focus:outline focus:outline-1 focus:outline-border-subtle focus:bg-button-tertiary-hover',
sizeClassNames[ size ].general,
! disabled &&
diff --git a/src/components/pie-chart/chart-legend-content.tsx b/src/components/pie-chart/chart-legend-content.tsx
index 8be5c61e..718ef3c6 100644
--- a/src/components/pie-chart/chart-legend-content.tsx
+++ b/src/components/pie-chart/chart-legend-content.tsx
@@ -44,7 +44,7 @@ const ChartLegendContent = React.forwardRef<
<div key={ item.value } className="flex items-center gap-1.5">
{ ! hideIcon && (
<div
- className="h-2 w-2 shrink-0 rounded-xs"
+ className="h-2 w-2 shrink-0 rounded-sm"
style={ {
backgroundColor: item.color,
} }
diff --git a/src/components/pie-chart/pie-chart.stories.tsx b/src/components/pie-chart/pie-chart.stories.tsx
index f6d9496b..9c5bf859 100644
--- a/src/components/pie-chart/pie-chart.stories.tsx
+++ b/src/components/pie-chart/pie-chart.stories.tsx
@@ -59,7 +59,7 @@ export const PieChartCard1: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
@@ -99,7 +99,7 @@ export const PieChartCard2: Story1 = ( args ) => (
<Container
containerType="grid"
gap="xs"
- className="p-4 bg-background-primary rounded-lg shadow-xs"
+ className="p-4 bg-background-primary rounded-lg shadow-sm"
{ ...args }
>
<Container.Item className="p-1 space-y-2">
diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx
index 34e1fab6..5f51ed38 100644
--- a/src/components/radio-button/radio-button.tsx
+++ b/src/components/radio-button/radio-button.tsx
@@ -205,7 +205,7 @@ export const RadioButtonGroup = ( {
const groupClassName = cn(
style === 'tile'
- ? 'border border-border-subtle border-solid rounded-md shadow-xs'
+ ? 'border border-border-subtle border-solid rounded-md shadow-sm'
: 'gap-6',
className
);
@@ -440,7 +440,7 @@ export const RadioButtonComponent = (
!! label && 'items-start justify-between',
minWidth && 'min-w-[180px]',
borderOn &&
- 'outline outline-field-border outline-1 rounded-md shadow-xs hover:outline-border-interactive',
+ 'outline outline-field-border outline-1 rounded-md shadow-sm hover:outline-border-interactive',
borderOnActive &&
borderOn &&
checkedValue &&
@@ -514,7 +514,7 @@ export const RadioButtonComponent = (
id={ radioButtonId }
type={ multiSelection ? 'checkbox' : 'radio' }
className={ cn(
- "peer flex relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden border-1.5! border-solid focus-within:outline-hidden",
+ "peer flex relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid focus-within:outline-none",
! multiSelection && 'rounded-full',
colorClassNames[ color ].checkbox,
sizeClassNames[ size ].checkbox,
diff --git a/src/components/radio-button/styles.ts b/src/components/radio-button/styles.ts
index 4de3600e..9ad1f6c5 100644
--- a/src/components/radio-button/styles.ts
+++ b/src/components/radio-button/styles.ts
@@ -41,4 +41,4 @@ export const borderClasses =
export const baseClasses =
'bg-background-primary text-primary cursor-pointer flex items-center justify-center';
export const hoverClasses = 'hover:bg-button-tertiary-hover';
-export const focusClasses = 'focus:outline-hidden';
+export const focusClasses = 'focus:outline-none';
diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx
index 7e52999a..36b58a05 100644
--- a/src/components/search/search.tsx
+++ b/src/components/search/search.tsx
@@ -426,7 +426,7 @@ export const SearchBoxInput = forwardRef<HTMLInputElement, SearchBoxInputProps>(
ref={ ref }
className={ cn(
textSizeClassNames[ size! ],
- 'flex-grow font-medium bg-transparent border-none outline-hidden border-transparent focus:ring-0 p-0 min-h-fit',
+ 'flex-grow font-medium bg-transparent border-none outline-none border-transparent focus:ring-0 p-0 min-h-fit',
disabled &&
'text-field-placeholder focus-within:text-field-input group-hover:text-field-input placeholder:text-field-placeholder'
) }
@@ -490,7 +490,7 @@ export const SearchBoxContent = ( {
...floatingStyles,
} }
className={ cn(
- 'bg-background-primary rounded-md border border-solid border-border-subtle shadow-soft-shadow-lg overflow-y-auto text-wrap focus:outline-hidden',
+ 'bg-background-primary rounded-md border border-solid border-border-subtle shadow-soft-shadow-lg overflow-y-auto text-wrap focus:outline-none',
sizeClassNames.dialog[ size! ],
className
) }
@@ -704,7 +704,7 @@ export const SearchBoxItem = forwardRef<HTMLButtonElement, SearchBoxItemProps>(
type="button"
ref={ combinedRef }
className={ cn(
- 'flex w-full items-center justify-start gap-1 p-1 cursor-pointer border-none bg-transparent text-left focus:outline-hidden',
+ 'flex w-full items-center justify-start gap-1 p-1 cursor-pointer border-none bg-transparent text-left focus:outline-none',
isActive && 'bg-background-secondary',
! isActive &&
'hover:bg-background-secondary focus:bg-background-secondary',
diff --git a/src/components/search/styles.ts b/src/components/search/styles.ts
index 755783e0..191a0b59 100644
--- a/src/components/search/styles.ts
+++ b/src/components/search/styles.ts
@@ -1,12 +1,12 @@
export const textSizeClassNames = {
- sm: 'text-xs [&>svg]:size-4 rounded-sm',
+ sm: 'text-xs [&>svg]:size-4 rounded',
md: 'text-sm [&>svg]:size-5 rounded-md',
lg: 'text-base [&>svg]:size-6 rounded-md',
};
export const sizeClassNames = {
input: {
- sm: 'py-1.5 px-2 rounded-sm',
+ sm: 'py-1.5 px-2 rounded',
md: 'p-2.5 rounded-md',
lg: 'p-3 rounded-md',
},
@@ -21,7 +21,7 @@ export const sizeClassNames = {
lg: 'p-2 text-sm',
},
item: {
- sm: 'text-sm text-text-secondary rounded-sm',
+ sm: 'text-sm text-text-secondary rounded',
md: 'text-base text-text-secondary rounded-md',
lg: 'text-base text-text-secondary rounded-md',
},
diff --git a/src/components/select/component-style.ts b/src/components/select/component-style.ts
index 72ff80a3..59a25632 100644
--- a/src/components/select/component-style.ts
+++ b/src/components/select/component-style.ts
@@ -3,7 +3,7 @@ export const sizeClassNames = {
icon: '[&>svg]:size-4',
searchIcon: '[&>svg]:size-4',
selectButton:
- 'px-2.5 py-2 rounded-sm text-xs font-medium leading-4 min-h-[2rem]',
+ 'px-2.5 py-2 rounded text-xs font-medium leading-4 min-h-[2rem]',
multiSelect: 'pl-2 pr-2 py-1.5',
displaySelected: 'text-xs font-normal',
dropdown: 'rounded-md',
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 3534ffcc..a568101f 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -1079,7 +1079,7 @@ export function SelectItem( {
<div
id={ optionId }
className={ cn(
- 'w-full flex items-center justify-between text-text-primary hover:bg-button-tertiary-hover rounded-md transition-all duration-150 cursor-pointer focus:outline-hidden focus-within:outline-hidden outline-hidden',
+ 'w-full flex items-center justify-between text-text-primary hover:bg-button-tertiary-hover rounded-md transition-all duration-150 cursor-pointer focus:outline-none focus-within:outline-none outline-none',
selectItemClassNames[ sizeValue as SelectSizes ],
indx === activeIndex && 'bg-button-tertiary-hover',
className
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 6384ebe3..377d8729 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -181,7 +181,7 @@ export const SwitchComponent = (
const colorClassNames = {
primary: {
- input: 'bg-toggle-off checked:bg-toggle-on focus:ring focus:ring-toggle-on focus:ring-offset-2 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-hidden checked:focus:border-toggle-on-border focus:border-toggle-off-border',
+ input: 'bg-toggle-off checked:bg-toggle-on focus:ring focus:ring-toggle-on focus:ring-offset-2 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
toggleDial: 'bg-toggle-dial-background shadow-toggleDial',
},
};
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index 190d4b8a..e730eef3 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -303,13 +303,13 @@ export const Tab = forwardRef<Ref, TabProps>(
// Additional classes.
const hoverClasses = 'hover:text-text-primary';
- const focusClasses = 'focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-strong';
+ const focusClasses = 'focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-strong';
const disabledClasses = disabled
? 'text-text-disabled cursor-not-allowed hover:text-text-disabled'
: '';
const activeClasses =
activeItem === slug
- ? 'bg-background-primary text-text-primary shadow-xs'
+ ? 'bg-background-primary text-text-primary shadow-sm'
: '';
// Merge classes.
diff --git a/src/components/textarea/textarea.tsx b/src/components/textarea/textarea.tsx
index 1e34cc9d..4f72041a 100644
--- a/src/components/textarea/textarea.tsx
+++ b/src/components/textarea/textarea.tsx
@@ -103,9 +103,9 @@ export const TextAreaComponent = (
};
const baseClasses =
- 'py-2 rounded-sm border border-solid border-border-subtle bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary focus:outline-hidden focus-visible:outline-hidden transition ease-in-out duration-200';
+ 'py-2 rounded border border-solid border-border-subtle bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary focus:outline-none focus-visible:outline-none transition ease-in-out duration-200';
const sizeClasses = {
- sm: 'px-3 rounded-sm text-xs',
+ sm: 'px-3 rounded text-xs',
md: 'px-3 rounded-md text-sm',
lg: 'px-4 rounded-lg text-base',
};
diff --git a/src/components/toaster/toaster.tsx b/src/components/toaster/toaster.tsx
index 9c672743..7c7169a3 100644
--- a/src/components/toaster/toaster.tsx
+++ b/src/components/toaster/toaster.tsx
@@ -226,7 +226,7 @@ export const Toast = ( {
<div className="absolute end-4 top-4 [&_svg]:size-5">
<button
className={ cn(
- 'inline-flex bg-transparent m-0 p-0 border-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer rounded-sm',
+ 'inline-flex bg-transparent m-0 p-0 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer rounded',
closeIconClassNames[ theme ] ??
closeIconClassNames.light
) }
@@ -277,7 +277,7 @@ export const Toast = ( {
<div className="absolute end-3 top-3 [&_svg]:size-5">
<button
className={ cn(
- 'bg-transparent m-0 p-0 border-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer rounded-sm',
+ 'bg-transparent m-0 p-0 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer rounded',
closeIconClassNames[ theme ] ??
closeIconClassNames.light
) }
diff --git a/src/components/toaster/utils.tsx b/src/components/toaster/utils.tsx
index adc1f97c..a348b7c4 100644
--- a/src/components/toaster/utils.tsx
+++ b/src/components/toaster/utils.tsx
@@ -76,7 +76,7 @@ export const getAction = ( {
theme = DEFAULT_THEME,
} ) => {
const commonClassNames =
- 'focus:ring-0 focus:ring-offset-0 ring-offset-0 focus:outline-hidden';
+ 'focus:ring-0 focus:ring-offset-0 ring-offset-0 focus:outline-none';
let classNames =
'text-button-primary border-button-primary hover:border-button-primary hover:text-button-primary-hover';
if ( theme === 'dark' ) {
@@ -91,7 +91,7 @@ export const getAction = ( {
size="xs"
onClick={ onAction }
className={ cn(
- 'rounded-sm',
+ 'rounded',
commonClassNames,
classNames,
theme === 'dark'
diff --git a/src/tailwind.css b/src/tailwind.css
index 7e932e5e..b5c61c95 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -1,2 +1,3 @@
-@import "tailwindcss";
-@import "./theme/theme.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
index 954a1e85..cad1996c 100644
--- a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
+++ b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
@@ -87,7 +87,7 @@ const Template = ( args ) => {
{ /* Navigation Bar */ }
<Topbar
gap={ 0 }
- className="w-auto min-h-[unset] h-16 shadow-xs p-0 relative z-[1]"
+ className="w-auto min-h-[unset] h-16 shadow-sm p-0 relative z-[1]"
>
<Topbar.Left className="p-5">
<Topbar.Item>
@@ -99,14 +99,14 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
Dashboard
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
Blocks
</a>
@@ -114,28 +114,28 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-primary text-sm font-medium cursor-pointer after:content-[''] after:inline-block after:size-1 after:bg-brand-800 after:absolute after:bottom-0 after:left-0 after:w-full after:h-px"
+ className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-primary text-sm font-medium cursor-pointer after:content-[''] after:inline-block after:size-1 after:bg-brand-800 after:absolute after:bottom-0 after:left-0 after:w-full after:h-px"
>
<span>Settings</span>
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
AI Features
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
Free vs Pro
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden cursor-pointer text-sm font-semibold text-brand-800"
+ className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-800"
>
<span>Upgrade Pro Features</span>
<ArrowUpRight
@@ -176,7 +176,7 @@ const Template = ( args ) => {
borderOn
collapsible={ false }
screenHeight={ false }
- className="h-full! w-64"
+ className="!h-full w-64"
>
<Sidebar.Body>
<Sidebar.Item>
@@ -254,7 +254,7 @@ const Template = ( args ) => {
<Container
direction="column"
gap="sm"
- className="bg-background-primary rounded-xl shadow-sm p-6"
+ className="bg-background-primary rounded-xl shadow p-6"
>
{ /* Setting Section */ }
<Container className="mb-0.5" align="center">
@@ -290,7 +290,7 @@ const Template = ( args ) => {
id="default-width"
defaultValue={ 1280 }
suffix={
- <span className="text-badge-color-gray rounded-sm border border-solid border-border-subtle p-0.5 text-center text-xs font-medium bg-badge-background-gray">
+ <span className="text-badge-color-gray rounded border border-solid border-border-subtle p-0.5 text-center text-xs font-medium bg-badge-background-gray">
PX
</span>
}
@@ -324,7 +324,7 @@ const Template = ( args ) => {
id="container-padding"
defaultValue={ 10 }
suffix={
- <span className="text-badge-color-gray rounded-sm border border-solid border-border-subtle p-0.5 text-center text-xs font-medium bg-badge-background-gray">
+ <span className="text-badge-color-gray rounded border border-solid border-border-subtle p-0.5 text-center text-xs font-medium bg-badge-background-gray">
PX
</span>
}
@@ -358,7 +358,7 @@ const Template = ( args ) => {
id="container-element-gap"
defaultValue={ 20 }
suffix={
- <span className="text-badge-color-gray rounded-sm border border-solid border-border-subtle p-0.5 text-center text-xs font-medium bg-badge-background-gray">
+ <span className="text-badge-color-gray rounded border border-solid border-border-subtle p-0.5 text-center text-xs font-medium bg-badge-background-gray">
PX
</span>
}
diff --git a/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx b/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx
index 9ce015dd..61b24fef 100644
--- a/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx
+++ b/src/templates/admin-settings-SureCart/admin-settings-SureCart.stories.jsx
@@ -193,7 +193,7 @@ const Template = ( args ) => {
{ /* Navigation Bar */ }
<Topbar
gap={ 0 }
- className="w-auto min-h-[unset] h-16 shadow-xs p-0 relative z-[1]"
+ className="w-auto min-h-[unset] h-16 shadow-sm p-0 relative z-[1]"
>
<Topbar.Left className="p-5">
<Topbar.Item>
@@ -205,14 +205,14 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
Dashboard
</a>
<a
href="#"
target="_self"
- className="content-center no-underline inline-flex items-center gap-1 h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline inline-flex items-center gap-1 h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
<span>Orders</span>
<Badge
@@ -225,7 +225,7 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
Products
</a>
@@ -233,7 +233,7 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-primary text-sm font-medium cursor-pointer"
+ className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-primary text-sm font-medium cursor-pointer"
>
<span>Settings</span>
<span className="absolute bottom-0 left-0 w-full h-px bg-brand-800"></span>
@@ -241,14 +241,14 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-secondary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer"
>
Integrations
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden cursor-pointer text-sm font-semibold text-brand-800"
+ className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-800"
>
<span>Upgrade to Pro</span>
<ArrowUpRight
@@ -293,7 +293,7 @@ const Template = ( args ) => {
borderOn
collapsible={ false }
screenHeight={ false }
- className="h-full! w-64"
+ className="!h-full w-64"
>
<Sidebar.Body>
<Sidebar.Item>
@@ -395,7 +395,7 @@ const Template = ( args ) => {
{ /* Settings */ }
<Container
direction="column"
- className="bg-background-primary rounded-xl shadow-sm py-4 px-6"
+ className="bg-background-primary rounded-xl shadow py-4 px-6"
>
{ /* Tabs */ }
<Container.Item className="mb-0.5">
diff --git a/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx b/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx
index 9ee580e5..af61062b 100644
--- a/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx
+++ b/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.jsx
@@ -197,7 +197,7 @@ const Template = ( args ) => {
{ /* Navigation Bar */ }
<Topbar
gap={ 0 }
- className="w-auto min-h-[unset] h-16 shadow-xs p-0 relative z-[1]"
+ className="w-auto min-h-[unset] h-16 shadow-sm p-0 relative z-[1]"
>
<Topbar.Left className="p-5">
<Topbar.Item>
@@ -209,7 +209,7 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
Dashboard
</a>
@@ -217,7 +217,7 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-primary text-sm font-medium cursor-pointer"
+ className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-primary text-sm font-medium cursor-pointer"
>
<span>Settings</span>
<span className="absolute bottom-0 left-0 w-full h-px bg-brand-800"></span>
@@ -225,14 +225,14 @@ const Template = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
Integrations
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden cursor-pointer text-sm font-semibold text-brand-800"
+ className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-800"
>
<span>Upgrade to Pro</span>
<ArrowUpRight
@@ -280,7 +280,7 @@ const Template = ( args ) => {
borderOn
collapsible={ false }
screenHeight={ false }
- className="h-full! w-64"
+ className="!h-full w-64"
>
<Sidebar.Body>
<Sidebar.Item>
@@ -363,7 +363,7 @@ const Template = ( args ) => {
{ /* Settings */ }
<Container
direction="column"
- className="bg-background-primary rounded-xl shadow-sm py-4 px-6"
+ className="bg-background-primary rounded-xl shadow py-4 px-6"
>
{ /* Tabs */ }
<Container.Item className="mb-0.5">
@@ -435,7 +435,7 @@ const Template = ( args ) => {
</Container>
{ /* Preview */ }
<div className="p-2 rounded-lg bg-background-secondary">
- <div className="rounded-md border border-solid border-border-subtle bg-background-primary p-4 space-y-1.5 shadow-xs">
+ <div className="rounded-md border border-solid border-border-subtle bg-background-primary p-4 space-y-1.5 shadow-sm">
{ /* Site logo, title, and URL */ }
<div className="grid grid-cols-[1.75rem_1fr] items-center gap-3">
{ /* Site logo */ }
@@ -523,7 +523,7 @@ const Template = ( args ) => {
</Container.Item>
<EditorInput
by="label"
- className="min-h-32! [&+div]:items-start [&+div]:pt-1"
+ className="!min-h-32 [&+div]:items-start [&+div]:pt-1"
placeholder=""
options={ INPUT_SUGGESTIONS }
trigger="#"
diff --git a/src/templates/dashboard-astra/dashboard-astra.stories.jsx b/src/templates/dashboard-astra/dashboard-astra.stories.jsx
index f69b324a..deab0cb5 100644
--- a/src/templates/dashboard-astra/dashboard-astra.stories.jsx
+++ b/src/templates/dashboard-astra/dashboard-astra.stories.jsx
@@ -304,7 +304,7 @@ export const AstraDashboard = ( args ) => {
return (
<div { ...args }>
{ /* Navigation Topbar */ }
- <Topbar gap={ 0 } className="h-16 p-0 shadow-xs">
+ <Topbar gap={ 0 } className="h-16 p-0 shadow-sm">
<Topbar.Left className="p-5">
<Topbar.Item>
<Logo className="size-6" />
@@ -315,7 +315,7 @@ export const AstraDashboard = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-primary text-sm font-medium cursor-pointer"
+ className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-primary text-sm font-medium cursor-pointer"
>
<span>Dashboard</span>
<span className="absolute bottom-0 left-0 w-full h-px bg-brand-primary-600"></span>
@@ -323,21 +323,21 @@ export const AstraDashboard = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
Settings
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
Starter Templates
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden cursor-pointer text-sm font-semibold text-brand-primary-600"
+ className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-primary-600"
>
<span>Upgrade to Pro</span>
<ArrowUpRight
@@ -384,7 +384,7 @@ export const AstraDashboard = ( args ) => {
containerType="grid"
cols={ 8 }
gap="2xl"
- className="bg-background-primary p-6 shadow-xs rounded-xl"
+ className="bg-background-primary p-6 shadow-sm rounded-xl"
>
<Container.Item
colSpan={ 5 }
@@ -420,7 +420,7 @@ export const AstraDashboard = ( args ) => {
<img
src="https://placehold.co/272x154"
alt="Astra video"
- className="w-full h-full object-cover rounded-sm"
+ className="w-full h-full object-cover rounded"
/>
</Container.Item>
</Container>
@@ -489,7 +489,7 @@ export const AstraDashboard = ( args ) => {
className="px-2"
badgeItem={ option.badge }
disabled={ option.disabled }
- buttonWrapperClasses="bg-background-primary rounded-md shadow-xs border-0"
+ buttonWrapperClasses="bg-background-primary rounded-md shadow-sm border-0"
/>
)
) }
@@ -507,7 +507,7 @@ export const AstraDashboard = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden cursor-pointer text-sm font-semibold text-brand-primary-600"
+ className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-primary-600"
>
<span>Upgrade to Pro</span>
<ArrowUpRight
@@ -599,7 +599,7 @@ export const AstraDashboard = ( args ) => {
<Container
containerType="grid"
gap="xs"
- className="p-5 bg-background-primary border-[0.5px] border-solid border-border-subtle shadow-xs rounded-xl"
+ className="p-5 bg-background-primary border-[0.5px] border-solid border-border-subtle shadow-sm rounded-xl"
>
<Container.Item>
<Container gap="xs" align="center">
@@ -633,7 +633,7 @@ export const AstraDashboard = ( args ) => {
<Container
containerType="grid"
gap="xs"
- className="p-5 bg-background-primary border-[0.5px] border-solid border-border-subtle shadow-xs rounded-xl"
+ className="p-5 bg-background-primary border-[0.5px] border-solid border-border-subtle shadow-sm rounded-xl"
>
<Container.Item>
<Container gap="xs" align="center">
diff --git a/src/templates/dashboard-spectra/dashboard-spectra.stories.jsx b/src/templates/dashboard-spectra/dashboard-spectra.stories.jsx
index 3d2afa31..37248ea4 100644
--- a/src/templates/dashboard-spectra/dashboard-spectra.stories.jsx
+++ b/src/templates/dashboard-spectra/dashboard-spectra.stories.jsx
@@ -339,13 +339,13 @@ export const SpectraDashboard = ( args ) => {
Upgrade now
</a>
</div>
- <button className="inline-flex items-center justify-center absolute right-2 top-2 p-0 bg-transparent shadow-none border-0 outline-hidden focus:outline-hidden cursor-pointer">
+ <button className="inline-flex items-center justify-center absolute right-2 top-2 p-0 bg-transparent shadow-none border-0 outline-none focus:outline-none cursor-pointer">
<X className="size-4" />
<span className="sr-only">close</span>
</button>
</Container>
{ /* Navigation Topbar */ }
- <Topbar gap={ 0 } className="h-16 p-0 shadow-xs">
+ <Topbar gap={ 0 } className="h-16 p-0 shadow-sm">
<Topbar.Left className="p-4">
<Topbar.Item>
<Logo />
@@ -356,7 +356,7 @@ export const SpectraDashboard = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-primary text-sm font-medium cursor-pointer"
+ className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-primary text-sm font-medium cursor-pointer"
>
<span>Dashboard</span>
<span className="absolute bottom-0 left-0 w-full h-px bg-brand-primary-600"></span>
@@ -364,35 +364,35 @@ export const SpectraDashboard = ( args ) => {
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
Blocks
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
Settings
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
AI Features
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden text-text-tertiary text-sm font-medium cursor-pointer"
+ className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer"
>
Free vs Pro
</a>
<a
href="#"
target="_self"
- className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-hidden shadow-none border-0 focus:outline-hidden cursor-pointer text-sm font-semibold text-brand-primary-600"
+ className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-primary-600"
>
<span>Unlock Pro Features</span>
<ArrowUpRight
@@ -434,7 +434,7 @@ export const SpectraDashboard = ( args ) => {
containerType="grid"
cols={ 8 }
gap="2xl"
- className="bg-background-primary p-6 shadow-xs rounded-xl"
+ className="bg-background-primary p-6 shadow-sm rounded-xl"
>
<Container.Item
colSpan={ 5 }
@@ -477,7 +477,7 @@ export const SpectraDashboard = ( args ) => {
<img
src="https://placehold.co/272x154"
alt="Spectra video"
- className="w-full h-full object-cover rounded-sm"
+ className="w-full h-full object-cover rounded"
/>
</Container.Item>
</Container>
@@ -563,7 +563,7 @@ export const SpectraDashboard = ( args ) => {
containerType="grid"
cols={ 8 }
gap="2xl"
- className="bg-background-primary p-6 shadow-xs rounded-xl"
+ className="bg-background-primary p-6 shadow-sm rounded-xl"
>
<Container.Item
colSpan={ 4 }
@@ -746,7 +746,7 @@ export const SpectraDashboard = ( args ) => {
<Container
direction="column"
gap="xs"
- className="p-4 bg-background-primary shadow-xs rounded-xl"
+ className="p-4 bg-background-primary shadow-sm rounded-xl"
>
<Container.Item className="w-full">
<img
diff --git a/src/templates/onboarding-backup/onboarding-backup.stories.jsx b/src/templates/onboarding-backup/onboarding-backup.stories.jsx
index 0c16839d..99f6154b 100644
--- a/src/templates/onboarding-backup/onboarding-backup.stories.jsx
+++ b/src/templates/onboarding-backup/onboarding-backup.stories.jsx
@@ -55,7 +55,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs space-y-4">
+ <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm space-y-4">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-connect/onboarding-connect.stories.jsx b/src/templates/onboarding-connect/onboarding-connect.stories.jsx
index 7545747e..6c9b7c68 100644
--- a/src/templates/onboarding-connect/onboarding-connect.stories.jsx
+++ b/src/templates/onboarding-connect/onboarding-connect.stories.jsx
@@ -38,7 +38,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
+ <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
<div>
<Label
size="md"
diff --git a/src/templates/onboarding-done/onboarding-done.stories.jsx b/src/templates/onboarding-done/onboarding-done.stories.jsx
index 128c04be..64114fc6 100644
--- a/src/templates/onboarding-done/onboarding-done.stories.jsx
+++ b/src/templates/onboarding-done/onboarding-done.stories.jsx
@@ -38,7 +38,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs ">
+ <div className="grid md:grid-cols-2 md:w-[45rem] box-border mx-auto p-8 gap-10 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm ">
<div>
<Label
size="md"
diff --git a/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx b/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx
index eeb5bd88..615f5821 100644
--- a/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx
+++ b/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.jsx
@@ -56,7 +56,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
+ <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-import/onboarding-import.stories.jsx b/src/templates/onboarding-import/onboarding-import.stories.jsx
index c80ceff9..314ccc13 100644
--- a/src/templates/onboarding-import/onboarding-import.stories.jsx
+++ b/src/templates/onboarding-import/onboarding-import.stories.jsx
@@ -45,7 +45,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
+ <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-profile/onboarding-profile.stories.jsx b/src/templates/onboarding-profile/onboarding-profile.stories.jsx
index 3a69e537..872cf9b8 100644
--- a/src/templates/onboarding-profile/onboarding-profile.stories.jsx
+++ b/src/templates/onboarding-profile/onboarding-profile.stories.jsx
@@ -47,7 +47,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
+ <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx b/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx
index 902fea85..d640c14b 100644
--- a/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx
+++ b/src/templates/onboarding-setup-done/onboarding-setup-done.stories.jsx
@@ -46,7 +46,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs space-y-4">
+ <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm space-y-4">
<div className="flex justify-between gap-4">
<div>
<Title
diff --git a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx
index dcd1383d..eae2107d 100644
--- a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx
+++ b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.jsx
@@ -55,7 +55,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs space-y-4">
+ <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm space-y-4">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-social/onboarding-social.stories.jsx b/src/templates/onboarding-social/onboarding-social.stories.jsx
index 40c55b97..6e7a5224 100644
--- a/src/templates/onboarding-social/onboarding-social.stories.jsx
+++ b/src/templates/onboarding-social/onboarding-social.stories.jsx
@@ -46,7 +46,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form>
- <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
+ <div className="md:w-[45rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-spam/onboarding-spam.stories.jsx b/src/templates/onboarding-spam/onboarding-spam.stories.jsx
index 9bbc5b2b..0811d346 100644
--- a/src/templates/onboarding-spam/onboarding-spam.stories.jsx
+++ b/src/templates/onboarding-spam/onboarding-spam.stories.jsx
@@ -55,7 +55,7 @@ const Template = ( args ) => {
</Topbar.Right>
</Topbar>
<form onSubmit={ ( event ) => event.preventDefault() }>
- <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs">
+ <div className="md:w-[47rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm">
<div>
<Title
size="md"
diff --git a/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx b/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx
index 79966d8e..da0389a1 100644
--- a/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx
+++ b/src/templates/onboarding-welcome/onboarding-welcome.stories.jsx
@@ -46,7 +46,7 @@ const Template = ( args ) => {
</Topbar.Item>
</Topbar.Right>
</Topbar>
- <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-xs space-y-6">
+ <div className="md:w-[35rem] box-border mx-auto p-8 mt-10 border border-solid border-border-subtle bg-background-primary rounded-xl shadow-sm space-y-6">
<div>
<Label
size="md"
diff --git a/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx b/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx
index 58edd674..e9163280 100644
--- a/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx
+++ b/src/templates/sureforms-dashboard/sureforms-dashboard.stories.jsx
@@ -203,7 +203,7 @@ export const SureFormsDashboard = ( args ) => {
{ /* Main Navigation */ }
<Topbar
gap="0"
- className="h-14 p-0 shadow-xs bg-background-primary border-b border-border-subtle min-h-14"
+ className="h-14 p-0 shadow-sm bg-background-primary border-b border-border-subtle min-h-14"
>
<Topbar.Left className="p-4">
<SureFormsLogo />
@@ -287,7 +287,7 @@ export const SureFormsDashboard = ( args ) => {
className="space-y-8 order-1"
>
{ /* Welcome Banner */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-6">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-6">
<Container
containerType="grid"
cols={ { sm: 1, md: 12, lg: 12 } }
@@ -357,7 +357,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
{ /* Forms Overview */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-4 px-1 gap-4">
<Text
as="h4"
@@ -480,7 +480,7 @@ export const SureFormsDashboard = ( args ) => {
<div className="flex items-center justify-end gap-6">
<div className="flex items-center gap-2">
<div
- className="w-2 h-2 rounded-xs"
+ className="w-2 h-2 rounded-sm"
style={ {
backgroundColor:
'#0EA5E9',
@@ -495,7 +495,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
<div className="flex items-center gap-2">
<div
- className="w-2 h-2 rounded-xs"
+ className="w-2 h-2 rounded-sm"
style={ {
backgroundColor:
'#A855F7',
@@ -551,7 +551,7 @@ export const SureFormsDashboard = ( args ) => {
className="space-y-6 order-2"
>
{ /* Extend Your Website - SureRank */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-3">
<div className="flex items-center justify-between mb-2 px-1">
<Text
as="h4"
@@ -564,7 +564,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
<div className="bg-field-primary-background rounded-lg p-1">
- <div className="bg-background-primary border border-border-subtle rounded-md p-3 shadow-xs">
+ <div className="bg-background-primary border border-border-subtle rounded-md p-3 shadow-sm">
<div className="flex items-start justify-between mb-3">
<img
src={ sureRankLogo }
@@ -607,7 +607,7 @@ export const SureFormsDashboard = ( args ) => {
</div>
{ /* Quick Access */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-3">
<div className="mb-2 px-1">
<Text
as="h4"
@@ -623,7 +623,7 @@ export const SureFormsDashboard = ( args ) => {
{ quickAccessItems.map( ( item ) => (
<div
key={ item.id }
- className="bg-background-primary rounded-sm shadow-xs p-3"
+ className="bg-background-primary rounded shadow-sm p-3"
>
<div className="flex items-center gap-3">
{ item.icon }
@@ -649,7 +649,7 @@ export const SureFormsDashboard = ( args ) => {
colSpan={ 12 }
className="order-3 lg:order-2 lg:col-span-8 lg:col-start-1"
>
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-6">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-6">
<Container
containerType="grid"
align="center"
diff --git a/src/templates/uae-dashboard/uae-dashboard.stories.jsx b/src/templates/uae-dashboard/uae-dashboard.stories.jsx
index c1818aeb..8df228ce 100644
--- a/src/templates/uae-dashboard/uae-dashboard.stories.jsx
+++ b/src/templates/uae-dashboard/uae-dashboard.stories.jsx
@@ -128,7 +128,7 @@ export const UAEDashboard = ( args ) => {
{ /* Navigation Topbar */ }
<Topbar
gap="0"
- className="h-14 p-0 shadow-xs bg-background-primary border-b border-border-subtle min-h-14"
+ className="h-14 p-0 shadow-sm bg-background-primary border-b border-border-subtle min-h-14"
>
<Topbar.Left className="p-3">
<Topbar.Item>
@@ -207,7 +207,7 @@ export const UAEDashboard = ( args ) => {
{ /* Main Content Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 8 } } className="space-y-8">
{ /* Welcome Banner */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
<div className="flex items-center flex-col md:flex-row gap-8">
<div className="flex-1 space-y-4 order-2 md:order-1">
<Text
@@ -244,11 +244,11 @@ export const UAEDashboard = ( args ) => {
</Button>
</div>
</div>
- <div className="w-full md:w-72 h-auto md:h-40 bg-field-primary-background rounded-sm border border-border-subtle flex items-center justify-center relative overflow-hidden order-1 md:order-2">
+ <div className="w-full md:w-72 h-auto md:h-40 bg-field-primary-background rounded border border-border-subtle flex items-center justify-center relative overflow-hidden order-1 md:order-2">
<img
src={ videoBackground }
alt="Getting Started Video"
- className="w-full h-full object-cover rounded-sm"
+ className="w-full h-full object-cover rounded"
/>
<Button
variant="ghost"
@@ -264,7 +264,7 @@ export const UAEDashboard = ( args ) => {
</div>
{ /* Widgets & Features */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
<Text
as="h4"
size={ 14 }
@@ -284,7 +284,7 @@ export const UAEDashboard = ( args ) => {
{ switchState.map( ( widget ) => (
<div
key={ widget.id }
- className="bg-background-primary rounded-sm p-3 shadow-xs"
+ className="bg-background-primary rounded p-3 shadow-sm"
>
<div className="flex items-center justify-between mb-4">
<widget.icon className="w-5 h-5 text-icon-primary" />
@@ -355,7 +355,7 @@ export const UAEDashboard = ( args ) => {
</div>
{ /* Super Charge Your Workflow */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-3">
<Text
as="h4"
size={ 14 }
@@ -367,7 +367,7 @@ export const UAEDashboard = ( args ) => {
</Text>
<div className="bg-field-primary-background rounded-lg border border-border-subtle-lg p-1">
- <div className="bg-background-primary rounded-sm p-4 border border-border-subtle">
+ <div className="bg-background-primary rounded p-4 border border-border-subtle">
<div className="flex flex-col items-start gap-4">
<img
src={ sureRankLogo }
@@ -417,7 +417,7 @@ export const UAEDashboard = ( args ) => {
{ /* Sidebar Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 4 } } className="space-y-6">
{ /* Upgrade to Pro */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle overflow-hidden">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle overflow-hidden">
<img
src={ upgradeBanner }
alt="Upgrade to Pro"
@@ -474,7 +474,7 @@ export const UAEDashboard = ( args ) => {
</div>
{ /* Quick Access */ }
- <div className="bg-background-primary rounded-xl space-y-2 shadow-xs border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl space-y-2 shadow-sm border-0.5 border-solid border-border-subtle p-3">
<Text
as="h4"
size={ 14 }
@@ -486,7 +486,7 @@ export const UAEDashboard = ( args ) => {
</Text>
<div className="space-y-1 p-1 bg-field-primary-background rounded-lg">
- <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-3">
<Headphones className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -501,7 +501,7 @@ export const UAEDashboard = ( args ) => {
/>
</div>
- <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-3">
<BookOpen className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -510,7 +510,7 @@ export const UAEDashboard = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-2">
<CircleHelp className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -519,7 +519,7 @@ export const UAEDashboard = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-2">
<MessageSquare className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
diff --git a/src/templates/uae-widgets/uae-widgets.stories.jsx b/src/templates/uae-widgets/uae-widgets.stories.jsx
index f2f7c57c..4273d894 100644
--- a/src/templates/uae-widgets/uae-widgets.stories.jsx
+++ b/src/templates/uae-widgets/uae-widgets.stories.jsx
@@ -205,7 +205,7 @@ export const UAEWidgets = ( args ) => {
{ /* Navigation Topbar */ }
<Topbar
gap="0"
- className="h-14 p-0 shadow-xs bg-background-primary border-b border-border-subtle min-h-14"
+ className="h-14 p-0 shadow-sm bg-background-primary border-b border-border-subtle min-h-14"
>
<Topbar.Left className="p-3">
<Topbar.Item>
@@ -287,7 +287,7 @@ export const UAEWidgets = ( args ) => {
{ /* Main Content Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 8 } } className="space-y-8">
{ /* Widgets Section */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle p-4">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle p-4">
{ /* Header */ }
<div className="flex items-center justify-between mb-6 p-1">
<Text
@@ -353,7 +353,7 @@ export const UAEWidgets = ( args ) => {
{ filteredWidgets.map( ( widget ) => (
<div
key={ widget.id }
- className="flex flex-col justify-start bg-background-primary rounded-sm p-3 shadow-xs"
+ className="flex flex-col justify-start bg-background-primary rounded p-3 shadow-sm"
>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-center">
@@ -419,7 +419,7 @@ export const UAEWidgets = ( args ) => {
{ /* Sidebar Column */ }
<Container.Item colSpan={ { sm: 12, md: 12, lg: 4 } } className="space-y-6">
{ /* Upgrade to Pro */ }
- <div className="bg-background-primary rounded-xl shadow-xs border-0.5 border-solid border-border-subtle overflow-hidden">
+ <div className="bg-background-primary rounded-xl shadow-sm border-0.5 border-solid border-border-subtle overflow-hidden">
<div className="p-3">
<img
src={ upgradeBanner }
@@ -478,7 +478,7 @@ export const UAEWidgets = ( args ) => {
</div>
{ /* Quick Access */ }
- <div className="bg-background-primary rounded-xl space-y-2 shadow-xs border-0.5 border-solid border-border-subtle p-3">
+ <div className="bg-background-primary rounded-xl space-y-2 shadow-sm border-0.5 border-solid border-border-subtle p-3">
<Text
as="h4"
size={ 14 }
@@ -490,7 +490,7 @@ export const UAEWidgets = ( args ) => {
</Text>
<div className="space-y-1 p-1 bg-field-primary-background rounded-lg">
- <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-3">
<Headphones className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -505,7 +505,7 @@ export const UAEWidgets = ( args ) => {
/>
</div>
- <div className="flex items-center justify-between p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-between p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-3">
<BookOpen className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -514,7 +514,7 @@ export const UAEWidgets = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-2">
<CircleHelp className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
@@ -523,7 +523,7 @@ export const UAEWidgets = ( args ) => {
</div>
</div>
- <div className="flex items-center justify-start p-3 bg-background-primary rounded-sm shadow-xs">
+ <div className="flex items-center justify-start p-3 bg-background-primary rounded shadow-sm">
<div className="flex items-center gap-2">
<MessageSquare className="size-4 text-icon-primary" />
<Text size={ 14 } weight={ 500 } color="primary">
diff --git a/src/theme/theme.css b/src/theme/theme.css
deleted file mode 100644
index 9aa06505..00000000
--- a/src/theme/theme.css
+++ /dev/null
@@ -1,263 +0,0 @@
-/**
- * Force UI design tokens for Tailwind CSS v4. Import-agnostic: declares only
- * tokens, utilities and variants — no preflight, so consumers keep control of
- * the base layer. Consumers: @import "tailwindcss"; @import "@bsf/force-ui/theme.css";
- *
- * @since x.x.x
- */
-
-@theme {
- /* brand */
- --color-brand-background-50: #eff6ff;
- --color-brand-background-hover-100: #dbeafe;
- --color-brand-200: #bfdbfe;
- --color-brand-border-300: #93c5fd;
- --color-brand-400: #60a5fa;
- --color-brand-500: #3b82f6;
- --color-brand-primary-600: #2563eb;
- --color-brand-hover-700: #1d4ed8;
- --color-brand-800: #1e40af;
- --color-brand-900: #1e3a8a;
- --color-brand-text-950: #172554;
-
- /* background */
- --color-background-primary: #fff;
- --color-background-secondary: #f3f4f6;
- --color-background-inverse: #111827;
- --color-background-brand: #2563eb;
- --color-background-important: #dc2626;
-
- /* field */
- --color-field-primary-background: #f9fafb;
- --color-field-secondary-background: #fff;
- --color-field-primary-hover: #f3f4f6;
- --color-field-secondary-hover: #f3f4f6;
- --color-field-dropzone-background: #fff;
- --color-field-border: #e5e7eb;
- --color-field-dropzone-background-hover: #f9fafb;
- --color-field-dropzone-color: #2563eb;
- --color-field-label: #111827;
- --color-field-input: #111827;
- --color-field-helper: #6b7280;
- --color-field-background-disabled: #f9fafb;
- --color-field-color-disabled: #bdc1c7;
- --color-field-placeholder: #6b7280;
- --color-field-border-disabled: #f3f4f6;
- --color-field-color-error: #dc2626;
- --color-field-border-error: #fecaca;
- --color-field-background-error: #fef2f2;
- --color-field-required: #dc2626;
-
- /* border */
- --color-border-interactive: #2563eb;
- --color-border-subtle: #e5e7eb;
- --color-border-strong: #6b7280;
- --color-border-inverse: #374151;
- --color-border-disabled: #e5e7eb;
- --color-border-muted: #e5e7eb;
- --color-border-error: #dc2626;
- --color-border-transparent-subtle: #37415114;
- --color-border-white: #fff;
-
- /* text */
- --color-text-primary: #111827;
- --color-text-secondary: #4b5563;
- --color-text-tertiary: #6b7280;
- --color-text-on-color: #fff;
- --color-text-error: #dc2626;
- --color-text-error-inverse: #f87171;
- --color-text-inverse: #fff;
- --color-text-disabled: #bdc1c7;
- --color-text-on-button-disabled: #9ca3af;
-
- /* link */
- --color-link-primary: #2563eb;
- --color-link-primary-hover: #1d4ed8;
- --color-link-inverse: #38bdf8;
- --color-link-visited: #7c3aed;
- --color-link-visited-inverse: #a78bfa;
- --color-link-inverse-hover: #7dd3fc;
-
- /* icon */
- --color-icon-primary: #111827;
- --color-icon-secondary: #4b5563;
- --color-icon-on-color: #fff;
- --color-icon-inverse: #fff;
- --color-icon-interactive: #2563eb;
- --color-icon-on-color-disabled: #9ca3af;
- --color-icon-disabled: #bdc1c7;
-
- /* support */
- --color-support-error: #dc2626;
- --color-support-success: #16a34a;
- --color-support-warning: #eab308;
- --color-support-info: #0284c7;
- --color-support-error-inverse: #f87171;
- --color-support-success-inverse: #4ade80;
- --color-support-warning-inverse: #fde047;
- --color-support-info-inverse: #38bdf8;
-
- /* button */
- --color-button-primary: #2563eb;
- --color-button-primary-hover: #1d4ed8;
- --color-button-secondary: #1f2937;
- --color-button-secondary-hover: #374151;
- --color-button-tertiary: #fff;
- --color-button-tertiary-hover: #f9fafb;
- --color-button-danger: #dc2626;
- --color-button-danger-secondary: #dc2626;
- --color-button-danger-hover: #b91c1c;
- --color-button-disabled: #f3f4f6;
- --color-button-tertiary-border: #e5e7eb;
- --color-button-tertiary-color: #111827;
-
- /* focus */
- --color-focus: #2563eb;
- --color-focus-inset: #fff;
- --color-focus-inverse: #38bdf8;
- --color-focus-inverse-inset: #111827;
- --color-focus-error: #dc2626;
- --color-focus-border: #bfdbfe;
- --color-focus-error-border: #fecaca;
-
- /* misc */
- --color-misc-highlight: #bfdbfe;
- --color-misc-overlay: #11182780;
- --color-misc-skeleton-background: #f3f4f6;
- --color-misc-skeleton-element: #bdc1c7;
- --color-misc-popup-button-hover: #1118270d;
- --color-misc-tab-item-hover: #e5e7eb;
- --color-misc-dropdown-hover: #f3f4f6;
- --color-misc-loader-base: #1118270d;
- --color-misc-loader-color: #2563eb;
- --color-misc-progress-background: #e5e7eb;
-
- /* badge */
- --color-badge-background-gray: #f9fafb;
- --color-badge-color-gray: #1f2937;
- --color-badge-hover-gray: #f3f4f6;
- --color-badge-border-gray: #e5e7eb;
- --color-badge-background-red: #fef2f2;
- --color-badge-color-red: #b91c1c;
- --color-badge-hover-red: #fee2e2;
- --color-badge-border-red: #fecaca;
- --color-badge-background-yellow: #fefce8;
- --color-badge-color-yellow: #a16207;
- --color-badge-hover-yellow: #fef9c3;
- --color-badge-border-yellow: #fef08a;
- --color-badge-hover-green: #dcfce7;
- --color-badge-border-green: #bbf7d0;
- --color-badge-background-green: #f0fdf4;
- --color-badge-color-green: #15803d;
- --color-badge-background-sky: #f0f9ff;
- --color-badge-color-sky: #0369a1;
- --color-badge-hover-sky: #e0f2fe;
- --color-badge-border-sky: #bae6fd;
- --color-badge-background-disabled: #f3f4f6;
- --color-badge-color-disabled: #bdc1c7;
- --color-badge-hover-disabled: #f3f4f6;
- --color-badge-border-disabled: #e5e7eb;
- --color-badge-background-important: #dc2626;
-
- /* alert */
- --color-alert-background-neutral: #fff;
- --color-alert-border-neutral: #e5e7eb;
- --color-alert-background-danger: #fef2f2;
- --color-alert-border-danger: #fecaca;
- --color-alert-background-warning: #fefce8;
- --color-alert-border-warning: #fef08a;
- --color-alert-background-green: #f0fdf4;
- --color-alert-border-green: #bbf7d0;
- --color-alert-background-info: #f0f9ff;
- --color-alert-border-info: #bae6fd;
-
- /* tab */
- --color-tab-background: #f3f4f6;
- --color-tab-border: #e5e7eb;
-
- /* tooltip */
- --color-tooltip-background-light: #fff;
- --color-tooltip-background-dark: #111827;
-
- /* toggle */
- --color-toggle-off: #e5e7eb;
- --color-toggle-on: #2563eb;
- --color-toggle-dial-background: #fff;
- --color-toggle-off-hover: #bdc1c7;
- --color-toggle-off-border: #bdc1c7;
- --color-toggle-on-hover: #3b82f6;
- --color-toggle-on-border: #60a5fa;
- --color-toggle-on-disabled: #eff6ff;
- --color-toggle-off-disabled: #f3f4f6;
-
- /* box-shadow — overrides v4 default --shadow-xs and adds custom scale */
- --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
- --shadow-soft-shadow-sm: 0 6px 32px -12px rgba(149, 160, 178, 0.12);
- --shadow-soft-shadow: 0 8px 32px -12px rgba(149, 160, 178, 0.16);
- --shadow-soft-shadow-md: 0 10px 32px -12px rgba(149, 160, 178, 0.2);
- --shadow-soft-shadow-lg: 0 12px 32px -12px rgba(149, 160, 178, 0.24);
- --shadow-soft-shadow-xl: 0 16px 32px -12px rgba(149, 160, 178, 0.32);
- --shadow-soft-shadow-2xl: 0 24px 64px -12px rgba(149, 160, 178, 0.32);
- --shadow-soft-shadow-inner: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
- --shadow-toggle-disabled: 1px 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
-
- /* font-size */
- --text-tiny: 0.625rem;
-
- /* letter-spacing */
- --tracking-2: 0.125em;
-}
-
-/* RTL-aware variant (was a tailwindcss/plugin addVariant in v3). */
-@custom-variant not-rtl (&:not([dir="rtl"], [dir="rtl"] *));
-
-/* v3 borderWidth {0.5} parity, incl. per-side variants. */
-@utility border-0\0.5 {
- border-width: 0.5px;
-}
-
-@utility border-t-0\0.5 {
- border-top-width: 0.5px;
-}
-
-@utility border-b-0\0.5 {
- border-bottom-width: 0.5px;
-}
-
-@utility border-l-0\0.5 {
- border-left-width: 0.5px;
-}
-
-@utility border-r-0\0.5 {
- border-right-width: 0.5px;
-}
-
-@utility border-x-0\0.5 {
- border-inline-width: 0.5px;
-}
-
-@utility border-y-0\0.5 {
- border-block-width: 0.5px;
-}
-
-/* v3 divide 0.5 parity; shapes mirror v4 divide-* emission. */
-@utility divide-y-0\0.5 {
- :where(& > :not(:last-child)) {
- --tw-divide-y-reverse: 0;
-
- border-bottom-style: var(--tw-border-style);
- border-top-style: var(--tw-border-style);
- border-top-width: calc(0.5px * var(--tw-divide-y-reverse));
- border-bottom-width: calc(0.5px * calc(1 - var(--tw-divide-y-reverse)));
- }
-}
-
-@utility divide-x-0\0.5 {
- :where(& > :not(:last-child)) {
- --tw-divide-x-reverse: 0;
-
- border-inline-style: var(--tw-border-style);
- border-inline-start-width: calc(0.5px * var(--tw-divide-x-reverse));
- border-inline-end-width: calc(0.5px * calc(1 - var(--tw-divide-x-reverse)));
- }
-}
diff --git a/src/utilities/withTW.js b/src/utilities/withTW.js
index 5a7e5a8e..fec63674 100644
--- a/src/utilities/withTW.js
+++ b/src/utilities/withTW.js
@@ -1,19 +1,6 @@
import deepmerge from 'deepmerge';
import libraryConfig from '../theme/default-config';
-/**
- * Deep-merges the Force UI theme into a consumer Tailwind config.
- *
- * @deprecated since 2.0.0. Force UI is now CSS-first for Tailwind v4. Instead of
- * merging a JS config, import the shipped tokens in your CSS entry with
- * `"tailwindcss"` followed by `"@bsf/force-ui/theme.css"`. This helper is
- * retained only for consumers still on Tailwind v4's legacy JS-config path
- * (loaded via the CSS `@config` directive) and will be removed in 3.0.0.
- *
- * @since x.x.x
- * @param {Object} tailwindConfig Consumer Tailwind config object.
- * @return {Object} Config merged with the Force UI theme.
- */
const withTW = ( tailwindConfig ) => {
return deepmerge( libraryConfig, { ...tailwindConfig } );
};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..c3ccfbb8
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,6 @@
+const withTW = require('./src/utilities/withTW');
+
+module.exports = withTW({
+ content: ['./src/**/*.{ts,tsx,js,jsx}'],
+ plugins: [require('@tailwindcss/container-queries')],
+});
diff --git a/version.json b/version.json
index fdc981e4..849418d2 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
{
- "force-ui": "2.0.0"
+ "force-ui": "1.8.0"
}
diff --git a/vite.config.ts b/vite.config.ts
index 45f32e7c..d86d867f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,22 +2,9 @@ import preserveDirectives from 'rollup-preserve-directives';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
-import { copyFileSync } from 'fs';
import dts from 'vite-plugin-dts';
import pkg from './package.json';
-// Ship the CSS-first design tokens as a raw asset (@bsf/force-ui/theme.css).
-// Runs on closeBundle so it lands after Vite clears dist (emptyOutDir).
-const copyThemeCss = () => ( {
- name: 'force-ui-copy-theme-css',
- closeBundle() {
- copyFileSync(
- resolve(process.cwd(), 'src/theme/theme.css'),
- resolve(process.cwd(), 'dist/theme.css')
- );
- },
-} );
-
// https://vitejs.dev/config/
export default defineConfig({
build: {
@@ -91,7 +78,6 @@ export default defineConfig({
exclude: ['**/node_modules/**', '**/_virtual/**'],
}),
preserveDirectives(),
- copyThemeCss(),
],
esbuild: {
treeShaking: true,
From c6a992ed3a51ea5768b2b2f4f790d25b0aa48af1 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 3 Aug 2026 16:16:53 +0600
Subject: [PATCH 08/14] feat: support custom mention trigger regex in
EditorInput
Adds an optional triggerRegex prop that overrides the built-in
mention-suggestion matcher so consumers can allow the trigger without a
leading space (e.g. inside quoted JSON-LD string values). When omitted,
the existing trigger-based matcher is used - zero behavior change.
Related to brainstormforce/surerank#2600
---
.../editor-input/editor-input.stories.tsx | 65 +++++++++++++++++++
src/components/editor-input/editor-input.tsx | 11 ++++
.../mention-plugin/mention-plugin.tsx | 23 ++++++-
3 files changed, 98 insertions(+), 1 deletion(-)
diff --git a/src/components/editor-input/editor-input.stories.tsx b/src/components/editor-input/editor-input.stories.tsx
index a51536c8..8ba209d9 100644
--- a/src/components/editor-input/editor-input.stories.tsx
+++ b/src/components/editor-input/editor-input.stories.tsx
@@ -2,6 +2,7 @@ import EditorInput from './editor-input';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { useEffect, useRef, type ReactNode } from 'react';
import { createRoot, type Root } from 'react-dom/client';
+import { expect, userEvent, within } from 'storybook/test';
// Renders its children inside an open Shadow DOM root, the way a real consumer
// mounts the editor in a web component: a SEPARATE React root created on the
@@ -112,6 +113,70 @@ Large.args = {
onChange: ( editorState ) => editorState.toJSON(),
};
+// Overrides the suggestion trigger with a custom regex so the menu opens on
+// "{{" (e.g. template-variable syntax) instead of the default "@" trigger.
+export const CustomTriggerRegex: Story = Template.bind( {} );
+CustomTriggerRegex.args = {
+ size: 'md',
+ placeholder: 'Type {{ to view variable suggestions',
+ options,
+ triggerRegex: /(^|\s|\()(\{\{(\w{0,30}))$/,
+ onChange: ( editorState ) => editorState.toJSON(),
+};
+CustomTriggerRegex.play = async ( { canvasElement } ) => {
+ const editor = canvasElement.querySelector<HTMLElement>(
+ '[contenteditable="true"]'
+ );
+ await expect( editor ).not.toBeNull();
+ await userEvent.click( editor! );
+
+ // The menu portals to document.body, not the story canvas.
+ const body = within( canvasElement.ownerDocument.body );
+
+ // The default "@" trigger must NOT open the menu when a custom regex is
+ // provided. The lookup service debounces by 500ms, so give it time to
+ // (not) fire before asserting.
+ await userEvent.keyboard( '@Re' );
+ await new Promise( ( resolve ) => setTimeout( resolve, 700 ) );
+ await expect( body.queryByText( 'Red' ) ).not.toBeInTheDocument();
+
+ // The custom "{{" trigger opens the menu. In `userEvent.keyboard`, "{{"
+ // escapes a literal "{", so four braces type two.
+ await userEvent.keyboard( ' {{{{Re' );
+ await expect(
+ await body.findByText( 'Red', {}, { timeout: 3000 } )
+ ).toBeVisible();
+};
+
+// SureRank PR #2776: smart tags must be insertable WITHOUT a blank space
+// before the trigger (e.g. "text@" right after a word). The default matcher
+// requires `(^|\s|\()` before the trigger; this custom regex drops that
+// boundary so "@" opens the menu anywhere, including mid-word.
+export const MentionWithoutLeadingSpace: Story = Template.bind( {} );
+MentionWithoutLeadingSpace.args = {
+ size: 'md',
+ options,
+ triggerRegex: /()(@(\w{0,75}))$/,
+ onChange: ( editorState ) => editorState.toJSON(),
+};
+MentionWithoutLeadingSpace.play = async ( { canvasElement } ) => {
+ const editor = canvasElement.querySelector<HTMLElement>(
+ '[contenteditable="true"]'
+ );
+ await expect( editor ).not.toBeNull();
+ await userEvent.click( editor! );
+
+ // The menu portals to document.body, not the story canvas.
+ const body = within( canvasElement.ownerDocument.body );
+
+ // No space before "@" — the default matcher would ignore this; the
+ // custom regex must open the menu.
+ await userEvent.keyboard( 'Hello@Re' );
+ await expect(
+ await body.findByText( 'Red', {}, { timeout: 3000 } )
+ ).toBeVisible();
+};
+
// Renders the editor inside a Shadow DOM to verify it works across the shadow
// boundary (fix from facebook/lexical PR #7790).
export const InsideShadowDom: Story = ( args ) => (
diff --git a/src/components/editor-input/editor-input.tsx b/src/components/editor-input/editor-input.tsx
index 89571dc8..e568d8af 100644
--- a/src/components/editor-input/editor-input.tsx
+++ b/src/components/editor-input/editor-input.tsx
@@ -72,6 +72,15 @@ interface EditorInputProps<T = TOptionItem> {
by?: T extends Record<string, unknown> ? keyof T : string;
/** The trigger to be used to show the mention options. */
trigger?: string;
+ /**
+ * Custom regex that overrides the default mention-suggestion matcher.
+ * When provided, the `trigger` prop is ignored for matching. The regex
+ * must expose the same capture groups as the default matcher:
+ * 1 = leading whitespace/boundary, 2 = replaceable string (trigger +
+ * query), 3 = query string used to filter the options.
+ * When omitted, the default trigger-based matcher is used.
+ */
+ triggerRegex?: RegExp;
/** The component to be used for the mention menu. */
menuComponent?: TMenuComponent;
/** The component to be used for the mention menu items. */
@@ -109,6 +118,7 @@ const EditorInput = forwardRef<LexicalEditor, EditorInputProps>(
options,
by = 'name',
trigger = '@',
+ triggerRegex,
menuComponent,
menuItemComponent,
className,
@@ -185,6 +195,7 @@ const EditorInput = forwardRef<LexicalEditor, EditorInputProps>(
by={ by }
optionsArray={ options }
trigger={ trigger }
+ triggerRegex={ triggerRegex }
autoSpace={ autoSpaceAfterMention }
/>
<OnChangePlugin
diff --git a/src/components/editor-input/mention-plugin/mention-plugin.tsx b/src/components/editor-input/mention-plugin/mention-plugin.tsx
index 191aee9f..90e2c615 100644
--- a/src/components/editor-input/mention-plugin/mention-plugin.tsx
+++ b/src/components/editor-input/mention-plugin/mention-plugin.tsx
@@ -58,6 +58,7 @@ export interface MentionPluginProps<T = OptionsArray> {
menuComponent?: TMenuComponent;
menuItemComponent?: TMenuItemComponent;
autoSpace: boolean;
+ triggerRegex?: RegExp;
}
const MentionPlugin = ( {
@@ -68,6 +69,7 @@ const MentionPlugin = ( {
menuComponent: MenuComponent = EditorCombobox,
menuItemComponent: MenuItemComponent = EditorCombobox.Item,
autoSpace = true,
+ triggerRegex,
}: MentionPluginProps ) => {
const { y, refs, strategy } = useFloating( {
placement: 'bottom',
@@ -83,6 +85,25 @@ const MentionPlugin = ( {
// matcher) once per trigger instead of on every render — this runs on the
// editor's per-keystroke render path.
const checkForAtSignMentions = useMemo( () => {
+ // A custom trigger regex replaces the built-in matcher entirely. It
+ // must expose the same capture groups the built-in regex does:
+ // 1 = leading whitespace/boundary, 2 = replaceable string (trigger +
+ // query), 3 = query string used to filter the options.
+ if ( triggerRegex ) {
+ return ( text: string ) => {
+ const match = triggerRegex.exec( text );
+ if ( match === null ) {
+ return null;
+ }
+ const maybeLeadingWhitespace = match[ 1 ] ?? '';
+ return {
+ leadOffset: match.index + maybeLeadingWhitespace.length,
+ matchingString: match[ 3 ] ?? '',
+ replaceableString: match[ 2 ] ?? '',
+ };
+ };
+ }
+
const PUNCTUATION =
'\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
@@ -135,7 +156,7 @@ const MentionPlugin = ( {
}
return null;
};
- }, [ trigger ] );
+ }, [ trigger, triggerRegex ] );
const [ editor ] = useLexicalComposerContext();
const [ queryString, setQueryString ] = useState<string | null>( null );
From 0e834889fad3f1adb6f67d573f05747ffbf1a089 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 3 Aug 2026 16:33:50 +0600
Subject: [PATCH 09/14] chore: bump version to 1.8.1 and add changelog entry
---
README.md | 4 ++--
changelog.txt | 3 +++
package-lock.json | 4 ++--
package.json | 2 +-
version.json | 2 +-
5 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 3c85c599..5e06b083 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
```json
"dependencies": {
- "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.8.0"
+ "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.8.1"
}
```
@@ -28,7 +28,7 @@ npm install
Or you can directly run the following command to install the package -
```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.8.0
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.8.1
```
<br />
diff --git a/changelog.txt b/changelog.txt
index 28ed3f08..e499eec9 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,3 +1,6 @@
+Version 1.8.1 - 3rd August, 2026
+- New: Organism - Editor Input: Added optional `triggerRegex` prop that overrides the built-in mention-suggestion matcher, so consumers can allow the trigger without a leading blank space (e.g. directly after a double quote inside JSON string values). The custom regex must expose the same capture groups as the built-in matcher: 1 = leading boundary, 2 = replaceable string (trigger + query), 3 = query string used to filter options. When omitted, the existing trigger-based matcher is used unchanged.
+
Version 1.8.0 - 17th July, 2026
- New: Atom - File Picker: Added a standalone file upload component that displays the selected file name and supports a controlled value and an optional clear action.
- New: Atom - Select: Added `inlineSearch` prop that renders the search input inside the trigger instead of the dropdown. Selected items render as badges (multiple) or as the input value (single). Mutually exclusive with `combobox`; `inlineSearch` wins when both are passed.
diff --git a/package-lock.json b/package-lock.json
index a172425f..813b5954 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@bsf/force-ui",
- "version": "1.8.0",
+ "version": "1.8.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@bsf/force-ui",
- "version": "1.8.0",
+ "version": "1.8.1",
"hasInstallScript": true,
"license": "ISC",
"dependencies": {
diff --git a/package.json b/package.json
index cb48168d..39ac5140 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@bsf/force-ui",
- "version": "1.8.0",
+ "version": "1.8.1",
"description": "Library of components for the BSF project",
"main": "./dist/force-ui.cjs.js",
"module": "./dist/force-ui.es.js",
diff --git a/version.json b/version.json
index 849418d2..b4050a71 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
{
- "force-ui": "1.8.0"
+ "force-ui": "1.8.1"
}
From fdf581b2f631ae0bac2855fff4c0dbd8010e2be6 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 3 Aug 2026 16:53:47 +0600
Subject: [PATCH 10/14] test: close mention menu before story settles to keep
axe scan clean
The storybook test-runner's axe pass runs on the final story state. The
open combobox popup has pre-existing aria-required-parent/children and
aria-valid-attr-value violations unrelated to the triggerRegex feature,
so the new interaction stories now dismiss the menu after asserting.
---
.../editor-input/editor-input.stories.tsx | 18 +++++++++++++++++-
1 file changed, 17 insertions(+), 1 deletion(-)
diff --git a/src/components/editor-input/editor-input.stories.tsx b/src/components/editor-input/editor-input.stories.tsx
index 8ba209d9..c51bb12c 100644
--- a/src/components/editor-input/editor-input.stories.tsx
+++ b/src/components/editor-input/editor-input.stories.tsx
@@ -2,7 +2,7 @@ import EditorInput from './editor-input';
import type { Meta, StoryFn } from '@storybook/react-vite';
import { useEffect, useRef, type ReactNode } from 'react';
import { createRoot, type Root } from 'react-dom/client';
-import { expect, userEvent, within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
// Renders its children inside an open Shadow DOM root, the way a real consumer
// mounts the editor in a web component: a SEPARATE React root created on the
@@ -146,6 +146,14 @@ CustomTriggerRegex.play = async ( { canvasElement } ) => {
await expect(
await body.findByText( 'Red', {}, { timeout: 3000 } )
).toBeVisible();
+
+ // Close the menu before the story settles: the test-runner's axe scan
+ // runs on the final story state, and the open combobox popup has known
+ // aria-required-parent/children violations unrelated to this feature.
+ await userEvent.keyboard( '{Escape}' );
+ await waitFor( () =>
+ expect( body.queryByText( 'Red' ) ).not.toBeInTheDocument()
+ );
};
// SureRank PR #2776: smart tags must be insertable WITHOUT a blank space
@@ -175,6 +183,14 @@ MentionWithoutLeadingSpace.play = async ( { canvasElement } ) => {
await expect(
await body.findByText( 'Red', {}, { timeout: 3000 } )
).toBeVisible();
+
+ // Close the menu before the story settles: the test-runner's axe scan
+ // runs on the final story state, and the open combobox popup has known
+ // aria-required-parent/children violations unrelated to this feature.
+ await userEvent.keyboard( '{Escape}' );
+ await waitFor( () =>
+ expect( body.queryByText( 'Red' ) ).not.toBeInTheDocument()
+ );
};
// Renders the editor inside a Shadow DOM to verify it works across the shadow
From ed8e1672b5c595e1b2b424f71a0f1ca9ed2625f8 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 3 Aug 2026 19:28:05 +0600
Subject: [PATCH 11/14] fix: keep multi-select dropdown open across selections
Selecting an option in multiple mode no longer closes the dropdown, and
clicking an already-selected option deselects it. Escape and outside
click (useDismiss) still close the list; single mode still closes on
select. Updated MultiSelect and InlineSearchMulti story play tests to
assert the keep-open and toggle behavior.
---
changelog.txt | 3 +-
src/components/select/select-atom.stories.tsx | 28 ++++++++++++-------
src/components/select/select.tsx | 15 +++++-----
3 files changed, 27 insertions(+), 19 deletions(-)
diff --git a/changelog.txt b/changelog.txt
index e499eec9..93698dcd 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,4 +1,5 @@
-Version 1.8.1 - 3rd August, 2026
+Version 1.8.1 - 4th August, 2026
+- Fix: Atom - Select: In `multiple` mode the dropdown now stays open while selecting or deselecting options, closing only on Escape or outside click.
- New: Organism - Editor Input: Added optional `triggerRegex` prop that overrides the built-in mention-suggestion matcher, so consumers can allow the trigger without a leading blank space (e.g. directly after a double quote inside JSON string values). The custom regex must expose the same capture groups as the built-in matcher: 1 = leading boundary, 2 = replaceable string (trigger + query), 3 = query string used to filter options. When omitted, the existing trigger-based matcher is used unchanged.
Version 1.8.0 - 17th July, 2026
diff --git a/src/components/select/select-atom.stories.tsx b/src/components/select/select-atom.stories.tsx
index 5220ed97..afca9799 100644
--- a/src/components/select/select-atom.stories.tsx
+++ b/src/components/select/select-atom.stories.tsx
@@ -248,17 +248,25 @@ MultiSelect.play = async ( { canvasElement } ) => {
const listBox = await screen.findByRole( 'listbox' );
expect( listBox ).toHaveTextContent( 'Red' );
- // Click on the first option
+ // Select two options — the dropdown stays open in multiple mode
const allOptions = await screen.findAllByRole( 'option' );
- await userEvent.click( allOptions[ 0 ] );
-
- // Check if the listbox contains the option 'Orange'
- await userEvent.click( selectButton );
- const allOptions2 = await screen.findAllByRole( 'option' );
- await userEvent.click( allOptions2[ 1 ] );
+ await userEvent.click( allOptions[ 0 ] ); // Red
+ expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
+ await userEvent.click( allOptions[ 1 ] ); // Orange
+ expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
// Check if the button text is updated
expect( selectButton ).toHaveTextContent( /Red.*Orange/ );
+
+ // Clicking an already-selected option deselects it without closing
+ await userEvent.click( allOptions[ 1 ] ); // Orange (toggle off)
+ expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
+ expect( selectButton ).toHaveTextContent( 'Red' );
+ expect( selectButton ).not.toHaveTextContent( 'Orange' );
+
+ // Escape still closes the dropdown
+ await userEvent.keyboard( '{Escape}' );
+ expect( screen.queryByRole( 'listbox' ) ).toBeNull();
};
export const MultiSelectWithoutPortal = SelectWithoutPortalTemplate.bind( {} );
@@ -498,15 +506,15 @@ InlineSearchMulti.play = async ( { canvasElement } ) => {
expect( listbox ).toHaveTextContent( 'Orange' );
expect( listbox ).not.toHaveTextContent( 'Cyan' );
- // Clear and select two options
+ // Clear and select two options — dropdown stays open in multiple mode
await userEvent.clear( input );
const allOptions = await screen.findAllByRole( 'option' );
await userEvent.click( allOptions[ 0 ] ); // Red
+ expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
- // Re-open and select Orange
- await userEvent.click( triggerWrapper );
const allOptions2 = await screen.findAllByRole( 'option' );
await userEvent.click( allOptions2[ 1 ] ); // Orange
+ expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
// Two badges should be visible inside trigger
const redBadge = await canvas.findByText( 'Red' );
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index a568101f..c79e795b 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -1251,20 +1251,19 @@ const SelectComponent = ( {
return selectedValue === newValue;
} );
+ // Toggle: deselect if already selected, otherwise select. The
+ // dropdown stays open so multiple options can be picked in one go;
+ // Escape and outside click (useDismiss) still close it.
if ( valueIndex !== -1 ) {
- return;
+ selectedValues.splice( valueIndex, 1 );
+ } else {
+ selectedValues.push( newValue );
+ setSelectedIndex( index );
}
- selectedValues.push( newValue );
if ( ! isControlled ) {
setSelected( selectedValues );
}
- setSelectedIndex( index );
- (
- ( refs.domReference.current ??
- refs.reference.current ) as HTMLElement | null
- )?.focus();
- setIsOpen( false );
setSearchKeyword( '' );
if ( typeof onChange === 'function' ) {
onChange( selectedValues );
From dd13910e620fc01143d3f941200ab92af35b411a Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 6 Aug 2026 23:50:24 +0600
Subject: [PATCH 12/14] fix: normalize select value when multiple mode is
toggled
Flipping `multiple` to true while a single value was already selected
crashed the component: `SelectItem`'s `multipleChecked` called `.some()`
on a non-array value and `handleMultiSelect` spread it, so opening the
dropdown or picking a second option threw a TypeError.
Add a `toValuesArray()` helper and route every multi-value path through
it (badge rendering, toggle/close handlers, placeholder checks, inline
search backspace). In single mode a non-empty array now falls back to its
first entry so `render()`/children never receive an array; an empty array
is passed through unchanged to preserve existing output. Also add the
missing `multiple`/`render`/`children`/`by` memo dependencies that kept
stale single-mode closures alive after a mode flip.
Adds a ToggleMultipleAtRuntime story covering the flip in both directions.
---
src/components/select/select-atom.stories.tsx | 75 +++++++++++++++++++
src/components/select/select.tsx | 53 ++++++-------
src/components/select/utils.ts | 25 +++++++
3 files changed, 127 insertions(+), 26 deletions(-)
diff --git a/src/components/select/select-atom.stories.tsx b/src/components/select/select-atom.stories.tsx
index afca9799..f1d87bf7 100644
--- a/src/components/select/select-atom.stories.tsx
+++ b/src/components/select/select-atom.stories.tsx
@@ -554,6 +554,81 @@ InlineSearchMulti.play = async ( { canvasElement } ) => {
expect( screen.queryByRole( 'listbox' ) ).toBeNull();
};
+// Toggling `multiple` at runtime while a selection already exists.
+export const ToggleMultipleAtRuntime: Story = ( { size, disabled } ) => {
+ const [ multiple, setMultiple ] = useState( false );
+ return (
+ <div style={ { width: '300px' } }>
+ <button type="button" onClick={ () => setMultiple( ( v ) => ! v ) }>
+ { multiple ? 'Disable multiple' : 'Enable multiple' }
+ </button>
+ <Select
+ size={ size }
+ multiple={ multiple }
+ disabled={ disabled }
+ onChange={ ( value ) => value }
+ >
+ <Select.Button
+ label="Select a Color"
+ placeholder="Select an option"
+ render={ ( selected ) =>
+ ( selected as Record<string, string> )?.name
+ }
+ />
+ <Select.Portal>
+ <Select.Options>
+ { options.map( ( option ) => (
+ <Select.Option key={ option.id } value={ option }>
+ { option.name }
+ </Select.Option>
+ ) ) }
+ </Select.Options>
+ </Select.Portal>
+ </Select>
+ </div>
+ );
+};
+ToggleMultipleAtRuntime.args = {
+ size: 'md',
+ disabled: false,
+};
+ToggleMultipleAtRuntime.parameters = {
+ docs: {
+ description: {
+ story: 'The `multiple` prop can be flipped after a selection exists. The existing single value is treated as a one-item list instead of throwing.',
+ },
+ },
+};
+ToggleMultipleAtRuntime.play = async ( { canvasElement } ) => {
+ const canvas = within( canvasElement );
+
+ // Single mode: pick Red.
+ const trigger = await canvas.findByRole( 'combobox' );
+ await userEvent.click( trigger );
+ await userEvent.click( await screen.findByRole( 'option', { name: 'Red' } ) );
+ expect( trigger ).toHaveTextContent( 'Red' );
+
+ // Flip to multiple mode — previous single value survives as a badge.
+ await userEvent.click(
+ await canvas.findByRole( 'button', { name: 'Enable multiple' } )
+ );
+ expect( trigger ).toHaveTextContent( 'Red' );
+
+ // Selecting another option must not crash and must append.
+ await userEvent.click( trigger );
+ await userEvent.click(
+ await screen.findByRole( 'option', { name: 'Orange' } )
+ );
+ expect( trigger ).toHaveTextContent( /Red.*Orange/ );
+
+ // Flip back to single mode — first value is shown, still no crash.
+ await userEvent.keyboard( '{Escape}' );
+ await userEvent.click(
+ await canvas.findByRole( 'button', { name: 'Disable multiple' } )
+ );
+ expect( trigger ).toHaveTextContent( 'Red' );
+};
+
const GroupedSelectTemplate: Story = ( {
size,
multiple,
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index c79e795b..98dc8eeb 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -56,7 +56,7 @@ import type {
SelectSizes,
SelectOptionGroupProps,
} from './select-types';
-import { getTextContent } from './utils';
+import { getTextContent, toValuesArray } from './utils';
import { useDebouncedCallback } from '@/utilities/hooks';
// Context to manage the state of the select component.
@@ -156,14 +156,14 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
}, [ icon ] );
const renderSelected = useCallback( () => {
- const selectedValue = getValues();
+ const currentValue = getValues();
- if ( ! selectedValue ) {
+ if ( ! currentValue ) {
return null;
}
if ( multiple ) {
- return ( selectedValue as SelectOptionValue[] ).map(
+ return toValuesArray( currentValue ).map(
( valueItem: SelectOptionValue, index: number ) => (
<Badge
className="cursor-default"
@@ -184,6 +184,15 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
);
}
+ // Single mode can still hold an array when `multiple` is toggled at
+ // runtime — fall back to the first entry so render()/children get a
+ // single value. An empty array is passed through untouched to keep
+ // the value render()/children already received.
+ const selectedValue =
+ Array.isArray( currentValue ) && currentValue.length
+ ? currentValue[ 0 ]
+ : currentValue;
+
let renderValue: ReactNode =
typeof selectedValue === 'string' ? selectedValue : '';
@@ -197,13 +206,6 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
) {
const childProps = {
value: selectedValue as SelectOptionValue,
- ...( multiple
- ? {
- onClose: handleOnCloseItem(
- selectedValue as SelectOptionValue
- ),
- }
- : {} ),
};
renderValue = children( childProps );
}
@@ -227,7 +229,7 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
{ renderValue as React.ReactNode }
</span>
);
- }, [ getValues, disabled ] );
+ }, [ getValues, disabled, multiple, render, children ] );
const handleOnCloseItem =
( value: SelectOptionValue ) =>
@@ -235,9 +237,7 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
event?.preventDefault();
event?.stopPropagation();
- const selectedValues = [
- ...( ( getValues() as SelectOptionValue[] ) ?? [] ),
- ];
+ const selectedValues = [ ...toValuesArray( getValues() ) ];
const selectedIndex = selectedValues.findIndex( ( val ) => {
if (
val !== null &&
@@ -276,7 +276,7 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
}
const showPlaceholder = multiple
- ? ! ( getValues() as SelectOptionValue[] )?.length
+ ? ! toValuesArray( getValues() ).length
: ! getValues() && ! searchKeyword;
return (
@@ -384,9 +384,9 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
multiple
) {
e.preventDefault();
- const arr =
- ( getValues() as SelectOptionValue[] ) ??
- [];
+ const arr = toValuesArray(
+ getValues()
+ );
if ( arr.length ) {
handleOnCloseItem(
arr[ arr.length - 1 ]
@@ -456,7 +456,7 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
{ /* Placeholder */ }
{ ( multiple
- ? ! ( getValues() as SelectOptionValue[] )?.length
+ ? ! toValuesArray( getValues() ).length
: ! getValues() ) && (
<div
className={ cn(
@@ -1047,7 +1047,7 @@ export function SelectItem( {
if ( ! currentValue ) {
return false;
}
- return ( currentValue as SelectOptionValue[] ).some( ( val ) => {
+ return toValuesArray( currentValue ).some( ( val ) => {
if ( val !== null && value !== null && typeof val === 'object' ) {
return (
( val as Record<string, unknown> )[ by ] ===
@@ -1056,7 +1056,7 @@ export function SelectItem( {
}
return val === value;
} );
- }, [ value, getValues ] );
+ }, [ value, getValues, multiple, by ] );
const isChecked = useMemo( () => {
if ( typeof selected === 'boolean' ) {
@@ -1068,7 +1068,7 @@ export function SelectItem( {
}
return indx === selectedIndex;
- }, [ multipleChecked, selectedIndex, selected ] );
+ }, [ multipleChecked, selectedIndex, selected, multiple ] );
let itemTabIndex: number | undefined;
if ( ! inlineSearch ) {
@@ -1234,9 +1234,10 @@ const SelectComponent = ( {
] );
const handleMultiSelect: OnClick = ( index, newValue ) => {
- const selectedValues = [
- ...( ( getValues() as SelectOptionValue[] ) ?? [] ),
- ];
+ // getValues() can return a single value here — e.g. `multiple` flipped
+ // to true while a single selection was already made — so normalize
+ // before treating it as a list.
+ const selectedValues = [ ...toValuesArray( getValues() ) ];
const valueIndex = selectedValues.findIndex( ( selectedValue ) => {
if (
selectedValue !== null &&
diff --git a/src/components/select/utils.ts b/src/components/select/utils.ts
index 2b18d816..639aa844 100644
--- a/src/components/select/utils.ts
+++ b/src/components/select/utils.ts
@@ -1,4 +1,29 @@
import { type ReactNode, isValidElement } from 'react';
+import type { SelectOptionValue } from './select-types';
+
+/**
+ * Normalize a select value into an array of selected values.
+ *
+ * Multi-select code paths assume an array, but the value can be a single
+ * value when `multiple` is toggled at runtime or when a single value is
+ * passed while `multiple` is true. Wrapping instead of assuming keeps those
+ * paths from throwing on non-iterable values.
+ *
+ * @param {SelectOptionValue | SelectOptionValue[] | null | undefined} value - Current select value.
+ * @return {SelectOptionValue[]} Array of selected values.
+ * @since x.x.x
+ */
+export const toValuesArray = (
+ value: SelectOptionValue | SelectOptionValue[] | null | undefined
+): SelectOptionValue[] => {
+ if ( Array.isArray( value ) ) {
+ return value;
+ }
+ if ( value === null || typeof value === 'undefined' || value === '' ) {
+ return [];
+ }
+ return [ value ];
+};
/**
* Get text content of a node
From 73564a86fee93d1f5aab04d3bc2c674defedc6b7 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Tue, 11 Aug 2026 17:56:30 +0600
Subject: [PATCH 13/14] =?UTF-8?q?fix:=20address=20review=20=E2=80=94=20inl?=
=?UTF-8?q?ineSearch=20refocus,=20stale=20selectedIndex,=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- restore trigger refocus behind inlineSearch so type-to-filter,
arrow nav and Backspace-removes-badge survive a pick
- clear selectedIndex when the deselected option was highlighted
- drop onClose from SelectFunctionChildren type
- add indx to isChecked deps
- stories: re-query options after each click, badge key by `by` value,
assert typing filters right after a pick in inlineSearch
---
src/components/select/select-atom.stories.tsx | 30 +++++++++++++------
src/components/select/select-types.ts | 2 --
src/components/select/select.tsx | 27 ++++++++++++++---
3 files changed, 44 insertions(+), 15 deletions(-)
diff --git a/src/components/select/select-atom.stories.tsx b/src/components/select/select-atom.stories.tsx
index f1d87bf7..e2a826bf 100644
--- a/src/components/select/select-atom.stories.tsx
+++ b/src/components/select/select-atom.stories.tsx
@@ -248,18 +248,22 @@ MultiSelect.play = async ( { canvasElement } ) => {
const listBox = await screen.findByRole( 'listbox' );
expect( listBox ).toHaveTextContent( 'Red' );
- // Select two options — the dropdown stays open in multiple mode
- const allOptions = await screen.findAllByRole( 'option' );
- await userEvent.click( allOptions[ 0 ] ); // Red
+ // Select two options — the dropdown stays open in multiple mode.
+ // Options are re-queried after each click since the list re-renders.
+ await userEvent.click( await screen.findByRole( 'option', { name: 'Red' } ) );
expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
- await userEvent.click( allOptions[ 1 ] ); // Orange
+ await userEvent.click(
+ await screen.findByRole( 'option', { name: 'Orange' } )
+ );
expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
// Check if the button text is updated
expect( selectButton ).toHaveTextContent( /Red.*Orange/ );
// Clicking an already-selected option deselects it without closing
- await userEvent.click( allOptions[ 1 ] ); // Orange (toggle off)
+ await userEvent.click(
+ await screen.findByRole( 'option', { name: 'Orange' } )
+ ); // Orange (toggle off)
expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
expect( selectButton ).toHaveTextContent( 'Red' );
expect( selectButton ).not.toHaveTextContent( 'Orange' );
@@ -508,12 +512,20 @@ InlineSearchMulti.play = async ( { canvasElement } ) => {
// Clear and select two options — dropdown stays open in multiple mode
await userEvent.clear( input );
- const allOptions = await screen.findAllByRole( 'option' );
- await userEvent.click( allOptions[ 0 ] ); // Red
+ await userEvent.click( await screen.findByRole( 'option', { name: 'Red' } ) );
expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
- const allOptions2 = await screen.findAllByRole( 'option' );
- await userEvent.click( allOptions2[ 1 ] ); // Orange
+ // Focus must return to the input after a pick — typing (no re-click)
+ // keeps filtering, proving type-to-filter survives the selection.
+ await userEvent.keyboard( 'oran' );
+ const listboxAfterPick = await screen.findByRole( 'listbox' );
+ expect( listboxAfterPick ).toHaveTextContent( 'Orange' );
+ expect( listboxAfterPick ).not.toHaveTextContent( 'Cyan' );
+ await userEvent.clear( input );
+
+ await userEvent.click(
+ await screen.findByRole( 'option', { name: 'Orange' } )
+ );
expect( screen.queryByRole( 'listbox' ) ).not.toBeNull();
// Two badges should be visible inside trigger
diff --git a/src/components/select/select-types.ts b/src/components/select/select-types.ts
index f4311c71..865f14f4 100644
--- a/src/components/select/select-types.ts
+++ b/src/components/select/select-types.ts
@@ -12,10 +12,8 @@ export type SelectOnClose = ( event: React.MouseEvent ) => void;
export type SelectFunctionChildren = ( {
value,
- onClose,
}: {
value: SelectOptionValue;
- onClose?: ( event: React.MouseEvent<HTMLElement> ) => void;
} ) => React.JSX.Element;
export type MultiTypeChildren =
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 98dc8eeb..a89de0b1 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -164,12 +164,19 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
if ( multiple ) {
return toValuesArray( currentValue ).map(
- ( valueItem: SelectOptionValue, index: number ) => (
+ ( valueItem: SelectOptionValue ) => (
<Badge
className="cursor-default"
icon={ optionIcon }
type="rounded"
- key={ index }
+ key={ String(
+ valueItem !== null &&
+ typeof valueItem === 'object'
+ ? ( valueItem as Record<string, unknown> )[
+ by
+ ]
+ : valueItem
+ ) }
size={ badgeSize as SelectSizes }
onMouseDown={ handleOnCloseItem( valueItem ) }
label={
@@ -229,7 +236,7 @@ export const SelectButton = forwardRef<HTMLElement, SelectButtonProps>(
{ renderValue as React.ReactNode }
</span>
);
- }, [ getValues, disabled, multiple, render, children ] );
+ }, [ getValues, disabled, multiple, render, children, by ] );
const handleOnCloseItem =
( value: SelectOptionValue ) =>
@@ -1068,7 +1075,7 @@ export function SelectItem( {
}
return indx === selectedIndex;
- }, [ multipleChecked, selectedIndex, selected, multiple ] );
+ }, [ multipleChecked, selectedIndex, selected, multiple, indx ] );
let itemTabIndex: number | undefined;
if ( ! inlineSearch ) {
@@ -1257,6 +1264,9 @@ const SelectComponent = ( {
// Escape and outside click (useDismiss) still close it.
if ( valueIndex !== -1 ) {
selectedValues.splice( valueIndex, 1 );
+ if ( selectedIndex === index ) {
+ setSelectedIndex( null );
+ }
} else {
selectedValues.push( newValue );
setSelectedIndex( index );
@@ -1265,6 +1275,15 @@ const SelectComponent = ( {
if ( ! isControlled ) {
setSelected( selectedValues );
}
+ // inlineSearch options carry no tabIndex and render without a
+ // FloatingFocusManager, so a click would drop focus to document.body
+ // and kill type-to-filter, arrow nav and Backspace-removes-badge.
+ if ( inlineSearch ) {
+ (
+ ( refs.domReference.current ??
+ refs.reference.current ) as HTMLElement | null
+ )?.focus();
+ }
setSearchKeyword( '' );
if ( typeof onChange === 'function' ) {
onChange( selectedValues );
From cd2adf5f1372deaa44ef46ba8394483cd0526300 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Tue, 11 Aug 2026 18:08:30 +0600
Subject: [PATCH 14/14] Update the changelog
---
changelog.txt | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/changelog.txt b/changelog.txt
index 93698dcd..3f675bff 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,6 +1,6 @@
-Version 1.8.1 - 4th August, 2026
+Version 1.8.1 - 11th August, 2026
+- Improvement: Organism - Editor Input: Added optional `triggerRegex` prop that overrides the built-in mention-suggestion matcher, so consumers can allow the trigger without a leading blank space (e.g. directly after a double quote inside JSON string values). The custom regex must expose the same capture groups as the built-in matcher: 1 = leading boundary, 2 = replaceable string (trigger + query), 3 = query string used to filter options. When omitted, the existing trigger-based matcher is used unchanged.
- Fix: Atom - Select: In `multiple` mode the dropdown now stays open while selecting or deselecting options, closing only on Escape or outside click.
-- New: Organism - Editor Input: Added optional `triggerRegex` prop that overrides the built-in mention-suggestion matcher, so consumers can allow the trigger without a leading blank space (e.g. directly after a double quote inside JSON string values). The custom regex must expose the same capture groups as the built-in matcher: 1 = leading boundary, 2 = replaceable string (trigger + query), 3 = query string used to filter options. When omitted, the existing trigger-based matcher is used unchanged.
Version 1.8.0 - 17th July, 2026
- New: Atom - File Picker: Added a standalone file upload component that displays the selected file name and supports a controlled value and an optional clear action.