@keeper-security/keeper-js-ui 0.1.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/README.md +93 -15
  3. package/dist/index.es.d.ts +134 -25
  4. package/dist/index.es.js +4986 -615
  5. package/dist/index.umd.js +76 -1
  6. package/dist/keeper-js-ui.css +1 -0
  7. package/package.json +53 -45
  8. package/dist/style.css +0 -1
package/CHANGELOG.md ADDED
@@ -0,0 +1,60 @@
1
+ # Changelog
2
+
3
+ ## [0.3.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.2.0...v0.3.0) (2024-12-19)
4
+
5
+
6
+ ### Features
7
+
8
+ * add Avatar component ([#41](https://github.com/Keeper-Security/keeper-js-ui/issues/41)) ([5724697](https://github.com/Keeper-Security/keeper-js-ui/commit/572469755c30b0a612364b76d604d96150e2b23e))
9
+ * add Dropdown menu ([#110](https://github.com/Keeper-Security/keeper-js-ui/issues/110)) ([7a2d391](https://github.com/Keeper-Security/keeper-js-ui/commit/7a2d3919a34337c7502a1a0e220ec9d1eb7aa6d3))
10
+ * add neutral variant for outline and text buttons ([#111](https://github.com/Keeper-Security/keeper-js-ui/issues/111)) ([c02223c](https://github.com/Keeper-Security/keeper-js-ui/commit/c02223ca2021ac304af6749e6190d739c4346ecf))
11
+ * add Switch component ([#9](https://github.com/Keeper-Security/keeper-js-ui/issues/9)) ([f444495](https://github.com/Keeper-Security/keeper-js-ui/commit/f444495495c74200cd62c4905624443d23ab9946)), closes [#83](https://github.com/Keeper-Security/keeper-js-ui/issues/83)
12
+ * **button:** add IconButton ([#121](https://github.com/Keeper-Security/keeper-js-ui/issues/121)) ([09425bf](https://github.com/Keeper-Security/keeper-js-ui/commit/09425bf075f3bf2eb428ccd78b909cc30e64842a))
13
+ * **button:** support for icon-only Button ([#112](https://github.com/Keeper-Security/keeper-js-ui/issues/112)) ([707c28c](https://github.com/Keeper-Security/keeper-js-ui/commit/707c28c7a2a3aea04c0d53b40090b958f7cff9f5))
14
+
15
+ ## [0.2.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.1.2...v0.2.0) (2024-11-27)
16
+
17
+
18
+ ### Features
19
+
20
+ * add Box component ([#74](https://github.com/Keeper-Security/keeper-js-ui/issues/74)) ([ab0208f](https://github.com/Keeper-Security/keeper-js-ui/commit/ab0208fe6763e6d44cfdb36ed2815eddd7471dde))
21
+ * add Separator component ([#30](https://github.com/Keeper-Security/keeper-js-ui/issues/30)) ([fd7554f](https://github.com/Keeper-Security/keeper-js-ui/commit/fd7554fee2377cf3bddc5e816a1beec9d6174b1b))
22
+ * **flex:** additional flex options and backward compatibility ([#109](https://github.com/Keeper-Security/keeper-js-ui/issues/109)) ([9b9e0c6](https://github.com/Keeper-Security/keeper-js-ui/commit/9b9e0c6353a970d6e548d66dee818682ee47dda9))
23
+
24
+ ## [0.1.2](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.1.1...v0.1.2) (2024-11-22)
25
+
26
+
27
+ ### Bug Fixes
28
+
29
+ * **flex:** enforce number types to be of type number ([#101](https://github.com/Keeper-Security/keeper-js-ui/issues/101)) ([03202f5](https://github.com/Keeper-Security/keeper-js-ui/commit/03202f53e90bb357605bf9911ed0e6dc31162ef4)), closes [#100](https://github.com/Keeper-Security/keeper-js-ui/issues/100)
30
+
31
+ ## [0.1.1](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.1.0...v0.1.1) (2024-11-19)
32
+
33
+
34
+ ### Bug Fixes
35
+
36
+ * **button:** add contrast color rules and animation ([#87](https://github.com/Keeper-Security/keeper-js-ui/issues/87)) ([7fa8a18](https://github.com/Keeper-Security/keeper-js-ui/commit/7fa8a18155e04eab709a68e06e8af4263cdbe13a))
37
+ * **button:** force tabIndex for Safari ([#96](https://github.com/Keeper-Security/keeper-js-ui/issues/96)) ([ac418f3](https://github.com/Keeper-Security/keeper-js-ui/commit/ac418f37e29f62c3ef7ec774eb2ad055a6bd31e3)), closes [#83](https://github.com/Keeper-Security/keeper-js-ui/issues/83)
38
+
39
+ ## 0.1.0 (2024-10-30)
40
+
41
+
42
+ ### Features
43
+
44
+ * add Flex component ([#73](https://github.com/Keeper-Security/keeper-js-ui/issues/73)) ([deee6d1](https://github.com/Keeper-Security/keeper-js-ui/commit/deee6d1b5e4d75b3b26b7f384252070c73677899))
45
+ * Default and Primary Buttons ([#82](https://github.com/Keeper-Security/keeper-js-ui/issues/82)) ([149bff4](https://github.com/Keeper-Security/keeper-js-ui/commit/149bff4a5e1441eebd5d2d018156b79bc322c3c0)), closes [#81](https://github.com/Keeper-Security/keeper-js-ui/issues/81)
46
+
47
+
48
+ ### Bug Fixes
49
+
50
+ * **storybook:** remove unnecessary rtl plugin fix ([#52](https://github.com/Keeper-Security/keeper-js-ui/issues/52)) ([b3842d3](https://github.com/Keeper-Security/keeper-js-ui/commit/b3842d3e0b9625c4b059c02dd76a62ff9baefb00))
51
+
52
+
53
+ ### Reverts
54
+
55
+ * **storybook:** restore withDirection decorator ([#72](https://github.com/Keeper-Security/keeper-js-ui/issues/72)) ([bb4e05e](https://github.com/Keeper-Security/keeper-js-ui/commit/bb4e05ed775da51ed33ecf965ba264f80bab2526))
56
+
57
+
58
+ ### Miscellaneous Chores
59
+
60
+ * release 0.1.0 ([#70](https://github.com/Keeper-Security/keeper-js-ui/issues/70)) ([db31448](https://github.com/Keeper-Security/keeper-js-ui/commit/db31448edb1c8dcc35bc8ba3b6ce6de3af912719))
package/README.md CHANGED
@@ -61,7 +61,8 @@ npm run components:add badge
61
61
 
62
62
  Any dependency installs or project updates will be handled automatically. The new component file will be created in [src/components/ui/](./src/components/ui/).
63
63
 
64
- > 💡 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)
64
+ > [!TIP]
65
+ > 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)
65
66
 
66
67
  ### Diff'ing a shadcn/ui Component
67
68
 
@@ -81,11 +82,13 @@ Probably not super helpful, but it's there.
81
82
 
82
83
  ### Creating a Story
83
84
 
84
- > 💡 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).
85
+ > [!TIP]
86
+ > Visit 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).
85
87
 
86
88
  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`.
87
89
 
88
- > 🚨 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`
90
+ > [!IMPORTANT]
91
+ > 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`. Otherwise, you will get several cryptic linting errors within your jsx.
89
92
 
90
93
  #### Minimal Story Example
91
94
 
@@ -161,13 +164,15 @@ For a real-time experience where all of Tailwind CSS is available to your storyb
161
164
 
162
165
  This will allow you to use any standard Tailwind CSS classes within the `className` control textfield, but it will slow Storybook rendering saved changes to your stories and components. At this time, arbitrary values (using `[]` notation, such as `w-[1234px]`) will not work, but you will have access to a `style` object.
163
166
 
164
- > Note: If you don't already have a `.env.local` file, copy the contents of the `.env` file in the root and update the values as necessary. Never commit your changes to the `.env` file unless you are adding or removing a default key/value pair. Changes to your `.env.local` are ignored by git and will not get picked up as unstaged changes.
167
+ > [!IMPORTANT]
168
+ > If you don't already have a `.env.local` file, copy the contents of the `.env` file into the root and update the values as necessary. Never commit your changes to the `.env` file unless you are adding or removing a default key/value pair and sharing those values within the `git log` pose no security risks. Changes to your `.env.local` are ignored by git and will not get picked up as unstaged changes.
165
169
 
166
170
  ### Changing Themes in Storybook
167
171
 
168
172
  [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.
169
173
 
170
- > 🗒️ 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.
174
+ > [!NOTE]
175
+ > 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.
171
176
 
172
177
  There are four themes to choose from:
173
178
 
@@ -176,7 +181,8 @@ There are four themes to choose from:
176
181
  - high contrast light
177
182
  - high contrast dark
178
183
 
179
- > 🗒️ 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).
184
+ > [!NOTE]
185
+ > 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).
180
186
 
181
187
  #### Triggering Forced-Colors/High Contrast Modes
182
188
 
@@ -267,6 +273,44 @@ re #JIRA-1234
267
273
 
268
274
  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).
269
275
 
276
+ ## Pull Requests
277
+
278
+ In your pull requests, it's recommended to choose `Squash and merge` to keep the git history easy to read and parse.
279
+
280
+ ### Dependabot PRs
281
+
282
+ Occassionally, a PR might be created when a security patch is available from one of the dependencies.
283
+
284
+ > [!TIP]
285
+ > It's always a good idea to `git pull` and `git checkout` that branch locally to run some smoke tests before merging.
286
+
287
+ ```
288
+ npm ci && npm run build && npm start
289
+ ```
290
+
291
+ If you want to take an additional step to smoke test, you can run `npm test` in a new terminal while `npm start` is still running.
292
+
293
+ ### Release PRs
294
+
295
+ Whenever a PR is merged into the `main` branch, a [Release Github Action](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/release-please.yml) is automatically triggered to parse through the git history for certain keywords.
296
+
297
+ Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `package-lock.json`, and `CHANGELOG.md`.
298
+
299
+ Once that PR is merged into `main`, a release tag is created. See [Publishing an NPM Package](#publishing-an-npm-package) for more info.
300
+
301
+ ### Merging
302
+
303
+ Choose `Squash and merge` when you're ready to merge your PR.
304
+
305
+ You can use certain [keywords](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests) in your PR description or one of your commit message footers to link or close an issue or pull request.
306
+
307
+ > [!TIP]
308
+ > Link multiple issues by comma-separating and repeating all keyword commands.
309
+ >
310
+ > ```
311
+ > closes #76, closes #77, fixes #100
312
+ > ```
313
+
270
314
  ## Under the Hood Technologies
271
315
 
272
316
  Inspect the [package.json](./package.json) `dependencies` and `devDependencies` sections for the full list of technologies.
@@ -313,19 +357,20 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
313
357
 
314
358
  ### Configuration files
315
359
 
316
- - [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
317
- - [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
318
- - [.commitlintrc.cjs](./.commitlintrc.cjs) => [commitlint](https://commitlint.js.org/reference/configuration.html)
319
360
  - [.czrc](./.czrc) => [cz-cli/commitizen](https://github.com/commitizen/cz-cli#readme)
320
- - [.eslintrc.cjs](./.eslintrc.cjs) => [ESLint](https://eslint.org/docs/latest/use/configure/)
321
- - [.lintstagedrc.cjs](./.lintstagedrc.cjs) => [Lint Staged](https://github.com/lint-staged/lint-staged?tab=readme-ov-file#configuration)
361
+ - [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
322
362
  - [.nvmrc](./.nvmrc) => [nvm](https://github.com/nvm-sh/nvm#readme)
323
363
  - [.prettierrc](./.prettierrc) => [Prettier](https://prettier.io/docs/en/configuration.html)
364
+ - [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
365
+ - [commitlint.config.js](./commitlint.config.js) => [commitlint](https://commitlint.js.org/reference/configuration.html)
324
366
  - [components.json](./components.json) => [shadcn/ui](https://ui.shadcn.com/docs/components-json)
367
+ - [eslint.config.js](./eslint.config.js) => [ESLint](https://eslint.org/docs/latest/use/configure/)
368
+ - [lint-staged.config.js](./lint-staged.config.js) => [Lint Staged](https://github.com/lint-staged/lint-staged?tab=readme-ov-file#configuration)
325
369
  - [postcss.config.js](./postcss.config.js) => [PostCSS](https://github.com/postcss/postcss#readme)
326
370
  - [tailwind.config.js](./tailwind.config.js) => [Tailwind CSS](https://tailwindcss.com/docs/configuration)
327
371
  - [tsconfig{.app,.node}.json](./tsconfig.json) => [TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
328
372
  - [vite.config.ts](./vite.config.ts) => [Vite](https://vitejs.dev/config/)
373
+ - [vitest.workspace.ts](./vitest.workspace.ts) => [Vitest](https://vitest.dev/)
329
374
 
330
375
  ## Production Build
331
376
 
@@ -337,15 +382,48 @@ npm run build
337
382
 
338
383
  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.
339
384
 
340
- 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:
385
+ A `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:
341
386
 
342
387
  - style.css - All of the necessary CSS including [Tailwind CSS](https://tailwindcss.com/) utility classes.
343
388
  - index.es.d.ts - All of the necessary type information.
344
389
  - index.es.js - All of the exported components in ES Modules format.
345
390
  - index.umd.js - All of the exported components in the Universal Module Definition (fallback) format.
346
391
 
347
- > 💡 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.
392
+ > [!TIP]
393
+ > 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.
394
+ >
395
+ > `npm link` can be flakey, so the alternative would be run [npm pack](https://docs.npmjs.com/cli/v9/commands/npm-pack) to create a local \*.tgz file and install that file in your external project.
396
+
397
+ ## Publishing an NPM Package
398
+
399
+ Once a [Release PR](#release-prs) is merged and a new release tag is automatically created, you will want to run the [Publish to NPM](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/npm-publish.yml) action.
400
+
401
+ This action will run the necessary commands to get a new production build of the library up to NPM for the external projects to download any new features.
402
+
403
+ > [!NOTE]
404
+ > The code changes picked up should only relate to code being used by external projects.
405
+ >
406
+ > Internal code, such as Storybook stories or build configurations, should not be considered worthy of a new package update.
407
+ >
408
+ > Changes such as a new `Button` or breaking API changes to `Select` _would_ constitute a package update.
409
+ >
410
+ > These decisions are handled automatically based on your `git commit` messages. See [Committing Changes](#committing-changes) for more info.
411
+
412
+ ## Documentation Alerts/Callouts
413
+
414
+ These additional markers describing the type of callout will be picked up and styled accordingly using Github's [Alerts](https://docs.github.com/en/contributing/writing-for-github-docs/using-markdown-and-liquid-in-github-docs#alerts) markdown.
415
+
416
+ > [!NOTE]
417
+ > Highlights information that users should take into account, even when skimming.
418
+
419
+ > [!TIP]
420
+ > Optional information to help a user be more successful.
421
+
422
+ > [!IMPORTANT]
423
+ > Crucial information necessary for users to succeed.
348
424
 
349
- ## Publishing (NPM Package)
425
+ > [!WARNING]
426
+ > Critical content demanding immediate user attention due to potential risks.
350
427
 
351
- ...Coming soon
428
+ > [!CAUTION]
429
+ > Negative potential consequences of an action.
package/dist/index.es.d.ts CHANGED
@@ -1,51 +1,160 @@
1
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
1
2
  import { ClassProp } from 'class-variance-authority/dist/types';
3
+ import { DirectionProvider } from '@radix-ui/react-direction';
4
+ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
5
+ import { JSX as JSX_2 } from 'react/jsx-runtime';
2
6
  import * as React_2 from 'react';
7
+ import * as SeparatorPrimitive from '@radix-ui/react-separator';
8
+ import * as SwitchPrimitives from '@radix-ui/react-switch';
3
9
  import { VariantProps } from 'class-variance-authority';
4
10
 
5
- export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
11
+ export declare const Avatar: React_2.ForwardRefExoticComponent<AvatarProps & React_2.RefAttributes<HTMLSpanElement>>;
6
12
 
7
- declare interface ButtonProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
13
+ export declare const AvatarFallback: React_2.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React_2.RefAttributes<HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
14
+
15
+ export declare const AvatarImage: React_2.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React_2.RefAttributes<HTMLImageElement>, "ref"> & React_2.RefAttributes<HTMLImageElement>>;
16
+
17
+ declare interface AvatarProps extends React_2.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
18
+ }
19
+
20
+ declare const avatarVariants: (props?: ({
21
+ size?: "sm" | "md" | "lg" | null | undefined;
22
+ } & ClassProp) | undefined) => string;
23
+
24
+ export declare const Box: React_2.ForwardRefExoticComponent<BoxProps & React_2.RefAttributes<HTMLDivElement>>;
25
+
26
+ declare interface BoxProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof boxVariants> {
27
+ as?: 'div' | 'span';
8
28
  asChild?: boolean;
29
+ }
30
+
31
+ declare const boxVariants: (props?: ({
32
+ p?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
33
+ pb?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
34
+ pe?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
35
+ ps?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
36
+ pt?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
37
+ px?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
38
+ py?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
39
+ m?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
40
+ mb?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
41
+ me?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
42
+ ms?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
43
+ mt?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
44
+ mx?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
45
+ my?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
46
+ display?: "none" | "block" | "inline-block" | null | undefined;
47
+ } & ClassProp) | undefined) => string;
48
+
49
+ export declare const Button: React_2.ForwardRefExoticComponent<(IconButtonProps | ButtonProps) & React_2.RefAttributes<HTMLButtonElement>>;
50
+
51
+ declare interface ButtonBaseProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
52
+ iconOnly?: boolean;
9
53
  endContent?: React_2.ReactNode;
10
54
  startContent?: React_2.ReactNode;
55
+ asChild?: boolean;
56
+ }
57
+
58
+ declare interface ButtonProps extends ButtonBaseProps {
59
+ iconOnly?: false;
11
60
  }
12
61
 
13
62
  declare const buttonVariants: (props?: ({
14
- variant?: "solid" | "plain" | null | undefined;
15
- color?: "neutral" | "primary" | null | undefined;
63
+ variant?: "link" | "solid" | "outline" | "plain" | null | undefined;
64
+ color?: "neutral" | "primary" | "secondary" | null | undefined;
16
65
  fullWidth?: boolean | null | undefined;
66
+ avatar?: boolean | null | undefined;
67
+ iconOnly?: boolean | null | undefined;
68
+ radius?: "md" | "full" | null | undefined;
69
+ size?: "sm" | "md" | "lg" | null | undefined;
17
70
  } & ClassProp) | undefined) => string;
18
71
 
72
+ export { DirectionProvider }
73
+
74
+ export declare const DropdownMenu: React_2.FC<DropdownMenuPrimitive.DropdownMenuProps>;
75
+
76
+ export declare const DropdownMenuCheckboxItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
77
+
78
+ export declare const DropdownMenuContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
79
+
80
+ export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
81
+
82
+ export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
83
+ inset?: boolean;
84
+ } & React_2.RefAttributes<HTMLDivElement>>;
85
+
86
+ export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
87
+ inset?: boolean;
88
+ } & React_2.RefAttributes<HTMLDivElement>>;
89
+
90
+ export declare const DropdownMenuPortal: React_2.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
91
+
92
+ export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
93
+
94
+ export declare const DropdownMenuRadioItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
95
+
96
+ export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
97
+
98
+ export declare const DropdownMenuShortcut: {
99
+ ({ className, ...props }: React_2.HTMLAttributes<HTMLSpanElement>): JSX_2.Element;
100
+ displayName: string;
101
+ };
102
+
103
+ export declare const DropdownMenuSub: React_2.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
104
+
105
+ export declare const DropdownMenuSubContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
106
+
107
+ export declare const DropdownMenuSubTrigger: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
108
+ inset?: boolean;
109
+ } & React_2.RefAttributes<HTMLDivElement>>;
110
+
111
+ export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
112
+
19
113
  export declare const Flex: React_2.ForwardRefExoticComponent<FlexProps & React_2.RefAttributes<HTMLDivElement>>;
20
114
 
21
115
  declare interface FlexProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
22
116
  as?: 'div' | 'span';
23
117
  asChild?: boolean;
118
+ tooltip?: string;
24
119
  }
25
120
 
26
121
  declare const flexVariants: (props?: ({
27
- wrap?: "wrap" | "nowrap" | "reverse" | null | undefined;
28
- p?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
29
- pb?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
30
- pe?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
31
- ps?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
32
- pt?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
33
- px?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
34
- py?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
35
- m?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
36
- mb?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
37
- me?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
38
- ms?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
39
- mt?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
40
- mx?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
41
- my?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
42
- justify?: "end" | "start" | "around" | "baseline" | "between" | "center" | "normal" | "stretch" | null | undefined;
43
- gap?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
44
- gapColumn?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
45
- gapRow?: 0 | "px" | 1 | 0.5 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
46
- align?: "end" | "start" | "baseline" | "center" | "stretch" | null | undefined;
47
- direction?: "row" | "column-reverse" | "row-reverse" | "column" | null | undefined;
122
+ self?: "end" | "start" | "center" | "auto" | "stretch" | "baseline" | null | undefined;
123
+ shrink?: 0 | 1 | null | undefined;
124
+ wrap?: "wrap" | "reverse" | "nowrap" | null | undefined;
125
+ p?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
126
+ pb?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
127
+ pe?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
128
+ ps?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
129
+ pt?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
130
+ px?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
131
+ py?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
132
+ m?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
133
+ mb?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
134
+ me?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
135
+ ms?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
136
+ mt?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
137
+ mx?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
138
+ my?: 0 | "px" | 16 | 1 | 2 | "auto" | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
139
+ grow?: 0 | 1 | null | undefined;
140
+ justify?: "end" | "start" | "center" | "stretch" | "baseline" | "normal" | "around" | "between" | "evenly" | null | undefined;
141
+ gap?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
142
+ gapColumn?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
143
+ gapRow?: 0 | "px" | 16 | 1 | 2 | 3 | 4 | 0.5 | 1.5 | 2.5 | 3.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
144
+ align?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined;
145
+ direction?: "row" | "column" | "column-reverse" | "row-reverse" | null | undefined;
48
146
  display?: "flex" | "none" | "inline-flex" | null | undefined;
49
147
  } & ClassProp) | undefined) => string;
50
148
 
149
+ export declare const IconButton: React_2.ForwardRefExoticComponent<Omit<IconButtonProps, "fullWidth" | "iconOnly"> & React_2.RefAttributes<HTMLButtonElement>>;
150
+
151
+ declare interface IconButtonProps extends ButtonBaseProps {
152
+ iconOnly: true;
153
+ 'aria-label': string;
154
+ }
155
+
156
+ export declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
157
+
158
+ export declare const Switch: React_2.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
159
+
51
160
  export { }