@starbemtech/react-starsystem@1.1.0
Minor Changes
-
5baa862:
Input: move thelabelabove the field instead of floating it inside the bordered box (matchesSelect/FormField's existing label position — visual change for consumers using<Input label="..."/>standalone without aFormFieldwrapper, no type-level breaking change). Addvariant(outlinedefault,filled,underline),size(sm,mddefault,lg), asuccessstate (parallel toerror, mutually exclusive —errorwins if both are set), andprefix/suffixadd-ons. Also fixes themdsize's padding/radius, which previously used16px/8pxpadding and a 16px radius instead of the design system's14px/10pxpadding and 12px radius. -
0f45761:
Textarea: move thelabelabove the field instead of floating it inside the bordered box (matchesInput/Select/FormField's label position — visual change for consumers using<Textarea label="..."/>standalone, no type-level breaking change). Addvariant(outlinedefault,filled,underline),size(sm,mddefault,lg), asuccessstate (parallel toerror, mutually exclusive —errorwins if both are set), and an opt-in character counter (showCount, requiresmaxLength).Select: addvariant,size, andsuccess, matchingInput/Textarea. Fixes the trigger's fixed56pxheight and16px/8pxpadding (now organic height with14px/10pxpadding on themddefault, matching the design system), and fixes the trigger and popover menu background, which used an incorrect gray (#F7F7F7) instead of white.Internal: extracted the
variant/sizecolor and sizing logic shared byInput,Textarea, andSelectintosrc/components/shared/fieldStyles.ts— not part of the public API, but public type aliases (InputVariant,InputSize,TextareaVariant,TextareaSize,SelectVariant,SelectSize) are preserved for existing imports.
🔖 Commits
Changes since v1.0.1:
18c08dcchore: release v1.1.097eafa4✨ (Sidebar.stories.tsx): add support for collapsible UserFooter component to show/hide user name based on collapsed state0f45761chore: add changeset for Textarea/Select DS parityfcc4a07docs: add variant/size/success/counter stories for Textarea and Select3c20bbbfeat(Select): add variant/size/success, fix background gray-bug and fixed height688338dfix(Textarea): remove unrequested opacity-60 from disabled statead4d8d1feat(Textarea): add opt-in character counter tied to maxLength08cec86feat(Textarea): add variant/size/success, move label above field33e183drefactor(Input): extract field variant/size styles into shared moduleb9dca08docs: add Textarea/Select DS parity implementation pland7478a7docs: add Textarea/Select DS parity design specfc63d74docs: add Textarea/Select DS parity implementation plan6394580docs: add Textarea/Select DS parity design specfd3690e✨ (Avatar.tsx): Update Avatar component to conditionally show different background and text colors based on showImage prop ♻️ (Input.tsx): Refactor getFieldColorClasses function to use consistent background and border colors for different variants and states ♻️ (Toggle.tsx): Refactor Toggle component to use primary base color for checked state background color instead of secondary darker colorcffaf61test(Input): add missing a11y tests for success and prefix+error states5baa862chore: add changeset for Input redesignbea5145docs(Input): add stories for variant/size/success/prefix-suffixe34e0e1fix(Input): add missing divider border on prefix/suffix4825fa0feat(Input): add prefix/suffix add-ons0b3faf9feat(Input): add success state with hint icon9682eabfeat(Input): add variant/size, move label above field7295f8ddocs: add Input redesign implementation pland63b089docs: add Input redesign design spec7300e2cdocs: add Input redesign implementation plan428f480docs: add Input redesign design spec83d7a10✨ (Modal.stories.tsx): Update Modal stories to initialize the 'open' state as false instead of true to prevent modals from opening by default. Add buttons to manually open the modals for better user interaction.
📦 Install
pnpm add @starbemtech/react-starsystem@1.1.0🚀 Basic usage
import { Button } from '@starbemtech/react-starsystem'
import '@starbemtech/react-starsystem/style.css'🎨 Design Tokens
import { colors, fontFamily, fontSize, spacing, borderRadius } from '@starbemtech/react-starsystem'
// colors
colors.primary.base // #FF5100
colors.secondary.base // #7F56D9
colors.terciary.base // #ED2E98