@modul/mbui 0.0.13-beta-pv-53036-7c290859 → 0.0.13-beta-pv-53036-df9af308

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/Calendar/Calendar.js +30 -28
  2. package/dist/Calendar/Calendar.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/Calendar/Calendar.tsx +40 -38
  5. package/src/Datepicker/Datepicker.tsx +33 -36
  6. package/src/Datepicker/index.ts +1 -1
  7. package/src/Select/Select.tsx +0 -0
package/dist/Calendar/Calendar.js CHANGED
@@ -5,37 +5,39 @@ const tslib_1 = require("tslib");
5
5
  const React = (0, tslib_1.__importStar)(require("react"));
6
6
  const react_day_picker_1 = require("react-day-picker");
7
7
  const utils_1 = require("../@/lib/utils");
8
- const Button_1 = require("../Button");
8
+ const locale_1 = require("date-fns/locale");
9
+ const daySelectedClasses = 'bg-btn-primary text-btn-primary rounded-sm';
10
+ const dayTodayClasses = 'bg-btn-secondary text-btn-secondary rounded-sm';
11
+ const rangeMiddleClasses = 'date-range-middle aria-selected:bg-btn-primary/50 aria-selected:text-white';
12
+ const btnNavClasses = 'opacity-50 hover:opacity-100 ring-offset-2 focus-visible:opacity-100 focus-visible:outline-primary border-input border rounded-sm shadow-sm';
9
13
  function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
10
- return (React.createElement(react_day_picker_1.DayPicker, { showOutsideDays: showOutsideDays, className: (0, utils_1.cn)('p-3', className), classNames: {
11
- months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
12
- month: 'space-y-4',
13
- caption: 'flex justify-center pt-1 relative items-center',
14
- caption_label: 'text-sm font-medium',
15
- nav: 'space-x-1 flex items-center',
16
- nav_button: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'),
17
- nav_button_previous: 'absolute left-1',
18
- nav_button_next: 'absolute right-1',
19
- table: 'w-full border-collapse space-y-1',
20
- head_row: 'flex',
21
- head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
22
- row: 'flex w-full mt-2',
23
- cell: (0, utils_1.cn)('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md', props.mode === 'range'
24
- ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
25
- : '[&:has([aria-selected])]:rounded-md'),
26
- day: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
27
- day_range_start: 'day-range-start',
28
- day_range_end: 'day-range-end',
29
- day_selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
30
- day_today: 'bg-accent text-accent-foreground',
31
- day_outside: 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
32
- day_disabled: 'text-muted-foreground opacity-50',
33
- day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
34
- day_hidden: 'invisible',
14
+ return (React.createElement(react_day_picker_1.DayPicker, { locale: locale_1.ru, showOutsideDays: showOutsideDays, className: (0, utils_1.cn)('inline-flex', className), classNames: {
15
+ months: 'relative',
16
+ month: 'flex flex-col space-y-[16px] items-center',
17
+ month_grid: 'w-full border-collapse',
18
+ month_caption: 'inline m-x-auto',
19
+ caption_label: 'text-sm font-medium capitalize',
20
+ nav: 'flex justify-between absolute start-0 end-0',
21
+ button_previous: btnNavClasses,
22
+ button_next: btnNavClasses,
23
+ weekdays: 'flex',
24
+ weekday: 'text-light w-[32px] font-normal text-[14px]',
25
+ week: 'flex w-full mt-2',
26
+ day_button: 'w-[32px] h-[32px] p-0',
27
+ day: (0, utils_1.cn)('aria-selected:opacity-100 text-[14px] leading-[1]', props.mode === 'range'
28
+ ? '[&:(.day-range-middle)]:rounded-0 [&:has(>.day-range-end)]:rounded-r-sm [&:has(>.day-range-start)]:rounded-l-sm first:[&:has([aria-selected])]:rounded-l-sm last:[&:has([aria-selected])]:rounded-r-sm'
29
+ : '[&:([aria-selected])]:rounded-sm'),
30
+ range_start: 'day-range-start',
31
+ range_end: 'day-range-end',
32
+ range_middle: rangeMiddleClasses,
33
+ selected: daySelectedClasses,
34
+ today: dayTodayClasses,
35
+ outside: 'day-outside opacity-50 aria-selected:bg-primary aria-selected:text-[white] aria-selected:opacity-30',
36
+ disabled: 'text-light opacity-50',
37
+ hidden: 'invisible',
35
38
  ...classNames,
36
39
  }, components: {
37
- // IconLeft: ({ ...props }) => <Left className="w-4 h-4" />,
38
- // IconRight: ({ ...props }) => <Right className="w-4 h-4" />,
40
+ // Chevron: () => <Left className="w-4 h-4" />,
39
41
  }, ...props }));
40
42
  }
41
43
  exports.Calendar = Calendar;
package/dist/Calendar/Calendar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uDAA4C;AAC5C,0CAAmC;AACnC,sCAA0C;AAK1C,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,GAAG,IAAI,EAAE,GAAG,KAAK,EAAiB;IAC3F,OAAO,CACN,oBAAC,4BAAS,IACT,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,IAAA,UAAE,EAAC,KAAK,EAAE,SAAS,CAAC,EAC/B,UAAU,EAAE;YACX,MAAM,EAAE,+DAA+D;YACvE,KAAK,EAAE,WAAW;YAClB,OAAO,EAAE,gDAAgD;YACzD,aAAa,EAAE,qBAAqB;YACpC,GAAG,EAAE,6BAA6B;YAClC,UAAU,EAAE,IAAA,UAAE,EACb,IAAA,uBAAc,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACtC,yDAAyD,CACzD;YACD,mBAAmB,EAAE,iBAAiB;YACtC,eAAe,EAAE,kBAAkB;YACnC,KAAK,EAAE,kCAAkC;YACzC,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,gEAAgE;YAC3E,GAAG,EAAE,kBAAkB;YACvB,IAAI,EAAE,IAAA,UAAE,EACP,mNAAmN,EACnN,KAAK,CAAC,IAAI,KAAK,OAAO;gBACrB,CAAC,CAAC,sKAAsK;gBACxK,CAAC,CAAC,qCAAqC,CACxC;YACD,GAAG,EAAE,IAAA,UAAE,EAAC,IAAA,uBAAc,EAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,mDAAmD,CAAC;YAClG,eAAe,EAAE,iBAAiB;YAClC,aAAa,EAAE,eAAe;YAC9B,YAAY,EACX,kIAAkI;YACnI,SAAS,EAAE,kCAAkC;YAC7C,WAAW,EACV,uIAAuI;YACxI,YAAY,EAAE,kCAAkC;YAChD,gBAAgB,EAAE,8DAA8D;YAChF,UAAU,EAAE,WAAW;YACvB,GAAG,UAAU;SACb,EACD,UAAU,EAAE;QACX,4DAA4D;QAC5D,8DAA8D;SAC9D,KACG,KAAK,GACR,CACF,CAAA;AACF,CAAC;AAGQ,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
1
+ {"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uDAA4C;AAC5C,0CAAmC;AACnC,4CAAoC;AAEpC,MAAM,kBAAkB,GAAG,4CAA4C,CAAA;AACvE,MAAM,eAAe,GAAG,gDAAgD,CAAA;AACxE,MAAM,kBAAkB,GAAG,4EAA4E,CAAA;AACvG,MAAM,aAAa,GAClB,6IAA6I,CAAA;AAG9I,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,GAAG,IAAI,EAAE,GAAG,KAAK,EAAiB;IAC3F,OAAO,CACN,oBAAC,4BAAS,IACT,MAAM,EAAE,WAAE,EACV,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,IAAA,UAAE,EAAC,aAAa,EAAE,SAAS,CAAC,EACvC,UAAU,EAAE;YACX,MAAM,EAAE,UAAU;YAClB,KAAK,EAAE,2CAA2C;YAClD,UAAU,EAAE,wBAAwB;YACpC,aAAa,EAAE,iBAAiB;YAChC,aAAa,EAAE,gCAAgC;YAC/C,GAAG,EAAE,6CAA6C;YAClD,eAAe,EAAE,aAAa;YAC9B,WAAW,EAAE,aAAa;YAC1B,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,6CAA6C;YACtD,IAAI,EAAE,kBAAkB;YACxB,UAAU,EAAE,uBAAuB;YACnC,GAAG,EAAE,IAAA,UAAE,EACN,mDAAmD,EACnD,KAAK,CAAC,IAAI,KAAK,OAAO;gBACrB,CAAC,CAAC,wMAAwM;gBAC1M,CAAC,CAAC,kCAAkC,CACrC;YACD,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,eAAe;YAC1B,YAAY,EAAE,kBAAkB;YAChC,QAAQ,EAAE,kBAAkB;YAC5B,KAAK,EAAE,eAAe;YACtB,OAAO,EACN,qGAAqG;YACtG,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,WAAW;YACnB,GAAG,UAAU;SACb,EACD,UAAU,EACT;QACC,+CAA+C;SAC/C,KAEE,KAAK,GACR,CACF,CAAA;AACF,CAAC;AAIQ,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul/mbui",
3
- "version": "0.0.13-beta-pv-53036-7c290859",
3
+ "version": "0.0.13-beta-pv-53036-df9af308",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/Calendar/Calendar.tsx CHANGED
@@ -1,59 +1,61 @@
1
1
  import * as React from 'react'
2
2
  import { DayPicker } from 'react-day-picker'
3
3
  import { cn } from '../@/lib/utils'
4
- import { buttonVariants } from '../Button'
5
- import { Left, Right } from '../Icon'
4
+ import { ru } from 'date-fns/locale'
6
5
 
7
- export type CalendarProps = React.ComponentProps<typeof DayPicker>
6
+ const daySelectedClasses = 'bg-btn-primary text-btn-primary rounded-sm'
7
+ const dayTodayClasses = 'bg-btn-secondary text-btn-secondary rounded-sm'
8
+ const rangeMiddleClasses = 'date-range-middle aria-selected:bg-btn-primary/50 aria-selected:text-white'
9
+ const btnNavClasses =
10
+ 'opacity-50 hover:opacity-100 ring-offset-2 focus-visible:opacity-100 focus-visible:outline-primary border-input border rounded-sm shadow-sm'
8
11
 
12
+ export type CalendarProps = React.ComponentProps<typeof DayPicker>
9
13
  function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
10
14
  return (
11
15
  <DayPicker
16
+ locale={ru}
12
17
  showOutsideDays={showOutsideDays}
13
- className={cn('p-3', className)}
18
+ className={cn('inline-flex', className)}
14
19
  classNames={{
15
- months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
16
- month: 'space-y-4',
17
- caption: 'flex justify-center pt-1 relative items-center',
18
- caption_label: 'text-sm font-medium',
19
- nav: 'space-x-1 flex items-center',
20
- nav_button: cn(
21
- buttonVariants({ variant: 'outline' }),
22
- 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
23
- ),
24
- nav_button_previous: 'absolute left-1',
25
- nav_button_next: 'absolute right-1',
26
- table: 'w-full border-collapse space-y-1',
27
- head_row: 'flex',
28
- head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
29
- row: 'flex w-full mt-2',
30
- cell: cn(
31
- 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
20
+ months: 'relative',
21
+ month: 'flex flex-col space-y-[16px] items-center',
22
+ month_grid: 'w-full border-collapse',
23
+ month_caption: 'inline m-x-auto',
24
+ caption_label: 'text-sm font-medium capitalize',
25
+ nav: 'flex justify-between absolute start-0 end-0',
26
+ button_previous: btnNavClasses,
27
+ button_next: btnNavClasses,
28
+ weekdays: 'flex',
29
+ weekday: 'text-light w-[32px] font-normal text-[14px]',
30
+ week: 'flex w-full mt-2',
31
+ day_button: 'w-[32px] h-[32px] p-0',
32
+ day: cn(
33
+ 'aria-selected:opacity-100 text-[14px] leading-[1]',
32
34
  props.mode === 'range'
33
- ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
34
- : '[&:has([aria-selected])]:rounded-md'
35
+ ? '[&:(.day-range-middle)]:rounded-0 [&:has(>.day-range-end)]:rounded-r-sm [&:has(>.day-range-start)]:rounded-l-sm first:[&:has([aria-selected])]:rounded-l-sm last:[&:has([aria-selected])]:rounded-r-sm'
36
+ : '[&:([aria-selected])]:rounded-sm'
35
37
  ),
36
- day: cn(buttonVariants({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
37
- day_range_start: 'day-range-start',
38
- day_range_end: 'day-range-end',
39
- day_selected:
40
- 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
41
- day_today: 'bg-accent text-accent-foreground',
42
- day_outside:
43
- 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
44
- day_disabled: 'text-muted-foreground opacity-50',
45
- day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
46
- day_hidden: 'invisible',
38
+ range_start: 'day-range-start',
39
+ range_end: 'day-range-end',
40
+ range_middle: rangeMiddleClasses,
41
+ selected: daySelectedClasses,
42
+ today: dayTodayClasses,
43
+ outside:
44
+ 'day-outside opacity-50 aria-selected:bg-primary aria-selected:text-[white] aria-selected:opacity-30',
45
+ disabled: 'text-light opacity-50',
46
+ hidden: 'invisible',
47
47
  ...classNames,
48
48
  }}
49
- components={{
50
- // IconLeft: ({ ...props }) => <Left className="w-4 h-4" />,
51
- // IconRight: ({ ...props }) => <Right className="w-4 h-4" />,
52
- }}
49
+ components={
50
+ {
51
+ // Chevron: () => <Left className="w-4 h-4" />,
52
+ }
53
+ }
53
54
  {...props}
54
55
  />
55
56
  )
56
57
  }
58
+
57
59
  Calendar.displayName = 'Calendar'
58
60
 
59
61
  export { Calendar }
package/src/Datepicker/Datepicker.tsx CHANGED
@@ -1,41 +1,38 @@
1
- "use client"
1
+ import * as React from 'react'
2
+ import { format } from 'date-fns'
3
+ import { cn } from '../@/lib/utils'
4
+ import { Calendar } from '../Calendar'
5
+ import { Calendar as CalendarIcon } from '../Icon'
6
+ import { Popover } from '../Popover'
7
+ import { ru } from 'date-fns/locale'
2
8
 
3
- import * as React from "react"
9
+ const trigegrClasses = 'inline-flex items-center border-input border h-[44px] rounded-sm px-[16px]'
4
10
 
5
- import { format } from "date-fns"
6
-
7
- import { cn } from "../@/lib/utils"
8
- import { Button } from "../Button"
9
- import { Calendar } from "../Calendar"
10
- import {
11
- Popover,
12
- } from "../Popover"
11
+ interface IProps {
12
+ placeholder?: string,
13
+ date: Date,
14
+ classTrigger?: string,
15
+ triggerDisabled: boolean,
16
+ }
13
17
 
14
- export function DatePickerDemo() {
15
- const [date, setDate] = React.useState<Date>()
18
+ const DatePicker: React.FC<IProps> = ({placeholder, triggerDisabled, date, classTrigger, ...props}) => {
16
19
 
17
- return (
18
- <Popover>
19
- <Popover.Trigger asChild>
20
- <Button
21
- variant={"outline"}
22
- className={cn(
23
- "w-[240px] justify-start text-left font-normal",
24
- !date && "text-muted-foreground"
25
- )}
26
- >
27
- {/* <CalendarIcon className="mr-2 w-4 h-4" /> */}
28
- {date ? format(date, "PPP") : <span>Pick a date</span>}
29
- </Button>
30
- </Popover.Trigger>
31
- <Popover.Content className="p-0 w-auto" align="start">
32
- <Calendar
33
- mode="single"
34
- // selected={date}
35
- // onSelect={setDate}
36
- // initialFocus
37
- />
38
- </Popover.Content>
39
- </Popover>
40
- )
20
+ return (
21
+ <Popover>
22
+ <Popover.Trigger asChild>
23
+ <button className={cn(trigegrClasses, {'bg-light text-light':triggerDisabled}, classTrigger)} disabled={triggerDisabled}>
24
+ {date ? <span className='truncate'>{format(date ,'PPP', {locale: ru})}</span> : <span className='text-light truncate'>{placeholder}</span>}
25
+ <CalendarIcon width={18} height={18} className="ml-[8px] text-light shrink-0" />
26
+ </button>
27
+ </Popover.Trigger>
28
+ <Popover.Content
29
+ className="p-0 w-auto"
30
+ align="center"
31
+ >
32
+ <Calendar {...props}/>
33
+ </Popover.Content>
34
+ </Popover>
35
+ )
41
36
  }
37
+
38
+ export { DatePicker }
package/src/Datepicker/index.ts CHANGED
@@ -1 +1 @@
1
- export { Datepicker } from './Datepicker'
1
+ export { DatePicker } from './DatePicker'
package/src/Select/Select.tsx ADDED
File without changes