Release v0.1.0 · witchcraftjs/ui

0.1.0 (2025-07-26)

⭐ New Features

added base styles for scrollbars and textarea resize handles (4b9d071)

added experimental usePreHydrationValue composable (71232e2)

This helps prevent things like values resetting on hydration if the user
inputted too early.

Used composable in Input, SimpleInput, and Checkbox. So these no longer have
to be guarded against the user inputting before hydration, they can be used as
is.

added stringPrecision option to color picker (d383806)

added notifyIfError util for wrapping values that might be errors (b450fa6)

Notifications component now uses global handler by default (f1ee73c)

added useDragWithThreshold composable (280b217)

added customRepresenation option to ColorPicker (b28baf6)

added some classes for easier styling (9d96f3e)

In the future, I think I will deprecate the divided attributes (wrapper-class,
etc) in favor of css classes and explicitly named attribute inheritance
(wrapper-attrs).

added valid prop to color input (60a1a6c)

added semantic class names to all components (c962cfb)

In future will deprecate the divided attribute passing (e.g. wrapper-class) in
favor of styling sub-components with the semantic classes and specific attribute
inheritance (e.g. wrapper-attrs). This always had poor type support and it
doesn't seem the situation is likely to improve anytime soon. Also I rarely
ended up using it. Either way still requires looking at the component structure.

In future will add docs describing structure, but currently storybook docs are
broken.

added canClose prop to popup (5ac67c5)

This is so we can use it with something like the notifications component, which
needs to handle the closing itself.

exposed open for v-modeling in lib-suggestions + canClose option (ad3b696)

added alot to completely replace the button label if needed (5da704f)

improved look of buttons (c60c601)

various improvements to the color picker and input (e324830)

refactored code, seperated out functions
fixed issue with invisible aria component getting focus
fixed focus when mounted and when grabbing the handles (it's now stick)
pressing enter when focused on any handles now saves the color
added experimental support for $tempValue for immediate color updates (you
should debounce the update if updating the color of something heavy)
added another color swatch for the temporary value and improved overall swatch
look
the color input no longer uses a label in the button (it has an
aria-title-and-prefix translation), you must provide your own

🐛 Fixes

fixed minor issues with the styling of the DarkModeSwitcher (53e45a7)

added missing radix-nuxt install to module (bf2266c)

fixed attribute inheritance of MultiValues (cf2253d)

fixed hydration issue with button (39f741d)

fixed single date picker time zone text wrapping (73096f8)

fixed css file error when it doesn't exist (f9f2cda)

Before it was always added anyways, resulting in an error if it was missing.

Now it checks first if the file exists. Styling will not work correctly, but
there are parts of the module one might want to use on their own.

fixed external change to modelValue not affecting DatePicker (1a9bde3)

fixed issue with duplicate slot in DatePicker (b207786)

fixed MultiValue valueModel not working (62589fd)

tweaked some the styling/animation for notications (d0d2227)

made dark mode notifications slightly lighter
fixed animation
all versions of the root notification element take in attrs.class
switched to absolute instead of fixed positioning
switched to flex columns for easier styling (we can justify-content: end) to
move notifications down, and even reverse the order easily

fixed missing Notifications component in Root (50ca2eb)

If useNotifications is true (the default), the Root component now also sets up
notifications with a default handler (can be changed by passing a custom
handler). So there's no need to do anything, you can call useNotificationHandler
from any component inside Root.

fixed some style issues with the date picker (b4e200d)

added some missing exports, removed/replaced references to removed TestWrapper (bfcba2b)

fixed some minor style issues (f9963f2)

fixed css focus-outline utilities (d81d0f8)

fixed color picker input getting into invalid state (a25880f)

removed default button type (98bfd71)

fixed popup not being topmost component (65a8152)

fixed types issue (4cdf44b)

fixed some $attrs inheritance issues (96a65f1)

fixed i18n hydration errors (bcca02a)

fixed popup positioning div still in DOM when model value is not true (and dialog not used) (8e4d1dc)

this interferes in things like grid layouts
am not sure if dialog also interferes...

fixed rounding on button light (c208a08)

⚠️ BREAKING CHANGES

moved style.css to utils.css to make it clearer what the file does (53b07b1)

added useDialogForBackdrop option to the Popup component and defaulted it to false (c86b839)

There are now two options, useBackdrop (which is only about whether to use a
backdrop or not, where before if true, the backdrop was always a dialog
element), and useDialogForBackdrop, which will use a dialog element for the
backdrop. This now defaults to false.

While it would be nice to use the native dialog for this, it requires additional
setup if using css variables for theming as variables must be set on :dialog or
:root (the parent component is not enough). This is highly inconvenient as it's
nice to be able to encapsulate the entire theme around a section of an app by
registering variables on a component. Because of this, using a dialog,
components can seem to break in weird ways. Most styles will work, but not
custom variables set by the theming library.

added support for multi-select suggestions (474cbbc)

This required a reworking of how suggestions are handled. The MultiValueProps
have all been dropped. The suggestions component now enforces now duplicates,
allowing duplicates was a bad idea in general.

Already selected values are always shown in the suggestions when multiple
values are used.
The suggestions component can also toggle the values via a checkbox/select
(the checkbox is for decoration purposes).
Removed the addValue helper.
This paves the way to a proper multi select.

renamed LibInput => LibInputDeprecated, LibSimpleInput => LibSimpleInputDeprecated (a2d07a0)

these will be replaced with new versions based on reka-ui that work a bit
different but are overall easie to think about

v0.1.0