RadixUI-Swift

import RadixUI

Text("RadixUI-Swift")
  .foregroundColor(.crimson9) // Directly

private var color: RadixAutoColor = .crimson

Text("RadixUI-Swift")
  .foregroundColor(color.solid9) // From RadixAutoColor Enum

private var color: RadixAutoColor = .custom("myColor")
// Reads all 12 levels of your custom pallete using the color's child variables.
// It will automatically capitalize the first letter for you.

Text("RadixUI-Swift")
  .foregroundColor(color.solid9)

// Default SwiftUI's Image
Image("github-logo", bundle: .radixUI)
  .resizable()
  .aspectRatio(contentMode: .fit)
  .frame(width: anySize, height: anySize)
  .foregroundColor(.ruby9)

// Built-in Custom Extension
ResizableBundledImage(imageName: "vercel-logo", imageSize: 20, bundle: .radixUI)
  .foregroundColor(.ruby9)

Label("Vercel", imageName: "vercel-logo", imageSize: 20, bundle: .radixUI)

// for person's name abbreviation placeholder/fallback, it will automatically abbreviate the full name
RadixAvatar(
    url: URL(string: "urlToImage"),
    name: "Passed Name",
    variant: .soft,
    size: .small,
    radius: .large,
    color: .grass
)
// or for person icon placeholder/fallback
RadixAvatar(
    url: URL(string: "urlToImage"),
    variant: .solid,
    size: .medium,
    radius: .none,
    color: .grass
)

// variant: soft, solid
// size: small, medium, large
// radius: none, large, full

Text("New")
    .font(.footnote)
    .radixBadge(variant: .outline, radius: .none, color: .grass)
// variant: outline, soft, solid, surface
// radius: none, large, full

@State private var isLoading = false

// Surely you can go for < Button {} label: {} > approach too!
Button(action: functionName) {
    // Best for using Label with RadixUI icons
    Label(LocalizedStringKey, imageName: String, imageSize: CGFloat, bundle: Bundle)
    // or create one
    Label {
        Text(LocalizedStringKey)
    } icon: {
        Image(String)
        Image(systemName: String)
        Image(String, bundle: Bundle?)
    }
    // or to use Asset Catalog Image and SFSymbols
    Label(LocalizedStringKey, image: String)
    Label(LocalizedStringKey, systemImage: String)
}
.buttonStyle(
// for having the similarity to RadixUI buttons like scale and opacity and etc;
// does not change anything of the button but adds some effects.
    .radixCustom()
// or
    .radixGhost(
        layout: .leading,
        radius: .large,
        color: .grass
    ),
    isLoading: $isLoading
// or
    .radixOutline(
        layout: .leading,
        radius: .large,
        color: .grass
    ),
    isLoading: $isLoading
// or
    .radixSoft(
        layout: .leading,
        radius: .large,
        color: .grass
    ),
    isLoading: $isLoading
// or
    .radixSolid(
        layout: .leading,
        radius: .large,
        color: .grass
    ),
    isLoading: $isLoading
// or
    .radixSurface(
        layout: .leading,
        radius: .large,
        color: .grass
    ),
    isLoading: .constant(false) // for disabling the loading state change
)
// layout: icon, title, leading, trailing
// radius: none, large, full

let infoText = "You will need admin privileges to install and access this application."
let alertText = "Access denied. Please contact the network administrator to view this page."

Text(infoText)
    .radixInfoCallout(variant: .surface, color: .grass) // info callout, customizable color, `info-circled` icon

Text(alertText)
    .radixAlertCallout(variant: .surface) // alert callout, red color, `exclamation-triangle` icon

// variant: outline, soft, surface

// the radio option data options should conform to these protocols
struct Option: Identifiable, Equatable {
    let id = UUID()
    let title: LocalizedStringKey
}

@State private var selectedOption: Option? = nil
private let options = [
    Option(title: "Option 1"),
    Option(title: "Option 2"),
    Option(title: "Option 3")
]

RadixRadioGroup(
    options: options, // pass the array of data options
    selected: $selectedOption, // bound of selected option
    style: (variant: .surface, layout: .trailing, color: .grass)
) {
// what the options should show as label
    Text($0.title)
        .foregroundStyle(.grass12)
}
// variant: .soft, surface
// layout: .leading, .trailing

struct PickerDemoView: View {

    init() {
        RadixSegmentedPicker(
            color: .grass,
            selectedFont: .systemFont(ofSize: 15, weight: .semibold),
            notSelectedFont: .systemFont(ofSize: 15, weight: .light)
        )
    }

    @State private var selected: RadixToggleType = .switch

    var body: some View {
        Picker(String(""), selection: $selected) {
            Text("Checkbox").tag(RadixToggleType.checkbox)
            Text("Radio").tag(RadixToggleType.radio)
            Text("Switch").tag(RadixToggleType.switch)
            Text("Toggle").tag(RadixToggleType.toggle)
            
        }
        .pickerStyle(.segmented)
        .padding()
        .frame(width: 400)
    }
}

@State private var value = 5.0

RadixSlider(value: $value, step: 1, in: 0...10)
    .rxSliderStyle(
        .radixSoft(
            radius: .full,
            size: .medium,
            color: .grass
        )
// or
        .radixSurface(
            radius: .full,
            size: .medium,
            color: .grass
        )
    )
// radius: .none, .large, .full
// size: small, medium, large

@State private var input = ""
@State private var isLoading = false

TextField("Placeholder1", text: $input)
    .textFieldStyle(
        .radixSurface(
            radius: .large,
            color: .grass, // optional, default .blue
            iconLabel: Image("quote", bundle: .radixUI), // optional
            iconButton: Image("arrow-right", bundle: .radixUI), // optional
            action: functionName // optional action, does provide .onSubmit by default to textfield
        ),
        isLoading: $isLoading
// or
        .radixSoft(
            radius: .large,
            color: .grass, // optional, default .blue
            iconLabel: Image("quote", bundle: .radixUI),  // optional image
            iconButton: Image("arrow-right", bundle: .radixUI),  // optional image
            action: functionName  // optional action, does provide .onSubmit by default to textfield
        ),
        isLoading: $isLoading
    )
// radius: .none, .large, .full

@State private var presentInfoToast = false
@State private var presentActionToast = false

var body: some View {
    VStack { // << this is the highest container in the view, toast should applied to it
        HStack {

        }
    }
    .radixInfoToast( // this is a info toast, action is dismiss
        $presentInfoToast,
        variant: .surface,
        position: .bottom,
        color: .grass,
        duration: 3 // 0 == never, any other number auto dismisses the toast after the given number in seconds
    ) {
        Label(
            "This is a Radix Info Toast",
            imageName: "vercel-logo",
            imageSize: 20,
            bundle: .module
        ) // << pass a label to this part just like how explained in button part of this readme
    }
    .radixActionToast( // this is a action toast, you should define an action for it
        $presentActionToast,
        variant: .soft,
        position: .top,
        color: .grass,
        duration: 0
    ) {
        presentInfoToast = true // define the action you wnat here or just pass a function
    } buttonLabel: {
        Label(
            "Ignored Text",
            imageName: "avatar",
            imageSize: 20,
            bundle: .radixUI
        ) // pass a label as before for the button of the action, only shows the icon
    } toastLabel: {
        Label(
            "Button Presents Info Toast",
            imageName: "vercel-logo",
            imageSize: 20,
            bundle: .radixUI
        ) // pass a label as the toast's main content
    }
}
// variant: .soft, .surface
// position: .bottom, .top

Toggle(isOn: $toggleBinding) {
    ResizableBundledImage( // showed after toggle (checkbox( has been turned on (checked)
        imageName: "check",
        imageSize: 20,
        bundle: .radixUI
    )
}
.toggleStyle(
    .radixCheckbox(
        variant: .surface,
        color: .grass
    )
)
Toggle(isOn: $toggleBinding) {
    Text("Label Text")
        .foregroundStyle(radixColor.grass.text2)
}
.toggleStyle(
    .radixSwitch( // a switch style, just like swiftui's default with styling of radix ui
        variant: .surface,
        radius: .full,
        color: .grass
    )
)
Toggle(isOn: $toggleBinding) {
    ResizableBundledImage(
        imageName: "font-italic",
        imageSize: 20,
        bundle: .radixUI
    )
}
.toggleStyle(
    .radixToggle( // toggle as toggle, dimmer color when off, strong color when on
        color: .grass
    )
)
// variant: .soft, .surface
// radius: .none, .large, .full

AnyView
.radixShadow1()
.radixShadow2()
.radixShadow3()
.radixShadow4()
.radixShadow5()
.radixShadow6()