@keeper-security/keeper-js-ui 0.0.0

package/.commitlintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+}

package/.czrc

@@ -0,0 +1,3 @@
+{
+  "path": "cz-conventional-changelog"
+}

package/.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/.github/workflows/release-please.yml

@@ -0,0 +1,19 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write # creates a release commit
+  pull-requests: write # creates a release PR
+
+name: release-please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: googleapis/release-please-action@v4
+        with:
+          token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
+          release-type: node

package/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

package/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/.lintstagedrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  '!(*.ts)': 'prettier --write --ignore-unknown',
+  '*.ts': ['eslint --fix', 'prettier --write'],
+}

package/.nvmrc

@@ -0,0 +1 @@
+v18

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

package/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-themes',
+    'storybook-addon-rtl',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+}
+export default config

package/.storybook/preview.ts

@@ -0,0 +1,33 @@
+import type { Preview } from '@storybook/react'
+import { withThemeByClassName } from '@storybook/addon-themes'
+import { withDirection } from './withDirection'
+import '../src/index.css'
+
+const preview: Preview = {
+  decorators: [
+    withDirection,
+    withThemeByClassName({
+      themes: {
+        light: '',
+        dark: 'dark',
+        'high contrast light': 'contrast-light',
+        'high contrast dark': 'contrast-dark',
+      },
+      // Set the theme based on user's browser pref.
+      defaultTheme: window.matchMedia?.('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light',
+    }),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default preview

package/.storybook/withDirection.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { RTL_UPDATE_EVENT, type RTLChangeEvent } from 'storybook-addon-rtl'
+import { useChannel } from 'storybook/internal/preview-api'
+import { DirectionProvider } from '@radix-ui/react-direction'
+
+type Direction = 'ltr' | 'rtl'
+
+export function withDirection(Story) {
+  const [direction, setDirection] = React.useState<Direction>('ltr')
+
+  useChannel({
+    [RTL_UPDATE_EVENT]: (rtlChangeEvent: RTLChangeEvent) => {
+      setDirection(rtlChangeEvent.direction)
+    },
+  })
+
+  return (
+    <DirectionProvider dir={direction}>
+      <Story />
+    </DirectionProvider>
+  )
+}

package/README.md

@@ -0,0 +1,329 @@
+# keeper-js-ui
+
+_React components built for accessibility, consistency, and speed._
+
+## Requirements
+
+- Terminal of your choice.
+- [git](https://github.com/git-guides/install-git) - Type `git -v` into your terminal to verify.
+- [Node.js v18](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
+
+## Recommendations
+
+- [nvm](https://github.com/nvm-sh/nvm) - Manage multiple versions of node/npm. Type `nvm -v` into your terminal to verify.
+- [VS Code](https://code.visualstudio.com/) - Popular code editor with a healthy ecosystem of [extensions](https://marketplace.visualstudio.com/VSCode)/plugins.
+
+## Getting Started
+
+Git clone or [download](https://github.com/Keeper-Security/keeper-js-ui/archive/refs/heads/main.zip) the repo.
+
+Open a terminal from the root of the project and run:
+
+```sh
+npm install
+```
+
+Views are rendered via [Storybook](https://storybook.js.org/). To see components in action and start making edits, simply run:
+
+```sh
+npm run storybook
+
+# ctrl + c to stop the server.
+```
+
+[Storybook](https://storybook.js.org/) will open in a new tab. If it's your first time, you'll be greeted with a walk-through of Storybook's UI.
+
+## Editing Code
+
+The [src/](./src/) folder holds all component-related code.
+
+- [src/index.css](./src/index.css) - Any CSS required by components or [Tailwind CSS](https://tailwindcss.com/).
+- [src/index.ts](./src/index.ts) - Only the exports from this file are directly available to external projects/implementations.
+- [src/components/](./src/components) - React components and any relevant tests and stories.
+- [src/components/ui](./src/components/ui/) - Default location of shadcn/ui components.
+- [src/lib/](./src/lib/) - Utility/helper functions.
+
+With [Storybook](https://storybook.js.org/) running (`npm run storybook`), most edits are shown immediately upon saving without the need for browser refreshes or server restarts. Exceptions would be changes to infrastructure code like edits to Storybook itself.
+
+## Adding shadcn/ui Components
+
+If you're adding a [shadcn/ui component](https://ui.shadcn.com/docs/components/), you can pick from a list by running:
+
+```sh
+npm run components:add
+```
+
+Alternatively, you can append the name of a specific component to the command. Adding the [shadcn/ui badge](https://ui.shadcn.com/docs/components/badge) would look like:
+
+```sh
+npm run components:add badge
+```
+
+Any dependency installs or project updates will be handled automatically. The new component file will be created in [src/components/ui/](./src/components/ui/).
+
+> 💡 TIP: Create a specific story for your component to explore its features and demonstrate its different states. [What's a story?](https://storybook.js.org/docs/get-started/whats-a-story)
+
+### Diff'ing a shadcn/ui Component
+
+You can see what's different between the local copies of shadcn/ui components and the [latest versions](https://ui.shadcn.com/docs/components/). Simply run:
+
+```sh
+npm run components:diff
+```
+
+This will list all components that have differences. Spoiler: **they will all have formatting differences**. Perhaps more helpful is to see the changes of a specific component:
+
+```sh
+npm run components:diff button
+```
+
+Probably not super helpful, but it's there.
+
+### Creating a Story
+
+> 💡 TIP: Highly recommend visiting the [Storybook Tutorial](https://storybook.js.org/tutorials/) section for a better understanding of [Component-Driven Development (CDD)](https://www.componentdriven.org/) and the [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf).
+
+Stories are chunks of code that render a component and give you the opportunity to configure its props. The naming convention of a story is `<component>.stories.ts`.
+
+> 🚨 NOTE: If your story is more complex and requires [jsx](https://react.dev/learn/writing-markup-with-jsx), you'll have to name it with a `.tsx` extension: `<component>.stories.tsx`
+
+#### Minimal Story Example
+
+```ts
+// @/components/my-component.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { MyComponent } from '@/components/my-component'
+
+type Story = StoryObj<typeof meta>
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof Button>
+
+export default meta
+
+export const Default: Story = {}
+```
+
+#### Typical Story Example
+
+```ts
+// @/components/my-component.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { MyComponent } from '@/components/my-component'
+
+type Story = StoryObj<typeof meta>
+
+// Default config.
+const meta = {
+  component: MyComponent,
+  args: {
+    // Shared React props configured here.
+    variant: 'primary',
+    children: 'Component Examples',
+    disabled: false,
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+// Render with default config.
+export const Default: Story = {}
+
+// Override default config as needed.
+export const Secondary: Story = {
+  args: {
+    variant: 'Secondary',
+    children: 'I am Secondary',
+  },
+}
+
+// Compose and override.
+export const DisabledSecondary: Story = {
+  args: {
+    ...Secondary.args,
+    disabled: true,
+  },
+}
+```
+
+### Building Storybook Screens/Workflows
+
+[Storybook](https://storybook.js.org/) is not limited to simply running and testing components in isolation. Complex scenarios can be created with the [render](https://storybook.js.org/docs/api/csf#custom-render-functions) and [play](https://storybook.js.org/docs/api/csf#play-function) functions.
+
+### Changing Themes in Storybook
+
+[Storybook's Themes Addon](https://storybook.js.org/addons/@storybook/addon-themes) has been configured to pick between the `light` or `dark` theme based on your system settings. You can use the Theme button in the Storybook toolbar to switch themes manually should you need to test a component in another theme.
+
+> 🗒️ NOTE: Some pages, such as `Docs`, will always render the `light` theme regardless of the selected theme. The component itself will render in the correct theme but the surrounding UI will not. Switch to an actual story to see the full page rendered as the chosen theme.
+
+There are four themes to choose from:
+
+- light
+- dark
+- high contrast light
+- high contrast dark
+
+> 🗒️ NOTE: The `high contrast *` themes will make best efforts to render components using an example of simplified [system colors](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color). This is to be used only as a quick reference, not as a source of truth. For accurate representations of component rendering in these modes, refer to [triggering forced-colors/high contrast modes](#triggering-forced-colorshigh-contrast-modes).
+
+#### Triggering Forced-Colors/High Contrast Modes
+
+- Safari and Firefox do not have this feature in their dev tools, but they will respect system-wide settings.
+- Chromium Browsers (Chrome, Edge)
+  1. Open DevTools:
+     - Mac: `Option + Command + I`
+     - Win: `Ctrl + Shift + I`
+     - Mouse: `Right-click` > `Inspect`
+  2. Open Run command:
+     - Mac: `Command + Shift + P`
+     - Win: `Ctrl + Shift + P`
+     - Mouse: `Top-right ellipsis button` > `Run command`
+  3. Type `forced`.
+  4. Select `Emulate CSS forced-colors: active`.
+  5. To deactivate, repeat the `Run` command but select `Do not emulate CSS forced-colors`.
+
+## Committing Changes
+
+If you're familiar with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), feel free to commit using `git commit`.
+
+The minimum requirements for a valid commit message are:
+
+- `<type>: <subject>`
+- Totally length must be under **100 characters**. `<body>` and `<footer>` do not have this length limit.
+
+These standards are enforced with the help of [commitlint](https://commitlint.js.org/).
+
+### Commitizen
+
+If you're not comfortable with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) and you're ready to commit your **staged changes**, you can run:
+
+```sh
+npm run commit
+```
+
+[Commitizen](https://commitizen-tools.github.io/commitizen/) will prompt a series of questions and format your answers per the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/#specification):
+
+```
+Select the type of change that you're committing:
+    feat:     A new feature
+
+What is the scope of this change (e.g. component or file name): (press enter to skip)
+    lang
+
+Write a short, imperative tense description of the change (max 88 chars):
+    (45) add Australia, Canada, and UK English options
+
+Provide a longer description of the change: (press enter to skip)
+    Satisfies requirements for upcoming expansion of additional English-speaking countries.
+
+Are there any breaking changes?
+    Yes
+
+Describe the breaking changes:
+    Two-digit country codes are now deprecated. You must use a full country code (en-us) for the API to work.
+
+Does this change affect any open issues?
+    Yes
+
+Add issue references (e.g. "fix #123", "re #123".):
+    re #JIRA-1234
+```
+
+Your commit message will then be formatted to look something like:
+
+```
+feat(lang): add Australia, Canada, and UK English options
+
+Satisfies requirements for upcoming expansion of additional English-speaking countries.
+
+BREAKING CHANGE: Two-digit country codes are now deprecated. You must use a full country code (en-us) for the API to work.
+
+re #JIRA-1234
+```
+
+Enforcing commit message standards helps with automating the [CHANGELOG](./CHANGELOG) updates, [package.json](./package.json) version bumps, and release [tags](https://github.com/Keeper-Security/keeper-js-ui/tags).
+
+## Under the Hood Technologies
+
+Inspect the [package.json](./package.json) `dependencies` and `devDependencies` sections for the full list of technologies.
+
+### shadcn/ui
+
+[shadcn/ui](https://ui.shadcn.com/) is not a React library in the typical sense. It configures [Tailwind CSS](https://tailwindcss.com/) to style headless (i.e. unstyled) components from other accessibility-focused libraries, such as [Radix UI](https://www.radix-ui.com/).
+
+As it states in its [introduction](https://ui.shadcn.com/docs):
+
+> This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.
+
+This provides 100% customizable opportunities and 100% ownership. It also relies on these other projects to make life easier:
+
+- [Radix UI](https://www.radix-ui.com/) - Unstyled and accessible React primitives for apps and design systems.
+- [Class Variance Authority (CVA)](https://cva.style/) - Easily generate type-safe React props that utilize CSS classes.
+- [clsx](https://github.com/lukeed/clsx) - Conditionally construct your `className` string.
+- [tailwind-merge](https://github.com/dcastil/tailwind-merge) - Efficiently merge [Tailwind CSS](https://tailwindcss.com/) classes without conflicts.
+
+### Tailwind CSS
+
+[Tailwind CSS](https://tailwindcss.com/) is a configurable, themeable CSS utility framework that uses scales and tokens while producing minimal CSS.
+
+### Storybook
+
+[Storybook](https://storybook.js.org/) was chosen to be the engine for rendering these React components. It's a great tool for exploring components, assembling more complex workflows/screens, and providing a source of truth for links and documentation.
+
+- Easily render components in isolation and demonstrate specific scenarios.
+- Automatically create documentation by parsing your React component code.
+- Explore component state combinations with interactive controls and without writing code.
+- Run tests to avoid regression bugs and verify things like [a11y](https://developer.mozilla.org/en-US/docs/Web/Accessibility) or [i18n](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n).
+
+### Vite
+
+[Vite](https://vitejs.dev/) is a super fast dev server and build optimizer with out-of-the-box support for most things. Plugins can be installed and configured. [vite-plugin-dts](https://github.com/qmhc/vite-plugin-dts#readme) abstracts all TypeScript type information into a single `.d.ts` file for builds.
+
+### Husky
+
+[Husky](https://github.com/typicode/husky#readme) runs scripts during git hooks such as commit. This is used to automate tasks such as linting and formatting without the engineer having to run them separately. Husky is helping incorporate:
+
+- [ESLint](https://eslint.org/) - Finds common JavaScript problems.
+- [Prettier](https://prettier.io/) - Formats code and moves the war of tabs vs. spaces out of PR discussions.
+- [Lint Staged](https://github.com/lint-staged/lint-staged#readme) - Runs linters and formatters against your staged files.
+
+### Configuration files
+
+- [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
+- [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
+- [.commitlintrc.cjs](./.commitlintrc.cjs) => [commitlint](https://commitlint.js.org/reference/configuration.html)
+- [.czrc](./.czrc) => [cz-cli/commitizen](https://github.com/commitizen/cz-cli#readme)
+- [.eslintrc.cjs](./.eslintrc.cjs) => [ESLint](https://eslint.org/docs/latest/use/configure/)
+- [.lintstagedrc.cjs](./.lintstagedrc.cjs) => [Lint Staged](https://github.com/lint-staged/lint-staged?tab=readme-ov-file#configuration)
+- [.nvmrc](./.nvmrc) => [nvm](https://github.com/nvm-sh/nvm#readme)
+- [.prettierrc](./.prettierrc) => [Prettier](https://prettier.io/docs/en/configuration.html)
+- [components.json](./components.json) => [shadcn/ui](https://ui.shadcn.com/docs/components-json)
+- [postcss.config.js](./postcss.config.js) => [PostCSS](https://github.com/postcss/postcss#readme)
+- [tailwind.config.js](./tailwind.config.js) => [Tailwind CSS](https://tailwindcss.com/docs/configuration)
+- [tsconfig{.app,.node}.json](./tsconfig.json) => [TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
+- [vite.config.ts](./vite.config.ts) => [Vite](https://vitejs.dev/config/)
+
+## Production Build
+
+To create a production-ready build, you can run:
+
+```sh
+npm run build
+```
+
+This process inspects the [src/index.ts](./src/index.ts) file and pulls in only the necessary code. Packages listed under [package.json's](./package.json) `peerDependencies` will be ignored and left to the external implementations to install separately. This avoids redundancy and keeps file sizes down.
+
+A [dist](./dist/) folder will be created at the root of the project. This folder is ignored by `git`, so you shouldn't show any changes that need to be committied. The four files created are:
+
+- style.css - All of the necessary CSS including [Tailwind CSS](https://tailwindcss.com/) utility classes.
+- index.es.d.ts - All of the necessary type information.
+- index.es.js - All of the exported components in ES Modules format.
+- index.umd.js - All of the exported components in the Universal Module Definition (fallback) format.
+
+> 💡 TIP: Learn more about [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) if you want to bypass the npm registry and install this library to another project locally.
+
+## Publishing (NPM Package)
+
+...Coming soon

package/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@keeper-security/keeper-js-ui",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build": "tsc -b && vite build",
+    "start": "npm run storybook",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier . --write --ignore-unknown",
+    "prepare": "husky",
+    "commit": "cz",
+    "components:add": "npx shadcn-ui@latest add",
+    "components:diff": "npx shadcn-ui@latest diff"
+  },
+  "dependencies": {
+    "@radix-ui/react-direction": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.418.0",
+    "react": "^18.3.1",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@storybook/addon-a11y": "^8.2.6",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-onboarding": "^8.2.6",
+    "@storybook/addon-themes": "^8.2.6",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/react-vite": "^8.2.6",
+    "@storybook/test": "^8.2.6",
+    "@types/node": "^22.0.2",
+    "@types/react": "^18.3.3",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.19",
+    "commitizen": "^4.3.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.7",
+    "postcss": "^8.4.40",
+    "prettier": "3.3.3",
+    "storybook": "^8.2.6",
+    "storybook-addon-rtl": "^1.0.1",
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.4",
+    "vite-plugin-dts": "^4.0.0-beta.2"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "description": "_React components built for accessibility, consistency, and speed._",
+  "main": "postcss.config.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Keeper-Security/keeper-js-ui.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Keeper-Security/keeper-js-ui/issues"
+  },
+  "homepage": "https://github.com/Keeper-Security/keeper-js-ui#readme"
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/ui/button.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { Mail } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+type Story = StoryObj<typeof meta>
+
+const meta = {
+  component: Button,
+  args: {
+    children: 'Button',
+    disabled: false,
+    onClick: fn(),
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+
+export const Default: Story = {}
+
+export const WithIcon: Story = {
+  args: {
+    children: [<Mail className="me-2 size-4" />, 'Button with Icon'],
+  },
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/src/index.css

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  .contrast-dark {
+    /* TODO: Finish list of high-contrast values */
+    --background: 0 0% 0%;
+    --foreground: 0 0% 98%;
+  }
+
+  .contrast-light {
+    /* TODO: Finish list of high-contrast values */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import '@/index.css'
+
+export { Button } from '@/components/ui/button'

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/tailwind.config.js

@@ -0,0 +1,111 @@
+const plugin = require('tailwindcss/plugin')
+
+const isProductionBuild = process.env.NODE_ENV === 'production'
+
+// Configure which files Tailwind CSS (TW) scans to produce CSS classes.
+const content = [
+  // We want the ability to use TW anywhere in the project (like Storybook)...
+  './src/**/*.{ts,tsx}',
+  // But we only want to export the classes used by library components.
+  ...(isProductionBuild ? ['!./src/**/*.{spec,stories,test}.{ts,tsx}'] : []),
+]
+
+const safelist = [
+  'dark',
+  /**
+   * We only want these modifiers available to Storybook.
+   * To use them in Storybook, prepend them to any Tailwind CSS utility class.
+   * Example: add a white border while simulating a high contrast dark theme:
+   * `className="contrast-dark:border contrast-dark:border-white"`
+   */
+  ...(isProductionBuild ? [] : ['contrast-dark', 'contrast-light']),
+]
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content,
+  prefix: '',
+  safelist,
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss-animate'),
+    ...(isProductionBuild
+      ? []
+      : [
+          plugin(({ addVariant }) => {
+            // Simulate high contrast dark themes.
+            addVariant('contrast-dark', ['.contrast-dark &', '&.contrast-dark'])
+            // Simulate high contrast light themes.
+            addVariant('contrast-light', [
+              '.contrast-light &',
+              '&.contrast-light',
+            ])
+          }),
+        ]),
+  ],
+}

package/tsconfig.app.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* UI components config */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import { resolve } from 'path'
+import dts from 'vite-plugin-dts'
+import { peerDependencies } from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      tsconfigPath: resolve(__dirname, 'tsconfig.app.json'),
+      rollupTypes: true,
+      include: ['src/**/*'],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'keeper-js-ui',
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: [
+        ...Object.keys(peerDependencies),
+        'react/jsx-runtime',
+        'react-dom/client',
+      ],
+      output: {
+        exports: 'named',
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'react/jsx-runtime',
+        },
+      },
+    },
+  },
+})