@xola/ui-kit 3.0.6 → 3.0.8

package/index.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");
 
 @tailwind base;
@@ -6,11 +6,28 @@
 @tailwind utilities;
 
 @layer base {
+    :root {
+        /* https://rsms.me/inter/#usage */
+        font-feature-settings:
+            "liga" 1,
+            "calt" 1; /* fix for Chrome */
+    }
+
     html {
         /* Never change this default! */
         @apply text-black text-base;
     }
 
+    /* For testing advanced typographic features */
+    .font-ligatures {
+        font-feature-settings:
+            "liga" 1,
+            "calt" 1,
+            "dlig" 1,
+            "ss03" 1,
+            "ss02" 1 !important;
+    }
+
     a {
         @apply text-primary hover:underline;
     }

package/index.d.ts

@@ -1,277 +1,72 @@
 // This is just to make the auto-import work.
 // Next step is to add types for the props.
 export {
-    AccountIcon,
-    AddNoteIcon,
-    AddSquareIcon,
     Alert,
     almostZero,
-    AnnounceIcon,
-    AppIcon,
     AppStoreBadge,
-    ArchiveIcon,
-    ArrowCcwIcon,
-    ArrowCwIcon,
-    ArrowDownIcon,
-    ArrowRightIcon,
-    ArrowTopRightIcon,
-    ArrowUpIcon,
-    AtIcon,
     Avatar,
     Badge,
-    BalloonIcon,
-    BankCheckIcon,
-    BarGraphIcon,
-    BaseInput,
-    BellIcon,
-    BookIcon,
-    BookmarkIcon,
-    BoxIcon,
-    BugIcon,
     Breadcrumb,
     Breakdown,
-    BriefcaseIcon,
     Button,
-    ButtonCodeIcon,
     ButtonGroup,
-    CakeIcon,
-    CalendarDayIcon,
-    CalendarIcon,
-    CalendarMonthIcon,
-    CalendarWeekIcon,
-    CapacityIcon,
-    CardAltIcon,
-    CardIcon,
-    CartIcon,
-    CashIcon,
     Checkbox,
-    CheckboxIcon,
-    CheckIcon,
-    ChecklistIcon,
-    ChevronDownIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    ChevronUpIcon,
-    ChipIcon,
-    CircleCheckIcon,
-    CircleCrossIcon,
-    CircleCrownIcon,
-    CircleDollarIcon,
-    CircleDotIcon,
-    CircleInfinityIcon,
-    CircleInfoIcon,
-    CircleKeyIcon,
     CircleNotch,
-    CirclePauseIcon,
-    CirclePlusIcon,
-    CircleSubtractIcon,
-    ClipboardIcon,
-    ClockAltIcon,
-    ClockIcon,
-    ClockManualIcon,
-    CloseCircleIcon,
-    CloseIcon,
-    CollapseIcon,
     ComboBox,
-    CommentAltIcon,
-    CommentIcon,
     compactNumber,
-    CompassIcon,
-    CopyIcon,
     Counter,
-    CouponIcon,
-    CrmIcon,
-    CrownIcon,
     Currency,
-    DashboardIcon,
     dateFromObjectId,
     DatePicker,
     DatePickerPopover,
-    DecreaseIcon,
-    DepositIcon,
-    DisabledIcon,
-    DisputeIcon,
     Dot,
     DotProgress,
-    DotCircleIcon,
-    DoubleCheckIcon,
-    DownArrowIcon,
-    DownloadIcon,
     Drawer,
-    DropdownIcon,
-    DumbbellIcon,
-    DuplicateIcon,
-    DurationIcon,
-    EditIcon,
-    EditNoteIcon,
-    EditNotesIcon,
-    EllipsisIcon,
-    EmailCheckedIcon,
-    EmailIcon,
-    EmailResendIcon,
-    EmailSendIcon,
-    EmptyChecklistIcon,
-    EquipmentIcon,
-    ExportIcon,
-    EyeClosedIcon,
-    EyeIcon,
-    FaceNeutralIcon,
-    FaceSadIcon,
-    FaceSmileIcon,
     FadeIn,
-    FeedbackLightBulbIcon,
-    FilterIcon,
-    FilterIconOld,
-    FlagIcon,
     flash,
-    FlexFee2Icon,
-    FlexFeeIcon,
-    FoodIcon,
-    ForkIcon,
     formatDate,
     formatTime,
     FormGroup,
-    FunnelIcon,
     getChildByType,
     getChildrenByType,
     getInitials,
     getSymbol,
-    GiftIcon,
-    GlobeIcon,
-    HandIcon,
-    HandshakeIcon,
     HeaderToolbar,
-    HelpCenterIcon,
-    HiddenIcon,
-    HouseIcon,
-    ImageIcon,
     ImageUpload,
-    InfinityIcon,
     InlineValuePopover,
     Input,
-    InvoiceIcon,
     isOSX,
     isZeroDecimal,
     Key,
-    KeyIcon,
-    KioskIcon,
     Label,
-    LabelIcon,
-    LandscapeIcon,
-    LightIcon,
-    LightningIcon,
-    LinkIcon,
-    LockIcon,
     Login,
     Logo,
-    LogoutIcon,
-    MagicIcon,
-    MedicalIcon,
-    MegaphoneIcon,
-    MenuIcon,
-    MinusIcon,
-    MixedChecklistIcon,
-    MobileIcon,
     Modal,
-    MoneyAddIcon,
-    MoneyBackIcon,
-    MoneyIcon,
-    MountainIcon,
-    MouseIcon,
     Number,
     numberFormat,
-    PassIcon,
-    PauseIcon,
-    PenIcon,
     Phone,
-    PhoneIcon,
-    PhotosIcon,
-    PiggyBankIcon,
-    PinIcon,
-    PipeIcon,
-    PlayIcon,
     PlayMarketBadge,
-    PlusIcon,
-    PolicyIcon,
     Popover,
     PopoverList,
-    PrintIcon,
-    ProductsIcon,
     Provider,
-    QuestionIcon,
-    QuestionnaireIcon,
     RangeSlider,
-    ReceiptIcon,
-    ReceptionBellIcon,
-    ReceptionBellMoneyIcon,
-    RefreshIcon,
-    RefundIcon,
     RelativeDateRange,
-    RosterIcon,
-    RoundedSquareIcon,
     roundNumber,
-    RulerIcon,
     Search,
-    SearchAltIcon,
-    SearchIcon,
     Select,
-    SendIcon,
-    SeniorIcon,
-    SeniorV2Icon,
-    SeniorV3Icon,
-    ServiceIcon,
-    SettingsIcon,
-    ShapesIcon,
-    ShareIcon,
-    ShirtIcon,
-    ShoppingBagIcon,
     Sidebar,
     Skeleton,
     SlideDown,
     Spinner,
-    SplitPaymentIcon,
-    SquareIcon,
-    StackIcon,
-    StarFilledIcon,
-    StarIcon,
-    StoreCreditIcon,
     SubmitButton,
     Switch,
     Table,
     Tabs,
     Tag,
-    TaxIcon,
     Textarea,
     theme,
-    ThumbsDownIcon,
-    ThumbsUpIcon,
-    TicketIcon,
-    ToggleButton,
     Tooltip,
-    TransferArrowIcon,
-    TrashIcon,
-    TutorialsBadgeIcon,
-    TutorialsButtonIcon,
-    TutorialsSquareIcon,
-    UnlinkIcon,
-    useId,
+    ToggleButton,
     useIsClient,
     useViewportHeight,
-    UserAddIcon,
-    UserChangedIcon,
-    UserIcon,
-    UserSubtractIcon,
-    ValuePopoverText,
-    VeteranIcon,
-    ViewNotesIcon,
-    VoucherIcon,
-    WaitlistIcon,
-    WarningDiamondIcon,
-    WarningIcon,
-    WarningTriangleIcon,
-    WeightIcon,
-    WifiIcon,
-    WriteIcon,
-    XolaBotIcon,
-    XrayIcon,
 } from "./build/ui-kit.es";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "3.0.6",
+    "version": "3.0.8",
     "description": "Xola UI Kit",
     "license": "MIT",
     "repository": {
@@ -33,7 +33,7 @@
         "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
     },
     "dependencies": {
-        "@headlessui/react": "^1.7.19",
+        "@headlessui/react": "1.6",
         "@tailwindcss/forms": "^0.5.6",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@tippyjs/react": "^4.2.6",
@@ -41,7 +41,7 @@
         "dayjs": "^1.11.13",
         "downshift": "^6.1.12",
         "get-user-locale": "^1.5.1",
-        "google-libphonenumber": "^3.2.38",
+        "google-libphonenumber": "^3.2.39",
         "lodash-es": "^4.17.21",
         "nouislider-react": "^3.4.1",
         "prop-types": "^15.8.1",
@@ -54,7 +54,7 @@
         "react-textarea-autosize": "^8.5.3",
         "react18-json-view": "^0.2.8",
         "storybook-addon-designs": "^6.3.1",
-        "tailwind-merge": "^2.5.2",
+        "tailwind-merge": "^2.5.5",
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
@@ -65,6 +65,8 @@
         "@storybook/addon-links": "^6.5.10",
         "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addons": "^6.5.10",
+        "@storybook/builder-webpack5": "^6.5.16",
+        "@storybook/manager-webpack5": "^6.5.16",
         "@storybook/react": "^6.5.10",
         "@storybook/theming": "^6.5.10",
         "@types/react": "^18.3.8",
@@ -79,8 +81,9 @@
         "storybook-css-modules-preset": "^1.1.1",
         "tailwindcss": "^3.1.8",
         "typescript": "4.7",
-        "vite": "^3.2.11",
-        "vitest": "^2.1.1"
+        "vite": "^5.4.11",
+        "vitest": "^2.1.1",
+        "webpack": "^5.97.1"
     },
     "peerDependencies": {
         "@types/react": "^18.2.22",
@@ -88,7 +91,7 @@
         "autoprefixer": "^10.3.1",
         "postcss": "^8.3.6",
         "tailwindcss": "^3.1.8",
-        "vite": "3.2"
+        "vite": "^5.4.11"
     },
     "engines": {
         "node": ">=18"

package/tailwind.config.js

@@ -172,7 +172,7 @@ module.exports = {
         // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51905
         extend: {
             fontFamily: {
-                sans: ["Inter", ...defaultTheme.fontFamily.sans],
+                sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
                 mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono],
             },