V4

.fallowrc.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://raw.githubusercontent.com/fallow-rs/fallow/main/schema.json",
+  // Migrated from knip.json
+  "entry": [
+    "src/index.ts"
+  ],
+  "ignorePatterns": [
+    "docs/**",
+    "src/docs/**"
+  ],
+  "ignoreExportsUsedInFile": {
+    "type": true,
+    "interface": true
+  },
+  // Auto-detected and used by tsdown at build time, never imported in source
+  "ignoreDependencies": [
+    "@tsdown/css"
+  ]
+}

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 coverage
 
 node_modules
+.pnpm-store
 dist
 dist-ssr
 *.local

.storybook/manager-head.html

@@ -1,3 +1,4 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> -->
+<link href="https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&display=swap" rel="stylesheet">

.storybook/preview-head.html

@@ -4,10 +4,11 @@
   href="https://fonts.gstatic.com"
   crossorigin="anonymous"
 />
-<link
+<!-- <link
   href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
   rel="stylesheet"
-/>
+/> -->
+<link href="https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&display=swap" rel="stylesheet">
 
 <style type="text/css">
   body {
@@ -16,7 +17,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-text-smoothing: grayscale;
 
-    background: var(--seq-color-background-primary);
+    background: var(--color-background-primary);
   }
 </style>
 

.storybook/preview.tsx

@@ -1,10 +1,11 @@
 import type { Decorator, Preview } from '@storybook/react-vite'
+// biome-ignore lint/correctness/noUnusedImports: Storybook requires React
 import React from 'react'
 
 import {
-  ThemeProvider,
   type CustomThemes,
   type Theme,
+  ThemeProvider,
 } from '../src/providers/ThemeProvider/ThemeProvider.js'
 
 import docsTheme from './theme'
@@ -16,8 +17,6 @@ const customThemes: CustomThemes = {
     primary: 'var(--color-violet-950)',
     muted: 'var(--color-violet-600)',
 
-    gradientPrimary: 'linear-gradient(45deg, darkblue 0%, blue 100%)',
-
     backgroundPrimary: 'var(--color-violet-50)',
     backgroundSecondary: 'var(--color-violet-100)',
     backgroundRaised: 'var(--color-violet-200)',
@@ -34,8 +33,6 @@ const customThemes: CustomThemes = {
     primary: 'var(--color-violet-50)',
     muted: 'var(--color-violet-400)',
 
-    gradientPrimary: 'linear-gradient(45deg, darkblue 0%, blue 100%)',
-
     backgroundPrimary: 'var(--color-violet-950)',
     backgroundSecondary: 'var(--color-violet-900)',
     backgroundRaised: 'var(--color-violet-800)',
@@ -62,7 +59,7 @@ const withTheme: Decorator = (StoryFn, context) => {
       customThemes={isCustomTheme ? customThemes : undefined}
       storageKey={null}
     >
-      <div className="bg-background-primary p-4">
+      <div className="bg-background-primary p-4 isolate">
         <StoryFn />
       </div>
     </ThemeProvider>

.storybook/theme.ts

@@ -2,5 +2,8 @@ import { create } from 'storybook/theming'
 
 export default create({
   base: 'light',
-  fontBase: 'Inter',
+  fontBase: 'Fustat',
+  brandUrl: 'https://polygon.technology',
+  brandTitle: 'Polygon / Design System',
+  brandImage: '/static/images/polygon-logo.svg',
 })

CHANGELOG.md

@@ -1,5 +1,128 @@
 # @0xsequence/design-system
 
+## 4.0.0-alpha.19
+
+### Patch Changes
+
+- Updating dependencies, removing custom icons, and fixing Calendar styling bugs
+
+## 4.0.0-alpha.18
+
+### Patch Changes
+
+- Updating Switch styling
+
+## 4.0.0-alpha.17
+
+### Patch Changes
+
+- Adding showArrow prop to Popover and Tooltips, change vOffset and hOffset to sideOffset and alignOffset on TooltipHelper."
+
+## 4.0.0-alpha.16
+
+### Patch Changes
+
+- Updating Alerts and Tooltips styling
+
+## 4.0.0-alpha.15
+
+### Patch Changes
+
+- Fixing Select scroll height
+
+## 4.0.0-alpha.14
+
+### Patch Changes
+
+- Adding combobox and consolidating popup styling
+
+## 4.0.0-alpha.13
+
+### Patch Changes
+
+- Updating Card clickable state, updating to base-ui v1.4.1
+
+## 4.0.0-alpha.12
+
+### Patch Changes
+
+- Updating input behavior and styles
+
+## 4.0.0-alpha.11
+
+### Patch Changes
+
+- Updating Select, PINCodeInput, Tabs, Sheet, and Alert styling
+
+## 4.0.0-alpha.10
+
+### Patch Changes
+
+- Updating Dialogs, Checkboxes, and Radios"
+
+## 4.0.0-alpha.9
+
+### Patch Changes
+
+- Fixing Sheet styles, and allowing to disable close button for custom button
+
+## 4.0.0-alpha.8
+
+### Patch Changes
+
+- Fixing render prop on Card component
+
+## 4.0.0-alpha.7
+
+### Patch Changes
+
+- Updating color scales to match polygon branding, and updated input styling
+
+## 4.0.0-alpha.6
+
+### Patch Changes
+
+- Migrating to lucide icons
+
+## 4.0.0-alpha.5
+
+### Patch Changes
+
+- Updating Table, Progress, and Empty component styling
+
+## 4.0.0-alpha.4
+
+### Patch Changes
+
+- Updating styling of components to match final alpha
+
+## 4.0.0-alpha.3
+
+### Patch Changes
+
+- Updating Button styles, Alert styles, Progress, and Pagination
+
+## 4.0.0-alpha.2
+
+### Patch Changes
+
+- Card components — Added new Card component system (#142)
+- Dialog typing fix — Fixed Dialog and DialogTrigger Payload typing
+- Badge styling — Updated Badge component styling
+- Border-radius updates — Updated border-radius on Alert, Card, and Popover components
+
+## 4.0.0-alpha.1
+
+### Patch Changes
+
+- Added Sidebar component, removed old text classes in favor of default tailwind classes.
+
+## 4.0.0-alpha.0
+
+### Major Changes
+
+- Migrated to base-ui
+
 ## 3.2.9
 
 ### Patch Changes

README.md

@@ -18,7 +18,7 @@ pnpm add @0xsequence/design-system
 
 The design system relies on these peer dependencies to be installed in your application:
 
-- `pnpm add react react-dom motion`
+- `pnpm add react react-dom`
 
 ### Use
 
@@ -54,13 +54,13 @@ root.render(
 Then import components from the design system to build your UI:
 
 ```jsx
-import { Text, Button, useTheme } from '@0xsequence/design-system'
+import { Button, useTheme } from '@0xsequence/design-system'
 
 const App = () => (
   const { theme, setTheme } = useTheme()
 
   <div>
-    <Text variant="normal">Hello, World!</Text>
+    <span className="text-sm">Hello, World!</span>
     <Button variant="primary" label="Change theme" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />
   </div>
 )
@@ -72,9 +72,25 @@ const App = () => (
 Clone the [Sequence Design System GitHub Project](https://github.com/0xsequence/design-system) then start Storybook.
 
 ```
-pnpm install && pnpm storybook
+pnpm install && pnpm dev
 ```
 
+#### Code analysis
+
+We use [fallow](https://docs.fallow.tools) to find unused code, duplication, and complexity hotspots. Run the full suite or scope it to a single analysis:
+
+| Script | What it runs |
+| --- | --- |
+| `pnpm fallow` | Full suite: dead-code + duplication + health |
+| `pnpm fallow:summary` | Category counts only, without individual findings |
+| `pnpm fallow:dead-code` | Unused files, exports, dependencies, and circular deps |
+| `pnpm fallow:dupes` | Copy-paste and structural code duplication |
+| `pnpm fallow:health` | Complexity, maintainability, and hotspots |
+| `pnpm fallow:audit` | Review only files changed since the base branch (CI/PR) |
+| `pnpm fallow:fix` | Auto-fix safe unused-code findings |
+
+Configuration lives in `.fallowrc.json`.
+
 #### Manual project updates
 
 ##### 1. Upgrade the design system to the latest version
@@ -110,6 +126,37 @@ export default defineConfig({
 })
 ```
 
+## Migrating from v3 to v4
+
+V4 is a larger departure than previous releases and includes many breaking changes.
+
+1. Migrated from radix-ui components to base-ui. This should largely be a smooth transition, the most notable breaking change is that the @radix-ui/react-slot `asChild` behavior is no longer valid; base-ui uses a standard `render` prop https://base-ui.com/react/handbook/composition.
+
+2. `react-hook-form` dependency is removed as well as all controlled form components which depended on it, including `Form`, `ControlledTextInput`, `ControlledCheckbox`, `ControlledSelect`, etc. This is out of scope of the design system as it should not dictate how you should use the primitives or which form library. Check out https://ui.shadcn.com/docs/forms for details on how you could integrate the design-system primitives with a few different react form library options or simply copy over the Controlled implementations from v3.
+
+3. We no longer export string utils `capitalize`, `pluralize`, and `kebabize`. These were used internally in the design-system but never meant to be exported as they fall outside its scope.
+
+4. `Image` component is removed. This was superfluous and only served to add fade in animation support on image load.
+
+5. `Modal` component is removed. Use Dialog primitive components instead.
+
+6. `motion` dependency removed. We are opting to use css transistions and animation classes on primitive components instead so they can be easily overridden. If you want to use motion to animate you can do so within your individual project.
+
+7. IconButton component removed. Use <Button iconOnly><XIcon /></Button> instead
+
+8. Button.Helper component removed.
+
+9. Text component is removed. Use default text classes instead.
+
+10. textVariants have been removed. Use default tailwind text classes instead
+
+11. Collapsible now exports its primitives, use Collapsible.Helper for old behavior.
+
+12. Tooltip now exports its primitives, use Tooltip.Helper for old behavior.
+
+13. Icons have been migrated to lucide. `lucide-react` is now a peer dependency of the project.
+
+
 ## Migrating from v2 to v3
 
 V3 attemps to be mostly compatible but there are some breaking changes that will need to be addressed.

biome.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**/*.ts", "**/*.tsx"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "arrowParentheses": "asNeeded",
+      "trailingCommas": "es5"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "useAnchorContent": "off",
+        "useSemanticElements": "off",
+        "useKeyWithClickEvents": "off",
+        "noLabelWithoutControl": "off",
+        "noStaticElementInteractions": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      }
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}