English version: README.en.md

@swedev/ui

Delat, theme-bart komponentbibliotek for swedev-projekt (Styrla, OpenVera, Timla).

Byggt pa Radix Themes med semantiska wrappers, Lucide React-ikoner och CSS Modules.

Installera

npm install @swedev/ui

Peer dependencies:

npm install react react-dom @radix-ui/themes lucide-react

Anvandning

import { Button, Badge, Callout } from "@swedev/ui";
import { Save } from "lucide-react";
import { Theme } from "@radix-ui/themes";
import "@radix-ui/themes/styles.css";
import "@swedev/ui/styles.css";

function App() {
  return (
    <Theme accentColor="teal" grayColor="slate">
      <Callout semantic="info" title="Valkomna" message="Kom igang." />
      <Badge semantic="success">Aktiv</Badge>
      <Button semantic="action" icon={Save}>Spara</Button>
    </Theme>
  );
}

Semantiska props

Komponenter tar semantic istallet for color for konsekvent betydelse i hela UI:t:

action · destructive · neutral · info · success · warning · error · danger · pending · valid · invalid

<Badge semantic="success">Betald</Badge>
<Badge semantic="warning">Forsenad</Badge>
<Badge semantic="pending">Vantelista</Badge>

Komponenter

Komponent	Bas	Semantic
Badge	Radix Badge	ja
Button	Radix Button	ja
Callout	Radix Callout	ja
Checkbox	Radix Checkbox	ja
DatePicker	Radix Popover + custom	-
Dropdown	Radix DropdownMenu	per item
Pagination	Custom	-
ProgressBar	Radix Progress	ja
Select	Radix Select	-
Slider	Radix Slider	ja
Switch	Radix Switch	ja
Table	Radix Table	-
TextArea	Radix TextArea	ja
TextField	Radix TextField	ja
ToggleButton	Radix SegmentedControl	-
Breadcrumbs	Custom	-
Modal	Radix Dialog	-

Storybook

npm run dev       # Starta Storybook pa port 6006
npm run build     # Bygg paketet (Vite)

Theming

Wrappa din app i Radix <Theme> for att satta branding per deployment:

import { Theme } from "@radix-ui/themes";

<Theme accentColor="teal" grayColor="slate">
  {/* Alla komponenter arver temat */}
</Theme>

Detta gor det mojligt att brand:a per organisation — varje forening eller foretag ser ett enhetligt UI i sina egna farger.

Licens

MIT